summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/shared/checkbox
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
committerMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
commited64b5edff15e702493df21aa3230b81593e6133 (patch)
treea4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/src/app/ng2/shared/checkbox
parent280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff)
[SDC-29] catalog 1707 rebase commit.
Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/shared/checkbox')
-rw-r--r--catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html8
-rw-r--r--catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less64
-rw-r--r--catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts30
-rw-r--r--catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts28
4 files changed, 130 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html
new file mode 100644
index 0000000000..efe830d6e0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html
@@ -0,0 +1,8 @@
+<div class="checkbox-container {{checkboxStyle}}">
+ <div class="checkbox-animation" [@checkEffect]="checked"></div>
+ <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/shared/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less
new file mode 100644
index 0000000000..7ed8a22194
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less
@@ -0,0 +1,64 @@
+ @import '../../../../assets/styles/tlv-sprite';
+
+.checkbox-container {
+ display:inline-block;
+ position:relative;
+ text-align: left;
+ height: 20px;
+
+
+ .checkbox-icon {
+ display: inline-block;
+ }
+
+ .checkbox-label {
+ font-weight: normal;
+ 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{
+ background-position: -10px -120px;
+ }
+ &[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: 5px;
+ width:10px;
+ height:10px;
+ border-radius: 50%;
+ z-index: 1;
+ pointer-events: none;
+ opacity:0;
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts
new file mode 100644
index 0000000000..5a9954c336
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts
@@ -0,0 +1,30 @@
+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/shared/checkbox/checkbox.module.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts
new file mode 100644
index 0000000000..116aa7f025
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts
@@ -0,0 +1,28 @@
+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
+ */ \ No newline at end of file