@nyaruka/temba-components 0.29.0 → 0.30.0

package/static/icons/style.css

@@ -19,10 +19,6 @@ Single-colored icons can be modified like so:
   width: 1.125em;
 }
 
-.icon-users1 {
-  width: 1.125em;
-}
-
 .icon-channel-kannel {
   width: 0.7734375em;
 }

package/static/icons/symbol-defs.svg

@@ -1,7 +1,7 @@
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
-<symbol id="icon-language" viewBox="0 0 20 20">
-<path d="M19.753 10.909c-0.624-1.707-2.366-2.726-4.661-2.726-0.090 0-0.176 0.002-0.262 0.006l-0.016-2.063c0 0 3.41-0.588 3.525-0.607s0.133-0.119 0.109-0.231c-0.023-0.111-0.167-0.883-0.188-0.976-0.027-0.131-0.102-0.127-0.207-0.109s-3.25 0.461-3.25 0.461-0.012-1.953-0.013-2.078c-0.001-0.125-0.069-0.158-0.194-0.156s-0.92 0.014-1.025 0.016c-0.105 0.002-0.164 0.049-0.162 0.148s0.033 2.307 0.033 2.307-3.061 0.527-3.144 0.543c-0.084 0.014-0.17 0.053-0.151 0.143s0.19 1.094 0.208 1.172c0.018 0.080 0.072 0.129 0.188 0.107 0.115-0.019 2.924-0.504 2.924-0.504l0.035 2.018c-1.077 0.281-1.801 0.824-2.256 1.303-0.768 0.807-1.207 1.887-1.207 2.963 0 1.586 0.971 2.529 2.328 2.695 3.162 0.387 5.119-3.060 5.769-4.715 1.097 1.506 0.256 4.354-2.094 5.98-0.043 0.029-0.098 0.129-0.033 0.207s0.541 0.662 0.619 0.756c0.080 0.096 0.206 0.059 0.256 0.023 2.51-1.73 3.661-4.515 2.869-6.683zM12.367 14.097c-0.966-0.121-0.944-0.914-0.944-1.453 0-0.773 0.327-1.58 0.876-2.156 0.335-0.354 0.75-0.621 1.229-0.799l0.082 4.277c-0.385 0.131-0.799 0.185-1.243 0.131zM14.794 13.544l0.046-4.109c0.084-0.004 0.166-0.010 0.252-0.010 0.773 0 1.494 0.145 1.885 0.361s-1.023 2.713-2.183 3.758zM5.844 5.876c-0.030-0.094-0.103-0.145-0.196-0.145h-1.95c-0.093 0-0.165 0.051-0.194 0.144-0.412 1.299-3.48 10.99-3.496 11.041s-0.011 0.076 0.062 0.076h1.733c0.075 0 0.099-0.023 0.114-0.072 0.015-0.051 1.008-3.318 1.008-3.318h3.496c0 0 0.992 3.268 1.008 3.318s0.039 0.072 0.113 0.072h1.734c0.072 0 0.078-0.025 0.062-0.076-0.014-0.050-3.083-9.741-3.494-11.040zM3.226 12.194l1.447-5.25 1.447 5.25h-2.894z"></path>
+<symbol id="icon-hourglass" viewBox="0 0 24 24">
+<path d="M12 11.484l3.984-3.984v-3.516h-7.969v3.516zM15.984 16.5l-3.984-3.984-3.984 3.984v3.516h7.969v-3.516zM6 2.016h12v6l-3.984 3.984 3.984 3.984v6h-12v-6l3.984-3.984-3.984-3.984v-6z"></path>
 </symbol>
 <symbol id="icon-bookmark-filled" viewBox="0 0 24 24">
 <path d="M17.016 3q0.797 0 1.383 0.609t0.586 1.406v15.984l-6.984-3-6.984 3v-15.984q0-0.797 0.586-1.406t1.383-0.609h10.031z"></path>
@@ -363,24 +363,8 @@
 <symbol id="icon-send-mobile" viewBox="0 0 24 24">
 <path d="M17.016 17.016h1.969v3.984q0 0.844-0.586 1.43t-1.383 0.586h-10.031q-0.797 0-1.383-0.586t-0.586-1.43v-18q0-0.844 0.586-1.406t1.383-0.563l10.031-0.047q0.797 0 1.383 0.586t0.586 1.43v3.984h-1.969v-0.984h-10.031v12h10.031v-0.984zM21.984 12l-3.984-3.984v3h-5.016v1.969h5.016v3z"></path>
 </symbol>
