aboutsummaryrefslogtreecommitdiffstats
path: root/src/app/shared/directives/collapse.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/shared/directives/collapse.component.ts')
-rw-r--r--src/app/shared/directives/collapse.component.ts94
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);
+ }
+}