aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/ui/form-components
diff options
context:
space:
mode:
authorTal Gitelman <tg851x@intl.att.com>2017-12-10 18:55:03 +0200
committerTal Gitelman <tg851x@intl.att.com>2017-12-10 19:33:38 +0200
commit51d50f0ef642e0f996a1c8b8d2ef4838bdfec892 (patch)
tree3ac236a864d74d19b0f5c9020891a7a7e5c31b44 /catalog-ui/src/app/ng2/components/ui/form-components
parentb5cc2e0695f195716d6ccdc65e73807a6632ec70 (diff)
Final commit to master merge from
Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507 Issue-ID: SDC-714 Signed-off-by: Tal Gitelman <tg851x@intl.att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/form-components')
-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.less11
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts51
-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.html14
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less17
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts41
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html14
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less17
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts41
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html26
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less36
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts57
-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.ts55
21 files changed, 677 insertions, 0 deletions
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/ui/form-components/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less
new file mode 100644
index 0000000000..ea3e35140e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less
@@ -0,0 +1,11 @@
+@import '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-dropdown {
+
+ select {
+ text-indent: 6px;
+ border: solid 1px @main_color_o;
+ width: 100%;
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
new file mode 100644
index 0000000000..5abf32c61b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
@@ -0,0 +1,51 @@
+/*-
+ * ============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, EventEmitter, Output, Input} from '@angular/core'
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+
+export class DropdownValue {
+ value:any;
+ label:string;
+
+ constructor(value:any,label:string) {
+ this.value = value;
+ this.label = label;
+ }
+}
+
+@Component({
+ selector: 'ui-element-dropdown',
+ templateUrl: './ui-element-dropdown.component.html',
+ styleUrls: ['./ui-element-dropdown.component.less'],
+})
+export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface {
+ @Input()
+ values: DropdownValue[]|string[];
+
+ constructor() {
+ super();
+ }
+
+ onSave() {
+ 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/ui/form-components/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
new file mode 100644
index 0000000000..b7d7c859c7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
@@ -0,0 +1,14 @@
+<input
+ class="value-input"
+ [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+ type="text"
+ [name]="name"
+ [(ngModel)]="value"
+ (change)="onSave()"
+ [attr.maxlength]="validation.propertyValue.max"
+ [attr.minlength]="validation.propertyValue.min"
+ [pattern]="pattern"
+ [formControl]="control"
+ tooltip="{{value}}"
+ [readonly]="readonly"
+ />
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less
new file mode 100644
index 0000000000..d320c7ff8b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less
@@ -0,0 +1,17 @@
+@import '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-input {
+
+ input {
+ text-indent: 6px;
+ border: solid 1px @main_color_o;
+ }
+
+ .error {
+ border: solid 1px @func_color_q;
+ color: @func_color_q;
+ outline: none;
+ box-sizing: border-box;
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts
new file mode 100644
index 0000000000..fb3b3db859
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts
@@ -0,0 +1,41 @@
+/*-
+ * ============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, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser'
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+
+@Component({
+ selector: 'ui-element-input',
+ templateUrl: './ui-element-input.component.html',
+ styleUrls: ['./ui-element-input.component.less'],
+})
+export class UiElementInputComponent extends UiElementBase implements UiElementBaseInterface {
+ constructor() {
+ super();
+ this.pattern = this.validation.validationPatterns.comment;
+ }
+
+ onSave() {
+ if (!this.control.invalid){
+ this.baseEmitter.emit(this.value);
+ }
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/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
new file mode 100644
index 0000000000..9fbc9e1094
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
@@ -0,0 +1,14 @@
+<input
+ class="value-input"
+ [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+ type="text"
+ [name]="name"
+ [(ngModel)]="value"
+ (change)="onSave()"
+ [attr.maxlength]="validation.propertyValue.max"
+ [attr.minlength]="validation.propertyValue.min"
+ [pattern]="pattern"
+ [formControl]="control"
+ tooltip="{{value}}"
+ [readonly]="readonly"
+/>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/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
new file mode 100644
index 0000000000..8073c3858e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less
@@ -0,0 +1,17 @@
+@import '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-integer-input {
+
+ input {
+ text-indent: 6px;
+ border: solid 1px @main_color_o;
+ }
+
+ .error {
+ border: solid 1px @func_color_q;
+ color: @func_color_q;
+ outline: none;
+ box-sizing: border-box;
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/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
new file mode 100644
index 0000000000..1667f4393d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts
@@ -0,0 +1,41 @@
+/*-
+ * ============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, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser'
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+
+@Component({
+ selector: 'ui-element-integer-input',
+ templateUrl: './ui-element-integer-input.component.html',
+ styleUrls: ['./ui-element-integer-input.component.less'],
+})
+export class UiElementIntegerInputComponent extends UiElementBase implements UiElementBaseInterface {
+ constructor() {
+ super();
+ //this.pattern = this.validation.validationPatterns.comment;
+ }
+
+ onSave() {
+ if (!this.control.invalid){
+ this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value);
+ }
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/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
new file mode 100644
index 0000000000..3bd51b4e36
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html
@@ -0,0 +1,26 @@
+<div class="popover-input-wrapper" tooltip="{{value}}">
+ <input
+ class="value-input"
+ type="text"
+ [ngClass]="{'error': control.invalid}"
+ [name]="name"
+ [value]="value!=undefined?value:''"
+ disabled
+ />
+ <button [popover]="popoverForm" [ngClass]="{'disabled':readonly}">Edit</button>
+</div>
+
+<popover-content #popoverForm [title]="name" [buttons]="buttonsArray" [placement]="'top'" [closeOnClickOutside]="true">
+ <div class="edit-subnet-wrapper">
+ <textarea rows="5"
+ #textArea
+ class="subnet-value"
+ [ngClass]="{'error': control.invalid}"
+ [(ngModel)]="value"
+ [attr.maxlength]="validation.propertyValue.max"
+ [attr.minlength]="validation.propertyValue.min"
+ [pattern]="pattern"
+ [formControl]="control"
+ ></textarea>
+ </div>
+</popover-content>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/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
new file mode 100644
index 0000000000..5be443f7b6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less
@@ -0,0 +1,36 @@
+@import '../../../../../../assets/styles/variables';
+
+.popover-input-wrapper {
+ display: flex;
+}
+
+/deep/ ui-element-popover-input {
+
+ .popover {
+ max-width: 350px;
+ width: 350px;
+ }
+
+ .edit-subnet-wrapper {
+ padding: 12px;
+
+ .subnet-value {
+ width: 100%;
+ resize: none;
+ }
+ }
+
+ input {
+ padding-right: 6px;
+ padding-left: 6px;
+ border: solid 1px @main_color_o;
+ }
+
+ .error {
+ border: solid 1px @func_color_q;
+ color: @func_color_q;
+ outline: none;
+ box-sizing: border-box;
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/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
new file mode 100644
index 0000000000..61688df3f0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts
@@ -0,0 +1,57 @@
+/*-
+ * ============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, ViewChild, ElementRef, Input} from '@angular/core';
+import {ButtonsModelMap, ButtonModel} from "app/models";
+import {PopoverContentComponent} from "../../popover/popover-content.component";
+import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component";
+
+@Component({
+ selector: 'ui-element-popover-input',
+ templateUrl: './ui-element-popover-input.component.html',
+ styleUrls: ['./ui-element-popover-input.component.less']
+})
+export class UiElementPopoverInputComponent extends UiElementBase implements UiElementBaseInterface {
+ @ViewChild('textArea') textArea: ElementRef;
+ @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent;
+
+ saveButton: ButtonModel;
+ buttonsArray: ButtonsModelMap;
+
+ onSave = ():void => {
+ if (!this.control.invalid){
+ this.baseEmitter.emit(this.value);
+ this.popoverContentComponent.hide();
+ }
+ }
+
+ constructor() {
+ super();
+ // Create Save button and insert to buttons map
+ this.saveButton = new ButtonModel('save', 'blue', this.onSave);
+ this.buttonsArray = { 'test': this.saveButton };
+
+ // Define the regex pattern for this controller
+ this.pattern = this.validation.validationPatterns.comment;
+
+ // Disable / Enable button according to validation
+ //this.control.valueChanges.subscribe(data => this.saveButton.disabled = this.control.invalid);
+ }
+}
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/ui/form-components/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts
new file mode 100644
index 0000000000..ae2013ff70
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.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 { Component, EventEmitter, Input, Output } from '@angular/core'
+import { ValidationConfiguration } from "app/models";
+import { FormControl, Validators } from '@angular/forms';
+
+export interface UiElementBaseInterface {
+ onSave();
+}
+
+@Component({
+ template: ``,
+ styles: []
+})
+export class UiElementBase {
+
+ protected validation = ValidationConfiguration.validation;
+ protected control: FormControl;
+
+ // Two way binding for value (need to write the "Change" word like this)
+ @Output('valueChange') baseEmitter: EventEmitter<string> = new EventEmitter<any>();
+ @Input('value') set setValueValue(value) {
+ this.value = value;
+ }
+
+ @Input() name: string;
+ @Input() type: string;
+ @Input() value: any;
+ @Input() pattern: any;
+ @Input() readonly:boolean;
+
+ constructor() {
+ //this.control = new FormControl('', [Validators.required]);
+ this.control = new FormControl('', []);
+ }
+
+}