-<symbol id="icon-zapier" viewBox="0 0 32 32">
-<path fill="#ff4a00" style="fill: var(--color1, #ff4a00)" d="M20 16.005c0 1.191-0.22 2.328-0.615 3.38-1.049 0.396-2.191 0.615-3.38 0.615h-0.012c-1.191 0-2.327-0.22-3.379-0.615-0.396-1.052-0.615-2.191-0.615-3.38v-0.012c0-1.191 0.219-2.327 0.615-3.379 1.052-0.396 2.189-0.615 3.379-0.615h0.012c1.191 0 2.331 0.219 3.38 0.616 0.396 1.051 0.615 2.188 0.615 3.38zM31.78 13.333h-9.34l6.597-6.603c-0.52-0.731-1.093-1.413-1.727-2.044-0.631-0.632-1.313-1.209-2.040-1.728l-6.605 6.599v-9.337c-0.865-0.139-1.751-0.22-2.66-0.22h-0.013c-0.907 0-1.795 0.081-2.66 0.22v9.34l-6.6-6.599c-0.732 0.515-1.413 1.095-2.045 1.725-0.632 0.632-1.211 1.316-1.728 2.044l6.599 6.603h-9.337c0 0-0.22 1.755-0.22 2.66v0.012c0 0.907 0.081 1.797 0.22 2.66h9.34l-6.599 6.603c1.036 1.461 2.311 2.735 3.769 3.773l6.603-6.6v9.339c0.864 0.14 1.751 0.22 2.655 0.22h0.023c0.905 0 1.792-0.080 2.655-0.22v-9.339l6.603 6.6c0.731-0.5 1.413-1.083 2.039-1.72h0.007c0.631-0.62 1.208-1.301 1.728-2.041l-6.6-6.599h9.339c0.14-0.86 0.22-1.739 0.22-2.64v-0.041c0-0.904-0.080-1.791-0.22-2.653z"></path>
-</symbol>
-<symbol id="icon-users1" viewBox="0 0 36 32">
-<path d="M24 24.082v-1.649c2.203-1.241 4-4.337 4-7.432 0-4.971 0-9-6-9s-6 4.029-6 9c0 3.096 1.797 6.191 4 7.432v1.649c-6.784 0.555-12 3.888-12 7.918h28c0-4.030-5.216-7.364-12-7.918z"></path>
-<path d="M10.225 24.854c1.728-1.13 3.877-1.989 6.243-2.513-0.47-0.556-0.897-1.176-1.265-1.844-0.95-1.726-1.453-3.627-1.453-5.497 0-2.689 0-5.228 0.956-7.305 0.928-2.016 2.598-3.265 4.976-3.734-0.529-2.39-1.936-3.961-5.682-3.961-6 0-6 4.029-6 9 0 3.096 1.797 6.191 4 7.432v1.649c-6.784 0.555-12 3.888-12 7.918h8.719c0.454-0.403 0.956-0.787 1.506-1.146z"></path>
-</symbol>
-<symbol id="icon-lock2" viewBox="0 0 32 32">
-<path d="M26 14h-2v-6c0-4.418-3.582-8-8-8s-8 3.582-8 8v6h-2c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h20c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2zM16 26c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM20 14h-8v-6c0-2.206 1.794-4 4-4s4 1.794 4 4v6z"></path>
-</symbol>
-<symbol id="icon-atom" viewBox="0 0 32 32">
-<path d="M25.998 6.46v0 0zM26.064 16c3.262-3.119 4.846-6.174 3.792-8-0.602-1.042-1.98-1.54-3.859-1.54v1.5c1.317 0 2.274 0.296 2.56 0.79 0.226 0.391 0.1 0.992-0.045 1.427-0.278 0.835-0.884 1.833-1.751 2.888-0.526 0.64-1.133 1.285-1.809 1.926-0.93-0.803-1.965-1.602-3.087-2.377-0.11-1.359-0.284-2.654-0.514-3.86 1.756-0.521 3.35-0.794 4.646-0.794l0.001-1.5c-0 0-0.001 0-0.001 0-1.412 0-3.106 0.282-4.965 0.825-1.070-4.385-2.924-7.285-5.032-7.285s-3.962 2.9-5.032 7.284c-1.859-0.543-3.553-0.825-4.965-0.825-1.879 0-3.258 0.498-3.86 1.541-1.054 1.826 0.53 4.881 3.792 8-3.262 3.119-4.846 6.174-3.792 8 0.602 1.043 1.98 1.54 3.86 1.54 1.412 0 3.106-0.282 4.965-0.825 1.070 4.385 2.924 7.285 5.032 7.285s3.962-2.9 5.032-7.284c1.859 0.543 3.553 0.825 4.965 0.825 1.879 0 3.258-0.498 3.86-1.541 1.054-1.826-0.53-4.881-3.792-8zM23.829 16c-0.582 0.496-1.202 0.987-1.855 1.468 0.017-0.484 0.025-0.973 0.025-1.468s-0.009-0.985-0.025-1.468c0.653 0.481 1.273 0.972 1.855 1.468zM19.915 22.777c-0.72-0.256-1.455-0.547-2.196-0.871 0.426-0.227 0.853-0.463 1.28-0.71 0.429-0.248 0.848-0.5 1.259-0.756-0.090 0.805-0.205 1.586-0.344 2.337zM18.25 19.897c-0.743 0.429-1.496 0.832-2.25 1.207-0.754-0.374-1.507-0.778-2.25-1.207-0.749-0.433-1.475-0.882-2.172-1.344-0.052-0.835-0.078-1.688-0.078-2.553s0.027-1.718 0.078-2.553c0.697-0.462 1.423-0.912 2.172-1.344 0.743-0.429 1.496-0.832 2.25-1.207 0.754 0.374 1.507 0.778 2.25 1.207 0.749 0.433 1.475 0.882 2.172 1.344 0.052 0.835 0.078 1.688 0.078 2.553s-0.027 1.718-0.078 2.553c-0.697 0.462-1.423 0.912-2.172 1.344zM11.741 20.44c0.411 0.256 0.83 0.509 1.259 0.756 0.428 0.247 0.855 0.483 1.28 0.71-0.741 0.323-1.475 0.615-2.196 0.871-0.138-0.751-0.254-1.532-0.344-2.337zM10.025 17.468c-0.653-0.481-1.273-0.972-1.855-1.468 0.582-0.496 1.202-0.987 1.855-1.468-0.017 0.484-0.025 0.973-0.025 1.468s0.009 0.985 0.025 1.468zM12.085 9.223c0.72 0.256 1.455 0.547 2.196 0.871-0.426 0.227-0.853 0.463-1.28 0.71-0.429 0.248-0.848 0.5-1.259 0.756 0.090-0.805 0.205-1.586 0.344-2.337zM19 10.804c-0.427-0.247-0.855-0.483-1.28-0.71 0.741-0.323 1.475-0.615 2.196-0.871 0.138 0.751 0.253 1.532 0.344 2.337-0.411-0.256-0.83-0.509-1.259-0.756zM13.162 5.213c0.479-1.278 1.041-2.302 1.625-2.961 0.304-0.343 0.762-0.752 1.213-0.752s0.909 0.409 1.213 0.752c0.584 0.658 1.146 1.682 1.625 2.961 0.291 0.776 0.546 1.624 0.764 2.53-1.161 0.404-2.37 0.901-3.602 1.485-1.232-0.585-2.442-1.082-3.602-1.486 0.218-0.905 0.473-1.754 0.764-2.53zM5.239 13.064c-0.867-1.054-1.473-2.053-1.751-2.888-0.145-0.435-0.271-1.036-0.045-1.427 0.286-0.495 1.243-0.79 2.561-0.79h0c1.297 0 2.89 0.274 4.646 0.794-0.23 1.206-0.404 2.501-0.514 3.86-1.123 0.775-2.157 1.574-3.088 2.377-0.675-0.641-1.282-1.286-1.809-1.926zM6.003 24.040c-1.318 0-2.275-0.296-2.561-0.79-0.226-0.391-0.1-0.992 0.045-1.427 0.278-0.835 0.884-1.833 1.751-2.888 0.527-0.64 1.133-1.285 1.809-1.926 0.93 0.803 1.965 1.602 3.087 2.377 0.11 1.359 0.284 2.654 0.514 3.86-1.756 0.521-3.349 0.794-4.646 0.794zM18.838 26.787c-0.479 1.278-1.041 2.302-1.625 2.961-0.304 0.343-0.762 0.752-1.213 0.752s-0.909-0.409-1.213-0.752c-0.584-0.658-1.146-1.682-1.625-2.96-0.291-0.776-0.546-1.624-0.764-2.53 1.161-0.404 2.37-0.901 3.602-1.485 1.232 0.585 2.442 1.082 3.602 1.486-0.218 0.905-0.473 1.754-0.764 2.53zM28.512 21.823c0.145 0.435 0.271 1.036 0.045 1.427-0.286 0.495-1.243 0.791-2.561 0.791-1.297 0-2.89-0.273-4.646-0.794 0.23-1.206 0.404-2.501 0.514-3.86 1.122-0.775 2.157-1.574 3.087-2.377 0.675 0.641 1.282 1.286 1.809 1.926 0.867 1.054 1.473 2.053 1.751 2.888z"></path>
-</symbol>
-<symbol id="icon-paperplane" viewBox="0 0 32 32">
-<path d="M14 22l12.301 4.39 5.699-24.917zM10 20.622l22-19.149-32 15.827zM14 24.124v7.876l5.805-5.805z"></path>
-</symbol>
-<symbol id="icon-cancel" viewBox="0 0 32 32">
-<path d="M23 0h-14l-9 9v14l9 9h14l9-9v-14l-9-9zM25 22l-3 3-6-6-6 6-3-3 6-6-6-6 3-3 6 6 6-6 3 3-6 6 6 6z"></path>
+<symbol id="icon-credits" viewBox="0 0 16 16">
+<path d="M10.479 4.958c-0.364 0-0.72 0.036-1.064 0.103-0.027-0.021-0.055-0.041-0.084-0.061 0.425-0.294 0.669-0.636 0.669-1v-1c0-1.105-2.239-2-5-2s-5 0.895-5 2v1c0 0.364 0.244 0.706 0.669 1-0.425 0.294-0.669 0.636-0.669 1v1c0 0.364 0.244 0.706 0.669 1-0.425 0.294-0.669 0.636-0.669 1v1c0 0.364 0.244 0.706 0.669 1-0.425 0.294-0.669 0.636-0.669 1v1c0 1.105 2.239 2 5 2 0.738 0 1.438-0.064 2.069-0.179 0.939 0.739 2.123 1.179 3.41 1.179 3.049 0 5.521-2.472 5.521-5.521s-2.472-5.521-5.521-5.521zM0.5 3c0-0.298 0.451-0.671 1.15-0.95 0.887-0.355 2.076-0.55 3.35-0.55s2.463 0.195 3.35 0.55c0.699 0.279 1.15 0.652 1.15 0.95s-0.451 0.671-1.15 0.95c-0.288 0.115-0.609 0.214-0.954 0.294-0.716 0.167-1.536 0.256-2.396 0.256s-1.68-0.089-2.396-0.256c-0.345-0.080-0.666-0.179-0.954-0.294-0.699-0.279-1.15-0.652-1.15-0.95zM0.5 9c0-0.221 0.249-0.483 0.663-0.718 0.917 0.439 2.296 0.718 3.837 0.718 0.053 0 0.106-0.001 0.159-0.001-0.131 0.471-0.201 0.968-0.201 1.481 0 0.007 0 0.014 0 0.021-0.844-0.003-1.65-0.091-2.354-0.256-0.345-0.080-0.666-0.179-0.954-0.294-0.699-0.279-1.15-0.652-1.15-0.95zM5 13.5c-1.273 0-2.463-0.195-3.35-0.55-0.699-0.279-1.15-0.652-1.15-0.95 0-0.221 0.249-0.483 0.663-0.718 0.917 0.439 2.296 0.718 3.837 0.718 0.057 0 0.114-0.001 0.17-0.002 0.151 0.527 0.378 1.022 0.668 1.472-0.274 0.019-0.554 0.029-0.839 0.029zM5 7.5c-0.859 0-1.68-0.089-2.396-0.256-0.345-0.080-0.666-0.179-0.954-0.294-0.699-0.279-1.15-0.652-1.15-0.95 0-0.221 0.249-0.483 0.663-0.718 0.917 0.439 2.296 0.718 3.837 0.718 1.030 0 1.987-0.125 2.782-0.339-0.781 0.438-1.444 1.060-1.932 1.808-0.278 0.020-0.562 0.030-0.85 0.030zM10.479 14.996c-2.495 0-4.517-2.022-4.517-4.517s2.022-4.517 4.517-4.517c2.495 0 4.517 2.022 4.517 4.517s-2.022 4.517-4.517 4.517zM11 7h-1v1h-2v3h2v1h-2v1h2v1h1v-1h2v-3h-2v-1h2v-1h-2v-1zM10 10h-1v-1h1v1zM12 11v1h-1v-1h1z"></path>
 </symbol>
 <symbol id="icon-channel" viewBox="0 0 16 16">
 <path d="M0 11l5-8 5 5 6-4-5 9-5-5z"></path>
