aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
-rw-r--r--catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html7
-rw-r--r--catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts36
-rw-r--r--catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts23
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html1
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less2
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html3
-rw-r--r--catalog-ui/src/app/ng2/components/layout/layout.module.ts24
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html53
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less225
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts149
-rw-r--r--catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html (renamed from catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html)5
-rw-r--r--catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less (renamed from catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less)2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts (renamed from catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts)4
-rw-r--r--catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts (renamed from catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts)0
-rw-r--r--catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html (renamed from catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html)2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less (renamed from catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less)0
-rw-r--r--catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts (renamed from catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts)0
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html (renamed from catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html)2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less (renamed from catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less)2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts (renamed from catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts)8
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html (renamed from catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html)7
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less (renamed from catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less)12
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts (renamed from catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts)9
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts38
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html (renamed from catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html)22
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less (renamed from catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less)20
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts (renamed from catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts)23
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts29
-rw-r--r--catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less77
-rw-r--r--catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html36
-rw-r--r--catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts182
-rw-r--r--catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts24
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.less128
-rw-r--r--catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less (renamed from catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts (renamed from catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts)47
-rw-r--r--catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts (renamed from catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts)21
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html8
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less67
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts50
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts48
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts)13
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts42
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html)3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html)3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts)2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts)5
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less42
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html8
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts29
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts)10
-rw-r--r--catalog-ui/src/app/ng2/components/ui/loader/loader.component.html (renamed from catalog-ui/src/app/ng2/components/loader/loader.component.html)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/loader/loader.component.less (renamed from catalog-ui/src/app/ng2/components/loader/loader.component.less)2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts (renamed from catalog-ui/src/app/ng2/components/loader/loader.component.ts)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less13
-rw-r--r--catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts (renamed from catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts)37
-rw-r--r--catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html9
-rw-r--r--catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less13
-rw-r--r--catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts70
-rw-r--r--catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts27
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html (renamed from catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts (renamed from catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/modal.component.html (renamed from catalog-ui/src/app/ng2/components/modal/modal.component.html)1
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/modal.component.less129
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts (renamed from catalog-ui/src/app/ng2/components/modal/modal.component.ts)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts (renamed from catalog-ui/src/app/ng2/components/modal/modal.module.ts)4
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts10
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html57
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less90
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts78
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts22
-rw-r--r--catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts27
-rw-r--r--catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html23
-rw-r--r--catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less11
-rw-r--r--catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts52
-rw-r--r--catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts31
-rw-r--r--catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts36
-rw-r--r--catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html (renamed from catalog-ui/src/app/ng2/components/popover/popover-content.component.html)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less (renamed from catalog-ui/src/app/ng2/components/popover/popover-content.component.less)6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts (renamed from catalog-ui/src/app/ng2/components/popover/popover-content.component.ts)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts (renamed from catalog-ui/src/app/ng2/components/popover/popover.component.ts)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts (renamed from catalog-ui/src/app/ng2/components/popover/popover.module.ts)2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html5
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less57
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts32
-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.less34
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts30
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts38
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html9
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less85
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts78
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts55
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html (renamed from catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less (renamed from catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts (renamed from catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts (renamed from catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts)0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts (renamed from catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts)1
-rw-r--r--catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts80
106 files changed, 2546 insertions, 273 deletions
diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html
new file mode 100644
index 0000000000..37686342e8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html
@@ -0,0 +1,7 @@
+<menu-list [open]="props?.open" [position]="props?.position" [styleClass]="props?.styleClass">
+ <menu-item *ngFor="let item of props?.items"
+ [action]="item?.action"
+ [styleClass]="item?.styleClass">
+ {{ item?.contents }}
+ </menu-item>
+</menu-list>
diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts
new file mode 100644
index 0000000000..85d1899d96
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts
@@ -0,0 +1,36 @@
+/*-
+ * ============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';
+
+declare var window:any;
+@Component({
+ selector: 'canvas-menu',
+ templateUrl: './menu-list-ng2.component.html'
+})
+export class MenuListNg2Component {
+ @Input() props:any = {
+ items: []
+ };
+
+ constructor() {
+ window.menu2 = this;
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts
new file mode 100644
index 0000000000..957ba35c5a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { MenuListModule } from "../../ui/menu/menu-list.module";
+import { MenuListNg2Component } from "./menu-list-ng2.component";
+
+export {
+ MenuListNg2Component
+};
+
+@NgModule({
+ declarations: [
+ MenuListNg2Component
+ ],
+ imports: [CommonModule, MenuListModule],
+ exports: [
+ MenuListNg2Component
+ ],
+ entryComponents: [ //need to add anything that will be dynamically created
+ MenuListNg2Component
+]
+})
+export class MenuListNg2Module {
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html
deleted file mode 100644
index a3e28c5f0b..0000000000
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<input #{{name}} [(ngModel)]="value" type="checkbox" (change)="onSave(value)" [ngClass]="{'disabled':readonly}"/>
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less
deleted file mode 100644
index bed097fe5e..0000000000
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less
+++ /dev/null
@@ -1,2 +0,0 @@
-/deep/ ui-element-checkbox {
-}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html
deleted file mode 100644
index bfb927af71..0000000000
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<select name='{{name}}' [(ngModel)]="value" #t (change)="onSave()" [ngClass]="{'disabled':readonly}">
- <option *ngFor="let ddvalue of values" [value]="ddvalue.value">{{ddvalue.label}}</option>
-</select>
diff --git a/catalog-ui/src/app/ng2/components/layout/layout.module.ts b/catalog-ui/src/app/ng2/components/layout/layout.module.ts
new file mode 100644
index 0000000000..827209326c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/layout/layout.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule } from "../../shared/translator/translate.module";
+import { TopNavComponent } from "./top-nav/top-nav.component";
+
+@NgModule({
+ declarations: [
+ TopNavComponent
+ ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ TranslateModule
+ ],
+ exports: [],
+ entryComponents: [ //need to add anything that will be dynamically created
+ TopNavComponent
+ ],
+ providers: []
+})
+export class LayoutModule {
+
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html
new file mode 100644
index 0000000000..55c4bf0460
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html
@@ -0,0 +1,53 @@
+<nav class="top-nav">
+
+ <div class="asdc-app-title-wrapper">
+ <a class="asdc-app-title">{{ 'PROJECT_TITLE'|translate }}</a>
+ <div class="asdc-version"> v.{{version}}</div>
+ </div>
+
+ <ul class="top-menu" *ngIf="!menuModel && topLvlMenu">
+ <!-- no hierarchy & dropdowns mode -->
+ <li *ngFor="let item of topLvlMenu.menuItems; let i = index"
+ [ngClass]="{'selected': i == topLvlMenu.selectedIndex}">
+ <a (click)="menuItemClick(topLvlMenu, item)"
+ [attr.data-tests-id]="'main-menu-button-' + item.text.toLowerCase()">{{item.text}}</a>
+ </li>
+ </ul>
+
+ <ul class="top-menu" *ngIf="menuModel">
+ <!-- with hierarchy & dropdowns mode -->
+ <ng-container *ngFor="let groupItem of menuModel; let $index = index; let $last = last">
+ <li [ngClass]="{'selected': $last }">
+ <a (click)="menuItemClick(groupItem, groupItem.menuItems[groupItem.selectedIndex])"
+ [attr.data-tests-id]="'breadcrumbs-button-' + $index">
+ {{groupItem.menuItems[groupItem.selectedIndex].text}}
+ </a>
+ </li>
+ <li class="triangle-dropdown"
+ [ngClass]="{'item-click': groupItem.itemClick}" (mouseover)="groupItem.itemClick = true">
+ <div class="triangle"><span class="sprite-new arrow-right"></span></div>
+ <ul class="sub-menu">
+ <li *ngFor="let ddItem of groupItem.menuItems; let $index2 = index"
+ (click)="menuItemClick(groupItem, ddItem)"
+ [ngClass]="{'selected': $index2 == groupItem.selectedIndex, 'disabled': ddItem.isDisabled}"
+ [attr.data-tests-id]="'sub-menu-button-' + ddItem.text.toLowerCase()">
+ <span sdc-smart-tooltip="">{{ddItem.text}}</span>
+ </li>
+ </ul>
+ </li>
+ </ng-container>
+ </ul>
+
+ <div class="top-search" [hidden]="hideSearch === true">
+ <input type="text"
+ class="search-text"
+ placeholder="Search"
+ [ngModel]="searchTerm"
+ (ngModelChange)="emitSearchTerm($event)"
+ data-tests-id="main-menu-input-search" />
+ <span class="w-sdc-search-icon magnification"></span>
+ </div>
+
+ <div class="notification-icon" [ngClass]="{'disabled' : progress > 0}" *ngIf="user.role === 'DESIGNER' && notificationIconCallback" (click)="notificationIconCallback()" tooltip="Vendor Software Product Repository" tooltipPlacement="left" data-tests-id="repository-icon"></div>
+
+</nav>
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
new file mode 100644
index 0000000000..dc666cbf00
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
@@ -0,0 +1,225 @@
+@import "../../../../../assets/styles/variables";
+@import "../../../../../assets/styles/variables-old";
+@import "../../../../../assets/styles/mixins_old";
+@import "../../../../../assets/styles/sprite";
+
+.top-nav {
+ position: fixed;
+ top: @header_height;
+ background-color: @main_color_p;
+ .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33));
+ width: 100%;
+ height: @top_nav_height;
+ line-height: @top_nav_height;
+ z-index: 10;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .asdc-app-title-wrapper {
+ flex-grow: 1;
+ line-height: 16px;
+ margin: 0 20px;
+
+ a.asdc-app-title {
+ //.m_18_r;
+ text-decoration: none;
+ }
+
+ .asdc-version {
+ //.m_12_r;
+ .opacity(0.8);
+ line-height: 14px;
+ flex-grow: 1;
+ }
+
+ }
+
+ ul.top-menu {
+ list-style-type: none;
+ margin: 0 0 0 20px;
+ padding: 0;
+ flex-grow: 999;
+
+ & > li {
+ float: left;
+ cursor: pointer;
+ line-height: 50px;
+ height: 50px;
+ padding: 0 20px;
+
+ &.selected {
+ border-bottom: solid 4px @main_color_a;
+
+ a {
+ color: @func_color_s;
+ }
+ }
+
+ /*&:hover {
+ border-bottom: solid 4px @main_color_a;
+ }*/
+
+ a {
+ font-family: @font-opensans-medium;
+ color: @main_color_m;
+ font-size: 16px;
+ display: block;
+ text-align: center;
+ text-decoration: none;
+ }
+
+ &.triangle-dropdown {
+ padding: 0;
+ position: relative;
+
+ div.triangle {
+ margin-top: 15px;
+ border-radius: 2px;
+ width: 17px;
+ height: 18px;
+
+ //temp use - until new triangle gets in
+ line-height: 18px;
+ text-align: center;
+ font-size: 10px;
+
+ &:hover {
+ background-color: rgba(156, 156, 156, 0.2);
+
+ span {
+ .arrow-right-hover;
+ }
+ }
+ }
+
+ + li a {
+ font-size: 16px;
+ }
+
+ ul.sub-menu {
+ .perfect-scrollbar;
+ position: absolute;
+ left: 0;
+ top: 40px;
+ z-index: 1;
+
+ overflow-x: hidden;
+ overflow-y: auto;
+ max-height: 0;
+ -webkit-transition: max-height 200ms ease-in;
+ -moz-transition: max-height 200ms ease-in;
+ -o-transition: max-height 200ms ease-in;
+ transition: max-height 200ms ease-in;
+
+ padding: 0;
+ background-color: white;
+ visibility: hidden;
+
+ li {
+
+ height: 35px;
+ background-color: white;
+ font-size: 13px;
+ width: 150px;
+ line-height: 35px;
+ padding: 0 10px;
+
+ &.disabled {
+ opacity: 1;
+ }
+ &.selected {
+ background-color: @tlv_color_v;
+ font-weight: bold;
+ }
+ &:hover {
+ color: @main_color_a;
+ }
+ span {
+ height: 35px;
+ width: 130px;
+ display: inline;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+ }
+ }
+ &.item-click:hover ul.sub-menu,
+ &.item-click:active ul.sub-menu {
+ visibility: visible;
+ max-height: 500px;
+ border: 1px solid @func_color_b;
+ border-radius: 2px;
+ box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1);
+
+ div ul {
+
+ }
+ }
+ }
+ }
+
+ }
+
+ .top-search {
+ position: relative;
+ flex-grow: 1;
+ padding: 0 20px;
+
+ input.search-text {
+ .border-radius(2px);
+ width: 245px;
+ height: 32px;
+ line-height: 32px;
+ border: 1px solid @main_color_o;
+ outline: none;
+ text-indent: 10px;
+
+ &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */
+ &:-moz-placeholder { font-style: italic; } /* Firefox 18- */
+ &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */
+ &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */
+ &:-ms-input-placeholder { font-style: italic; } /* Edge */
+ /* font-style: italic;
+ }*/
+ /* Firefox 18- */
+ &::-moz-placeholder {
+ font-style: italic;
+ }
+ /* Firefox 19+ */
+ &:-ms-input-placeholder {
+ font-style: italic;
+ }
+ /* IE 10+ */
+ &:-ms-input-placeholder {
+ font-style: italic;
+ }
+ /* Edge */
+ }
+
+ .magnification {
+ position: absolute;
+ top: 19px;
+ right: 26px;
+ }
+
+ }
+
+ .notification-icon {
+ cursor: pointer;
+ flex-grow: 1;
+ margin: 0 10px 6px 0;
+ .sprite-new;
+ .vsp-list-icon;
+
+ &:hover {
+ .vsp-list-icon-hover;
+ }
+
+ &:active {
+ .vsp-list-icon-active;
+ }
+
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
new file mode 100644
index 0000000000..f48aa4801f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
@@ -0,0 +1,149 @@
+/*-
+ * ============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, Inject, Input, Output, EventEmitter} from "@angular/core";
+import {IHostedApplication, IUserProperties} from "app/models";
+import {MenuItemGroup, MenuItem} from "app/utils";
+import {UserService} from "../../../services/user.service";
+import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config";
+import {TranslateService} from "../../../shared/translator/translate.service";
+
+
+declare const window:any;
+@Component({
+ selector: 'top-nav',
+ templateUrl: './top-nav.component.html',
+ styleUrls:['./top-nav.component.less']
+})
+export class TopNavComponent {
+ @Input() public version:string;
+ @Input() public menuModel:Array<MenuItemGroup>;
+ @Input() public topLvlSelectedIndex:number;
+ @Input() public hideSearch:boolean;
+ @Input() public searchTerm:string;
+ @Input() public notificationIconCallback:Function;
+ @Output() public searchTermChange:EventEmitter<string> = new EventEmitter<string>();
+ emitSearchTerm(event:string) {
+ this.searchTermChange.emit(event);
+ }
+
+ public topLvlMenu:MenuItemGroup;
+ public user:IUserProperties;
+
+ constructor(private translateService:TranslateService,
+ @Inject('$state') private $state:ng.ui.IStateService,
+ private userService:UserService,
+ @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
+ window.nav = this;
+ }
+
+ private _getTopLvlSelectedIndexByState = ():number => {
+ if (!this.topLvlMenu.menuItems) {
+ return 0;
+ }
+
+ let result = -1;
+
+ //set result to current state
+ this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> {
+ if (item.state === this.$state.current.name) {
+ result = index;
+ }
+ });
+
+ //if it's a different state , checking previous state param
+ if (result === -1) {
+ this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> {
+ if (item.state === this.$state.params['previousState']) {
+ result = index;
+ }
+ });
+ }
+
+ if (result === -1) {
+ result = 0;
+ }
+
+ return result;
+ };
+
+ ngOnChanges(changes) {
+ if (changes['menuModel']) {
+ console.log('menuModel was changed!');
+ this.generateMenu();
+ }
+ }
+
+ ngOnInit() {
+ console.log('Nav is init!', this.menuModel);
+ this.user = this.userService.getLoggedinUser();
+
+ this.translateService.languageChangedObservable.subscribe((lang) => {
+ let tmpArray: Array<MenuItem> = [
+ new MenuItem(this.translateService.translate("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null),
+ new MenuItem(this.translateService.translate("TOP_MENU_CATALOG_BUTTON"), null, "catalog", "goToState", null, null)
+ ];
+
+ // Only designer can perform onboarding
+ if (this.user && this.user.role === 'DESIGNER') {
+ tmpArray.push(new MenuItem(this.translateService.translate("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null));
+ _.each(this.sdcConfig.hostedApplications, (hostedApp: IHostedApplication) => {
+ if (hostedApp.exists) {
+ tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null));
+ }
+ });
+ }
+
+ this.topLvlMenu = new MenuItemGroup(0, tmpArray, true);
+ this.topLvlMenu.selectedIndex = isNaN(this.topLvlSelectedIndex) ? this._getTopLvlSelectedIndexByState() : this.topLvlSelectedIndex;
+
+ this.generateMenu();
+ });
+ }
+
+ generateMenu() {
+ if (this.menuModel && this.topLvlMenu && this.menuModel[0] !== this.topLvlMenu) {
+ this.menuModel.unshift(this.topLvlMenu);
+ }
+ }
+
+ goToState(state:string, params:Array<any>):Promise<boolean> {
+ return new Promise((resolve, reject) => {
+ this.$state.go(state, params && params.length > 0 ? [0] : undefined);
+ resolve(true);
+ });
+ }
+
+ menuItemClick(itemGroup:MenuItemGroup, item:MenuItem) {
+ itemGroup.itemClick = false;
+
+ let onSuccess = ():void => {
+ itemGroup.selectedIndex = itemGroup.menuItems.indexOf(item);
+ };
+ let onFailed = ():void => {
+ };
+
+ if (item.callback) {
+ (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed);
+ } else {
+ this[item.action](item.state, item.params).then(onSuccess, onFailed);
+ }
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
index 4d2b91f3b4..ddda82ab58 100644
--- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
@@ -4,7 +4,7 @@
<div class="field">
<label>Resource Type</label>
<div>
- <checkbox [label]="'All'" [(checked)]="allSelected" (checkedChange)="selectAll()"></checkbox>
+ <checkbox [label]="'All'" [(checked)]="allSelected" (checkedChange)="selectAll()" data-tests-id="filter-checkbox-all"></checkbox>
</div>
<div *ngFor="let type of typesOptions">
<checkbox [label]="type" [(checked)]="selectedTypes[type]" (checkedChange)="onTypeSelected(type)"></checkbox>
@@ -17,10 +17,11 @@
[(ngModel)]="filterData.propertyName"
placeholder="Type here"
required
+ data-tests-id="filter-box"
/>
</div>
</form>
</popover-content>
<div class="open-filter-button" [popover]="filterPopover" [ngClass]="{'open':showPopover}" (onShown)="showPopover = true" (onHidden)="showPopover = false">
- <div class="sprite-new filter-icon"></div>
+ <div class="sprite-new filter-icon" data-tests-id="filter-button"></div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less
index 07f38d3011..25c1467b3b 100644
--- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less
@@ -1,4 +1,4 @@
-@import '../../../../assets/styles/variables';
+@import '../../../../../assets/styles/variables';
form{
margin: 0 20px;
.field{
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts
index c43c30db21..5a9bfbcecb 100644
--- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts
@@ -23,8 +23,8 @@
*/
import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core';
import {ButtonModel, ButtonsModelMap, FilterPropertiesAssignmentData} from "app/models";
-import {PopoverComponent} from "../popover/popover.component";
-import * as sdcConfig from "../../../../../configurations/dev"
+import * as sdcConfig from "../../../../../../configurations/dev"
+import {PopoverComponent} from "../../ui/popover/popover.component";
@Component({
selector: 'filter-properties-assignment',
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts
index c8d4566653..c8d4566653 100644
--- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html
index 40a1c37cee..c3f9e5ac74 100644
--- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html
@@ -1,7 +1,7 @@
<div class="navigation-wrapper">
<div class="node-item" *ngFor="let item of displayData" (click)="onClick($event, item)">
<div class="node-data-wrapper" [ngClass]="{'selected': selectedItem && selectedItem === item[displayOptions.idProperty]}">
- <span class="node-data" [ngClass]="{'mark':item[displayOptions.valueProperty] === displayOptions.searchText}">{{item[displayOptions.valueProperty]}}</span>
+ <span class="node-data" [ngClass]="{'mark':item[displayOptions.valueProperty] === displayOptions.searchText}" [attr.data-tests-id]="item[displayOptions.valueProperty]">{{item[displayOptions.valueProperty]}}</span>
</div>
<div class="children-node" *ngIf="item[displayOptions.childrenProperty]">
<hierarchy-navigation class="children-hierarchy" [displayData]="item[displayOptions.childrenProperty]"
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less
index 4befa2c797..4befa2c797 100644
--- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
index dc0a02c277..dc0a02c277 100644
--- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
index 2b58d0f086..57e0474c66 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
@@ -37,7 +37,7 @@
[readonly]="readonly">
</dynamic-element>
<div class="delete-button-container">
- <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)"></span>
+ <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
index 89c7287449..0545874f53 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
@@ -1,5 +1,5 @@
-@import './../../../../assets/styles/variables.less';
+@import './../../../../../assets/styles/variables.less';
:host /deep/ input { width:100%;}
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
index 736655f3f7..0add1cd707 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
@@ -21,16 +21,14 @@
/**
* Created by rc2122 on 5/4/2017.
*/
-import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core";
+import {Component, Input, Output, EventEmitter} from "@angular/core";
import {InputFEModel} from "app/models";
-import { ModalService } from 'app/ng2/services/modal.service';
-
-
+import {ModalService} from "../../../services/modal.service";
@Component({
selector: 'inputs-table',
templateUrl: './inputs-table.component.html',
- styleUrls: ['../inputs-table/inputs-table.component.less']
+ styleUrls: ['../inputs-table/inputs-table.component.less'],
})
export class InputsTableComponent {
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
index 3ffc9c16be..14b6c7d4c0 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
@@ -1,11 +1,11 @@
<div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn]
- [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName }"
+ [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName, 'readonly': property.isDisabled ||property.isDeclared}"
[class.with-top-border]="property.isChildOfListOrMap"
(click)="onClickPropertyRow(property, $event)">
<!-- LEFT CELL -->
<ng-container *ngIf="!isPropertyFEModel">
<div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared"> <!-- simple children of complex type [@checkEffect]="property.isDeclared"-->
- <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
+ <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
<div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
</div>
<div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
@@ -47,7 +47,8 @@
<ng-container *ngFor="let prop of property.flattenedChildren | filterChildProperties: expandedChildId; trackBy:prop?.propertiesName">
<dynamic-property
[selectedPropertyId]="selectedPropertyId"
- [canBeDeclared]="prop.canBeDeclared"
+ [hasDeclareOption]="hasDeclareOption"
+ [canBeDeclared]="hasDeclareOption && prop.canBeDeclared"
[property]="prop"
[expandedChildId]="expandedChildId"
[propertyNameSearchText]="propertyNameSearchText"
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
index 48d3d035d0..0adce2c99d 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
@@ -1,4 +1,4 @@
-@import '../../../../../assets/styles/variables.less';
+@import '../../../../../../assets/styles/variables.less';
.flat-children-container {
.dynamic-property-row {
/*create nested left border classes for up to 10 levels of nesting*/
@@ -25,6 +25,15 @@
flex-direction:row;
align-items: stretch;
+ &.readonly{
+ background-color: @tlv_color_t;
+ cursor: auto;
+ }
+ //for the case that the parent is disabled but the child is enabled
+ &:not(.readonly){
+ background-color: @main_color_p;
+ }
+
.table-cell {
flex: 1;
padding:9px;
@@ -72,3 +81,4 @@
outline: none;
box-sizing: border-box;
}
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
index 9cf043098b..04cb26d030 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
@@ -19,11 +19,11 @@
*/
import {Component, Input, Output, EventEmitter} from "@angular/core";
-import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyType, SchemaPropertyGroupModel, DataTypeModel } from "app/models";
-import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils';
-import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils";
-import { DataTypeService } from "../../../services/data-type.service";
+import { PropertyFEModel, DerivedFEProperty, DerivedPropertyType } from "app/models";
+import { PROPERTY_TYPES } from 'app/utils';
+import { DataTypeService } from "../../../../services/data-type.service";
import { trigger, state, style, transition, animate } from '@angular/core';
+import {PropertiesUtils} from "../../../../pages/properties-assignment/services/properties.utils";
@Component({
@@ -47,6 +47,7 @@ export class DynamicPropertyComponent {
@Input() propertyNameSearchText: string;
@Input() readonly: boolean;
@Input() hasChildren: boolean;
+ @Input() hasDeclareOption:boolean;
@Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
@Output() expandChild: EventEmitter<string> = new EventEmitter<string>();
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts
new file mode 100644
index 0000000000..4520469594
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts
@@ -0,0 +1,38 @@
+/*-
+ * ============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 { Pipe, PipeTransform } from '@angular/core';
+import { DerivedFEProperty } from 'app/models';
+
+@Pipe({
+ name: 'filterChildProperties',
+})
+export class FilterChildPropertiesPipe implements PipeTransform {
+ public transform(childProperties: Array<DerivedFEProperty>, parentId: string) {
+ if (!parentId || !childProperties) return childProperties;
+
+ let validParents: Array<string> = [parentId];
+ while (parentId.lastIndexOf('#') > 0) {
+ parentId = parentId.substring(0, parentId.lastIndexOf('#'));
+ validParents.push(parentId);
+ }
+ return childProperties.filter(derivedProp => validParents.indexOf(derivedProp.parentName) > -1);
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
index a9dc499e7d..933b80f577 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
@@ -2,38 +2,38 @@
<loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
<div class="table-header">
<div class="table-cell col1">Property Name</div>
- <div class="table-cell col2">Type</div>
- <div class="table-cell col3">ES</div>
+ <div class="table-cell col2" *ngIf="!hidePropertyType">Type</div>
+ <div class="table-cell col3" *ngIf="!hidePropertyType">ES</div>
<div class="table-cell valueCol">Value</div>
</div>
- <div class="table-body">
+ <div class="table-body" [ngClass]="{'view-mode': readonly}">
<div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div>
<ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:instanceId">
- <div class="table-rows-header white-sub-header">{{feInstanceNamesMap[instanceId]}}</div>
+ <div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap">{{feInstanceNamesMap[instanceId]}}</div>
<div class="table-row"
*ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm; trackBy:property?.name"
(click)="onClickPropertyRow(property, instanceId, $event)"
- [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name }">
+ [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name, 'readonly': property.isDisabled || property.isDeclared}">
<div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared">
<div class="property-name">
- <checkbox [(checked)]="property.isSelected"
+ <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected"
[disabled]="property.isDisabled || property.isDeclared || readonly"
- (checkedChange)="propertyChecked(property)"></checkbox>
+ (checkedChange)="propertyChecked(property)" [attr.data-tests-id]="property.name"></checkbox>
<div class="inner-cell-div" tooltip="{{property.name}}">
<span>{{property.name}}</span>
</div>
</div>
<span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}" tooltipDelay="0"></span>
</div>
- <div class="table-cell col2">
+ <div class="table-cell col2" *ngIf="!hidePropertyType">
<div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
<span>{{property.type | contentAfterLastDot}}</span>
</div>
</div>
- <div class="table-cell col3">
+ <div class="table-cell col3" *ngIf="!hidePropertyType">
<div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}">
<span>{{property.schema.property.type | contentAfterLastDot}}</span>
</div>
@@ -42,7 +42,8 @@
<!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
<dynamic-property
[selectedPropertyId]="selectedPropertyId"
- [canBeDeclared]="true"
+ [hasDeclareOption]="hasDeclareOption"
+ [canBeDeclared]="hasDeclareOption && true"
[property]="property"
[expandedChildId]="property.expandedChildPropertyId"
[propertyNameSearchText]="propertyNameSearchText"
@@ -56,7 +57,6 @@
</div>
</div>
-
</ng-container>
</div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
index 9ede84faff..20da0b6ec2 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
@@ -1,5 +1,5 @@
-@import './../../../../assets/styles/variables.less';
-@import '../../../../assets/styles/sprite';
+@import './../../../../../assets/styles/variables.less';
+@import '../../../../../assets/styles/sprite';
@smaller-screen: ~"only screen and (max-width: 1580px)";
:host /deep/ input { width:100%;}
@@ -43,6 +43,7 @@
flex-direction: column;
overflow-y:auto;
flex: 1;
+ background-color: @main_color_p;
.no-data {
border: #d2d2d2 solid 1px;
@@ -55,13 +56,25 @@
background-color: #e6f6fb;
color: #009fdb;
}
+ &.view-mode{
+ /deep/ .dynamic-property-row:not(.selected){
+ background-color:#f8f8f8;
+ }
+ }
.table-row {
display: flex;
flex-direction:row;
flex: 0 0 auto;
+ &.readonly{
+ background-color: #f8f8f8;
+ cursor: auto;
+ }
&:hover:not(.selected){
background-color:#f8f8f8; cursor:pointer;
+ /deep/ .dynamic-property-row:not(.selected){
+ background-color:#f8f8f8; cursor:pointer;
+ }
}
.selected-row {
@@ -100,7 +113,8 @@
.property-name {
flex: 1;
display: flex;
- max-width: 90%;
+ overflow: hidden;
+ //max-width: 90%; fix bug 327139
}
.property-description-icon {
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
index afb7189348..32bbb1b3a0 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
@@ -18,11 +18,9 @@
* ============LICENSE_END=========================================================
*/
-import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef } from "@angular/core";
-import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models";
-import {PropertiesService} from "../../services/properties.service";
-import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component';
-import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
+import { Component, Input, Output, EventEmitter} from "@angular/core";
+import {PropertyFEModel, DerivedFEProperty, InstanceFePropertiesMap} from "app/models";
+import {PropertiesService} from "../../../services/properties.service";
@Component({
selector: 'properties-table',
@@ -34,24 +32,25 @@ export class PropertiesTableComponent {
@Input() fePropertiesMap: InstanceFePropertiesMap;
@Input() feInstanceNamesMap: Map<string, string>;
@Input() selectedPropertyId: string;
- @Input() displayDeleteButton: boolean;
@Input() propertyNameSearchText:string;
@Input() searchTerm:string;
@Input() readonly:boolean;
@Input() isLoading:boolean;
+ @Input() hasDeclareOption:boolean;
+ @Input() hidePropertyType:boolean;
@Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
@Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>();
- @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();
- //@Output() selectInstanceRow: EventEmitter<string> = new EventEmitter<string>();
+ @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareOption
-
- constructor ( private propertiesService:PropertiesService ){
+ constructor (private propertiesService:PropertiesService ){
+ }
+
+ ngOnInit() {
}
-
propValueChanged = (property) => {
- !property.isDeclared && this.valueChanged.emit(property);
+ this.valueChanged.emit(property);
};
// Click on main row (row of propertyFEModel)
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
new file mode 100644
index 0000000000..91f33485a9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
@@ -0,0 +1,29 @@
+import {NgModule} from "@angular/core";
+import {PropertiesTableComponent} from "./properties-table.component";
+import {DynamicPropertyComponent} from "./dynamic-property/dynamic-property.component";
+import {FormsModule} from "@angular/forms";
+import {UiElementsModule} from "../../ui/ui-elements.module";
+import {CommonModule} from "@angular/common";
+import {HttpModule} from "@angular/http";
+import {FilterChildPropertiesPipe} from "./pipes/filterChildProperties.pipe";
+import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
+import {PropertiesService} from "../../../services/properties.service";
+
+@NgModule({
+ imports: [
+ FormsModule,
+ HttpModule,
+ CommonModule,
+ GlobalPipesModule,
+ UiElementsModule
+ ],
+ declarations: [
+ FilterChildPropertiesPipe,
+ DynamicPropertyComponent,
+ PropertiesTableComponent
+ ],
+ exports: [PropertiesTableComponent],
+ providers: [FilterChildPropertiesPipe, PropertiesService]
+})
+export class PropertyTableModule {
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less
new file mode 100644
index 0000000000..edcb87db3d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less
@@ -0,0 +1,77 @@
+@import './../../../../../assets/styles/variables.less';
+@import './../../../../../assets/styles/mixins.less';
+.main-container{
+ color: @main_color_m;
+}
+.select-req-or-cap-span {
+ float: left;
+ margin-right: 15px;
+ font-size: 13px;
+}
+.select-type-label{
+ .m_12_m;
+ margin-bottom: 2px;
+}
+.select-type{
+ display: flex;
+ margin-bottom: 10px;
+ ui-element-dropdown{
+ width: 40%;
+ font-size: 13px;
+ /deep/ select{
+ height: 31px;
+ }
+ }
+}
+.table-and-list-container{
+ display: flex;
+ padding-top: 10px;
+ .inner-container{
+ height: 300px;
+ overflow-y: auto;
+ border: @main_color_o solid 1px;
+ }
+ .inner-container:not(:last-of-type){
+ border-right: none;
+ }
+ .requirements-or-capabilities-container {
+ width: 40%;
+ &.empty-list{
+ background-color: @tlv_color_t;
+ text-align: center;
+ &:before{
+ content: 'Select "type" above';
+ line-height: 298px;
+ }
+ }
+ .req-or-cap-item{
+ border-bottom: @main_color_o solid 1px;
+ padding: 10px;
+ font-size: 13px;
+ &:hover:not(.selected){
+ background-color:@tlv_color_t; cursor:pointer;
+ }
+ }
+ }
+ .properties-table-container{
+ width: 60%;
+ display: flex;
+ &.cap-selected{
+ background-color: @tlv_color_t;
+ border: @main_color_a solid 1px;
+ -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
+ -moz-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
+ box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
+ }
+ properties-table{
+ margin: 15px;
+ width: 100%;
+ }
+ }
+}
+
+.selected{
+ color: @main_color_a;
+ background-color: @tlv_color_v;
+ border-left: @main_color_a solid 4px;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html
new file mode 100644
index 0000000000..bcd33efc30
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html
@@ -0,0 +1,36 @@
+<div class="main-container">
+ <span class="select-req-or-cap-span">Select:</span><radio-buttons
+ [(value)]="selectedReqOrCapOption"
+ [options]="selectOptions"
+ [readonly]="disabledSelectReqOrCapOption"
+ [direction]="'horizontal'"
+ (valueChange)="onSelectRequirementOrCapability($event)">
+
+</radio-buttons>
+ <label class="select-type-label">Select type:</label>
+ <div class="select-type">
+ <ui-element-dropdown [values]="types" [(value)]="selectedType" (valueChange)="onTypeSelected($event)"></ui-element-dropdown>
+ </div>
+
+ <div class="table-and-list-container">
+ <div class="inner-container requirements-or-capabilities-container" [ngClass]="{'empty-list':!selectedType}">
+ <div *ngFor="let item of displayCapReqListFilterByType"
+ class="req-or-cap-item"
+ (click)="selectReqOrCapFromList(item)"
+ [ngClass]="{'selected':selectedReqOrCapModel && (item.uniqueId + item.ownerId + item.name) == (selectedReqOrCapModel.uniqueId + selectedReqOrCapModel.ownerId + selectedReqOrCapModel.name)}">
+ {{item.getFullTitle()}}
+ </div>
+ </div>
+ <div class="inner-container properties-table-container" *ngIf="selectedReqOrCapOption == 'Capability'" [ngClass]="{'cap-selected':selectedReqOrCapModel}">
+ <properties-table *ngIf="selectedReqOrCapModel"
+ class="properties-table"
+ [readonly]="true"
+ [fePropertiesMap]="capabilityProperties"
+ [selectedPropertyId]="''"
+ [hidePropertyType]="true">
+ </properties-table>
+ </div>
+
+ </div>
+</div>
+
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
new file mode 100644
index 0000000000..ab67dc1850
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
@@ -0,0 +1,182 @@
+/**
+ * Created by rc2122 on 9/4/2017.
+ */
+import {Component, EventEmitter, Input, OnInit, Output, SimpleChanges} from '@angular/core';
+import {RadioButtonModel, Match, PropertyModel, InstanceFePropertiesMap, Component as ComponentModel} from "app/models";
+import {Dictionary} from "lodash";
+import {DropdownValue} from "../../ui/form-components/dropdown/ui-element-dropdown.component";
+import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service";
+import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils";
+import {Requirement} from "../../../../models/requirement";
+import {Capability, RequirementCapabilityModel} from "../../../../models/capability";
+
+const REQUIREMENT = 'Requirement';
+const CAPABILITY = 'Capability';
+
+@Component({
+ selector: 'select-requirement-or-capability',
+ templateUrl: './select-requirement-or-capability.component.html',
+ styleUrls: ['./select-reqiurement-or-capability.component.less']
+})
+
+export class SelectRequirementOrCapabilityComponent implements OnInit {
+
+
+ @Input() optionalRequirementsMap:Dictionary<Requirement[]>; //optional requirement map - key is type, value is array of requirements
+ @Input() optionalCapabilitiesMap:Dictionary<Capability[]>; //optional capabilities map - key is type, value is array of capabilities
+
+ @Input() selectedReqOrCapOption:string; // the selection value chosen by the user (options: requirement / capability )
+
+ @Input() currentComponent:ComponentModel;
+ @Input() componentInstanceId:string;
+
+ @Input() selectedReqOrCapModel:RequirementCapabilityModel;
+
+ @Output() updateSelectedReqOrCap:EventEmitter<RequirementCapabilityModel> = new EventEmitter<RequirementCapabilityModel>();
+ @Output() updateCapabilityProperties:EventEmitter<Array<PropertyModel>> = new EventEmitter<Array<PropertyModel>>();
+
+ types:Array<string> = [];
+ selectedType:string;
+
+ selectOptions:Array<RadioButtonModel>;
+
+ requirementsTypes:Array<string> = [];
+ capabilitiesTypes:Array<string> = [];
+
+ disabledSelectReqOrCapOption: boolean; // If we need to disable the option to choose requirement or capability
+ displayCapReqListFilterByType:RequirementCapabilityModel[];
+
+ capabilityProperties:InstanceFePropertiesMap;
+
+ constructor(private componentInstanceServiceNg2:ComponentInstanceServiceNg2,
+ private propertiesUtils:PropertiesUtils) {
+ this.selectOptions = [new RadioButtonModel(REQUIREMENT, REQUIREMENT), new RadioButtonModel(CAPABILITY, CAPABILITY)];
+ }
+
+ private initDefaultReqOrCapSelection = (): void => {
+ if(this.selectedReqOrCapOption){//for second step
+ this.disabledSelectReqOrCapOption = true;
+ }
+ if (this.selectedReqOrCapModel) {//init when there is selected req or cap
+ if (this.selectedReqOrCapModel instanceof Capability) {
+ this.selectedReqOrCapOption = this.selectOptions[1].value;
+ this.selectedType = this.selectedReqOrCapModel.type;
+ } else {
+ this.selectedReqOrCapOption = this.selectOptions[0].value;
+ this.selectedType = (<Requirement>this.selectedReqOrCapModel).capability;
+ }
+ }
+ if(Object.keys(this.optionalCapabilitiesMap).length === 0) { // If instance don't have capabilities
+ this.disabledSelectReqOrCapOption = true;
+ this.selectedReqOrCapOption = this.selectOptions[0].value;
+ } else if(Object.keys(this.optionalRequirementsMap).length === 0) { // If instance don't have requirements
+ this.disabledSelectReqOrCapOption = true;
+ this.selectedReqOrCapOption = this.selectOptions[1].value;
+ }
+ this.selectedReqOrCapOption = this.selectedReqOrCapOption || this.selectOptions[1].value;
+ this.types = this.selectedReqOrCapOption == this.selectOptions[0].value ? this.requirementsTypes : this.capabilitiesTypes;
+ setTimeout(() => {
+ if (this.selectedType) {
+ this.initCapReqListFilterByType();
+ } else {
+ this.setDefaultValueType();
+ }
+ });
+ }
+
+ initCapabilityPropertiesTable = ():void => {
+ if(this.selectedReqOrCapModel instanceof Capability ) {
+ let selectedCapability = <Capability>this.selectedReqOrCapModel;
+ if(selectedCapability.properties){
+ this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({ CAPABILITY : selectedCapability.properties}, false);
+ }
+ }
+ }
+
+ ngOnChanges(changes:SimpleChanges) {
+ if (changes.selectedReqOrCapModel) {
+ if (this.selectedReqOrCapModel && this.selectedReqOrCapOption === CAPABILITY) {
+ this.setCapabilityProperties();
+ }
+ }
+ }
+
+ ngOnInit() {
+ this.initTypesList();
+ this.initDefaultReqOrCapSelection();
+ this.initCapabilityPropertiesTable();
+ }
+
+ private initTypesList = ():void => {
+ this.requirementsTypes = _.keys(this.optionalRequirementsMap);
+ this.requirementsTypes.unshift('All');
+ this.capabilitiesTypes = _.keys(this.optionalCapabilitiesMap);
+ this.capabilitiesTypes.unshift('All');
+ }
+
+ private fillInDisplayCapReqListFilterByType = (allOptionalTypesMap:Dictionary<RequirementCapabilityModel[]>):void => {
+ if(this.selectedType === 'All'){
+ this.displayCapReqListFilterByType = [];
+ _.map(allOptionalTypesMap,(reqOrCapArray:RequirementCapabilityModel[])=>{
+ this.displayCapReqListFilterByType = this.displayCapReqListFilterByType.concat(reqOrCapArray);
+ })
+ }else{
+ this.displayCapReqListFilterByType = allOptionalTypesMap[this.selectedType];
+ }
+
+ // automatically select a *single* requirement or capability:
+ if (this.displayCapReqListFilterByType.length === 1) {
+ const selectedReqCap:RequirementCapabilityModel = this.displayCapReqListFilterByType[0];
+ this.selectReqOrCapFromList((this.selectedType === CAPABILITY) ? <Capability>selectedReqCap : <Requirement>selectedReqCap);
+ }
+ }
+
+ private initCapReqListFilterByType = ():void => {
+ if (this.selectedReqOrCapOption === CAPABILITY) {
+ this.fillInDisplayCapReqListFilterByType(this.optionalCapabilitiesMap);
+ } else {
+ this.fillInDisplayCapReqListFilterByType(this.optionalRequirementsMap);
+ }
+ }
+
+ private onTypeSelected = ():void => {
+ this.initCapReqListFilterByType();
+ if (this.displayCapReqListFilterByType.indexOf(this.selectedReqOrCapModel) === -1) {
+ this.selectReqOrCapFromList(null);
+ }
+ }
+
+ private setDefaultValueType = ():void =>{
+ // automatically select a *single* type from the list:
+ this.selectedType = (this.types.length === 2) ? this.types[1] : this.types[0];
+ this.initCapReqListFilterByType();
+ }
+
+ private onSelectRequirementOrCapability = ():void => {
+ this.types = this.selectedReqOrCapOption === REQUIREMENT ? this.requirementsTypes : this.capabilitiesTypes;
+ this.selectReqOrCapFromList(null);
+ this.setDefaultValueType();
+ }
+
+ private selectReqOrCapFromList = (selected:Requirement|Capability):void => {
+ if (this.selectedReqOrCapModel !== selected) {
+ this.selectedReqOrCapModel = selected;
+ this.updateSelectedReqOrCap.emit(selected);
+ }
+ }
+
+
+ private setCapabilityProperties = ():void => {
+ let selectedCapability = <Capability>this.selectedReqOrCapModel;
+ if (selectedCapability.properties === undefined) {
+ this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability.type, selectedCapability.name)
+ .subscribe((response:Array<PropertyModel>) => {
+ this.capabilityProperties = (response && response.length) ? this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : response}, false) : null;
+ this.updateCapabilityProperties.emit(response);
+ }, error => {});
+ }else{
+ this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : selectedCapability.properties}, false);
+ this.updateCapabilityProperties.emit(selectedCapability.properties);
+ }
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts
new file mode 100644
index 0000000000..cb12dea02a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts
@@ -0,0 +1,24 @@
+import {NgModule} from "@angular/core";
+import {SelectRequirementOrCapabilityComponent} from "./select-requirement-or-capability.component";
+import {FormsModule} from "@angular/forms";
+import {FormElementsModule} from "../../ui/form-components/form-elements.module";
+import {CommonModule} from "@angular/common";
+import {GlobalPipesModule} from "app/ng2/pipes/global-pipes.module";
+import {PropertyTableModule} from "../properties-table/property-table.module";
+
+@NgModule({
+ declarations: [
+ SelectRequirementOrCapabilityComponent
+ ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ FormElementsModule,
+ GlobalPipesModule,
+ PropertyTableModule],
+
+ exports: [SelectRequirementOrCapabilityComponent],
+ providers: []
+})
+export class SelectRequirementOrCapabilityModule {
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.less b/catalog-ui/src/app/ng2/components/modal/modal.component.less
deleted file mode 100644
index c87162afb0..0000000000
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.less
+++ /dev/null
@@ -1,128 +0,0 @@
-@import '../../../../assets/styles/variables';
-@import '../../../../assets/styles/mixins';
-@import '../../../../assets/styles/sprite-old';
-/deep/ modal {
- display: none;
-
- .custom-modal {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1000;
- overflow: auto;
- margin: auto;
- display: flex;
- align-items: center;
-
- .ng2-modal-content {
- background: #fff;
- width: 100%;
- box-shadow: 0 5px 15px rgba(0,0,0,.5);
- border-radius: 4px;
- .ng2-modal-body{
- padding: 20px;
- }
-
- .ng2-modal-header{
- .m_18_m;
- font-weight: bold;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- height: 50px;
- line-height: 50px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- text-align: left;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin: 0px 20px;
-
- &.modal-type-standard {
- border-bottom: solid 3px @main_color_a;
- }
-
- &.modal-type-error {
- border-bottom: solid 3px @func_color_q;
- }
-
- &.modal-type-alert{
- border-bottom: solid 3px @main_color_h;
- }
-
- .title{
- .s_18_m;
- -webkit-box-flex: 999;
- -ms-flex-positive: 999;
- flex-grow: 999;
- }
- .close-button{
- .sprite;
- .sprite.x-btn-black;
- cursor: pointer;
- }
- }
-
- .ng2-modal-footer{
- background-color: @tlv_color_t;
- padding: 17px 30px;
- clear: both;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- border-radius: 4px;
- button{
- margin: 0 12px 0 6px;
- }
- }
- }
- }
-
- .modal-background {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: #000;
- opacity: 0.5;
- z-index: 900;
- }
-}
-
-.xl {
- width: 1200px;
-}
-
-.l {
- width: 875px;
-}
-
-.md {
- width: 650px;
-}
-
-.sm {
- width: 552px;
-}
-
-.xsm {
- width: 432px;
-}
-
-body.modal-open {
- overflow: hidden;
-}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less
index e219d49aa4..e219d49aa4 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
index 246258e44f..53d1590b1c 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
@@ -18,13 +18,13 @@
* ============LICENSE_END=========================================================
*/
-import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactory, ComponentFactoryResolver } from '@angular/core'
-import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component';
-import { UiElementDropDownComponent, DropdownValue } from './elements-ui/dropdown/ui-element-dropdown.component';
-import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component';
-import {UiElementPopoverInputComponent} from "./elements-ui/popover-input/ui-element-popover-input.component";
+import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactoryResolver } from '@angular/core'
import {ValidationConfiguration} from "app/models";
-import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component";
+import {UiElementInputComponent} from "../form-components/input/ui-element-input.component";
+import {UiElementPopoverInputComponent} from "../form-components/popover-input/ui-element-popover-input.component";
+import {UiElementIntegerInputComponent} from "../form-components/integer-input/ui-element-integer-input.component";
+import {UiElementDropDownComponent, DropdownValue} from "../form-components/dropdown/ui-element-dropdown.component";
+import {PROPERTY_DATA} from "../../../../utils/constants";
@Component({
selector: 'dynamic-element',
@@ -33,7 +33,6 @@ import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-ele
entryComponents: [
UiElementInputComponent,
UiElementDropDownComponent,
- UiElementCheckBoxComponent,
UiElementPopoverInputComponent,
UiElementIntegerInputComponent
]
@@ -72,33 +71,30 @@ export class DynamicElementComponent {
}
// Factory to create component based on type or peroperty name.
- switch(this.type) {
- case 'list':
- case 'integer':
+ switch(true) {
+ case this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1:
+ 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 this.type == 'integer':
this.createComponent(UiElementIntegerInputComponent);
this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
break;
- case 'string':
- if (this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1) {
- 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);
- }
- else {
- this.createComponent(UiElementInputComponent);
- }
+ case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1:
+ case this.type == 'string':
+ this.createComponent(UiElementInputComponent);
break;
- case 'boolean':
- //this.createComponent(UiElementCheckBoxComponent);
+ case this.type == 'boolean':
this.createComponent(UiElementDropDownComponent);
// Build drop down values
let tmp = [];
- tmp.push(new DropdownValue('true','TRUE'));
- tmp.push(new DropdownValue('false','FALSE'));
+ tmp.push(new DropdownValue(true,'TRUE'));
+ tmp.push(new DropdownValue(false,'FALSE'));
this.cmpRef.instance.values = tmp;
break;
default:
@@ -131,7 +127,6 @@ export class DynamicElementComponent {
}
ngAfterContentInit() {
- //console.log("DynamicElementComponent: ngAfterContentInit: type: " + this.type + " value: " + this.value);
this.isViewInitialized = true;
this.updateComponent();
}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
index b57020a1d0..50b22505a9 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
@@ -19,32 +19,19 @@
*/
import { NgModule } from "@angular/core";
-import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component';
-import { UiElementDropDownComponent } from './elements-ui/dropdown/ui-element-dropdown.component';
-import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component';
-import { DynamicElementComponent } from "app/ng2/components/dynamic-element/dynamic-element.component";
-import { BrowserModule } from '@angular/platform-browser'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { UiElementPopoverInputComponent } from "./elements-ui/popover-input/ui-element-popover-input.component";
import {PopoverModule} from "../popover/popover.module";
import {TooltipModule} from "../tooltip/tooltip.module";
-import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component";
+import {DynamicElementComponent} from "./dynamic-element.component";
+import {FormElementsModule} from "../form-components/form-elements.module";
@NgModule({
declarations: [
DynamicElementComponent,
- UiElementInputComponent,
- UiElementCheckBoxComponent,
- UiElementDropDownComponent,
- UiElementPopoverInputComponent,
- UiElementIntegerInputComponent
],
imports: [
- BrowserModule,
- FormsModule,
PopoverModule,
- ReactiveFormsModule,
- TooltipModule
+ TooltipModule,
+ FormElementsModule
],
exports: [
DynamicElementComponent
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html
new file mode 100644
index 0000000000..872bf90329
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html
@@ -0,0 +1,8 @@
+<div class="checkbox-container {{checkboxStyle}}">
+ <div class="checkbox-animation"></div><!--[@checkEffect]="checked"-->
+ <label class="checkbox-label" >
+ <input type="checkbox" class="checkbox-hidden" [ngModel]="checked" (ngModelChange)="toggleState($event)" [disabled]="disabled" />
+ <div class="checkbox-icon"></div>
+ <span *ngIf="label" class="checkbox-label-content">{{label}}</span>
+ </label>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less
new file mode 100644
index 0000000000..9df2680b6f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less
@@ -0,0 +1,67 @@
+ @import '../../../../../../assets/styles/tlv-sprite';
+@import '../../../../../../assets/styles/sprite';
+
+
+.checkbox-container {
+ display:inline-block;
+ position:relative;
+ text-align: left;
+ height: 20px;
+
+
+ .checkbox-icon {
+ display: inline-block;
+ }
+
+ .checkbox-label {
+ font-weight: inherit;
+ font-size: inherit;
+ }
+
+ .checkbox-label-content {
+ margin-left:2px;
+ }
+
+ .checkbox-icon::before {
+ .tlv-sprite;
+ background-position: -10px -60px;
+ width: 14px;
+ height: 14px;
+ content: '';
+ display: inline-block;
+ margin-right: 0px;
+ margin-top: -2px;
+ vertical-align: middle;
+ }
+
+ input[type=checkbox].checkbox-hidden {
+ width:0;
+ height:0;
+ display:none;
+ &:checked ~ .checkbox-icon::before{
+ .sprite-new;
+ .filled-checkbox-icon
+ }
+ &[disabled] ~ .checkbox-icon::before {
+ /* TODO: add disabled styles here */
+ background-image: none;
+ background-color: #EFEFEF;
+ border-radius: 2px;
+ border: solid #CCC 1px;
+ }
+ }
+
+ .checkbox-animation {
+ background-color: #009fdb;
+ position: absolute;
+ left: 2px;
+ top: 4px;
+ width:10px;
+ height:10px;
+ border-radius: 50%;
+ z-index: 1;
+ pointer-events: none;
+ opacity:0;
+ }
+
+}
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
new file mode 100644
index 0000000000..c8da016174
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
@@ -0,0 +1,50 @@
+/*-
+ * ============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, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+//import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+
+@Component({
+ selector: 'checkbox',
+ templateUrl: './checkbox.component.html',
+ styleUrls: ['./checkbox.component.less'],
+ encapsulation: ViewEncapsulation.None
+ // animations: [
+ // trigger('checkEffect', [
+ // state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })),
+ // state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })),
+ // transition('1 => 0', animate('150ms ease-out')),
+ // transition('0 => 1', animate('150ms ease-in'))
+ // ])
+ // ]
+})
+export class CheckboxComponent {
+
+ @Input() checkboxStyle: string;
+ @Input() label: string;
+ @Input() checked: boolean;
+ @Input() disabled: boolean;
+ @Output() checkedChange: EventEmitter<any> = new EventEmitter<any>();
+
+ toggleState(newValue:boolean) {
+ this.checkedChange.emit(newValue);
+ }
+}
+
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts
new file mode 100644
index 0000000000..4ac7f2d7cd
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts
@@ -0,0 +1,48 @@
+/*-
+ * ============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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { CheckboxComponent } from './checkbox.component';
+
+
+@NgModule({
+ imports: [CommonModule, BrowserModule, FormsModule],
+ declarations: [CheckboxComponent],
+ bootstrap: [],
+ exports: [CheckboxComponent]
+})
+export class CheckboxModule { }
+
+/** README: **/
+
+/** USAGE Example:
+ *In page.module.ts: import CheckboxModule
+ *In HTML:
+ *<checkbox checkboxStyle="class-goes-here" [label]="'Text goes here'" [disabled]="variable-goes-here" [(checked)]="default-or-variable-goes-here" (checkedChange)="change-event-goes-here()"></checkbox>
+ */
+
+/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized)
+ *
+ * To create or override styles:
+ * Use /deep/ or >>> prefix to override styles via other components stylesheets
+ */
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
new file mode 100644
index 0000000000..c6b8384183
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
@@ -0,0 +1,3 @@
+<select name='{{name}}' [(ngModel)]="value" (change)="onSave()" [ngClass]="{'disabled':readonly}" data-tests-id="SelectType">
+ <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue">{{ddvalue.label||ddvalue}}</option>
+</select>
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less
index ea3e35140e..ea3e35140e 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
index 970c61531f..5abf32c61b 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
@@ -18,15 +18,14 @@
* ============LICENSE_END=========================================================
*/
-import { Component, EventEmitter, Output, Input } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
+import {Component, EventEmitter, Output, Input} from '@angular/core'
import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
export class DropdownValue {
- value:string;
+ value:any;
label:string;
- constructor(value:string,label:string) {
+ constructor(value:any,label:string) {
this.value = value;
this.label = label;
}
@@ -37,16 +36,16 @@ export class DropdownValue {
templateUrl: './ui-element-dropdown.component.html',
styleUrls: ['./ui-element-dropdown.component.less'],
})
-export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface {
+export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface {
@Input()
- values: DropdownValue[];
+ values: DropdownValue[]|string[];
constructor() {
super();
}
onSave() {
- this.baseEmitter.emit(JSON.parse(this.value));
+ this.baseEmitter.emit(this.value);
}
}
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
new file mode 100644
index 0000000000..e5bdf1f557
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
@@ -0,0 +1,42 @@
+/**
+ * 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";
+
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ PopoverModule,
+ ReactiveFormsModule,
+ TooltipModule,
+ CheckboxModule],
+
+ declarations: [UiElementDropDownComponent,
+ UiElementInputComponent,
+ UiElementIntegerInputComponent,
+ UiElementPopoverInputComponent,
+ UiElementBase,
+ RadioButtonComponent],
+
+ exports: [UiElementDropDownComponent,
+ UiElementInputComponent,
+ UiElementIntegerInputComponent,
+ UiElementPopoverInputComponent,
+ RadioButtonComponent,
+ TooltipModule,
+ CheckboxModule]
+})
+export class FormElementsModule { } \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
index 814ebfd28b..b7d7c859c7 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
@@ -1,6 +1,6 @@
<input
class="value-input"
- [ngClass]="{'error': control.invalid}"
+ [ngClass]="{'error': control.invalid, 'disabled':readonly}"
type="text"
[name]="name"
[(ngModel)]="value"
@@ -11,5 +11,4 @@
[formControl]="control"
tooltip="{{value}}"
[readonly]="readonly"
- [ngClass]="{'disabled':readonly}"
/>
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less
index d320c7ff8b..d320c7ff8b 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts
index fb3b3db859..fb3b3db859 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
index e5518d453f..9fbc9e1094 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
@@ -1,6 +1,6 @@
<input
class="value-input"
- [ngClass]="{'error': control.invalid}"
+ [ngClass]="{'error': control.invalid, 'disabled':readonly}"
type="text"
[name]="name"
[(ngModel)]="value"
@@ -11,5 +11,4 @@
[formControl]="control"
tooltip="{{value}}"
[readonly]="readonly"
- [ngClass]="{'disabled':readonly}"
/>
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less
index 8073c3858e..8073c3858e 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts
index 3339b605ca..1667f4393d 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts
@@ -30,7 +30,7 @@ import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.comp
export class UiElementIntegerInputComponent extends UiElementBase implements UiElementBaseInterface {
constructor() {
super();
- this.pattern = this.validation.validationPatterns.comment;
+ //this.pattern = this.validation.validationPatterns.comment;
}
onSave() {
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html
index 3bd51b4e36..3bd51b4e36 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less
index 5be443f7b6..5be443f7b6 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts
index 67eb8822b4..61688df3f0 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts
@@ -19,10 +19,9 @@
*/
import {Component, ViewChild, ElementRef, Input} from '@angular/core';
-import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component";
import {ButtonsModelMap, ButtonModel} from "app/models";
-import { PopoverContentComponent } from "app/ng2/components/popover/popover-content.component"
-import { PopoverComponent } from "app/ng2/components/popover/popover.component"
+import {PopoverContentComponent} from "../../popover/popover-content.component";
+import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component";
@Component({
selector: 'ui-element-popover-input',
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less
new file mode 100644
index 0000000000..b929486b10
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less
@@ -0,0 +1,42 @@
+@import './../../../../../../assets/styles/variables.less';
+.radio-buttons-container{
+ display: flex;
+ &.vertical{
+ flex-direction: column;
+ }
+ &.horizontal{
+ flex-direction: row;
+ }
+}
+.radio-button {
+ margin: 0 10px 10px 0;
+ display: flex;
+}
+
+input[type=radio] {
+ width:0;
+ height:0;
+ display:none;
+ &[disabled] ~ .radio-button {
+
+ }
+}
+
+.shown-radio-button{
+ border: @main_color_n solid 1px;
+ height: 14px;
+ width: 14px;
+ border-radius: 50%;
+ padding: 1px;
+ margin: auto 5px;
+ .selected{
+ background-color: @main_color_a;
+ height: 100%;
+ width: 100%;
+ border-radius: 50%;
+ }
+}
+span{
+ margin: auto 0;
+ color: @func_color_s;
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html
new file mode 100644
index 0000000000..6c927301db
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html
@@ -0,0 +1,8 @@
+<div class="radio-buttons-container {{direction}}">
+ <div *ngFor="let option of options" class="radio-button" [ngClass]="{'disabled':readonly}">
+ <input type="radio" [(ngModel)]="value" name="{{fieldName}}" value="{{option.value}}" [disabled]="readonly"/>
+ <div class="shown-radio-button" (click)="!readonly && select(option.value)"><div *ngIf="value==option.value" class="selected"></div></div>
+ <span>{{option.key}}</span>
+ </div>
+</div>
+
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts
new file mode 100644
index 0000000000..0f80e2ad44
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts
@@ -0,0 +1,29 @@
+/**
+ * Created by rc2122 on 9/4/2017.
+ */
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+import { RadioButtonModel } from 'app/models'
+import {UiElementBaseInterface, UiElementBase} from "../ui-element-base.component";
+
+@Component({
+ selector: 'radio-buttons',
+ templateUrl: './radio-buttons.component.html',
+ styleUrls: ['./radio-button.component.less']
+})
+export class RadioButtonComponent extends UiElementBase implements UiElementBaseInterface {
+
+ onSave() {
+ this.baseEmitter.emit(this.value);
+ }
+
+ @Input() options:Array<RadioButtonModel>;
+ @Input() readonly:boolean;
+ @Input() direction:string = 'vertical'; //get 'horizontal' | 'vertical'
+ value:any;
+
+ select(value:any) {
+ this.value = value;
+ this.baseEmitter.emit(this.value);
+ }
+}
+
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts
index 4bc35e814a..ae2013ff70 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts
@@ -41,11 +41,11 @@ export class UiElementBase {
this.value = value;
}
- protected name: string;
- protected type: string;
- protected value: any;
- protected pattern: any;
- protected readonly:boolean;
+ @Input() name: string;
+ @Input() type: string;
+ @Input() value: any;
+ @Input() pattern: any;
+ @Input() readonly:boolean;
constructor() {
//this.control = new FormControl('', [Validators.required]);
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.html b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
index a62aa114d9..a62aa114d9 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.less b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.less
index ddb9915176..006c3bfa43 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.less
@@ -1,4 +1,4 @@
-@import '../../../../assets/styles/variables';
+@import '../../../../../assets/styles/variables';
.tlv-loader-back {
background-color: @main_color_p;
position: fixed;
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
index f66aa551e2..f66aa551e2 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html
new file mode 100644
index 0000000000..54640c9414
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html
@@ -0,0 +1,3 @@
+<div class="w-sdc-menu-item" [ngClass]="styleClass" (click)="performAction()">
+ <ng-content></ng-content>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less
new file mode 100644
index 0000000000..ceb4409144
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less
@@ -0,0 +1,13 @@
+@import "../../../../../assets/styles/variables";
+
+.w-sdc-menu-item {
+ font-size: 14px;
+ line-height: 14px;
+ color: @main_color_m;
+ padding: 3px 6px;
+
+ &:hover {
+ cursor: pointer;
+ background-color: @main_color_c;
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
index f73afd42c7..8b2006634e 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.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,30 +18,27 @@
* ============LICENSE_END=========================================================
*/
-import { Component, ViewChild, ElementRef, ContentChildren, Input } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser'
-import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
- selector: 'ui-element-checkbox',
- templateUrl: './ui-element-checkbox.component.html',
- styleUrls: ['./ui-element-checkbox.component.less'],
+ selector: 'menu-item',
+ templateUrl: './menu-item.component.html',
+ styleUrls:['./menu-item.component.less']
})
-export class UiElementCheckBoxComponent extends UiElementBase implements UiElementBaseInterface {
+export class MenuItemComponent {
+ @Input() action:Function;
+ @Input() styleClass:any;
- constructor() {
- super();
- }
+ public parentMenu:any;
- ngAfterContentInit() {
- // Convert the value to boolean (instanceOf does not work, the type is undefined).
- if (this.value==='true' || this.value==='false') {
- this.value = this.value==='true'?true:false;
+ constructor() {
}
- }
- onSave() {
- this.baseEmitter.emit(this.value);
- }
+ performAction() {
+ this.action();
+ if (this.parentMenu && typeof(this.parentMenu.close) === 'function') {
+ this.parentMenu.close();
+ }
+ }
}
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html
new file mode 100644
index 0000000000..98c4d26fdd
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html
@@ -0,0 +1,9 @@
+<div
+ class="w-sdc-menu-list"
+ *ngIf="isOpen"
+ [ngClass]="styleClass"
+ [ngStyle]="{'left': position?.x || 0, 'top': position?.y || 0}">
+
+ <ng-content></ng-content>
+
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less
new file mode 100644
index 0000000000..1b45ea775c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less
@@ -0,0 +1,13 @@
+.w-sdc-menu-list {
+ position: fixed;
+ z-index: 100;
+
+ border-style: solid;
+ border-width: 1px;
+ border-color: #d8d8d8;
+ box-sizing: border-box;
+ background-color: #ffffff;
+ box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1);
+ width: 91px;
+ padding: 6px 0;
+}
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
new file mode 100644
index 0000000000..290c8d06af
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
@@ -0,0 +1,70 @@
+/*-
+ * ============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, ContentChildren, SimpleChanges, QueryList } from '@angular/core';
+import { MenuItemComponent } from "./menu-item.component";
+import { Point } from "app/models";
+
+@Component({
+ selector: 'menu-list',
+ templateUrl: './menu-list.component.html',
+ styleUrls:['./menu-list.component.less']
+})
+export class MenuListComponent {
+ @Input('open') inputOpen:boolean = false;
+ @Input('position') inputPosition:Point = new Point();
+ @Input() styleClass:any;
+
+ @ContentChildren(MenuItemComponent) menuItems:QueryList<MenuItemComponent>;
+
+ private position:Point;
+ private isOpen:boolean = false;
+
+ constructor() {
+ }
+
+ ngOnChanges(changes:SimpleChanges) {
+ if (changes.inputOpen) {
+ (changes.inputOpen.currentValue) ? this.open() : this.close();
+ }
+ if (changes.inputPosition) {
+ this.changePosition(changes.inputPosition.currentValue);
+ }
+ }
+
+ ngAfterContentInit() {
+ this.menuItems.forEach((c) => c.parentMenu = this);
+ this.menuItems.changes.subscribe((list) => {
+ list.forEach((c) => c.parentMenu = this);
+ });
+ }
+
+ open(): void {
+ this.isOpen = true;
+ }
+
+ close(): void {
+ this.isOpen = false;
+ }
+
+ changePosition(position:Point) {
+ this.position = position;
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts
new file mode 100644
index 0000000000..fdbbf59f48
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { MenuListComponent } from "./menu-list.component";
+import { MenuItemComponent } from "./menu-item.component";
+
+export {
+ MenuListComponent,
+ MenuItemComponent
+};
+
+@NgModule({
+ declarations: [
+ MenuListComponent,
+ MenuItemComponent
+ ],
+ imports: [CommonModule],
+ exports: [
+ MenuListComponent,
+ MenuItemComponent
+ ],
+ entryComponents: [ //need to add anything that will be dynamically created
+ MenuListComponent,
+ MenuItemComponent
+ ]
+})
+export class MenuListModule {
+}
diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html
index 433bd4fd6f..433bd4fd6f 100644
--- a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html
diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts
index c0d6673412..c0d6673412 100644
--- a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html
index d843867cdb..9a0fdf6bf4 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html
@@ -13,6 +13,7 @@
<button *ngFor="let button of input.buttons"
class="tlv-btn {{button.cssClass}}"
[disabled] = "button.getDisabled && button.getDisabled()"
+ [attr.data-tests-id] = "button.text"
(click) = "button.callback()">{{button.text}}</button>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less
new file mode 100644
index 0000000000..fac1ae74a8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less
@@ -0,0 +1,129 @@
+@import '../../../../../assets/styles/variables';
+@import '../../../../../assets/styles/mixins';
+@import '../../../../../assets/styles/sprite-old';
+/deep/ modal {
+ display: none;
+}
+
+.custom-modal {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 15007;
+ overflow: auto;
+ margin: auto;
+ display: flex;
+ align-items: center;
+
+ .ng2-modal-content {
+ background: #fff;
+ width: 100%;
+ box-shadow: 0 5px 15px rgba(0,0,0,.5);
+ border-radius: 4px;
+ .ng2-modal-body{
+ padding: 20px;
+ }
+
+ .ng2-modal-header{
+ .m_18_r;
+ font-weight: bold;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ height: 50px;
+ line-height: 50px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ text-align: left;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin: 0px 20px;
+
+ &.modal-type-standard {
+ border-bottom: solid 3px @main_color_a;
+ }
+
+ &.modal-type-error {
+ border-bottom: solid 3px @func_color_q;
+ }
+
+ &.modal-type-alert{
+ border-bottom: solid 3px @main_color_h;
+ }
+
+ .title{
+ .s_18_r;
+ -webkit-box-flex: 999;
+ -ms-flex-positive: 999;
+ flex-grow: 999;
+ }
+ .close-button{
+ .sprite;
+ .sprite.x-btn-black;
+ cursor: pointer;
+ }
+ }
+
+ .ng2-modal-footer{
+ background-color: @tlv_color_t;
+ padding: 17px 30px;
+ clear: both;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ border-radius: 4px;
+ button{
+ margin: 0 12px 0 6px;
+ }
+ }
+ }
+}
+
+.modal-background {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: #000;
+ opacity: 0.5;
+ z-index: 900;
+}
+
+
+.xl {
+ width: 1200px;
+}
+
+.l {
+ width: 875px;
+}
+
+.md {
+ width: 650px;
+}
+
+.sm {
+ width: 552px;
+}
+
+.xsm {
+ width: 432px;
+}
+
+body.modal-open {
+ overflow: hidden;
+}
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
index 89db8d1140..89db8d1140 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts
index 892f6993dd..c38e60194b 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts
@@ -1,8 +1,8 @@
import { NgModule } from "@angular/core";
import { CommonModule } from '@angular/common';
import { ModalService } from 'app/ng2/services/modal.service';
-import { ModalComponent } from "app/ng2/components/modal/modal.component";
import { ErrorMessageComponent } from "./error-message/error-message.component";
+import {ModalComponent} from "./modal.component";
@NgModule({
declarations: [
@@ -10,7 +10,7 @@ import { ErrorMessageComponent } from "./error-message/error-message.component";
ErrorMessageComponent
],
imports: [CommonModule],
- exports: [],
+ exports: [ModalComponent, ErrorMessageComponent],
entryComponents: [ //need to add anything that will be dynamically created
ModalComponent,
ErrorMessageComponent
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts
new file mode 100644
index 0000000000..0c1669ec4b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts
@@ -0,0 +1,10 @@
+/**
+ * Created by rc2122 on 9/27/2017.
+ */
+import {Component, Input} from "@angular/core";
+@Component({
+})
+export class WizardHeaderBaseComponent {
+
+ @Input() currentStepIndex:number;
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html
new file mode 100644
index 0000000000..9884b233ac
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html
@@ -0,0 +1,57 @@
+<div class="custom-modal {{input.size}}">
+ <div class="ng2-modal-content w-sdc-classic-top-line-modal">
+ <div class="ng2-modal-header modal-type-{{input.type}}">
+ <span class="title">{{ input.title }}</span>
+ <span class="close-button" (click)="close()"></span>
+ </div>
+ <div class="ng2-modal-body" >
+ <div class="multi-steps-wizard-component">
+ <header>
+ <div class="steps-header">
+ <div *ngFor="let step of steps; let i = index" class="step-title" [ngClass]="{'active':i == currentStepIndex}">
+ <div class="title-text">{{step.title}}</div>
+ <div class="line">
+ <div class="inner-line" [@displayLineAnimation]="i <= currentStepIndex && i!=0" [hidden]="!i || i > currentStepIndex"></div>
+ </div>
+ <div class="circle" [ngClass]="{'full-circle': i < currentStepIndex}"></div>
+ </div>
+ </div>
+ <div class="dynamic-header-container">
+ <div #dynamicHeaderContainer></div>
+ </div>
+ </header>
+ <div #dynamicContentContainer></div>
+ </div>
+ </div>
+
+ <div class="ng2-modal-footer">
+ <button *ngFor="let button of input.buttons"
+ class="tlv-btn {{button.cssClass}}"
+ [disabled] = "button.getDisabled && button.getDisabled()"
+ (click) = "button.callback()">{{button.text}}</button>
+ <div class="navigation-buttons">
+ <button (click)="prevStep()"
+ class="navigation-button tlv-btn outline blue"
+ [disabled]="dynamicContent.instance.preventBack()">
+ <div class="navigation-icon sprite-new blue-arrow-back"></div>
+ Back
+ </button>
+ <button (click)="nextStep()"
+ *ngIf="currentStepIndex < (steps.length - 1)"
+ [disabled]="dynamicContent.instance.preventNext()"
+ class="navigation-button tlv-btn blue">
+ Next
+ <div class="navigation-icon sprite-new white-arrow-next"></div>
+ </button>
+ <button (click)="callback();modalService.closeCurrentModal();"
+ *ngIf="currentStepIndex == (steps.length - 1)"
+ [disabled]="dynamicContent.instance.preventNext()"
+ class="tlv-btn blue">
+ Finish
+ </button>
+ </div>
+
+ </div>
+ </div>
+</div>
+<div class="modal-background"></div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
new file mode 100644
index 0000000000..3a2168aeb0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
@@ -0,0 +1,90 @@
+@import './../../../../../assets/styles/variables.less';
+
+@circle_size: 13px;
+
+.custom-modal{
+ font-family: @font-opensans-regular;
+}
+
+/deep/ multi-steps-wizard {
+ display: none;
+}
+
+.ng2-modal-header{
+ border: none !important;
+}
+
+.ng2-modal-body{
+ padding-top: 0 !important;
+}
+
+header{
+ margin-bottom: 10px;
+ .dynamic-header-container{
+ position: relative;
+ top: -9px;
+ }
+ .steps-header{
+ display: flex;
+ .step-title{
+ flex: 1;
+ .title-text{
+ width: 100%;
+ text-align: center;
+ line-height: 40px;
+ background-color: @tlv_color_u;
+ font-size: 13px;
+ }
+ .line{
+ width: calc(~'100% - @{circle_size}');
+ position: relative;
+ left: calc(~'(100% - @{circle_size})/2 * (-1)');
+ float: left;
+ height: 2px;
+ .inner-line{
+ background-color: @main_color_a;
+ height: 100%;
+ }
+ }
+ .circle{
+ margin:0 auto;
+ border: @main_color_o solid 1px;
+ height: @circle_size;
+ width: @circle_size;
+ border-radius: 50%;
+ position: relative;
+ top: -@circle_size/2;
+ background-color: @main_color_p;
+ z-index: 1;
+ }
+ .full-circle{
+ border-color: @main_color_a;
+ background-color: @main_color_a;
+ }
+ &.active{
+ color: @main_color_a;
+ font-family: @font-opensans-medium;
+ .circle{
+ border-color: @main_color_a;
+ }
+ }
+ }
+ }
+}
+
+.navigation-buttons{
+ padding-left: 6px;
+ border-left: 1px solid @main_color_a;
+ .navigation-button{
+ padding: 0 8px;
+ .navigation-icon{
+ margin: 3px 0;
+ &.blue-arrow-back{
+ float: left;
+ }
+ &.white-arrow-next{
+ float: right;
+ }
+ }
+ }
+}
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
new file mode 100644
index 0000000000..9219a30738
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
@@ -0,0 +1,78 @@
+/**
+ * Created by rc2122 on 8/15/2017.
+ */
+/*-
+ * ============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, ElementRef, forwardRef, Inject, Input, trigger, state, style,
+ transition, animate, ViewChild, ViewContainerRef, ComponentRef
+} from "@angular/core";
+import {StepModel} from "app/models";
+import {ModalService} from "../../../services/modal.service";
+import {ModalComponent} from "../modal/modal.component";
+import {WizardHeaderBaseComponent} from "./multi-steps-wizard-header-base.component";
+
+
+@Component({
+ selector: 'multi-steps-wizard',
+ templateUrl: './multi-steps-wizard.component.html',
+ styleUrls: ['./../modal/modal.component.less','./multi-steps-wizard.component.less'],
+ animations: [
+ trigger('displayLineAnimation', [
+ state('true', style({
+ width: '100%',
+ })),
+ state('false', style({
+ width:'0px',
+ })),
+ transition('* => *', animate('500ms')),
+ ]),
+ ],
+})
+export class MultiStepsWizardComponent extends ModalComponent {
+
+ @Input() steps:Array<StepModel>;
+ @Input() callback: Function;
+ @Input() data:any;
+ @Input() dynamicHeader: ComponentRef<WizardHeaderBaseComponent>;
+
+ @ViewChild('dynamicHeaderContainer', { read: ViewContainerRef }) dynamicHeaderContainer: ViewContainerRef;
+ constructor(@Inject(forwardRef(() => ModalService)) public modalService: ModalService, el: ElementRef ) {
+ super(el);
+ }
+
+ private currentStepIndex:number = 0;
+
+ nextStep = ():void => {
+ if(this.currentStepIndex + 1 < this.steps.length){
+ this.currentStepIndex++;
+ this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component);
+ this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex;
+ }
+ }
+
+ prevStep = ():void => {
+ if(this.currentStepIndex > 0){
+ this.currentStepIndex--;
+ this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component);
+ this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex;
+ }
+ }
+} \ No newline at end of file
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
new file mode 100644
index 0000000000..3db217d282
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
@@ -0,0 +1,22 @@
+/**
+ * Created by rc2122 on 8/15/2017.
+ */
+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";
+
+@NgModule({
+ declarations: [
+ MultiStepsWizardComponent
+ ],
+ imports: [CommonModule
+ ],
+ exports: [],
+ entryComponents: [
+ MultiStepsWizardComponent
+ ],
+ providers: []
+})
+export class MultiStepsWizardModule {
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts
new file mode 100644
index 0000000000..ac58cbd063
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts
@@ -0,0 +1,27 @@
+/*-
+ * ============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 { MenuType, RouteInfo } from './navbar.metadata';
+
+export const ROUTES: RouteInfo[] = [
+ { path: 'page1', title: 'Logo', menuType: MenuType.BRAND },
+ { path: 'page1', title: 'Page 1', menuType: MenuType.LEFT },
+ { path: 'page2', title: 'Page 2', menuType: MenuType.LEFT }
+];
diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html
new file mode 100644
index 0000000000..d783be4c27
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html
@@ -0,0 +1,23 @@
+<nav class="navbar navbar-dark">
+ <div class="clearfix">
+ <button (click)="isCollapsed = !isCollapsed"
+ class="navbar-toggler pull-xs-right hidden-sm-up" type="button"
+ aria-controls="bd-main-nav"
+ aria-label="Toggle navigation">
+ {{menuIcon}}
+ </button>
+ <a (click)="isCollapsed = true" class="navbar-brand hidden-sm-up" [routerLink]="[brandMenu.path]">
+ {{brandMenu.title}}
+ </a>
+ </div>
+ <div class="navbar-toggleable-xs navbar-collapse" id="bd-main-nav" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
+ <ul class="nav navbar-nav">
+ <li (click)="isCollapsed = true" class="nav-item" routerLinkActive="active">
+ <a class="navbar-brand hidden-xs-down" [routerLink]="[brandMenu.path]">{{brandMenu.title}}</a>
+ </li>
+ <li (click)="isCollapsed = true" *ngFor="let menuItem of menuItems" class="nav-item" routerLinkActive="active" [ngClass]="getMenuItemClasses(menuItem)">
+ <a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>
+ </li>
+ </ul>
+ </div>
+</nav>
diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less
new file mode 100644
index 0000000000..3e5165b798
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less
@@ -0,0 +1,11 @@
+.active {
+ color: #ffffff;
+}
+.navbar-toggler {
+ border: solid 1px #cccccc;
+ color: #ff0000;
+}
+.navbar {
+ background-color: #0000ff;
+ border-radius: 0;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts
new file mode 100644
index 0000000000..68a26c4780
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts
@@ -0,0 +1,52 @@
+/*-
+ * ============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, OnInit, ViewEncapsulation} from '@angular/core';
+import { ROUTES } from './navbar-routes.config';
+import { MenuType, RouteInfo } from './navbar.metadata';
+
+@Component({
+ selector: 'app-navbar',
+ templateUrl: './navbar.component.html',
+ styleUrls: [ './navbar.component.less' ],
+ encapsulation: ViewEncapsulation.None
+})
+export class NavbarComponent implements OnInit {
+ public menuItems: Array<RouteInfo>;
+ public brandMenu: RouteInfo;
+ isCollapsed = true;
+
+ constructor() {}
+
+ ngOnInit() {
+ this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND);
+ this.brandMenu = ROUTES.filter(menuItem => menuItem.menuType === MenuType.BRAND)[0];
+ }
+
+ public get menuIcon(): string {
+ return this.isCollapsed ? '☰' : '✖';
+ }
+
+ public getMenuItemClasses(menuItem: any) {
+ return {
+ 'pull-xs-right': this.isCollapsed && menuItem.menuType === MenuType.RIGHT
+ };
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts
new file mode 100644
index 0000000000..71cc3cb59f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts
@@ -0,0 +1,31 @@
+/*-
+ * ============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=========================================================
+ */
+
+export enum MenuType {
+ BRAND,
+ LEFT,
+ RIGHT
+}
+
+export interface RouteInfo {
+ path: string;
+ title: string;
+ menuType: MenuType;
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts
new file mode 100644
index 0000000000..4a754dfe99
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts
@@ -0,0 +1,36 @@
+/*-
+ * ============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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { NavbarComponent } from "./navbar.component";
+
+@NgModule({
+ imports: [
+ RouterModule,
+ CommonModule
+ ],
+ declarations: [ NavbarComponent ],
+ exports: [
+ NavbarComponent
+ ]
+})
+export class NavbarModule {}
diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
index 6d76f0ad06..6d76f0ad06 100644
--- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.less b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less
index 04cdd3914b..fbdec0b16b 100644
--- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less
@@ -1,6 +1,6 @@
-@import '../../../../assets/styles/variables';
-@import '../../../../assets/styles/mixins';
-@import '../../../../assets/styles/sprite-old';
+@import '../../../../../assets/styles/variables';
+@import '../../../../../assets/styles/mixins';
+@import '../../../../../assets/styles/sprite-old';
.popover .virtual-area {
height: 11px;
width: 100%;
diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
index 6eb36287d0..6eb36287d0 100644
--- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
diff --git a/catalog-ui/src/app/ng2/components/popover/popover.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts
index e976bc7bf2..e976bc7bf2 100644
--- a/catalog-ui/src/app/ng2/components/popover/popover.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts
diff --git a/catalog-ui/src/app/ng2/components/popover/popover.module.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts
index a9605c17b6..d8cacc1696 100644
--- a/catalog-ui/src/app/ng2/components/popover/popover.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts
@@ -32,8 +32,6 @@ import {PopoverContentComponent} from "./popover-content.component";
PopoverContentComponent
],
imports: [
- // PopoverComponent,
- // PopoverContentComponent
CommonModule
],
exports: [
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
new file mode 100644
index 0000000000..36629594b0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
@@ -0,0 +1,5 @@
+<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> \ 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
new file mode 100644
index 0000000000..751fceec35
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
@@ -0,0 +1,57 @@
+.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 {
+ border: 1px solid #cdcdcd;
+ border-radius: 4px;
+ border-right:none;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ outline:none;
+ padding:2px 50px 2px 10px;
+ color: #5a5a5a;
+ font-size: 1em;
+ font-style: italic;
+ }
+
+ .clear-search-x {
+ position:absolute;
+ right:40px;
+ top:5px;
+ padding: 0 5px;
+
+ &:hover {
+ border-radius:2px;
+ background-color: #ebebeb;
+ cursor:pointer;
+ }
+ }
+
+ .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;
+ height: 30px;
+ padding: 0;
+ cursor:pointer;
+ border:solid 1px #cdcdcd;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+
+ &:hover {
+ background-position:-126px -1275px;
+ }
+
+ &:active {
+ background-color: rgba(31, 171, 223, 0.88);
+ background-position:-45px -1275px;
+ border-left:none;
+ }
+ &:focus {
+ outline:none;
+ }
+
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts
new file mode 100644
index 0000000000..08bdf2030f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts
@@ -0,0 +1,32 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ selector: 'search-bar',
+ templateUrl: './search-bar.component.html',
+ styleUrls: ['./search-bar.component.less'],
+ encapsulation: ViewEncapsulation.None
+})
+export class SearchBarComponent {
+
+ @Input() placeholder: string;
+ @Input() class: string;
+ @Input() searchQuery: string;
+ @Output() searchChanged: EventEmitter<any> = new EventEmitter<any>();
+ @Output() searchButtonClicked: EventEmitter<string> = new EventEmitter<string>();
+
+ searchButtonClick = (): void => {
+ if (this.searchQuery) { //do not allow empty search
+ this.searchButtonClicked.emit(this.searchQuery);
+ }
+ }
+
+ searchQueryChange = ($event): void => {
+ this.searchChanged.emit($event);
+ }
+
+ private clearSearchQuery = (): void => {
+ this.searchQuery = "";
+ this.searchButtonClicked.emit(this.searchQuery);
+ }
+}
+
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
new file mode 100644
index 0000000000..c9769ba5ae
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
@@ -0,0 +1,6 @@
+<div class="search-with-autocomplete-container {{searchBarClass}}" [class.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>
+</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
new file mode 100644
index 0000000000..f1830846d3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
@@ -0,0 +1,34 @@
+.search-with-autocomplete-container{
+ &.autocomplete-visible {
+
+ .search-bar-input {
+ border-bottom-left-radius: 0;
+ }
+ .search-bar-button {
+ border-bottom-right-radius: 0;
+ }
+ .autocomplete-results {
+ border: solid 1px #d2d2d2;
+ border-top:none;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ background-color: #fff;
+ padding: 10px 20px;
+ width:100%;
+ position:absolute;
+ max-height: 200px;
+ overflow-y: scroll;
+ }
+
+ .autocomplete-result-item {
+ color:#5a5a5a;
+ padding: 5px 0;
+ cursor:pointer;
+
+ &:hover {
+ color: #999;
+ }
+ }
+ }
+}
+
diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts
new file mode 100644
index 0000000000..ced056d1fc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+import { SearchBarComponent } from '../search-bar/search-bar.component';
+
+@Component({
+ selector: 'search-with-autocomplete',
+ templateUrl: './search-with-autocomplete.component.html',
+ styleUrls: ['./search-with-autocomplete.component.less'],
+ encapsulation: ViewEncapsulation.None
+})
+export class SearchWithAutoCompleteComponent {
+
+ @Input() searchPlaceholder: string;
+ @Input() searchBarClass: string;
+ @Input() searchQuery: string;
+ @Input() autoCompleteValues: Array<string>;
+ @Output() searchChanged: EventEmitter<any> = new EventEmitter<any>();
+ @Output() searchButtonClicked: EventEmitter<string> = new EventEmitter<string>();
+
+ searchChange = (searchTerm: string) => {
+ this.searchQuery = searchTerm;
+ this.searchChanged.emit(searchTerm);
+ }
+
+ updateSearch = (searchTerm: string) => {
+ this.searchQuery = searchTerm;
+ this.searchButtonClicked.emit(searchTerm);
+ this.autoCompleteValues = [];
+ }
+}
+
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts
new file mode 100644
index 0000000000..bad7b80a51
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts
@@ -0,0 +1,38 @@
+/*-
+ * ============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 { ViewEncapsulation } from '@angular/core';
+
+@Component({
+ selector: 'tab',
+ template: `
+ <div *ngIf="active" class="tab-content">
+ <ng-content></ng-content>
+ </div>
+ `,
+ encapsulation: ViewEncapsulation.None
+})
+export class Tab {
+ @Input('tabTitle') title: string;
+ @Input() active:boolean = false;
+ @Input() indication?: number;
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html
new file mode 100644
index 0000000000..57cf5d46c9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html
@@ -0,0 +1,9 @@
+<div class="tabs {{tabStyle}}">
+ <div class="tab" *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active" [attr.data-tests-id]="tab.title">
+ {{tab.title}}
+ <div class="tab-indication" *ngIf="tab.indication" [@indicatorAnimation]="tab.indication">{{tab.indication}}</div>
+ </div>
+</div>
+<div class="tab-content-container">
+ <ng-content></ng-content>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
new file mode 100644
index 0000000000..f7b18b1cc8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
@@ -0,0 +1,85 @@
+@import '../../../../../assets/styles/variables';
+
+tab {
+ height: 100%;
+}
+
+.tabs {
+ display:flex;
+ flex: 0 0 auto;
+ flex-direction:row;
+}
+
+.tab {
+ flex: 1 0 auto;
+ cursor: pointer;
+ padding: .5em;
+}
+
+.tab-content-container {
+ flex: 1;
+ width:100%;
+ overflow-y:hidden;
+ overflow-x:hidden;
+}
+
+.tab-content {
+ height:100%;
+}
+
+/*Tab styles*/
+.tabs{
+ &.round-tabs .tab{
+ background-color: #f8f8f8;
+ color: #959595;
+ border: solid 1px #d2d2d2;
+ border-bottom:none;
+ border-left:none;
+ position:relative;
+
+ &:first-child {
+ border-left:solid 1px #d2d2d2;
+ }
+
+ &.active {
+ background-color:#009fdb;
+ color:#e9e9e9;
+ border-color:#009fdb;
+ }
+
+ .tab-indication {
+ position: absolute;
+ top: -10px;
+ background-color: #009fdb;
+ right: 10px;
+ padding: 2px 0;
+ border-radius: 15px;
+ border: solid 1px #d2d2d2;
+ color:white;
+ width: 25px;
+ height: 25px;
+ text-align: center;
+
+ }
+ }
+
+ &.simple-tabs .tab {
+ font-size: 12px;
+ color: @main_color_n;
+
+ &:after {
+ display:block;
+ content: '';
+ border-bottom: 2px solid @main_color_a;
+ transform: scaleX(0);
+ transition: transform 200ms ease-in-out;
+ }
+
+ &.active {
+ color: @main_color_a;
+ &:after {
+ transform: scaleX(1.2);
+ }
+ }
+ }
+}
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
new file mode 100644
index 0000000000..21d2bbad43
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
@@ -0,0 +1,78 @@
+/*-
+ * ============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, 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';
+
+@Component({
+ selector: 'tabs',
+ templateUrl: './tabs.component.html',
+ styleUrls: ['./tabs.component.less'],
+ encapsulation: ViewEncapsulation.None,
+ animations: [
+ trigger('indicatorAnimation', [
+ transition(':enter', [style({ transform: 'translateY(-50%)', opacity: 0 }), animate('250ms', style({ transform: 'translateY(0)', opacity: 1 })) ]),
+ transition(':leave', [style({ opacity: 1 }), animate('500ms', style({ opacity: 0 })) ])
+ ])
+ ]
+})
+export class Tabs implements AfterContentInit {
+
+ @Input() tabStyle: string;
+ @Input() hideIndicationOnTabChange?: boolean = false;
+ @ContentChildren(Tab) tabs: QueryList<Tab>;
+ @Output() tabChanged: EventEmitter<Tab> = new EventEmitter<Tab>();
+
+
+ ngAfterContentInit() {
+ //after contentChildren are set, determine active tab. If no active tab set, activate the first one
+ let activeTabs = this.tabs.filter((tab) => tab.active);
+
+ if (activeTabs.length === 0) {
+ this.selectTab(this.tabs.first);
+ }
+ }
+
+ selectTab(tab: Tab) {
+ //activate the tab the user clicked.
+ this.tabs.toArray().forEach(tab => {
+ tab.active = false;
+ if (this.hideIndicationOnTabChange && tab.indication) {
+ tab.indication = null;
+ }
+ });
+ tab.active = true;
+ this.tabChanged.emit(tab);
+ }
+
+ triggerTabChange(tabTitle) {
+ this.tabs.toArray().forEach(tab => {
+ tab.active = (tab.title == tabTitle) ? true : false;
+ });
+ }
+
+ setTabIndication(tabTitle:string, indication?:number) {
+ let selectedTab: Tab = this.tabs.toArray().find(tab => tab.title == tabTitle);
+ selectedTab.indication = indication || null;
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts
new file mode 100644
index 0000000000..1300c41a90
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts
@@ -0,0 +1,55 @@
+/*-
+ * ============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 { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+
+import { Tabs } from './tabs.component';
+import { Tab } from './tab/tab.component';
+
+
+@NgModule({
+ imports: [BrowserModule],
+ declarations: [Tabs, Tab],
+ bootstrap: [],
+ exports: [Tabs, Tab]
+})
+export class TabModule { }
+
+/** README: **/
+
+/** USAGE Example:
+ *In page.module.ts: import TabModule
+ *In HTML:
+ *<tabs tabStyle="class-goes-here" (tabChanged)="tabChangedEvent($event) [hideIndicationOnTabChange]="optional-boolean">
+ * <tab [tabTitle]="'Tab 1'">Content of tab 1</tab>
+ * <tab tabTitle="Tab 2" >Content of tab 2</tab>
+ * ...
+ *</tabs>
+ */
+
+/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized)
+ * Existing options:
+ * tabStyle="round-tabs" will provide generic rounded tab look
+ *
+ * To create or override styles:
+ * Parent div has class ".tabs". Each tab has class ".tab". Active tab has class ".active".
+ * Use /deep/ or >>> prefix to override styles via other components stylesheets
+ */
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html
index 1fbf45e39f..1fbf45e39f 100644
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less
index 1ff496f840..1ff496f840 100644
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts
index 4dcb64c499..4dcb64c499 100644
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts
index 79d35c6e0e..79d35c6e0e 100644
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts
index 84a3987081..24478cd716 100644
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts
@@ -29,7 +29,6 @@ import {CommonModule} from "@angular/common";
TooltipContentComponent,
],
imports: [
- CommonModule
],
exports: [
TooltipComponent,
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
new file mode 100644
index 0000000000..526096524c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
@@ -0,0 +1,80 @@
+/*-
+ * ============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 { 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 {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";
+
+@NgModule({
+ declarations: [
+ LoaderComponent,
+ SearchBarComponent,
+ SearchWithAutoCompleteComponent
+ ],
+
+ imports: [
+ BrowserModule,
+ FormsModule,
+ CommonModule,
+ DynamicElementModule,
+ NavbarModule,
+ FormElementsModule,
+ ModalModule,
+ PopoverModule,
+ TabModule,
+ TooltipModule,
+ MultiStepsWizardModule,
+ MenuListModule,
+ MenuListNg2Module
+ ],
+ exports: [
+ LoaderComponent,
+ MultiStepsWizardModule,
+ SearchBarComponent,
+ SearchWithAutoCompleteComponent,
+ DynamicElementModule,
+ NavbarModule,
+ FormElementsModule,
+ ModalModule,
+ PopoverModule,
+ TabModule,
+ TooltipModule,
+ MenuListModule,
+ MenuListNg2Module
+ ],
+
+ entryComponents: [SearchWithAutoCompleteComponent]
+})
+
+export class UiElementsModule {}