From 51d50f0ef642e0f996a1c8b8d2ef4838bdfec892 Mon Sep 17 00:00:00 2001
From: Tal Gitelman <tg851x@intl.att.com>
Date: Sun, 10 Dec 2017 18:55:03 +0200
Subject: Final commit to master merge from

Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507
Issue-ID: SDC-714
Signed-off-by: Tal Gitelman <tg851x@intl.att.com>
---
 .../ui-element-popover-input.component.html        | 26 ++++++++++
 .../ui-element-popover-input.component.less        | 36 ++++++++++++++
 .../ui-element-popover-input.component.ts          | 57 ++++++++++++++++++++++
 3 files changed, 119 insertions(+)
 create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html
 create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less
 create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts

(limited to 'catalog-ui/src/app/ng2/components/ui/form-components/popover-input')

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);
+    }
+}
-- 
cgit 1.2.3-korg