@@ -401,6 +385,12 @@
 <symbol id="icon-cancel" viewBox="0 0 16 16">
 <path d="M11.5 0h-7l-4.5 4.5v7l4.5 4.5h7l4.5-4.5v-7l-4.5-4.5zM12.5 11l-1.5 1.5-3-3-3 3-1.5-1.5 3-3-3-3 1.5-1.5 3 3 3-3 1.5 1.5-3 3 3 3z"></path>
 </symbol>
+<symbol id="icon-language" viewBox="0 0 20 20">
+<path d="M19.753 10.909c-0.624-1.707-2.366-2.726-4.661-2.726-0.090 0-0.176 0.002-0.262 0.006l-0.016-2.063c0 0 3.41-0.588 3.525-0.607s0.133-0.119 0.109-0.231c-0.023-0.111-0.167-0.883-0.188-0.976-0.027-0.131-0.102-0.127-0.207-0.109s-3.25 0.461-3.25 0.461-0.012-1.953-0.013-2.078c-0.001-0.125-0.069-0.158-0.194-0.156s-0.92 0.014-1.025 0.016c-0.105 0.002-0.164 0.049-0.162 0.148s0.033 2.307 0.033 2.307-3.061 0.527-3.144 0.543c-0.084 0.014-0.17 0.053-0.151 0.143s0.19 1.094 0.208 1.172c0.018 0.080 0.072 0.129 0.188 0.107 0.115-0.019 2.924-0.504 2.924-0.504l0.035 2.018c-1.077 0.281-1.801 0.824-2.256 1.303-0.768 0.807-1.207 1.887-1.207 2.963 0 1.586 0.971 2.529 2.328 2.695 3.162 0.387 5.119-3.060 5.769-4.715 1.097 1.506 0.256 4.354-2.094 5.98-0.043 0.029-0.098 0.129-0.033 0.207s0.541 0.662 0.619 0.756c0.080 0.096 0.206 0.059 0.256 0.023 2.51-1.73 3.661-4.515 2.869-6.683zM12.367 14.097c-0.966-0.121-0.944-0.914-0.944-1.453 0-0.773 0.327-1.58 0.876-2.156 0.335-0.354 0.75-0.621 1.229-0.799l0.082 4.277c-0.385 0.131-0.799 0.185-1.243 0.131zM14.794 13.544l0.046-4.109c0.084-0.004 0.166-0.010 0.252-0.010 0.773 0 1.494 0.145 1.885 0.361s-1.023 2.713-2.183 3.758zM5.844 5.876c-0.030-0.094-0.103-0.145-0.196-0.145h-1.95c-0.093 0-0.165 0.051-0.194 0.144-0.412 1.299-3.48 10.99-3.496 11.041s-0.011 0.076 0.062 0.076h1.733c0.075 0 0.099-0.023 0.114-0.072 0.015-0.051 1.008-3.318 1.008-3.318h3.496c0 0 0.992 3.268 1.008 3.318s0.039 0.072 0.113 0.072h1.734c0.072 0 0.078-0.025 0.062-0.076-0.014-0.050-3.083-9.741-3.494-11.040zM3.226 12.194l1.447-5.25 1.447 5.25h-2.894z"></path>
+</symbol>
+<symbol id="icon-zapier" viewBox="0 0 32 32">
+<path fill="#ff4a00" style="fill: var(--color1, #ff4a00)" d="M20 16.005c0 1.191-0.22 2.328-0.615 3.38-1.049 0.396-2.191 0.615-3.38 0.615h-0.012c-1.191 0-2.327-0.22-3.379-0.615-0.396-1.052-0.615-2.191-0.615-3.38v-0.012c0-1.191 0.219-2.327 0.615-3.379 1.052-0.396 2.189-0.615 3.379-0.615h0.012c1.191 0 2.331 0.219 3.38 0.616 0.396 1.051 0.615 2.188 0.615 3.38zM31.78 13.333h-9.34l6.597-6.603c-0.52-0.731-1.093-1.413-1.727-2.044-0.631-0.632-1.313-1.209-2.040-1.728l-6.605 6.599v-9.337c-0.865-0.139-1.751-0.22-2.66-0.22h-0.013c-0.907 0-1.795 0.081-2.66 0.22v9.34l-6.6-6.599c-0.732 0.515-1.413 1.095-2.045 1.725-0.632 0.632-1.211 1.316-1.728 2.044l6.599 6.603h-9.337c0 0-0.22 1.755-0.22 2.66v0.012c0 0.907 0.081 1.797 0.22 2.66h9.34l-6.599 6.603c1.036 1.461 2.311 2.735 3.769 3.773l6.603-6.6v9.339c0.864 0.14 1.751 0.22 2.655 0.22h0.023c0.905 0 1.792-0.080 2.655-0.22v-9.339l6.603 6.6c0.731-0.5 1.413-1.083 2.039-1.72h0.007c0.631-0.62 1.208-1.301 1.728-2.041l-6.6-6.599h9.339c0.14-0.86 0.22-1.739 0.22-2.64v-0.041c0-0.904-0.080-1.791-0.22-2.653z"></path>
+</symbol>
 <symbol id="icon-cord" viewBox="0 0 32 32">
 <path d="M27.59 12.41c-0.464-0.464-1.216-0.464-1.679 0l-4.91 4.91-6.321-6.321 4.91-4.91c0.464-0.464 0.464-1.216 0-1.679s-1.216-0.464-1.679 0l-4.91 4.91-2.91-2.91c-0.464-0.464-1.216-0.464-1.679 0s-0.464 1.216 0 1.679l2.093 2.093-4.16 4.16c-2.636 2.636-3.048 6.653-1.236 9.721l-4.521 4.521c-0.781 0.781-0.781 2.047 0 2.828 0.391 0.391 0.902 0.586 1.414 0.586s1.024-0.195 1.414-0.586l4.521-4.521c3.068 1.812 7.085 1.4 9.721-1.236l4.16-4.16 2.093 2.093c0.232 0.232 0.536 0.348 0.84 0.348s0.608-0.116 0.84-0.348c0.464-0.464 0.464-1.216 0-1.679l-2.91-2.91 4.91-4.91c0.464-0.464 0.464-1.216 0-1.679z"></path>
 </symbol>

