Final commit to master merge from

Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507
Issue-ID: SDC-714
Signed-off-by: Tal Gitelman <tg851x@intl.att.com>

4 files changed, 173 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
+ */