Zippy UI enhancement

lib/shared/components/Zippy/zippy.html

@@ -1,11 +1,13 @@
-<div class="zippy zippy-{{type}}" [ngClass]="{'zippy-empty': empty}">
+<div class="zippy zippy-{{type}}" [ngClass]="{'zippy-empty': empty, 'zippy-hidden': !visible}">
-  <div class="zippy-title" (click)="toggle()">
+  <div *ngIf='!headless' class="zippy-title" (click)="toggle()">
-    <span class="zippy-indicator">{{ visible ? '&#9662;' : '&#9656;' }}</span>
+    <span class="zippy-indicator">
+      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
+        <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
+      </svg>
+    </span>
     {{title}}
   </div>
-  <div class="zippy-content" @openClose="visible ? 'expanded' : 'collapsed'">
+  <div class="zippy-content">
-    <div class="zippy-content-wrap">
     <ng-content></ng-content>
   </div>
 </div>
-</div>

lib/shared/components/Zippy/zippy.scss

@@ -38,19 +38,42 @@ $zippy-redirect-bg-color: rgba($zippy-redirect-color, .08);
     background-color: $zippy-info-bg-color;
   }
 }
+.zippy-indicator svg {
+  height: 1.2em;
+  vertical-align: middle;
+  transition: all 0.3s ease;
+  transform: rotateZ(-180deg);
+}
+
+.zippy-hidden > .zippy-title svg {
+  transform: rotateZ(0);
+}
+
+.zippy-title polygon {
+  .zippy-success > & {
+    fill: $zippy-success-color;
+  }
+  .zippy-error > & {
+    fill: $zippy-error-color;
+  }
+
+  .zippy-redirect > & {
+    fill: $zippy-redirect-color;
+  }
+
+  .zippy-info > & {
+    fill: $zippy-info-color;
+  }
+}
 
 span.zippy-indicator {
+  width: 1em;
   font-size: 1.2em;
-  margin-right: 0.2em;
+  text-align: center;
-  position: relative;
+  display: inline-block;
-  top: 0;
 }
 
 .zippy-content {
-  overflow: hidden;
-}
-
-.zippy-content-wrap {
   padding: 15px 0;
 }
 
@@ -60,15 +83,21 @@ span.zippy-indicator {
   }
 
   .zippy-indicator {
+    svg {
       display: none;
     }
+    &:before {
+      content: "—";
+      font-weight: bold;
+    }
+  }
 
   .zippy-content {
     display: none;
   }
 }
 
-.zippy-hidden {
+.zippy-hidden > .zippy-content {
   overflow: hidden;
   visibility: hidden;
   height: 0;

lib/shared/components/Zippy/zippy.ts

@@ -1,31 +1,20 @@
 'use strict';
 
-import { Component, EventEmitter, Output, Input,
+import { Component, EventEmitter, Output, Input } from '@angular/core';
-   trigger, state, animate, transition, style } from '@angular/core';
 import { CORE_DIRECTIVES } from '@angular/common';
 
 @Component({
   selector: 'zippy',
   templateUrl: './zippy.html',
   styleUrls: ['./zippy.css'],
-  directives: [CORE_DIRECTIVES],
+  directives: [CORE_DIRECTIVES]
-  animations: [
-    trigger('openClose', [
-      state('collapsed, void',
-        style({ height: '0px' })),
-      state('expanded',
-        style({ height: '*' })),
-      transition('collapsed <=> expanded', [
-        animate(200)
-      ])
-    ])
-  ],
 })
 export class Zippy {
   @Input() type = 'general';
   @Input() visible = false;
   @Input() empty = false;
   @Input() title;
+  @Input() headless: boolean = false;
   @Output() open = new EventEmitter();
   @Output() close = new EventEmitter();
   toggle() {