package/temba-components.ts

@@ -1,10 +1,9 @@
-import './temba-modules';
+import { addCustomElement } from './temba-modules';
 
 // we import and declare the alias editor seperately since
 // leaflet-map doesn't work in dev mode
 import { AliasEditor } from './src/aliaseditor/AliasEditor';
 import { LeafletMap } from './src/leafletmap/LeafletMap';
-import { addCustomElement } from './temba-modules';
 
 addCustomElement('leaflet-map', LeafletMap);
 addCustomElement('alias-editor', AliasEditor);

package/temba-modules.ts

@@ -35,6 +35,9 @@ import { ContactBadges } from './src/contacts/ContactBadges';
 import { ContactPending } from './src/contacts/ContactPending';
 import { ContactTickets } from './src/contacts/ContactTickets';
 import { TembaSlider } from './src/slider/TembaSlider';
+import { RunList } from './src/list/RunList';
+import { FlowStoreElement } from './src/flow/FlowStoreElement';
+import { ContactNameFetch } from './src/contacts/ContactNameFetch';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -55,6 +58,7 @@ addCustomElement('temba-button', Button);
 addCustomElement('temba-omnibox', Omnibox);
 addCustomElement('temba-tip', Tip);
 addCustomElement('temba-contact-name', ContactName);
