1 files changed, 94 insertions, 0 deletions
diff --git a/src/app/shared/directives/collapse.component.ts b/src/app/shared/directives/collapse.component.ts
new file mode 100644
index 0000000..bf9c306
--- /dev/null
+++ b/src/app/shared/directives/collapse.component.ts
@@ -0,0 +1,94 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Directive, HostBinding, Input} from '@angular/core';
+
+
+@Directive({selector: '[collapse]'})
+export class Collapse {
+    // style
+    @HostBinding('style.height')
+    private height: string;
+    // shown
+    @HostBinding('class.in')
+    @HostBinding('attr.aria-expanded')
+    private isExpanded: boolean = true;
+    // hidden
+    @HostBinding('attr.aria-hidden')
+    private isCollapsed: boolean = false;
+    // stale state
+    @HostBinding('class.collapse')
+    private isCollapse: boolean = true;
+    // animation state
+    @HostBinding('class.collapsing')
+    private isCollapsing: boolean = false;
+
+    constructor() {
+    }
+
+    private get collapse(): boolean {
+        return this.isExpanded;
+    }
+
+    @Input()
+    private set collapse(value: boolean) {
+        this.isExpanded = value;
+        this.toggle();
+    }
+
+    toggle() {
+        if (this.isExpanded) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    hide() {
+        this.isCollapse = false;
+        this.isCollapsing = true;
+
+        this.isExpanded = false;
+        this.isCollapsed = true;
+        setTimeout(() => {
+            this.height = '0';
+            this.isCollapse = true;
+            this.isCollapsing = false;
+        }, 4);
+    }
+
+    show() {
+        this.isCollapse = false;
+        this.isCollapsing = true;
+
+        this.isExpanded = true;
+        this.isCollapsed = false;
+        setTimeout(() => {
+            this.height = 'auto';
+
+            this.isCollapse = true;
+            this.isCollapsing = false;
+        }, 4);
+    }
+}