feat(icon animation): add it via upgrading rb-icon to v0.0.13

Also import and use Converters from rb-base available in v0.0.8.

src/client/scripts/rb-popover.js

@@ -2,7 +2,8 @@
  * RB-POPOVER
  *************/
  import { RbBase, props, html } from '../../rb-base/scripts/rb-base.js';
- import view                    from '../../rb-base/scripts/public/view/directives.js';
+ import Converter               from '../../rb-base/scripts/public/props/converters.js';
+ import View                    from '../../rb-base/scripts/public/view/directives.js';
  import template                from '../views/rb-popover.html';
  import '../../rb-button/scripts/rb-button.js';
 
@@ -54,17 +55,27 @@
 			kind: props.string,
 			pin: props.boolean, // popover only closes by clicking trigger
 			unstyled: props.boolean,
+			iconFlip: props.string,
 			iconKind: props.string,
 			iconSize: props.number,
+			iconSpeed: props.number,
+			iconRotate: props.number,
 			iconSource: props.string,
 			iconValign: props.string,
 			position: Object.assign({}, props.string, {
 				default: 'right'
 			}),
 			showPopover: Object.assign({}, props.boolean, {
-				deserialize(val) {
-					return /^true$/i.test(val);
-				}
+				deserialize: Converter.boolean
+			}),
+			iconBurst: Object.assign({}, props.boolean, {
+				deserialize: Converter.valueless
+			}),
+			iconPulse: Object.assign({}, props.boolean, {
+				deserialize: Converter.valueless
+			}),
+			iconSpin: Object.assign({}, props.boolean, {
+				deserialize: Converter.valueless
 			})
 		}
 	}

src/client/views/rb-popover.html

@@ -8,19 +8,25 @@
 	${state.position ? state.position : props.position}">
 	<rb-button
 		kind="text"
+		?icon-burst="${props.iconBurst}"
+		?icon-pulse="${props.iconPulse}"
+		?icon-spin="${props.iconSpin}"
 		icon-kind="${props.iconKind || 'info-circle'}"
-		icon-size="${view.ifDefined(props.iconSize || undefined)}"
+		icon-size="${View.ifDefined(props.iconSize || undefined)}"
+		icon-flip="${View.ifDefined(props.iconFlip || undefined)}"
+		icon-speed="${View.ifDefined(props.iconSpeed || undefined)}"
+		icon-rotate="${View.ifDefined(props.iconRotate || undefined)}"
 		icon-source="${!props.iconKind ? 'solid' : props.iconSource}"
-		icon-valign="${view.ifDefined(props.iconValign || undefined)}"
+		icon-valign="${View.ifDefined(props.iconValign || undefined)}"
 		@click="${this._clickToggle.bind(this)}"
 		@mouseover="${this._hoverToggle.bind(this)}">
 	</rb-button>
 	<div
-		style="${view.styleMap(state.coords.popover)}"
-		class="popover ${view.classMap({
+		style="${View.styleMap(state.coords.popover)}"
+		class="popover ${View.classMap({
 			hidden: !props.showPopover || !this.rb.view.isReady
 		})}">
-		<em class="pointer" style="${view.styleMap(state.coords.pointer)}"></em>
+		<em class="pointer" style="${View.styleMap(state.coords.pointer)}"></em>
 		${props.caption ? html`<h3 class="caption">${props.caption}</h3>` : null}
 		<div class="body">
 			<slot @slotchange="${this._hasContent.bind(this)}"></slot>