+addCustomElement('temba-contact-name-fetch', ContactNameFetch);
 addCustomElement('temba-contact-field', ContactFieldEditor);
 addCustomElement('temba-contact-fields', ContactFields);
 addCustomElement('temba-urn', ContactUrn);
@@ -68,6 +72,8 @@ addCustomElement('temba-contact-chat', ContactChat);
 addCustomElement('temba-contact-details', ContactDetails);
 addCustomElement('temba-ticket-list', TicketList);
 addCustomElement('temba-list', TembaList);
+addCustomElement('temba-run-list', RunList);
+addCustomElement('temba-flow-details', FlowStoreElement);
 addCustomElement('temba-label', Label);
 addCustomElement('temba-menu', TembaMenu);
 addCustomElement('temba-contact-search', ContactSearch);
@@ -75,7 +81,7 @@ addCustomElement('temba-icon', VectorIcon);
 addCustomElement('temba-dropdown', Dropdown);
 addCustomElement('temba-tabs', TabPane);
 addCustomElement('temba-tab', Tab);
-addCustomElement('temba-contact-groups', ContactBadges);
+addCustomElement('temba-contact-badges', ContactBadges);
 addCustomElement('temba-contact-pending', ContactPending);
 addCustomElement('temba-contact-tickets', ContactTickets);
 addCustomElement('temba-slider', TembaSlider);

