summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/ui
diff options
context:
space:
mode:
authorys9693 <ys9693@att.com>2020-01-19 13:50:02 +0200
committerOfir Sonsino <ofir.sonsino@intl.att.com>2020-01-22 12:33:31 +0000
commit16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch)
tree03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/ng2/components/ui
parentaa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff)
Catalog alignment
Issue-ID: SDC-2724 Signed-off-by: ys9693 <ys9693@att.com> Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui')
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html28
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less62
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts35
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html26
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less134
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts110
-rw-r--r--catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts145
-rw-r--r--catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts131
-rw-r--r--catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts10
-rw-r--r--catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html23
-rw-r--r--catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less48
-rw-r--r--catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts45
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts16
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts31
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html31
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts8
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html28
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts25
-rw-r--r--catalog-ui/src/app/ng2/components/ui/loader/loader.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts7
-rw-r--r--catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts11
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html20
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less5
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts71
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts16
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html25
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less37
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts88
-rw-r--r--catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html11
-rw-r--r--catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less55
-rw-r--r--catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts25
-rw-r--r--catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts51
-rw-r--r--catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html8
-rw-r--r--catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts140
-rw-r--r--catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html12
-rw-r--r--catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less25
-rw-r--r--catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts69
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html24
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less10
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less12
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts (renamed from catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts)6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/tile.component.html43
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/tile.component.less15
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts34
-rw-r--r--catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts157
60 files changed, 936 insertions, 1034 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html
deleted file mode 100644
index 50a93fac3c..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
- ~
- ~ 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 class="sdc-canvas-zone {{class}}-zone" [class.minimized]="minimized" [class.hidden]="!visible" (click)="backgroundClicked()">
- <div class="sdc-canvas-zone__header" (click)="unminifyZone(); $event.stopPropagation();" >
- <div class="sdc-canvas-zone__title">{{title}}
- <span class="sdc-canvas-zone__counter">{{count}}</span>
- </div>
- <span class="sdc-canvas-zone__state-button">&ndash;</span>
- </div>
- <div class="sdc-canvas-zone__container" #scrollDiv >
- <ng-content></ng-content>
- </div>
-</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less
deleted file mode 100644
index 02880a9202..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less
+++ /dev/null
@@ -1,62 +0,0 @@
-.sdc-canvas-zone {
- width: 285px;
- max-height:186px;
- display:flex;
- flex-direction:column;
- align-self: flex-end;
- color:white;
- font-family:OpenSans-Regular, sans-serif;
- transition: width .2s ease-in-out, max-height .2s ease-in-out .1s;
- position:relative;
- bottom:0px;
-
- .sdc-canvas-zone__header {
- background: #5A5A5A;
- border-radius: 2px 2px 0 0;
- padding: 5px 10px;
- display:flex;
- justify-content: space-between;
- font-size: 14px;
- text-transform:uppercase;
- .sdc-canvas-zone__state-button {
- font-weight:bold;
- cursor:pointer;
- }
- }
-
- .sdc-canvas-zone__container {
- padding:5px;
- background-color: #5A5A5A;
- opacity:0.9;
- flex: 1;
- display:flex;
- flex-direction: row;
- align-items: flex-start;
- flex-wrap:wrap;
- overflow-y:auto;
- min-height: 80px;
- max-height: 170px;
- }
-
-
- &.minimized {
- max-height:30px;
- width:120px;
- cursor:pointer;
-
- .sdc-canvas-zone__state-button {
- display:none;
- }
- .sdc-canvas-zone__container {
- flex: 0 0 0;
- min-height: 0;
- padding: 0;
- overflow-y:hidden;
- transition: min-height .2s ease-in-out .2s;
- transition: padding .1s ease-in-out 0s;
- }
- }
- &.hidden {
- display:none;
- }
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
deleted file mode 100644
index 4059ad6cae..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Component, Input, Output, ViewEncapsulation, EventEmitter, OnInit } from '@angular/core';
-import { ZoneInstanceType } from '../../../../models/graph/zones/zone-instance';
-
-@Component({
- selector: 'zone-container',
- templateUrl: './zone-container.component.html',
- styleUrls: ['./zone-container.component.less'],
- encapsulation: ViewEncapsulation.None
-})
-
-export class ZoneContainerComponent implements OnInit {
- @Input() title:string;
- @Input() type:ZoneInstanceType;
- @Input() count:number;
- @Input() visible:boolean;
- @Input() minimized:boolean;
- @Output() minimize: EventEmitter<any> = new EventEmitter<any>();
- @Output() backgroundClick: EventEmitter<void> = new EventEmitter<void>();
- private class:string;
-
- constructor() {}
-
- ngOnInit() {
- this.class = ZoneInstanceType[this.type].toLowerCase();
- }
-
- private unminifyZone = () => {
- this.minimize.emit();
- }
-
- private backgroundClicked = () => {
- this.backgroundClick.emit();
- }
-
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html
deleted file mode 100644
index 728764c427..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
- * 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 tooltip="{{zoneInstance.instanceData.name}}" #currentComponent
- class="zone-instance mode-{{zoneInstance.mode}}" [class.locked]="activeInstanceMode > MODE.HOVER" [class.hiding]="hidden"
- (mouseenter)="setMode(MODE.HOVER)" (mouseleave)="setMode(MODE.NONE)" (click)="setMode(MODE.SELECTED, $event)">
- <div *ngIf="zoneInstance.handle" class="target-handle {{zoneInstance.handle}}" (click)="tagHandleClicked($event)"></div>
- <div *ngIf="!isViewOnly" class="zone-instance__handle" (click)="setMode(MODE.TAG, $event)">+</div>
- <div class="zone-instance__body">
- <div class="zone-instance__body-content">{{zoneInstance.assignments.length || defaultIconText}}</div>
- </div>
- <div class="zone-instance__name">{{zoneInstance.instanceData.name}}</div>
-</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
deleted file mode 100644
index b562c08514..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
+++ /dev/null
@@ -1,134 +0,0 @@
-@import '../../../../../../assets/styles/variables';
-
-.zone-instance {
- position:relative;
- width:76px;
- margin:5px;
- opacity:1;
-
- .zone-instance__handle {
- display:none;
- position:absolute;
- right:4px;
- top:10px;
- width:22px;
- height:22px;
- cursor:pointer;
- border: solid @main_color_p 1px;
- border-radius: 2px;
- text-align: center;
- font-weight:bold;
- }
-
- .zone-instance__body {
- margin:0 auto;
- width:43px;
- height:43px;
- display:flex;
- padding:3px;
- }
-
- .zone-instance__body-content {
- border-radius: 2px;
- flex:1;
- color:@main_color_p;
- font-size:16px;
- text-align:center;
- display:flex;
- align-items: center;
- justify-content: center;
- box-shadow:none;
- transition:box-shadow 5s;
- }
-
- .zone-instance__name {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- text-align:center;
- }
- /* Dynamic classes below */
-
- .target-handle {
- position:absolute;
- width:18px;
- height:18px;
- display:block;
- top: -4px;
- right: 10px;
- background-size: 100% 100%;
- cursor: url("../../../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
-
- &.tagged-policy {
- background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/policy_added.svg');
- }
-
- &.tag-available {
- background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/indication.svg');
- }
- }
-
-
- &.mode-1, &.mode-2, &.mode-3 { //hover, selected, tag
- .zone-instance__body {
- border:solid 2px;
- border-radius: 2px;
- padding:2px;
- cursor:pointer;
- }
- }
-
- &.mode-1, &.mode-2:hover{
- .zone-instance__handle{
- display:block;
- }
- }
-
- &.locked {
- cursor: inherit;
- }
-
- &.hiding {
- opacity:0;
- .zone-instance__body-content {
- box-shadow: #CCC 0px 0px 15px;
- }
- }
-
-
- &.mode-3 .zone-instance__handle {
- width:24px;
- height:24px;
- right:3px;
- top:9px;
- display:block;
- background-image: linear-gradient(-140deg, #009E98 0%, #97D648 100%);
- border: 2px solid @main_color_p;
- border-radius: 2px;
- box-shadow: inset 2px -2px 3px 0 #007A3E;
- }
-
-}
-.sdc-canvas-zone.group-zone {
- .zone-instance__handle {
- background-color:@main_color_a;
- }
- .zone-instance__body {
- border-color:@main_color_a;
- .zone-instance__body-content {
- background: @main_color_a;
- }
- }
-}
-
-.sdc-canvas-zone.policy-zone {
- .zone-instance__handle {
- background-color:@main_color_r;
- }
- .zone-instance__body {
- border-color:@main_color_r;
- .zone-instance__body-content {
- background: @main_color_r;
- }
- }
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts
deleted file mode 100644
index 3c2dd45db5..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, SimpleChange, ElementRef, ViewChild, SimpleChanges } from '@angular/core';
-import {
- ZoneInstance, ZoneInstanceMode, ZoneInstanceType,
- IZoneInstanceAssignment
-} from 'app/models/graph/zones/zone-instance';
-import { PoliciesService } from '../../../../services/policies.service';
-import { GroupsService } from '../../../../services/groups.service';
-import { IZoneService } from "../../../../../models/graph/zones/zone";
-import { EventListenerService } from 'app/services';
-import { GRAPH_EVENTS } from '../../../../../utils';
-import { Subject, Observable } from 'rxjs';
-
-@Component({
- selector: 'zone-instance',
- templateUrl: './zone-instance.component.html',
- styleUrls: ['./zone-instance.component.less'],
- encapsulation: ViewEncapsulation.None
-})
-export class ZoneInstanceComponent implements OnInit {
-
- @Input() zoneInstance:ZoneInstance;
- @Input() defaultIconText:string;
- @Input() isActive:boolean;
- @Input() isViewOnly:boolean;
- @Input() activeInstanceMode: ZoneInstanceMode;
- @Input() hidden:boolean;
- @Input() forceSave:Subject<Function>;
- @Output() modeChange: EventEmitter<any> = new EventEmitter<any>();
- @Output() assignmentSaveStart: EventEmitter<void> = new EventEmitter<void>();
- @Output() assignmentSaveComplete: EventEmitter<boolean> = new EventEmitter<boolean>();
- @Output() tagHandleClick: EventEmitter<ZoneInstance> = new EventEmitter<ZoneInstance>();
- @ViewChild('currentComponent') currentComponent: ElementRef;
- private MODE = ZoneInstanceMode;
- private zoneService:IZoneService;
-
- constructor(private policiesService:PoliciesService, private groupsService:GroupsService, private eventListenerService:EventListenerService){}
-
- ngOnInit(){
- if(this.zoneInstance.type == ZoneInstanceType.POLICY){
- this.zoneService = this.policiesService;
- } else {
- this.zoneService = this.groupsService;
- }
- this.forceSave.subscribe((afterSaveFunction:Function) => {
- this.setMode(ZoneInstanceMode.TAG, null, afterSaveFunction);
- })
- }
-
- ngOnChanges(changes:SimpleChanges) {
- if(changes.hidden){
- this.currentComponent.nativeElement.scrollIntoView({behavior: "smooth", block: "nearest", inline:"end"});
- }
- }
-
- ngOnDestroy() {
- this.forceSave.unsubscribe();
- }
-
- private setMode = (mode:ZoneInstanceMode, event?:any, afterSaveCallback?:Function):void => {
-
- if(event){ //prevent event from handle and then repeat event from zone instance
- event.stopPropagation();
- }
-
- if(!this.isActive && this.activeInstanceMode === ZoneInstanceMode.TAG) {
- return; //someone else is tagging. No events allowed
- }
-
- if(this.isActive && this.zoneInstance.mode === ZoneInstanceMode.TAG){
- if(mode !== ZoneInstanceMode.TAG) {
- return; //ignore all other events. The only valid option is saving changes.
- }
-
- let oldAssignments:Array<IZoneInstanceAssignment> = this.zoneInstance.instanceData.getSavedAssignments();
- if(this.zoneInstance.isZoneAssignmentChanged(oldAssignments, this.zoneInstance.assignments)) {
-
- this.assignmentSaveStart.emit();
-
- this.zoneService.updateZoneInstanceAssignments(this.zoneInstance.parentComponentType, this.zoneInstance.parentComponentID, this.zoneInstance.instanceData.uniqueId, this.zoneInstance.assignments).subscribe(
- (success) => {
- this.zoneInstance.instanceData.setSavedAssignments(this.zoneInstance.assignments);
- if(this.zoneInstance.type === ZoneInstanceType.POLICY){
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, this.zoneInstance.instanceData);
- } else {
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.zoneInstance.instanceData);
- }
- this.assignmentSaveComplete.emit(true);
- if(afterSaveCallback) afterSaveCallback();
- }, (error) => {
- this.zoneInstance.assignments = oldAssignments;
- this.assignmentSaveComplete.emit(false);
- });
- } else {
- if(afterSaveCallback) afterSaveCallback();
- }
- this.modeChange.emit({newMode: ZoneInstanceMode.NONE, instance: this.zoneInstance});
-
- } else {
- this.modeChange.emit({newMode: mode, instance: this.zoneInstance});
- }
-
-
- }
-
- private tagHandleClicked = (event:Event) => {
- this.tagHandleClick.emit(this.zoneInstance);
- event.stopPropagation();
- };
-
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts b/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts
new file mode 100644
index 0000000000..8f47456a8f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts
@@ -0,0 +1,145 @@
+import { Component, Input } from "@angular/core";
+import {IFileDownload, Component as TopologyTemplate, ArtifactModel, FullComponentInstance} from "app/models";
+import {EventListenerService} from "app/services";
+import {CacheService} from "app/services-ng2";
+import {EVENTS} from "app/utils";
+import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
+import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
+
+@Component({
+ selector: 'download-artifact',
+ template: `
+ <svg-icon [mode]="'primary2'" [disabled]="disabled" [clickable]="!disabled" [name]="iconType" [testId]="testId" mode="info" clickable="true" size="medium" (click)="download($event)"></svg-icon>
+`
+})
+export class DownloadArtifactComponent {
+
+ @Input() showLoader:boolean;
+ @Input() artifact:ArtifactModel;
+ @Input() isInstance: boolean;
+ @Input() downloadIconClass: string;
+ @Input() componentType: string;
+ @Input() componentId: string;
+ @Input() testId: string;
+ @Input() disabled: boolean;
+
+ public iconType:string;
+
+ private DOWNLOAD_CSS_CLASSES = {
+ DOWNLOAD_ICON: "download-o",
+ LOADER_ICON: "spinner"
+ }
+ constructor(private cacheService:CacheService, private EventListenerService:EventListenerService, private topologyTemplateService:TopologyTemplateService,
+ private componentInstanceService: ComponentInstanceServiceNg2, private workspaceService:WorkspaceService) {
+
+ }
+
+ ngOnInit () {
+ this.iconType = this.DOWNLOAD_CSS_CLASSES.DOWNLOAD_ICON;
+ this.initDownloadLoader();
+
+ }
+
+ private initDownloadLoader = ()=> {
+ //if the artifact is in a middle of download progress register form callBack & change icon from download to loader
+ if (this.showLoader && this.cacheService.get(this.artifact.uniqueId)) {
+ this.EventListenerService.registerObserverCallback(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + this.artifact.uniqueId, this.updateDownloadIcon);
+ window.setTimeout(():void => {
+ if (this.cacheService.get(this.artifact.uniqueId)) {
+ this.iconType = this.DOWNLOAD_CSS_CLASSES.LOADER_ICON;
+ }
+ }, 1000);
+ }
+ };
+
+ private updateDownloadIcon = () => {
+ this.iconType = this.downloadIconClass || this.DOWNLOAD_CSS_CLASSES.DOWNLOAD_ICON;
+ };
+
+ public download = (event) => {
+ event.stopPropagation();
+ let onFaild = (response):void => {
+ console.info('onFaild', response);
+ this.removeDownloadedFileLoader();
+ };
+
+ let onSuccess = (data:IFileDownload):void => {
+ this.downloadFile(data);
+ this.removeDownloadedFileLoader();
+ };
+
+ this.setDownloadedFileLoader();
+
+ if (this.isInstance) {
+ this.componentInstanceService.downloadInstanceArtifact(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFaild);
+ } else {
+ this.topologyTemplateService.downloadArtifact(this.componentType, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFaild);
+ }
+ };
+
+ private setDownloadedFileLoader = ()=> {
+ if (this.showLoader) {
+ //set in cache service thet the artifact is in download progress
+ this.cacheService.set(this.artifact.uniqueId, true);
+ this.initDownloadLoader();
+ }
+ };
+
+ private removeDownloadedFileLoader = ()=> {
+ if (this.showLoader) {
+ this.cacheService.set(this.artifact.uniqueId, false);
+ this.EventListenerService.notifyObservers(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + this.artifact.uniqueId);
+ }
+ };
+
+ private downloadFile = (file:IFileDownload):void => {
+ if (file) {
+ let blob = this.base64toBlob(file.base64Contents, '');
+ let fileName = file.artifactName;
+ this.triggerFileDownload(blob, fileName);
+ }
+ };
+
+ public base64toBlob = (base64Data, contentType):any => {
+ let byteCharacters = atob(base64Data);
+ return this.byteCharactersToBlob(byteCharacters, contentType);
+ };
+
+ public byteCharactersToBlob = (byteCharacters, contentType):any => {
+ contentType = contentType || '';
+ let sliceSize = 1024;
+ let bytesLength = byteCharacters.length;
+ let slicesCount = Math.ceil(bytesLength / sliceSize);
+ let byteArrays = new Array(slicesCount);
+
+ for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+ let begin = sliceIndex * sliceSize;
+ let end = Math.min(begin + sliceSize, bytesLength);
+
+ let bytes = new Array(end - begin);
+ for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
+ bytes[i] = byteCharacters[offset].charCodeAt(0);
+ }
+ byteArrays[sliceIndex] = new Uint8Array(bytes);
+ }
+ return new Blob(byteArrays, {type: contentType});
+ };
+
+ public triggerFileDownload = (blob, fileName):void=> {
+ let url = window.URL.createObjectURL(blob);
+ let downloadLink = document.createElement("a");
+
+ downloadLink.setAttribute('href', url);
+ downloadLink.setAttribute('download', fileName);
+ document.body.appendChild(downloadLink);
+
+ var clickEvent = new MouseEvent("click", {
+ "view": window,
+ "bubbles": true,
+ "cancelable": true
+ });
+ downloadLink.dispatchEvent(clickEvent);
+
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
index 049d40831a..5e3214d888 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
@@ -37,11 +37,13 @@ enum DynamicElementComponentCreatorIdentifier {
BOOLEAN,
SUBNETPOOLID,
ENUM,
+ LIST,
DEFAULT
}
@Component({
selector: 'dynamic-element',
+ // Span - if constraints not empty
template: `<div #target></div>`,
styleUrls: ['./dynamic-element.component.less'],
entryComponents: [
@@ -61,6 +63,7 @@ export class DynamicElementComponent {
@Input() readonly:boolean;
@Input() constraints: Array<any>;
@Input() path:string;//optional param. used only for for subnetpoolid type
+ @Input() declared:boolean;
@Input() value: any;
@Output() valueChange: EventEmitter<any> = new EventEmitter<any>();
@@ -72,16 +75,19 @@ export class DynamicElementComponent {
validation = ValidationConfiguration.validation;
constructor(
+
private componentFactoryResolver: ComponentFactoryResolver,
private compiler: Compiler,
private el: ElementRef) {
+
+
}
updateComponent() {
if (!this.isViewInitialized) {
return;
}
-
+
// Factory to create component based on type or other property attributes.
const prevElementCreatorIdentifier: DynamicElementComponentCreatorIdentifier = this.elementCreatorIdentifier;
switch(true) {
@@ -112,7 +118,7 @@ export class DynamicElementComponent {
}
// In case the dynamic element creator is changed, then destroy old and build new.
- if (this.elementCreatorIdentifier !== prevElementCreatorIdentifier) {
+ if (this.declared || this.elementCreatorIdentifier !== prevElementCreatorIdentifier) {
if (this.cmpRef) {
this.cmpRef.destroy();
}
@@ -149,64 +155,81 @@ export class DynamicElementComponent {
}
createComponentByIdentifier() {
- switch(this.elementCreatorIdentifier) {
- case DynamicElementComponentCreatorIdentifier.SUBNETPOOLID:
- if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
- let pathArray = this.path.split("#");
- this.name = pathArray[pathArray.length - 2];
- }
- this.createComponent(UiElementPopoverInputComponent);
- break;
+ // if(!this.constraints || this.declared){
+ switch(this.elementCreatorIdentifier) {
+ case DynamicElementComponentCreatorIdentifier.SUBNETPOOLID:
+ if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
+ let pathArray = this.path.split("#");
+ this.name = pathArray[pathArray.length - 2];
+ }
+ this.createComponent(UiElementPopoverInputComponent);
+ break;
+ case DynamicElementComponentCreatorIdentifier.ENUM:
+ this.createComponent(UiElementDropDownComponent);
+ let validVals:Array<DropdownValue> = [...this.getValidValues()].map(val => new DropdownValue(val, val));
+ if (this.type === 'float' || this.type === 'integer') {
+ this.value = this.value && Number(this.value);
+ validVals = _.map(
+ validVals,
+ (val) => new DropdownValue(Number(val.value), val.value)
+ );
+ }
+ this.cmpRef.instance.values = validVals;
+ break;
+ case DynamicElementComponentCreatorIdentifier.INTEGER:
+ this.createComponent(UiElementIntegerInputComponent);
+ this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
+ break;
- case DynamicElementComponentCreatorIdentifier.ENUM:
- this.createComponent(UiElementDropDownComponent);
- let validVals:Array<DropdownValue> = [...this.getValidValues()].map(val => new DropdownValue(val, val));
- if (this.type === 'float' || this.type === 'integer') {
- this.value = this.value && Number(this.value);
- validVals = _.map(
- validVals,
- val => new DropdownValue(Number(val.value), val.value)
- );
- }
- this.cmpRef.instance.values = validVals;
- break;
+ case DynamicElementComponentCreatorIdentifier.FLOAT:
+ this.createComponent(UiElementIntegerInputComponent);
+ this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/.source;
+ break;
- case DynamicElementComponentCreatorIdentifier.INTEGER:
- this.createComponent(UiElementIntegerInputComponent);
- this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
- break;
+ case DynamicElementComponentCreatorIdentifier.STRING:
+ this.createComponent(UiElementInputComponent);
+ break;
- case DynamicElementComponentCreatorIdentifier.FLOAT:
- this.createComponent(UiElementIntegerInputComponent);
- this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/.source;
- break;
+ case DynamicElementComponentCreatorIdentifier.BOOLEAN:
+ this.createComponent(UiElementDropDownComponent);
- case DynamicElementComponentCreatorIdentifier.STRING:
- this.createComponent(UiElementInputComponent);
- break;
-
- case DynamicElementComponentCreatorIdentifier.BOOLEAN:
- this.createComponent(UiElementDropDownComponent);
-
- // Build drop down values
- let tmp = [];
- tmp.push(new DropdownValue(true,'TRUE'));
- tmp.push(new DropdownValue(false,'FALSE'));
- this.cmpRef.instance.values = tmp;
- try {
- if (typeof this.value === 'string') {
- this.value = JSON.parse(this.value);
+ // Build drop down values
+ let tmp = [];
+ tmp.push(new DropdownValue(true,'TRUE'));
+ tmp.push(new DropdownValue(false,'FALSE'));
+ this.cmpRef.instance.values = tmp;
+ try {
+ if(typeof this.value === 'string'){
+ this.value = JSON.parse(this.value);
+ }
+ } catch (err) {
+ this.value = null;
}
- } catch(err) {
- this.value = null;
- }
- break;
+ break;
- case DynamicElementComponentCreatorIdentifier.DEFAULT:
- default:
- this.createComponent(UiElementInputComponent);
- console.log("ERROR: No ui-models component to handle type: " + this.type);
- }
+ case DynamicElementComponentCreatorIdentifier.DEFAULT:
+ default:
+ this.createComponent(UiElementInputComponent);
+ console.log("ERROR: No ui-models component to handle type: " + this.type);
+ }
+ // }
+ // //There are consraints
+ // else {
+
+ // this.createComponent(UiElementDropDownComponent);
+
+ // // Build drop down values
+ // let items = [];
+ // this.constraints.forEach( (element) => {
+ // items.push(new DropdownValue(element,element));
+ // });
+
+ // items.push(new DropdownValue(this.value,this.value, true, true));
+ // this.cmpRef.instance.values = items;
+
+
+
+ // }
// Subscribe to change event of of ui-models-element-basic and fire event to change the value
this.cmpRef.instance.baseEmitter.subscribe((event) => { this.emitter.emit(event); });
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
index 50b22505a9..dc12551e8f 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
@@ -23,6 +23,12 @@ import {PopoverModule} from "../popover/popover.module";
import {TooltipModule} from "../tooltip/tooltip.module";
import {DynamicElementComponent} from "./dynamic-element.component";
import {FormElementsModule} from "../form-components/form-elements.module";
+// import {SdcUiComponentsModule} from "sdc-ui/lib/angular";
+// import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+// import {SdcUiComponentsModule} from "onap-ui/lib/angular";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+
+import { CommonModule } from '@angular/common';
@NgModule({
declarations: [
@@ -31,7 +37,9 @@ import {FormElementsModule} from "../form-components/form-elements.module";
imports: [
PopoverModule,
TooltipModule,
- FormElementsModule
+ FormElementsModule,
+ SdcUiComponentsModule,
+ CommonModule
],
exports: [
DynamicElementComponent
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
index fde7bca6d2..9b678b2790 100644
--- a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
@@ -14,16 +14,15 @@
~ limitations under the License.
-->
-<h1 class="w-sdc-designer-sidebar-section-title"
- tooltip="{{titleTooltip}}"
- [ngClass]="{'expanded': state == 0, 'collapsed': state == 1}"
- (click)="toggleState()">
- {{caption}}<span class="w-sdc-designer-sidebar-section-title-icon"></span>
- <ng-content select="header"></ng-content>
- <span class="w-sdc-designer-sidebar-section-title-icon"></span>
-</h1>
+<div class="expand-collapse-container">
+ <h1 class="expand-collapse-title" [ngClass]="{'expanded': state == 0, 'collapsed': state == 1}"
+ tooltip="{{titleTooltip}}" (click)="toggleState()">{{caption}}
+ <ng-content select="header"></ng-content>
+ <svg-icon name="caret1-down-o" mode="info" size="small" class="expand-collapse-title-icon"></svg-icon>
+ </h1>
-<div class="expand-collapse-content" [ngClass]="{'visible': state === 0, 'hidden': state === 1}">
- <ng-content></ng-content>
- <ng-content select="content"></ng-content>
-</div>
+ <div class="expand-collapse-content" [ngClass]="{'expanded': state === 0, 'collapsed': state === 1}">
+ <ng-content></ng-content>
+ <ng-content select="content"></ng-content>
+ </div>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
index e5dd2527c1..deda687a09 100644
--- a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
@@ -5,3 +5,51 @@
text-decoration: underline;
text-align: left;
}
+
+
+.expand-collapse-title {
+ display:flex;
+ align-items: center;
+ cursor: pointer;
+ font-size: 14px;
+ text-transform: uppercase;
+ line-height: 32px;
+ padding: 0 10px 0 20px;
+
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ header {
+ flex: 1;
+ }
+
+ .expand-collapse-title-icon {
+ padding-top: 10px;
+ padding-left: 2px;
+ transition: transform .3s ease-out;
+
+ }
+
+ &.expanded .expand-collapse-title-icon {
+ transform: rotate(0);
+ }
+
+ &.collapsed .expand-collapse-title-icon {
+ transform: rotate(-180deg);
+ }
+
+}
+
+.expand-collapse-content {
+ overflow: hidden;
+ transition: max-height .3s ease-in;
+
+ &.collapsed {
+ max-height: 0px;
+ overflow:hidden;
+ transition: all .3s cubic-bezier(0, 1, 0, 1);
+
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html
new file mode 100644
index 0000000000..14fc6eefc7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html
@@ -0,0 +1,6 @@
+<label>
+ <input type="file" class="i-sdc-dashboard-item-upload-input"
+ (change)="onFileSelect($event)"
+ [accept]="extensionsWithDot"
+ [attr.data-tests-id]="'file-' + testsId" />
+</label>
diff --git a/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less
diff --git a/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts
new file mode 100644
index 0000000000..1d1d4cef0d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts
@@ -0,0 +1,45 @@
+import {Component, Input, Output, EventEmitter, SimpleChanges} from "@angular/core";
+
+@Component({
+ selector: 'file-opener',
+ templateUrl: './file-opener.component.html',
+ styleUrls: ['./file-opener.component.less']
+})
+export class FileOpenerComponent {
+ @Input() public testsId: string;
+ @Input() public extensions: string;
+ @Output() public onFileUpload: EventEmitter<any>;
+
+ public extensionsWithDot: string;
+
+ constructor() {
+ this.onFileUpload = new EventEmitter<any>();
+ }
+
+ public ngOnChanges(changes:SimpleChanges) {
+ if (changes.extensions) {
+ this.extensionsWithDot = this.getExtensionsWithDot(changes.extensions.currentValue);
+ }
+ }
+
+ public onFileSelect(event) {
+ const importFile:any = event.target.files[0];
+ const reader = new FileReader();
+ reader.readAsBinaryString(importFile);
+ reader.onload = () => {
+ this.onFileUpload.emit({
+ filename: importFile.name,
+ filetype: importFile.type,
+ filesize: importFile.size,
+ base64: btoa(reader.result)
+ });
+ };
+ }
+
+ public getExtensionsWithDot(extensions:string):string {
+ extensions = extensions || this.extensions || '';
+ return extensions.split(',')
+ .map(ext => '.' + ext.toString())
+ .join(',');
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
index c8da016174..c7b0af6ecf 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
@@ -19,7 +19,7 @@
*/
import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-//import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+//import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
@Component({
selector: 'checkbox',
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
index 45fd77ee61..9dca01eb61 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
@@ -15,5 +15,5 @@
-->
<select name='{{name}}' [(ngModel)]="value" (change)="onChange()" [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'value-' + testId">
- <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue">{{ddvalue.label||ddvalue}}</option>
+ <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue" [hidden]="ddvalue.hidden" [selected] = "ddvalue.selected">{{ddvalue.label||ddvalue}}</option>
</select>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
index 03a1fc6040..6db233529b 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
@@ -24,11 +24,21 @@ import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.comp
export class DropdownValue {
value:any;
label:string;
+ hidden?: boolean;
+ selected?: boolean;
- constructor(value:any,label:string) {
+
+ constructor(value:any,label:string, hidden: boolean = false, selected: boolean = false) {
this.value = value;
this.label = label;
+ this.hidden = hidden;
+ this.selected = selected;
+
+ // this.hidden = hidden ? true : "hidden": "";
+ // this.selected = selected ? true : "selected": "";
}
+
+
}
@Component({
@@ -37,8 +47,8 @@ export class DropdownValue {
styleUrls: ['./ui-element-dropdown.component.less'],
})
export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface {
- @Input()
- values: DropdownValue[]|string[];
+
+ @Input() values: DropdownValue[];
constructor() {
super();
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
index e5bdf1f557..b35d3ae3f4 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
@@ -1,19 +1,19 @@
/**
* Created by rc2122 on 9/5/2017.
*/
-import {NgModule} from "@angular/core";
-import {BrowserModule} from "@angular/platform-browser";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {UiElementPopoverInputComponent} from "./popover-input/ui-element-popover-input.component";
-import {UiElementIntegerInputComponent} from "./integer-input/ui-element-integer-input.component";
-import {UiElementInputComponent} from "./input/ui-element-input.component";
-import {UiElementDropDownComponent} from "./dropdown/ui-element-dropdown.component";
-import {UiElementBase} from "./ui-element-base.component";
-import {CheckboxModule} from "./checkbox/checkbox.module";
-import {RadioButtonComponent} from "./radio-buttons/radio-buttons.component";
-import {PopoverModule} from "../popover/popover.module";
-import {TooltipModule} from "../tooltip/tooltip.module";
-
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { SdcUiComponentsModule } from 'onap-ui-angular/dist';
+import { PopoverModule } from '../popover/popover.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
+import { CheckboxModule } from './checkbox/checkbox.module';
+import { UiElementDropDownComponent } from './dropdown/ui-element-dropdown.component';
+import { UiElementInputComponent } from './input/ui-element-input.component';
+import { UiElementIntegerInputComponent } from './integer-input/ui-element-integer-input.component';
+import { UiElementPopoverInputComponent } from './popover-input/ui-element-popover-input.component';
+import { RadioButtonComponent } from './radio-buttons/radio-buttons.component';
+import { UiElementBase } from './ui-element-base.component';
@NgModule({
imports: [
@@ -22,7 +22,8 @@ import {TooltipModule} from "../tooltip/tooltip.module";
PopoverModule,
ReactiveFormsModule,
TooltipModule,
- CheckboxModule],
+ CheckboxModule,
+ SdcUiComponentsModule],
declarations: [UiElementDropDownComponent,
UiElementInputComponent,
@@ -39,4 +40,4 @@ import {TooltipModule} from "../tooltip/tooltip.module";
TooltipModule,
CheckboxModule]
})
-export class FormElementsModule { } \ No newline at end of file
+export class FormElementsModule { }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
index 85089f12b8..f9cf17f087 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
@@ -13,19 +13,18 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
-
-<input
- class="value-input"
- [ngClass]="{'error': control.invalid, 'disabled':readonly}"
- type="text"
- [name]="name"
- [(ngModel)]="value"
- (input)="onChange()"
- [attr.maxlength]="validation.propertyValue.max"
- [attr.minlength]="validation.propertyValue.min"
- [pattern]="pattern"
- [formControl]="control"
- tooltip="{{value}}"
- [readonly]="readonly"
- [attr.data-tests-id]="'value-' + testId"
- />
+<div sdc-tooltip [tooltip-text]="value">
+ <input
+ class="value-input"
+ [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+ type="text"
+ [name]="name"
+ [(ngModel)]="value"
+ (input)="onChange()"
+ [attr.maxlength]="validation.propertyValue.max"
+ [attr.minlength]="validation.propertyValue.min"
+ [pattern]="pattern"
+ [formControl]="control"
+ [attr.data-tests-id]="'value-' + testId"
+ />
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
index 34404e50a5..b401778bc2 100644
--- a/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
@@ -1,15 +1,11 @@
import { NgModule } from "@angular/core";
import { CommonModule } from '@angular/common';
-import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
-import { ValueEditComponent } from './value-edit/value-edit.component';
+import { SdcUiComponentsModule } from "onap-ui-angular";
import { UnsavedChangesComponent } from "./unsaved-changes/unsaved-changes.component";
import { UiElementsModule } from "../ui-elements.module";
-
-
@NgModule({
declarations: [
- ValueEditComponent,
UnsavedChangesComponent
],
imports: [
@@ -17,7 +13,7 @@ import { UiElementsModule } from "../ui-elements.module";
SdcUiComponentsModule,
UiElementsModule
],
- exports: [ValueEditComponent, UnsavedChangesComponent],
+ exports: [UnsavedChangesComponent],
entryComponents: [ UnsavedChangesComponent
],
providers: []
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
deleted file mode 100644
index 75ee2d520f..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
- ~
- ~ 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 class="name-update-container">
- <sdc-input #updateNameInput
- label="Instance Name"
- required="true"
- [maxLength]="50"
- [(value)]="name"
- testId="instanceName"></sdc-input>
- <sdc-validation [validateElement]="updateNameInput" (validityChanged)="validityChanged($event)">
- <sdc-required-validator message="Name is required."></sdc-required-validator>
- <sdc-regex-validator message="Special characters not allowed." [pattern]="pattern"></sdc-regex-validator>
- </sdc-validation>
-</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
deleted file mode 100644
index b958ca17b7..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.name-update-container {
- min-height: 90px;
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
deleted file mode 100644
index 08bc0586c7..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-@Component({
- selector: 'value-edit',
- templateUrl: './value-edit.component.html',
- styleUrls: ['./value-edit.component.less']
-})
-export class ValueEditComponent {
-
- @Input() name:String;
- @Input() validityChangedCallback: Function;
-
- private pattern:string = "^[\\s\\w\&_.:-]{1,1024}$"
- constructor(){
- }
-
- private validityChanged = (value):void => {
- if(this.validityChangedCallback) {
- this.validityChangedCallback(value);
- }
- }
-
-
-
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
index bfb9e1b1ae..00083050d8 100644
--- a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
@@ -14,7 +14,7 @@
~ limitations under the License.
-->
-<div *ngIf="isVisible" data-tests-id="tlv-loader" [ngClass]="relative ? 'loader-relative' : 'loader-fixed'"
+<div *ngIf="isVisible" data-tests-id="loader" [ngClass]="relative ? 'loader-relative' : 'loader-fixed'"
[style.top]="offset.top" [style.left]="offset.left" [style.width]="offset.width" [style.height]="offset.height">
<div class="tlv-loader-back" [ngClass]="{'tlv-loader-relative':relative}"></div>
<div class="tlv-loader {{size}}"></div>
diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
index 585c36660e..9658e6b65c 100644
--- a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
@@ -79,6 +79,13 @@ export class LoaderComponent {
width: (parentElement.offsetWidth !== undefined) ? parentElement.offsetWidth + "px" : undefined,
height: (parentElement.offsetHeight !== undefined) ? parentElement.offsetHeight + "px" : undefined
};
+ } else {
+ this.offset = {
+ left: '0px',
+ top: '0px',
+ width: '100%',
+ height: '100%'
+ }
}
this.isVisible = true;
}
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
index 3820573e58..8b2006634e 100644
--- a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
@@ -1,5 +1,9 @@
/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
* Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
* 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
@@ -11,9 +15,9 @@
* 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.
+ * ============LICENSE_END=========================================================
*/
-
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
index 939599f0bc..290c8d06af 100644
--- a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
@@ -1,5 +1,9 @@
/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
* Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
* 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
@@ -11,9 +15,9 @@
* 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.
+ * ============LICENSE_END=========================================================
*/
-
import { Component, Input, ContentChildren, SimpleChanges, QueryList } from '@angular/core';
import { MenuItemComponent } from "./menu-item.component";
import { Point } from "app/models";
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
index 1d05b27d68..ab367529d8 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
@@ -1,9 +1,9 @@
/**
* Created by ob0695 on 11.04.2018.
*/
-import {Component, Input} from "@angular/core";
-import {UiBaseObject} from "../../../../../models/ui-models/ui-base-object";
-import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
+import { Component, Input } from "@angular/core";
+import { UiBaseObject } from "../../../../../models/ui-models/ui-base-object";
+import { IDropDownOption } from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models";
@Component({
selector: 'add-elements',
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
index a1c34f5686..70ad0a389c 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
@@ -1,14 +1,11 @@
/**
* Created by ob0695 on 11.04.2018.
*/
-import {NgModule} from "@angular/core";
-import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
-import {AddElementsComponent} from "./add-elements.component";
-import {CommonModule} from "@angular/common";
+import { NgModule } from "@angular/core";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+import { AddElementsComponent } from "./add-elements.component";
+import { CommonModule } from "@angular/common";
-/**
- * Created by ob0695 on 9.04.2018.
- */
@NgModule({
declarations: [
AddElementsComponent
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
index 777e9bdc06..2432c3bb37 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
@@ -36,7 +36,7 @@ export class ModalComponent implements OnInit, OnDestroy {
@Input() isMovable: boolean;
@Input() input: ModalModel;
@Input() dynamicContent: any;
- @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example.
+ @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpHelperService's catchError() for example.
private modalElement: JQuery;
constructor( el: ElementRef ) {
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
index 9219a30738..1986e34914 100644
--- a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
@@ -20,10 +20,8 @@
* limitations under the License.
* ============LICENSE_END=========================================================
*/
-import {
- Component, ElementRef, forwardRef, Inject, Input, trigger, state, style,
- transition, animate, ViewChild, ViewContainerRef, ComponentRef
-} from "@angular/core";
+import { Component, ElementRef, forwardRef, Inject, Input, ViewChild, ViewContainerRef, ComponentRef} from "@angular/core";
+import {trigger, state, style, transition, animate} from '@angular/animations';
import {StepModel} from "app/models";
import {ModalService} from "../../../services/modal.service";
import {ModalComponent} from "../modal/modal.component";
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
index 3db217d282..81a90b8a9b 100644
--- a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
@@ -4,7 +4,7 @@
import { NgModule } from "@angular/core";
import {MultiStepsWizardComponent} from "./multi-steps-wizard.component";
import {CommonModule} from "@angular/common";
-import {ConnectionWizardModule} from "../../../pages/connection-wizard/connection-wizard.module";
+import {ConnectionWizardModule} from "app/ng2/pages/composition/graph/connection-wizard/connection-wizard.module";
@NgModule({
declarations: [
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html
deleted file mode 100644
index efd619687c..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
- ~
- ~ 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 class="palette-animation-wrapper" [style.top]="from.y + 50 + 'px'" [style.left]="from.x + 'px'" [style.transform]="transformStyle" [class.hidden]="!visible"
- (transitionend)="animationComplete()">
-<div class="medium small sprite-resource-icons sprite-{{iconName}}-icons {{iconName}}" ></div>
-</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less
deleted file mode 100644
index 54f04189c0..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.palette-animation-wrapper{
- position: absolute;
- z-index: 100;
- transition: all 2s ease-in-out;
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
deleted file mode 100644
index 7e45b9e55b..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import {Component, Input } from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
-import { setTimeout } from 'core-js/library/web/timers';
-import { EventListenerService } from 'app/services';
-import { GRAPH_EVENTS } from 'app/utils';
-import { Point } from 'app/models';
-import { ZoneInstanceType, ZoneInstance } from '../../../../models/graph/zones/zone-instance';
-
-
-
-@Component({
- selector: 'palette-animation',
- templateUrl: './palette-animation.component.html',
- styleUrls:['./palette-animation.component.less'],
-})
-
-export class PaletteAnimationComponent {
-
- @Input() from : Point;
- @Input() to : Point;
- @Input() type: ZoneInstanceType;
- @Input() iconName : string;
- @Input() zoneInstance : ZoneInstance;
-
- public animation;
- private visible:boolean = false;
- private transformStyle:string = "";
-
-
- constructor(private eventListenerService:EventListenerService) {}
-
-
- ngOnDestroy(){
- this.zoneInstance.hidden = false; //if animation component is destroyed before animation is complete
- }
-
- public runAnimation() {
- this.visible = true;
- let positionDiff:Point = new Point(this.to.x - this.from.x, this.to.y - this.from.y);
- setTimeout(()=>{
- this.transformStyle = 'translate('+ positionDiff.x + 'px,' + positionDiff.y +'px)';
- }, 0);
- };
-
- public animationComplete = (e) => {
- this.visible = false;
- this.zoneInstance.hidden = false;
- };
-
-
-}
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts
deleted file mode 100644
index 8674571138..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { PaletteAnimationComponent } from "./palette-animation.component";
-
-
-@NgModule({
- declarations: [
- PaletteAnimationComponent
- ],
- imports: [ CommonModule ],
- exports: [ PaletteAnimationComponent ]
-})
-
-export class PaletteAnimationModule {
-
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html
deleted file mode 100644
index 11261e95b4..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
- ~
- ~ 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 class="popup-panel" [ngClass]="{'hide':!isShowPanel}" [style.left]="popupPanelPosition.x + 'px'" [style.top]="popupPanelPosition.y + 'px'"
- (mousedown)="addZoneInstance()"
- (mouseenter)="onMouseEnter()"
- (mouseleave)="onMouseLeave()">
- <div class="popup-panel-group">
- <div class="popup-panel-plus">+</div>
- <div class="popup-panel-title">{{panelTitle}}</div>
- </div>
-</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less
deleted file mode 100644
index 24f0485e76..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less
+++ /dev/null
@@ -1,37 +0,0 @@
-.popup-panel {
- position: absolute;
- display: inline-block;
- background-color: white;
- border: solid 1px #d2d2d2;
- border-top: solid 3px #13a7df;
- left: 208px; top: 0px;
- width: 140px;
- height: 40px;
- z-index: 10000;
-
- &:hover {
- background-color: whitesmoke;
- }
-
- .popup-panel-group {
- padding-left: 8px;
- padding-top: 8px;
- cursor: pointer;
-
- .popup-panel-plus {
- border-radius: 50%;
- color: white;
- background-color: #13a7df;
- width: 20px;
- text-align: center;
- display: inline-block;
- }
-
- .popup-panel-title {
- padding-left: 10px;
- display: inline-block;
- }
-
- }
-
-}
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
deleted file mode 100644
index a10ca7dc81..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {GRAPH_EVENTS} from "app/utils";
-import {LeftPaletteComponent, Point} from "app/models";
-import {EventListenerService} from "app/services";
-import {LeftPaletteMetadataTypes} from "../../../../models/components/displayComponent";
-
-@Component({
- selector: 'app-palette-popup-panel',
- templateUrl: './palette-popup-panel.component.html',
- styleUrls: [ './palette-popup-panel.component.less' ],
-})
-export class PalettePopupPanelComponent implements OnInit {
-
- public panelTitle: string;
- public isShowPanel: boolean;
- private component: Component;
- private displayComponent: LeftPaletteComponent;
- private popupPanelPosition:Point = new Point(0,0);
-
- constructor(private eventListenerService: EventListenerService) {
- this.isShowPanel = false;
- }
-
- ngOnInit() {
- this.registerObserverCallbacks();
- }
-
- public onMouseEnter() {
- this.isShowPanel = true;
- }
-
- public onMouseLeave() {
- this.isShowPanel = false;
- }
-
- public addZoneInstance(): void {
- if(this.displayComponent) {
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, this.component, this.displayComponent, this.popupPanelPosition);
- this.hidePopupPanel();
- }
- }
-
- private registerObserverCallbacks() {
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL,
- (component: Component, displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
-
- this.component = component;
- this.showPopupPanel(displayComponent, sectionElem);
- });
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL, () => this.hidePopupPanel());
- }
-
- private getPopupPanelPosition (sectionElem: HTMLElement):Point {
- let pos: ClientRect = sectionElem.getBoundingClientRect();
- let offsetX: number = -30;
- const offsetY: number = pos.height / 2;
- return new Point((pos.right + offsetX), (pos.top - offsetY + window.pageYOffset));
- };
-
- private setPopupPanelTitle(component: LeftPaletteComponent): void {
- if (component.categoryType === LeftPaletteMetadataTypes.Group) {
- this.panelTitle = "Add Group";
- return;
- }
-
- if (component.categoryType === LeftPaletteMetadataTypes.Policy) {
- this.panelTitle = "Add Policy";
- return;
- }
- }
-
- private showPopupPanel(displayComponent:LeftPaletteComponent, sectionElem: HTMLElement) {
- if(!this.isShowPanel){
- this.displayComponent = displayComponent;
- this.setPopupPanelTitle(displayComponent);
- this.popupPanelPosition = this.getPopupPanelPosition(sectionElem);
- this.isShowPanel = true;
- }
- };
-
- private hidePopupPanel() {
- if(this.isShowPanel){
- this.isShowPanel = false;
- }
- };
-}
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html
new file mode 100644
index 0000000000..277702e336
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html
@@ -0,0 +1,11 @@
+<div class="w-sdc-designer-sidebar-toggle" [class.active]="(withSidebar$ | async)" (click)="toggleSidebarDisplay()">
+ <div class="w-sdc-designer-sidebar-toggle-icon sprite-new pointer menu-open-left"></div>
+</div>
+
+<div class="w-sdc-designer-sidebar">
+ <ng-content></ng-content>
+</div>
+
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less
new file mode 100644
index 0000000000..cacb85d6b1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less
@@ -0,0 +1,55 @@
+@import '../../../../../assets/styles/variables';
+
+.w-sdc-designer-sidebar {
+ background-color:@main_color_p ;
+ font-family: @font-opensans-regular;
+ font-size: 13px;
+ color: #191919;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ bottom: 0;
+ position: fixed;
+ right: -302px;
+ width: 302px;
+ top: 103px;
+ transition: right 0.2s;
+ z-index: 1010;
+ box-shadow: -7px -3px 6px -8px @main_color_n;
+}
+
+.w-sdc-designer-sidebar-toggle {
+ background-color: @main_color_p;
+ border-left: 1px solid @main_color_o;
+ border-bottom: 1px solid @main_color_o;
+ height: 21px;
+ position: absolute;
+ right: 0;
+ top: 53px;
+ width: 17px;
+ transition: right 0.2s;
+ z-index: 1005;
+ box-shadow: -1px 1px 3px 0 @main_color_n;
+ cursor: pointer;
+
+ &.active {
+ right: 302px;
+ .w-sdc-designer-sidebar-toggle-icon{
+ transform: rotate(180deg);
+ }
+ }
+}
+
+.w-sdc-designer-sidebar-toggle-icon {
+ margin-left: 6px;
+ margin-top: 6px;
+}
+
+.w-sdc-designer-sidebar-toggle.active + .w-sdc-designer-sidebar {
+ right: 0;
+ display: flex;
+ flex-direction: column;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts
new file mode 100644
index 0000000000..e9c4a7d354
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts
@@ -0,0 +1,25 @@
+import {Component} from "@angular/core";
+import {Select, Store} from "@ngxs/store";
+import {Subscription} from "rxjs/Subscription";
+import {GraphState} from "../../../pages/composition/common/store/graph.state";
+import {OnSidebarOpenOrCloseAction} from "../../../pages/composition/common/store/graph.actions";
+
+@Component({
+ selector: 'panel-wrapper-component',
+ templateUrl: './panel-wrapper.component.html',
+ styleUrls: ['./panel-wrapper.component.less']
+})
+export class PanelWrapperComponent {
+ @Select(GraphState.withSidebar) withSidebar$: boolean;
+
+ tabs: Array<any>;
+ subscription: Subscription;
+
+ constructor(public store: Store) {
+ }
+
+ private toggleSidebarDisplay = () => {
+ // this.withSidebar = !this.withSidebar;
+ this.store.dispatch(new OnSidebarOpenOrCloseAction());
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts b/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts
new file mode 100644
index 0000000000..ccc1e2181e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts
@@ -0,0 +1,51 @@
+import {Directive, Input, ElementRef} from '@angular/core';
+import * as PerfectScrollbar from 'perfect-scrollbar';
+
+interface IPerfectScrollbarOptions {
+ wheelSpeed?: number;
+ wheelPropagation?: boolean;
+ minScrollbarLength?: number;
+ useBothWheelAxes?: boolean;
+ useKeyboard?: boolean;
+ suppressScrollX?: boolean;
+ suppressScrollY?: boolean;
+ scrollXMarginOffset?: number;
+ scrollYMarginOffset?: number;
+ includePadding?: boolean;
+}
+
+@Directive({
+ selector: '[perfectScrollbar]'
+})
+export class PerfectScrollbarDirective {
+ @Input() public perfectScrollbarOptions: IPerfectScrollbarOptions;
+
+ private psOptions: IPerfectScrollbarOptions;
+ private updatingPS: boolean;
+
+ constructor(public elemRef:ElementRef) {
+ console.log('PSbar: Constructor');
+ this.psOptions = Object.assign({}, this.perfectScrollbarOptions);
+ this.updatingPS = false;
+ }
+
+ public ngOnInit() {
+ console.log('PSbar: Initializing');
+ PerfectScrollbar.initialize(this.elemRef.nativeElement, this.psOptions);
+ }
+
+ public ngAfterContentChecked() {
+ // update perfect-scrollbar after content is checked (updated) - bounced
+ if (!this.updatingPS) {
+ this.updatingPS = true;
+ setTimeout(() => {
+ this.updatingPS = false;
+ PerfectScrollbar.update(this.elemRef.nativeElement);
+ }, 100);
+ }
+ }
+
+ public ngOnDestroy() {
+ PerfectScrollbar.destroy(this.elemRef.nativeElement);
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
index cce1c40765..5294c67e31 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
@@ -17,6 +17,7 @@
<div class="plugin-frame">
<div class="w-sdc-main-container">
<iframe *ngIf="plugin.isOnline" class="plugin-iframe" [src]="pluginUrl | safeUrlSanitizer"></iframe>
- <plugin-not-connected [pluginName]="plugin.pluginId" *ngIf="!plugin.isOnline && isPluginCheckDone"></plugin-not-connected>
+ <plugin-not-connected [pluginName]="plugin.pluginId"
+ *ngIf="!plugin.isOnline && isPluginCheckDone"></plugin-not-connected>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
index d70c448984..d94f24da28 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
@@ -38,8 +38,7 @@ export class PluginFrameComponent implements OnInit {
} else {
this.onLoadingDone.emit();
}
- })
-
+ });
}
private initPlugin() {
diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
index 88906d96fa..9a280e169d 100644
--- a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
@@ -19,7 +19,7 @@
[style.left]="left + 'px'"
[class.in]="isIn"
[class.fade]="animation"
- style="display: block"
+ [style.display] = "displayType"
role="popover"
[ngClass]="{'hide-arrow':hideArrow}">
<div [hidden]="!closeOnMouseOutside" class="virtual-area"></div>
@@ -29,13 +29,11 @@
<span class="close-button" (click)="popover.hide()"></span>
</div>
<ng-content></ng-content>
- <div class="popover-footer">
+ <div class="popover-footer" *ngIf="buttons">
<button *ngFor="let buttonName of buttonsNames"
- class="tlv-btn {{buttons[buttonName].cssClass}}"
+ class="tlv-btn {{buttons[buttonName].cssClass}}"
[attr.data-tests-id]="'filter-' + buttons[buttonName].text.toLowerCase() + '-button'"
[disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
(click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
</div>
</div>
-
-
diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
index 6eb36287d0..bea592d2a6 100644
--- a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
@@ -7,9 +7,9 @@
* 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.
@@ -18,25 +18,25 @@
* ============LICENSE_END=========================================================
*/
-import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core";
-import {ButtonsModelMap} from "app/models";
-import {PopoverComponent} from "./popover.component";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, Output, Renderer, ViewChild } from '@angular/core';
+import { ButtonsModelMap } from 'app/models';
+import { PopoverComponent } from './popover.component';
@Component({
- selector: "popover-content",
- templateUrl:'./popover-content.component.html',
- styleUrls:['popover-content.component.less']
+ selector: 'popover-content',
+ templateUrl: './popover-content.component.html',
+ styleUrls: ['popover-content.component.less']
})
export class PopoverContentComponent implements AfterViewInit, OnDestroy {
@Input() public title: string;
- @Input() public buttons:ButtonsModelMap;
+ @Input() public buttons: ButtonsModelMap;
@Input()
content: string;
@Input()
- placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom";
+ placement: 'top'|'bottom'|'left'|'right'|'auto'|'auto top'|'auto bottom'|'auto left'|'auto right' = 'bottom';
@Input()
animation: boolean = true;
@@ -50,52 +50,56 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
@Input()
hideArrow: boolean = false;
- @ViewChild("popoverDiv")
+ @ViewChild('popoverDiv')
popoverDiv: ElementRef;
- buttonsNames:Array<string>;
+ buttonsNames: string[];
popover: PopoverComponent;
onCloseFromOutside = new EventEmitter();
- top: number = -10000;
- left: number = -10000;
+ top: number = 250;
+ left: number = 300;
isIn: boolean = false;
- displayType: string = "none";
+ displayType: string = 'none';
effectivePlacement: string;
- onDocumentMouseDown = (event: any) => {
- const element = this.element.nativeElement;
- if (!element || !this.popover) return;
- if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return;
- this.hide();
- this.onCloseFromOutside.emit(undefined);
- };
-
+ listenClickFunc: any;
+ listenMouseFunc: any;
constructor(protected element: ElementRef,
protected cdr: ChangeDetectorRef,
protected renderer: Renderer) {
}
- listenClickFunc: any;
- listenMouseFunc: any;
+ onDocumentMouseDown = (event: any) => {
+ const element = this.element.nativeElement;
+ if (!element || !this.popover) { return; }
+ if (element.contains(event.target) || this.popover.getElement().contains(event.target)) { return; }
+ this.hide();
+ this.onCloseFromOutside.emit(undefined);
+ }
ngAfterViewInit(): void {
- this.buttonsNames = Object.keys(this.buttons);
- if (this.closeOnClickOutside)
- this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event));
- if (this.closeOnMouseOutside)
- this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event));
+ if ( this.buttons ) {
+ this.buttonsNames = Object.keys(this.buttons);
+ }
+ if (this.closeOnClickOutside) {
+ this.listenClickFunc = this.renderer.listenGlobal('document', 'mousedown', (event: any) => this.onDocumentMouseDown(event));
+ }
+ if (this.closeOnMouseOutside) {
+ this.listenMouseFunc = this.renderer.listenGlobal('document', 'mouseover', (event: any) => this.onDocumentMouseDown(event));
+ }
- this.show();
this.cdr.detectChanges();
}
ngOnDestroy() {
- if (this.closeOnClickOutside)
+ if (this.closeOnClickOutside) {
this.listenClickFunc();
- if (this.closeOnMouseOutside)
+ }
+ if (this.closeOnMouseOutside) {
this.listenMouseFunc();
+ }
}
// -------------------------------------------------------------------------
@@ -103,11 +107,12 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
// -------------------------------------------------------------------------
show(): void {
- if (!this.popover || !this.popover.getElement())
+ if (!this.popover || !this.popover.getElement()) {
return;
+ }
const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement);
- this.displayType = "block";
+ this.displayType = 'block';
this.top = p.top;
this.left = p.left;
this.isIn = true;
@@ -121,8 +126,7 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
}
hideFromPopover() {
- this.top = -10000;
- this.left = -10000;
+ this.displayType = 'none';
this.isIn = true;
}
@@ -131,56 +135,56 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
// -------------------------------------------------------------------------
protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } {
- let positionStrParts = positionStr.split("-");
+ const positionStrParts = positionStr.split('-');
let pos0 = positionStrParts[0];
- let pos1 = positionStrParts[1] || "center";
- let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
- let targetElWidth = targetEl.offsetWidth;
- let targetElHeight = targetEl.offsetHeight;
+ const pos1 = positionStrParts[1] || 'center';
+ const hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
+ const targetElWidth = targetEl.offsetWidth;
+ const targetElHeight = targetEl.offsetHeight;
this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl);
- let shiftWidth: any = {
- center: function (): number {
+ const shiftWidth: any = {
+ center(): number {
return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
},
- left: function (): number {
+ left(): number {
return hostElPos.left;
},
- right: function (): number {
+ right(): number {
return hostElPos.left + hostElPos.width - targetElWidth;
}
};
- let shiftHeight: any = {
- center: function (): number {
+ const shiftHeight: any = {
+ center(): number {
return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2;
},
- top: function (): number {
+ top(): number {
return hostElPos.top;
},
- bottom: function (): number {
+ bottom(): number {
return hostElPos.top + hostElPos.height - targetElHeight;
}
};
let targetElPos: { top: number, left: number };
switch (pos0) {
- case "right":
+ case 'right':
targetElPos = {
top: shiftHeight[pos1](),
left: hostElPos.left + hostElPos.width
};
break;
- case "left":
+ case 'left':
targetElPos = {
top: shiftHeight[pos1](),
left: hostElPos.left - targetElWidth
};
break;
- case "bottom":
+ case 'bottom':
targetElPos = {
top: hostElPos.top + hostElPos.height,
left: shiftWidth[pos1]()
@@ -228,18 +232,20 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
}
protected getStyle(nativeEl: HTMLElement, cssProp: string): string {
- if ((nativeEl as any).currentStyle) // IE
+ if ((nativeEl as any).currentStyle) { // IE
return (nativeEl as any).currentStyle[cssProp];
+ }
- if (window.getComputedStyle)
+ if (window.getComputedStyle) {
return (window.getComputedStyle as any)(nativeEl)[cssProp];
+ }
// finally try and get inline style
return (nativeEl.style as any)[cssProp];
}
protected isStaticPositioned(nativeEl: HTMLElement): boolean {
- return (this.getStyle(nativeEl, "position") || "static" ) === "static";
+ return (this.getStyle(nativeEl, 'position') || 'static' ) === 'static';
}
protected parentOffsetEl(nativeEl: HTMLElement): any {
@@ -251,26 +257,26 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
}
protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string {
- const placementParts = placement.split(" ");
- if (placementParts[0] !== "auto") {
+ const placementParts = placement.split(' ');
+ if (placementParts[0] !== 'auto') {
return placement;
}
const hostElBoundingRect = hostElement.getBoundingClientRect();
- const desiredPlacement = placementParts[1] || "bottom";
+ const desiredPlacement = placementParts[1] || 'bottom';
- if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
- return "bottom";
+ if (desiredPlacement === 'top' && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
+ return 'bottom';
}
- if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
- return "top";
+ if (desiredPlacement === 'bottom' && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
+ return 'top';
}
- if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
- return "right";
+ if (desiredPlacement === 'left' && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
+ return 'right';
}
- if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
- return "left";
+ if (desiredPlacement === 'right' && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
+ return 'left';
}
return desiredPlacement;
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html
new file mode 100644
index 0000000000..fba99ca8b5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html
@@ -0,0 +1,12 @@
+<div class="sdc-element-icon">
+ <svg-icon [ngClass]="{'service-proxy': elementType === 'ServiceProxy'}"
+ [type]="elementIcon.type"
+ [name]="elementIcon.iconName"
+ [mode]="elementIcon.color"
+ [size]="elementIcon.size"
+ [backgroundShape]="elementIcon.shape"
+ [backgroundColor]="elementIcon.backgroundColor"></svg-icon>
+ <span *ngIf="uncertified" class="uncertified-icon-wapper">
+ <svg-icon class="element-non-certified" [name]="'alert-circle'" [mode]="'error'"></svg-icon>
+ </span>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less
new file mode 100644
index 0000000000..7fd5cbd53e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less
@@ -0,0 +1,25 @@
+@import "./../../../../../assets/styles/override";
+.service-proxy {
+ /deep/.svg-icon.bg-type-circle {
+ border: 2px solid @sdcui_color_blue;
+ }
+}
+
+.element-non-certified {
+ position: absolute;
+ top: 0.4px;
+ left: 0.4px;
+}
+.sdc-element-icon {
+ position: relative;
+}
+
+.uncertified-icon-wapper{
+ height: 17px;
+ width: 17px;
+ background-color: white;
+ border-radius: 50%;
+ position: absolute;
+ top: -2px;
+ left: -1px;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts
new file mode 100644
index 0000000000..baadbd8e02
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts
@@ -0,0 +1,69 @@
+import {Component, Input, OnInit} from "@angular/core";
+import {ComponentType, SdcElementType, ResourceType} from "../../../../utils/constants";
+
+
+export class ElementIcon {
+ iconName: string;
+ color: string;
+ backgroundColor: string;
+ type: string
+ shape: string;
+ size: string;
+
+ constructor(name?: string, type?:string, backgroundColor?:string, color?:string, shape?: string, size?:string) {
+ this.iconName = name || 'default';
+ this.type = type || 'resource_24';
+ this.backgroundColor = backgroundColor || 'primary';
+ this.color = color || "white";
+ this.shape = shape || "circle";
+ this.size = size || "x_large";
+ }
+}
+
+@Component({
+ selector: 'sdc-element-icon',
+ templateUrl: './sdc-element-icon.component.html',
+ styleUrls: ['./sdc-element-icon.component.less']
+})
+export class SdcElementIconComponent {
+
+ @Input() iconName: string;
+ @Input() elementType: string;
+ @Input() uncertified: boolean = false;
+
+ public elementIcon;
+
+ private createIconForDisplay = () => {
+ switch (this.elementType) {
+
+ case ComponentType.SERVICE:
+ this.elementIcon = new ElementIcon(this.iconName, "services_24", "lightBlue");
+ break;
+ case ComponentType.SERVICE_PROXY:
+ this.elementIcon = new ElementIcon(this.iconName, "services_24", "white", "primary");
+ break;
+ case ResourceType.CONFIGURATION:
+ this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", "white", 'circle', "medium");
+ break;
+ case SdcElementType.GROUP:
+ this.elementIcon = new ElementIcon("group", "resources_24", "blue", 'white', 'rectangle');
+ break;
+ case SdcElementType.POLICY:
+ this.elementIcon = new ElementIcon("policy", "resources_24", "darkBlue2", 'white', 'rectangle');
+ break;
+ case ResourceType.CP:
+ case ResourceType.VL:
+ this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", '', '', 'medium');
+ break;
+ default:
+ this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple");
+ }
+ }
+
+ ngOnChanges():void {
+ this.createIconForDisplay();
+ }
+}
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
index 8682473d14..1f952c46f5 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
@@ -1,21 +1,5 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
- ~
- ~ 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 class="search-bar-container {{class}}">
- <input class="search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
- <span class="clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
- <button class="search-bar-button" (click)="searchButtonClick()"></button>
+<div class="sdc-search-bar-container {{class}}">
+ <input class="sdc-search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
+ <span class="sdc-clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
+ <button class="sdc-search-bar-button" (click)="searchButtonClick()"></button>
</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
index 751fceec35..c09951a284 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
@@ -1,9 +1,9 @@
-.search-bar-container {
+.sdc-search-bar-container {
display:flex;
border-radius: 4px;
box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
- .search-bar-input {
+ .sdc-search-bar-input {
border: 1px solid #cdcdcd;
border-radius: 4px;
border-right:none;
@@ -14,9 +14,11 @@
color: #5a5a5a;
font-size: 1em;
font-style: italic;
+
+
}
- .clear-search-x {
+ .sdc-clear-search-x {
position:absolute;
right:40px;
top:5px;
@@ -29,7 +31,7 @@
}
}
- .search-bar-button {
+ .sdc-search-bar-button {
background: url('../../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px;
background-color: rgba(234, 234, 234, 0.88);
width: 30px;
diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
index 82dbbf33d3..da9b2c9e24 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
@@ -14,9 +14,9 @@
~ limitations under the License.
-->
-<div class="search-with-autocomplete-container {{searchBarClass}}" [class.autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length">
+<div class="sdc-search-with-autocomplete-container {{searchBarClass}}" [class.sdc-autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length">
<search-bar [placeholder]="searchPlaceholder" [searchQuery]="searchQuery" (searchButtonClicked)="updateSearch($event)" (searchChanged)="searchChange($event)"></search-bar>
- <div class="autocomplete-results">
- <div *ngFor="let item of autoCompleteValues" class="autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div>
+ <div class="sdc-autocomplete-results">
+ <div *ngFor="let item of autoCompleteValues" class="sdc-autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div>
</div>
</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
index f1830846d3..9cd312adcb 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
@@ -1,13 +1,13 @@
-.search-with-autocomplete-container{
- &.autocomplete-visible {
+.sdc-search-with-autocomplete-container{
+ &.sdc-autocomplete-visible {
- .search-bar-input {
+ .sdc-search-bar-input {
border-bottom-left-radius: 0;
}
- .search-bar-button {
+ .sdc-search-bar-button {
border-bottom-right-radius: 0;
}
- .autocomplete-results {
+ .sdc-autocomplete-results {
border: solid 1px #d2d2d2;
border-top:none;
border-bottom-left-radius: 4px;
@@ -20,7 +20,7 @@
overflow-y: scroll;
}
- .autocomplete-result-item {
+ .sdc-autocomplete-result-item {
color:#5a5a5a;
padding: 5px 0;
cursor:pointer;
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
index f4b410347b..cabac121f7 100644
--- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
@@ -21,7 +21,7 @@
import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core';
import { Tab } from './tab/tab.component';
import { ViewEncapsulation } from '@angular/core';
-import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
export {Tab};
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts b/catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts
index 55b34400d6..5dec67e495 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts
@@ -3,13 +3,13 @@ import { BrowserModule } from '@angular/platform-browser';
import { TileComponent } from './tile.component';
import { GlobalPipesModule } from "../../../pipes/global-pipes.module";
import { TooltipModule } from "../tooltip/tooltip.module";
-import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multiline-ellipsis.module";
+import {SdcUiComponentsModule} from "onap-ui-angular";
@NgModule({
- imports: [BrowserModule, GlobalPipesModule, TooltipModule, MultilineEllipsisModule],
+ imports: [BrowserModule, GlobalPipesModule, SdcUiComponentsModule, TooltipModule],
declarations: [TileComponent],
exports: [TileComponent],
entryComponents: [TileComponent]
})
-export class TileModule { }
+export class SdcTileModule { }
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
index 018384db1f..239053e9f8 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
@@ -23,15 +23,21 @@
<div class='sdc-tile-content' data-tests-id="dashboard-Elements" (click)="tileClicked()">
<div class='sdc-tile-content-icon'>
- <div [ngClass]="[component.iconSprite, component.icon]" [ngClass]="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
+ <div [ngClass]="[component.iconSprite, component.icon]"
+ [ngClass]="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
[attr.data-tests-id]="component.name"></div>
</div>
<div class='sdc-tile-content-info'>
- <div class="sdc-tile-info-line title" [attr.data-tests-id]="component.name | resourceName" [tooltip]="component.name | resourceName" [tooltipDisabled]="!hasEllipsis">
- <multiline-ellipsis className="w-sdc-tile-multiline-ellipsis" [lines]="3" (hasEllipsisChanged)="hasEllipsis = $event">{{component.name | resourceName}}</multiline-ellipsis>
+ <div class="sdc-tile-info-line title" [attr.data-tests-id]="component.name | resourceName"
+ [tooltip]="component.name | resourceName" [tooltipDisabled]="!hasEllipsis">
+ <multiline-ellipsis className="w-sdc-tile-multiline-ellipsis" [lines]="3"
+ (hasEllipsisChanged)="hasEllipsis = $event">{{component.name | resourceName}}
+ </multiline-ellipsis>
+ </div>
+ <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V
+ {{component.version}}
</div>
- <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V {{component.version}}</div>
</div>
</div>
@@ -42,3 +48,32 @@
</div>
</div>
+
+<!--<sdc-tile>-->
+<!--<sdc-tile-header>-->
+<!--<div [ngClass]="{'blue': component.isService(), 'purple': component.isResource()}">{{component.isResource() ?-->
+<!--component.getComponentSubType(): 'S' }}-->
+<!--</div>-->
+<!--</sdc-tile-header>-->
+<!--<sdc-tile-content>-->
+<!--<div class='sdc-tile-content-icon blue'>-->
+<!--<svg-icon-->
+<!--[type]="catalogIcon.type"-->
+<!--[name]="catalogIcon.iconName"-->
+<!--[size]="catalogIcon.size"-->
+<!--[mode]="catalogIcon.color"-->
+<!--[backgroundShape]="catalogIcon.shape"-->
+<!--[backgroundColor]="catalogIcon.backgroundColor"-->
+<!--[disabled]="false"-->
+<!--&gt;-->
+<!--</svg-icon>-->
+<!--</div>-->
+<!--<div class="sdc-tile-content-info">-->
+<!--<span class="sdc-tile-info-line title">{{component.name | resourceName}}</span>-->
+<!--<div class="sdc-tile-info-line subtitle">{{'V'+ component.version}}</div>-->
+<!--</div>-->
+<!--</sdc-tile-content>-->
+<!--<sdc-tile-footer>-->
+<!--<span class="sdc-tile-footer-cell">{{component.getStatus(sdcMenu)}}</span>-->
+<!--</sdc-tile-footer>-->
+<!--</sdc-tile>--> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
index e69de29bb2..febf46e99c 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
@@ -0,0 +1,15 @@
+
+
+//This was done as a fix for the wrong dispaly that was in every ui-tile.
+//All other styles located in mail.less
+
+.sdc-tile {
+ display: block;
+
+ .sdc-tile-content {
+ overflow: visible;
+ height: 80%;
+ .sdc-tile-content-icon {
+ }
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
index b6f63584be..f5d9e88934 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
@@ -1,6 +1,8 @@
import {Component, Input, Output, Inject, EventEmitter} from '@angular/core';
import {Component as ComponentModel} from 'app/models';
import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
+import {ElementIcon} from "../sdc-element-icon/sdc-element-icon.component";
+import {ComponentType, ResourceType, SdcElementType} from "../../../../utils/constants";
@Component({
selector: 'ui-tile',
@@ -10,14 +12,42 @@ import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
export class TileComponent {
@Input() public component: ComponentModel;
@Output() public onTileClick: EventEmitter<ComponentModel>;
-
+ public catalogIcon: ElementIcon;
public hasEllipsis: boolean;
- constructor(@Inject(SdcMenuToken) public sdcMenu:IAppMenu) {
+ constructor(@Inject(SdcMenuToken) public sdcMenu: IAppMenu) {
this.onTileClick = new EventEmitter<ComponentModel>();
this.hasEllipsis = false;
}
+ ngOnInit(): void {
+ switch (this.component.componentType) {
+
+ case ComponentType.SERVICE:
+ if (this.component.icon === 'defaulticon') {
+ this.catalogIcon = new ElementIcon(this.component.icon, "services_60", 'lightBlue', 'white');
+ } else {
+ this.catalogIcon = new ElementIcon(this.component.icon, "services_60", '', 'lightBlue');
+ }
+ break;
+ case ComponentType.RESOURCE:
+ switch (this.component.getComponentSubType()) {
+ case ResourceType.CP:
+ case ResourceType.VL:
+ this.catalogIcon = new ElementIcon(this.component.icon, "resources_24", "purple", "white", "circle", 'medium');
+ break;
+ default:
+ if (this.component.icon === 'defaulticon') {
+ this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", "purple", "white", "circle", 'x_large');
+ } else {
+ this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", '', "error");
+ }
+
+ }
+
+ }
+ }
+
public tileClicked() {
this.onTileClick.emit(this.component);
}
diff --git a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
index e905db73a6..cdb173cb12 100644
--- a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
@@ -18,82 +18,89 @@
* ============LICENSE_END=========================================================
*/
-import { NgModule } from '@angular/core';
-import { NavbarModule } from "./navbar/navbar.module";
-import { DynamicElementModule } from "./dynamic-element/dynamic-element.module";
-import { FormElementsModule } from "./form-components/form-elements.module";
-import { LoaderComponent } from "./loader/loader.component";
-import { ModalModule } from "./modal/modal.module";
-import { PopoverModule } from "./popover/popover.module";
-import { SearchBarComponent } from "./search-bar/search-bar.component";
-import { SearchWithAutoCompleteComponent } from "./search-with-autocomplete/search-with-autocomplete.component";
-import { PalettePopupPanelComponent } from "./palette-popup-panel/palette-popup-panel.component";
-import { ZoneContainerComponent } from "./canvas-zone/zone-container.component";
-import { ZoneInstanceComponent } from "./canvas-zone/zone-instance/zone-instance.component";
-import { PaletteAnimationComponent } from "./palette-animation/palette-animation.component"
-import { TabModule } from "./tabs/tabs.module";
-import { TooltipModule } from "./tooltip/tooltip.module";
-import { CommonModule } from "@angular/common";
-import { FormsModule } from "@angular/forms";
-import { BrowserModule } from "@angular/platform-browser";
-import { MultiStepsWizardModule } from "./multi-steps-wizard/multi-steps-wizard.module";
-import { MenuListModule } from "./menu/menu-list.module";
-import { MenuListNg2Module } from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module";
-import { ExpandCollapseComponent } from './expand-collapse/expand-collapse.component';
-import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
-import { TileModule } from "./tile/tile.module";
+import {NgModule} from '@angular/core';
+import {NavbarModule} from "./navbar/navbar.module";
+import {DynamicElementModule} from "./dynamic-element/dynamic-element.module";
+import {FormElementsModule} from "./form-components/form-elements.module";
+import {LoaderComponent} from "./loader/loader.component";
+import {ModalModule} from "./modal/modal.module";
+import {PopoverModule} from "./popover/popover.module";
+import {SearchBarComponent} from "./search-bar/search-bar.component";
+import {SearchWithAutoCompleteComponent} from "./search-with-autocomplete/search-with-autocomplete.component";
+import { PaletteAnimationComponent } from "app/ng2/pages/composition/palette/palette-animation/palette-animation.component";
+import {TabModule} from "./tabs/tabs.module";
+import {TooltipModule} from "./tooltip/tooltip.module";
+import {CommonModule} from "@angular/common";
+import {FormsModule} from "@angular/forms";
+import {BrowserModule} from "@angular/platform-browser";
+import {MultiStepsWizardModule} from "./multi-steps-wizard/multi-steps-wizard.module";
+import {MenuListModule} from "./menu/menu-list.module";
+import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module";
+import {ExpandCollapseComponent} from './expand-collapse/expand-collapse.component';
+import {SdcUiComponentsModule} from "onap-ui-angular";
+import {SdcTileModule} from "./tile/sdc-tile.module";
+import {PerfectScrollbarDirective} from "./perfect-scroll-bar/perfect-scrollbar.directive";
+import {FileOpenerComponent} from "./file-opener/file-opener.component";
+import {DownloadArtifactComponent} from "app/ng2/components/ui/download-artifact/download-artifact.component";
+import {SdcElementIconComponent} from "./sdc-element-icon/sdc-element-icon.component";
+import {PanelWrapperComponent} from "./panel-wrapper/panel-wrapper.component";
@NgModule({
- declarations: [
- LoaderComponent,
- SearchBarComponent,
- SearchWithAutoCompleteComponent,
- PalettePopupPanelComponent,
- ZoneContainerComponent,
- ZoneInstanceComponent,
- PaletteAnimationComponent,
- ExpandCollapseComponent
-],
-
- imports: [
- SdcUiComponentsModule,
- BrowserModule,
- FormsModule,
- CommonModule,
- DynamicElementModule,
- NavbarModule,
- FormElementsModule,
- ModalModule,
- PopoverModule,
- TabModule,
- TooltipModule,
- MultiStepsWizardModule,
- MenuListModule,
- MenuListNg2Module,
- TileModule
- ],
- exports: [
- LoaderComponent,
- MultiStepsWizardModule,
- SearchBarComponent,
- SearchWithAutoCompleteComponent,
- PalettePopupPanelComponent,
- ZoneContainerComponent,
- ZoneInstanceComponent,
- DynamicElementModule,
- NavbarModule,
- FormElementsModule,
- ModalModule,
- PopoverModule,
- TabModule,
- TooltipModule,
- MenuListModule,
- MenuListNg2Module,
- PaletteAnimationComponent,
- ExpandCollapseComponent,
- TileModule
- ],
- entryComponents: [SearchWithAutoCompleteComponent, PalettePopupPanelComponent, ZoneContainerComponent, ZoneInstanceComponent, PaletteAnimationComponent]
+ declarations: [
+ LoaderComponent,
+ SearchBarComponent,
+ SearchWithAutoCompleteComponent,
+ PaletteAnimationComponent,
+ ExpandCollapseComponent,
+ PerfectScrollbarDirective,
+ FileOpenerComponent,
+ SdcElementIconComponent,
+ DownloadArtifactComponent,
+ PanelWrapperComponent
+ ],
+
+ imports: [
+ SdcUiComponentsModule,
+ BrowserModule,
+ FormsModule,
+ CommonModule,
+ DynamicElementModule,
+ NavbarModule,
+ FormElementsModule,
+ ModalModule,
+ PopoverModule,
+ TabModule,
+ TooltipModule,
+ MultiStepsWizardModule,
+ MenuListModule,
+ MenuListNg2Module,
+ SdcTileModule
+ ],
+ exports: [
+ LoaderComponent,
+ MultiStepsWizardModule,
+ SearchBarComponent,
+ SearchWithAutoCompleteComponent,
+ DynamicElementModule,
+ NavbarModule,
+ FormElementsModule,
+ ModalModule,
+ PopoverModule,
+ TabModule,
+ TooltipModule,
+ MenuListModule,
+ MenuListNg2Module,
+ PaletteAnimationComponent,
+ ExpandCollapseComponent,
+ SdcTileModule,
+ PerfectScrollbarDirective,
+ SdcElementIconComponent,
+ FileOpenerComponent,
+ DownloadArtifactComponent,
+ PanelWrapperComponent
+ ],
+ entryComponents: [SearchWithAutoCompleteComponent, SdcElementIconComponent, PaletteAnimationComponent]
})
-export class UiElementsModule {}
+export class UiElementsModule {
+}