package/test/MouseHelper.ts

@@ -0,0 +1,47 @@
+import { css, html, TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators';
+import { RapidElement } from '../src/RapidElement';
+
+@customElement('mouse-helper')
+export default class MouseHelper extends RapidElement {
+  static get styles() {
+    return css`
+      :host {
+        position: absolute;
+      }
+
+      .pointer {
+        position: absolute;
+        width: 6px;
+        height: 6px;
+        z-index: 1000;
+        background: rgba(0, 250, 0, 0.3);
+        border-radius: 20px;
+        margin-left: -3px;
+        margin-top: -3px;
+        pointer-events: none;
+      }
+    `;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.updateCursor = this.updateCursor.bind(this);
+    document.addEventListener('mousemove', this.updateCursor);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('mousemove', this.updateCursor);
+  }
+
+  public updateCursor(event: MouseEvent) {
+    const pointer = this.shadowRoot.querySelector('.pointer') as HTMLDivElement;
+    pointer.style.left = event.offsetX + 'px';
+    pointer.style.top = event.offsetY + 'px';
+  }
+
+  public render(): TemplateResult {
+    return html`<div class="pointer"></div>`;
+  }
+}

package/test/temba-contact-badges.test.ts

@@ -0,0 +1,33 @@
+import { assert } from '@open-wc/testing';
+import { ContactBadges } from '../src/contacts/ContactBadges';
+import {
+  assertScreenshot,
+  delay,
+  getClip,
+  getComponent,
+  loadStore,
+} from './utils.test';
+
+const TAG = 'temba-contact-badges';
+const getBadges = async (attrs: any = {}) => {
+  attrs['endpoint'] = '/test-assets/contacts/';
+  const badges = (await getComponent(TAG, attrs, '', 400)) as ContactBadges;
+
+  // wait for our contact to load
+  await delay(100);
+
+  return badges;
+};
+
+describe('temba-contact-badges', () => {
+  it('renders default', async () => {
+    // we are a StoreElement, so load a store first
+    await loadStore();
+
+    const badges: ContactBadges = await getBadges({
+      contact: 'contact-dave-active',
+    });
+    assert.instanceOf(badges, ContactBadges);
+    await assertScreenshot('contacts/badges', getClip(badges));
+  });
+});

package/test/temba-contact-chat.test.ts

@@ -1,13 +1,209 @@
-import { fixture, assert } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { ContactChat } from '../src/contacts/ContactChat';
-import { getHTML } from '../test/utils.test';
-import './utils.test';
+import {
+  assertScreenshot,
+  delay,
+  getClip,
+  getComponent,
+  loadStore,
+  mockGET,
+} from '../test/utils.test';
 
-const getChatHTML = (attrs: any = {}) => getHTML('temba-contact-chat', attrs);
+const TAG = 'temba-contact-chat';
+
+const getContactChat = async (attrs: any = {}) => {
+  attrs['endpoint'] = '/test-assets/contacts/';
+
+  // add some sizes and styles to force our chat history to scroll
+  const chat = (await getComponent(
+    TAG,
+    attrs,
+    '',
+    500,
+    500,
+    'display:flex;flex-direction:column;flex-grow:1;min-height:0;'
+  )) as ContactChat;
+
+  // wait for our contact to load
+  await delay(100);
+
+  return chat;
+};
 
 describe('temba-contact-chat', () => {
+  // map requests for contact history and ticket api to our static files
+  // we'll just us the same history and ticket list for everybody for now
+  beforeEach(() => {
+    mockGET(
+      /\/contact\/history\/contact-.*/,
+      '/test-assets/contacts/history.json'
+    );
+
+    mockGET(
+      /\/api\/v2\/tickets\.json\?contact=contact-.*/,
+      '/test-assets/api/tickets.json'
+    );
+  });
+
   it('can be created', async () => {
-    const chat: ContactChat = await fixture(getChatHTML());
-    assert.instanceOf(chat, ContactChat);
+    // we are a StoreElement, so load a store first
+    await loadStore();
+    const chat: ContactChat = await getContactChat({
+      contact: 'contact-dave-active',
+    });
+
+    await assertScreenshot('contacts/contact-active-default', getClip(chat));
+  });
+
+  it('can send chat msg if contact is active', async () => {
+    // we are a StoreElement, so load a store first
+    await loadStore();
+    const chat: ContactChat = await getContactChat({
+      contact: 'contact-dave-active',
+    });
+
+    const chatboxDivEl = chat.shadowRoot.querySelector(
+      '.chatbox'
+    ) as HTMLDivElement;
+    const displayVal = chatboxDivEl.style.display;
+    expect(displayVal).to.equal('');
+
+    await assertScreenshot(
+      'contacts/contact-active-show-chat-msg',
+      getClip(chat)
+    );
+  });
+
+  it('can see chat history if contact is active', async () => {
+    // we are a StoreElement, so load a store first
+    await loadStore();
+    const chat: ContactChat = await getContactChat({
+      contact: 'contact-dave-active',
+    });
+
+    const chatHistoryEl = chat.shadowRoot.querySelector(
+      'temba-contact-history'
+    ) as HTMLDivElement;
+    const displayVal = chatHistoryEl.style.display;
+    expect(displayVal).to.equal('');
+
+    await assertScreenshot(
+      'contacts/contact-active-show-chat-history',
+      getClip(chat)
+    );
+  });
+
+  it('cannot send chat msg if contact is archived', async () => {
+    // we are a StoreElement, so load a store first
+    await loadStore();
+    const chat: ContactChat = await getContactChat({
+      contact: 'contact-barak-archived',
+    });
+
+    const chatboxDivEl = chat.shadowRoot.querySelector(
+      '.chatbox'
+    ) as HTMLDivElement;
+    const displayVal = chatboxDivEl.style.display;
+    expect(displayVal).to.equal('none');
+
+    await assertScreenshot(
+      'contacts/contact-archived-hide-chat-msg',
+      getClip(chat)
+    );
+  });
+
+  it('can see chat history if contact is archived', async () => {
+    // we are a StoreElement, so load a store first
+    await loadStore();
+    const chat: ContactChat = await getContactChat({
+      contact: 'contact-barak-archived',
+    });
+
+    const chatHistoryEl = chat.shadowRoot.querySelector(
+      'temba-contact-history'
+    ) as HTMLDivElement;
+    const displayVal = chatHistoryEl.style.display;
+    expect(displayVal).to.equal('');
+
+    await assertScreenshot(
+      'contacts/contact-archived-show-chat-history',
+      getClip(chat)
+    );
+  });
+
+  it('cannot send chat msg if contact is blocked', async () => {
+    // we are a StoreElement, so load a store first
+    await loadStore();
+    const chat: ContactChat = await getContactChat({
+      contact: 'contact-michelle-blocked',
+    });
+
+    const chatboxDivEl = chat.shadowRoot.querySelector(
+      '.chatbox'
+    ) as HTMLDivElement;
+    const displayVal = chatboxDivEl.style.display;
+    expect(displayVal).to.equal('none');
+
+    await assertScreenshot(
+      'contacts/contact-blocked-hide-chat-msg',
+      getClip(chat)
+    );
+  });
+
+  it('can see chat history if contact is blocked', async () => {
+    // we are a StoreElement, so load a store first
+    await loadStore();
+    const chat: ContactChat = await getContactChat({
+      contact: 'contact-michelle-blocked',
+    });
+
+    const chatHistoryEl = chat.shadowRoot.querySelector(
+      'temba-contact-history'
+    ) as HTMLDivElement;
+    const displayVal = chatHistoryEl.style.display;
+    expect(displayVal).to.equal('');
+
+    await assertScreenshot(
+      'contacts/contact-blocked-show-chat-history',
+      getClip(chat)
+    );
+  });
+
+  it('cannot send chat msg if contact is stopped', async () => {
+    // we are a StoreElement, so load a store first
+    await loadStore();
+    const chat: ContactChat = await getContactChat({
+      contact: 'contact-tim-stopped',
+    });
+
+    const chatboxDivEl = chat.shadowRoot.querySelector(
+      '.chatbox'
+    ) as HTMLDivElement;
+    const displayVal = chatboxDivEl.style.display;
+    expect(displayVal).to.equal('none');
+
+    await assertScreenshot(
+      'contacts/contact-stopped-hide-chat-msg',
+      getClip(chat)
+    );
+  });
+
+  it('can see chat history if contact is stopped', async () => {
+    // we are a StoreElement, so load a store first
+    await loadStore();
+    const chat: ContactChat = await getContactChat({
+      contact: 'contact-tim-stopped',
+    });
+
+    const chatHistoryEl = chat.shadowRoot.querySelector(
+      'temba-contact-history'
+    ) as HTMLDivElement;
+    const displayVal = chatHistoryEl.style.display;
+    expect(displayVal).to.equal('');
+
+    await assertScreenshot(
+      'contacts/contact-stopped-show-chat-history',
+      getClip(chat)
+    );
   });
 });

package/test/temba-contact-history.test.ts

@@ -1,5 +1,5 @@
 import { fixture, assert, expect } from '@open-wc/testing';
-import sinon from 'sinon';
+import * as sinon from 'sinon';
 import { ContactHistory } from '../src/contacts/ContactHistory';
 import { stubbable } from '../src/utils';
 import {
@@ -48,12 +48,12 @@ sinon.stub(stubbable, 'getCurrentDate').callsFake(() => {
 describe('temba-contact-history', () => {
   beforeEach(() => {
     mockGET(
-      /\/contact\/history\/1234\/.*/,
+      /\/contact\/history\/contact-dave-active\/.*/,
       '/test-assets/contacts/history.json'
     );
 
     mockGET(
-      /\/api\/v2\/tickets\.json\?contact=1234/,
+      /\/api\/v2\/tickets\.json\?contact=contact-dave-active/,
       '/test-assets/api/tickets.json'
     );
   });
@@ -66,7 +66,7 @@ describe('temba-contact-history', () => {
   it('renders history', async () => {
     const history = await createHistory(
       getHistoryHTML({
-        uuid: '1234',
+        uuid: 'contact-dave-active',
       })
     );
 
@@ -76,7 +76,7 @@ describe('temba-contact-history', () => {
     const events = history.shadowRoot.querySelector('.events');
     const top = events.scrollHeight - events.getBoundingClientRect().height;
 
-    expect(top).to.equal(533);
+    expect(top).to.equal(520);
 
     // make sure we actually scrolled to there
     expect(events.scrollTop).to.equal(top);
@@ -87,7 +87,7 @@ describe('temba-contact-history', () => {
   it('expands event groups', async () => {
     const history = await createHistory(
       getHistoryHTML({
-        uuid: '1234',
+        uuid: 'contact-dave-active',
       })
     );
 

package/test/temba-dialog.test.ts

@@ -1,5 +1,5 @@
 import { assert, expect, fixture } from '@open-wc/testing';
-import sinon from 'sinon';
+import * as sinon from 'sinon';
 import { Dialog } from '../src/dialog/Dialog';
 import { assertScreenshot, getClip } from './utils.test';
 

package/test/temba-label.test.ts

@@ -0,0 +1,75 @@
+import { assert } from '@open-wc/testing';
+import Label from '../src/label/Label';
+import { assertScreenshot, getClip, getComponent } from './utils.test';
+
+const TAG = 'temba-label';
+const getLabel = async (slot, attrs: any = {}) => {
+  return (await getComponent(TAG, attrs, slot)) as Label;
+};
+
+describe('temba-label', () => {
+  it('renders default', async () => {
+    const label: Label = await getLabel('Default');
+    assert.instanceOf(label, Label);
+    await assertScreenshot('label/no-icon', getClip(label));
+  });
+
+  it('renders icon', async () => {
+    const label: Label = await getLabel('Default', { icon: 'home' });
+    await assertScreenshot('label/default-icon', getClip(label));
+  });
+
+  it('renders shadow', async () => {
+    const label: Label = await getLabel('Shadow', {
+      icon: 'loader',
+      shadow: true,
+    });
+    await assertScreenshot('label/shadow', getClip(label));
+  });
+
+  it('renders primary', async () => {
+    const label: Label = await getLabel('Primary', {
+      icon: 'check',
+      primary: true,
+    });
+    await assertScreenshot('label/primary', getClip(label));
+  });
+
+  it('renders secondary', async () => {
+    const label: Label = await getLabel('Secondary', {
+      icon: 'check',
+      secondary: true,
+    });
+    await assertScreenshot('label/secondary', getClip(label));
+  });
+
+  it('renders tertiary', async () => {
+    const label: Label = await getLabel('Tertiary', {
+      icon: 'check',
+      tertiary: true,
+    });
+    await assertScreenshot('label/tertiary', getClip(label));
+  });
+
+  it('renders dark', async () => {
+    const label: Label = await getLabel('Dark', { icon: 'check', dark: true });
+    await assertScreenshot('label/dark', getClip(label));
+  });
+
+  it('renders danger', async () => {
+    const label: Label = await getLabel('Danger', {
+      icon: 'alert-triangle',
+      danger: true,
+    });
+    await assertScreenshot('label/danger', getClip(label));
+  });
+
+  it('renders custom', async () => {
+    const label: Label = await getLabel('Custom Orange', {
+      icon: 'tool',
+      backgroundColor: 'rgb(240, 176, 29)',
+      textColor: '#ffff',
+    });
+    await assertScreenshot('label/custom', getClip(label));
+  });
+});

package/test/temba-list.test.ts

@@ -1,5 +1,5 @@
 import { assert, expect } from '@open-wc/testing';
-import sinon from 'sinon';
+import * as sinon from 'sinon';
 import { TembaList } from '../src/list/TembaList';
 import { assertScreenshot, getClip, getComponent } from './utils.test';
 

package/test/temba-menu.test.ts

@@ -10,6 +10,7 @@ const getMenu = async (attrs: any = {}, width = 0) => {
     attrs,
     '',
     width,
+    0,
     'display:inline-block'
   )) as TembaMenu;
 

package/test/temba-select.test.ts

@@ -2,9 +2,13 @@ import { fixture, expect, assert } from '@open-wc/testing';
 import { useFakeTimers } from 'sinon';
 import { Options } from '../src/options/Options';
 import { Select } from '../src/select/Select';
-import { assertScreenshot, checkTimers, getClip } from './utils.test';
+import {
+  assertScreenshot,
+  checkTimers,
+  getClip,
+  loadStore,
+} from './utils.test';
 import { range } from '../src/utils';
-import { Store } from '../src/store/Store';
 
 let clock: any;
 
@@ -121,14 +125,6 @@ const getClipWithOptions = (select: Select) => {
   return selectClip;
 };
 
-const loadStore = async () => {
-  const store: Store = await fixture(
-    "<temba-store completion='/test-assets/store/editor.json'></temba-store>"
-  );
-  await store.httpComplete;
-  return store;
-};
-
 describe('temba-select', () => {
   beforeEach(function () {
     clock = useFakeTimers();