@nyaruka/temba-components 0.67.4 → 0.70.0

package/out-tsc/test/temba-contact-tickets.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-contact-tickets.test.js","sourceRoot":"","sources":["../../test/temba-contact-tickets.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EACL,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,GACR,MAAM,cAAc,CAAC;AAEtB,MAAM,GAAG,GAAG,uBAAuB,CAAC;AACpC,MAAM,iBAAiB,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,EAAE;IAClD,MAAM,cAAc,GAAG,CAAC,MAAM,YAAY,CACxC,GAAG,EACH,KAAK,EACL,EAAE,EACF,GAAG,CACJ,CAAmB,CAAC;IACrB,+BAA+B;IAC/B,MAAM,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7C,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAEF,OAAO,CAAC,+BAA+B,CAAC,CAAC;AACzC,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,UAAU,CAAC,GAAG,EAAE;QACd,OAAO,CACL,uEAAuE,EACvE,4CAA4C,CAC7C,CAAC;QACF,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,OAAO,GAAmB,MAAM,iBAAiB,CAAC;YACtD,OAAO,EAAE,sCAAsC;YAC/C,KAAK,EAAE,oBAAoB;SAC5B,CAAC,CAAC;QACH,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAC3C,MAAM,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,OAAO,GAAmB,MAAM,iBAAiB,CAAC;YACtD,OAAO,EAAE,sCAAsC;YAC/C,KAAK,EAAE,oBAAoB;SAC5B,CAAC,CAAC;QAEH,8BAA8B;QAE5B,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAClD,CAAC,KAAK,EAAE,CAAC;QACV,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAC3C,MAAM,gBAAgB,CAAC,6BAA6B,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { assert, waitUntil } from '@open-wc/testing';\nimport { ContactTickets } from '../src/contacts/ContactTickets';\nimport {\n  assertScreenshot,\n  getClip,\n  getComponent,\n  loadStore,\n  mockGET,\n  mockNow,\n} from './utils.test';\n\nconst TAG = 'temba-contact-tickets';\nconst getContactTickets = async (attrs: any = {}) => {\n  const contactTickets = (await getComponent(\n    TAG,\n    attrs,\n    '',\n    400\n  )) as ContactTickets;\n  // wait for our contact to load\n  await waitUntil(() => !!contactTickets.data);\n  return contactTickets;\n};\n\nmockNow('2023-04-07T00:00:00.000-00:00');\ndescribe('temba-contact-tickets', () => {\n  beforeEach(() => {\n    mockGET(\n      /\\/api\\/v2\\/tickets.json\\?contact=24d64810-3315-4ff5-be85-48e3fe055bf9/,\n      '/test-assets/contacts/contact-tickets.json'\n    );\n    loadStore();\n  });\n\n  it('renders default', async () => {\n    const tickets: ContactTickets = await getContactTickets({\n      contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',\n      agent: 'admin1@nyaruka.com',\n    });\n    assert.instanceOf(tickets, ContactTickets);\n    await assertScreenshot('contacts/tickets', getClip(tickets));\n  });\n\n  it('shows assignment picker', async () => {\n    const tickets: ContactTickets = await getContactTickets({\n      contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',\n      agent: 'admin1@nyaruka.com',\n    });\n\n    // click on the avatar element\n    (\n      tickets.shadowRoot.querySelector('.avatar-circle') as HTMLDivElement\n    ).click();\n    assert.instanceOf(tickets, ContactTickets);\n    await assertScreenshot('contacts/tickets-assignment', getClip(tickets));\n  });\n});\n"]}
+{"version":3,"file":"temba-contact-tickets.test.js","sourceRoot":"","sources":["../../test/temba-contact-tickets.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EACL,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,GACR,MAAM,cAAc,CAAC;AAEtB,MAAM,GAAG,GAAG,uBAAuB,CAAC;AACpC,MAAM,iBAAiB,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,EAAE;IAClD,MAAM,cAAc,GAAG,CAAC,MAAM,YAAY,CACxC,GAAG,EACH,KAAK,EACL,EAAE,EACF,GAAG,CACJ,CAAmB,CAAC;IACrB,+BAA+B;IAC/B,MAAM,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7C,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAEF,OAAO,CAAC,+BAA+B,CAAC,CAAC;AACzC,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,UAAU,CAAC,GAAG,EAAE;QACd,OAAO,CACL,uEAAuE,EACvE,4CAA4C,CAC7C,CAAC;QACF,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,OAAO,GAAmB,MAAM,iBAAiB,CAAC;YACtD,OAAO,EAAE,sCAAsC;YAC/C,KAAK,EAAE,oBAAoB;SAC5B,CAAC,CAAC;QACH,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAC3C,MAAM,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,OAAO,GAAmB,MAAM,iBAAiB,CAAC;YACtD,OAAO,EAAE,sCAAsC;YAC/C,KAAK,EAAE,oBAAoB;SAC5B,CAAC,CAAC;QAEH,8BAA8B;QAC7B,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAoB,CAAC,KAAK,EAAE,CAAC;QAC3E,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAC3C,MAAM,gBAAgB,CAAC,6BAA6B,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { assert, waitUntil } from '@open-wc/testing';\nimport { ContactTickets } from '../src/contacts/ContactTickets';\nimport {\n  assertScreenshot,\n  getClip,\n  getComponent,\n  loadStore,\n  mockGET,\n  mockNow,\n} from './utils.test';\n\nconst TAG = 'temba-contact-tickets';\nconst getContactTickets = async (attrs: any = {}) => {\n  const contactTickets = (await getComponent(\n    TAG,\n    attrs,\n    '',\n    400\n  )) as ContactTickets;\n  // wait for our contact to load\n  await waitUntil(() => !!contactTickets.data);\n  return contactTickets;\n};\n\nmockNow('2023-04-07T00:00:00.000-00:00');\ndescribe('temba-contact-tickets', () => {\n  beforeEach(() => {\n    mockGET(\n      /\\/api\\/v2\\/tickets.json\\?contact=24d64810-3315-4ff5-be85-48e3fe055bf9/,\n      '/test-assets/contacts/contact-tickets.json'\n    );\n    loadStore();\n  });\n\n  it('renders default', async () => {\n    const tickets: ContactTickets = await getContactTickets({\n      contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',\n      agent: 'admin1@nyaruka.com',\n    });\n    assert.instanceOf(tickets, ContactTickets);\n    await assertScreenshot('contacts/tickets', getClip(tickets));\n  });\n\n  it('shows assignment picker', async () => {\n    const tickets: ContactTickets = await getContactTickets({\n      contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',\n      agent: 'admin1@nyaruka.com',\n    });\n\n    // click on the avatar element\n    (tickets.shadowRoot.querySelector('temba-user') as HTMLDivElement).click();\n    assert.instanceOf(tickets, ContactTickets);\n    await assertScreenshot('contacts/tickets-assignment', getClip(tickets));\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.67.4",
+  "version": "0.70.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -26,7 +26,8 @@
     "test:watch": "wtr --node-resolve --watch",
     "storybook": "concurrently --kill-others --names tsc,storybook \"npm run tsc:watch\" \"start-storybook --node-resolve --watch --open\"",
     "storybook:build": "build-storybook",
-    "svg": "rimraf static/svg/work && node svg.js --resolution=150",
+    "svg": "rimraf static/svg/work && node svg.js --resolution=150 --output='./static/svg/index.svg' --usage='./src/vectoricon/index.ts'",
+    "svg-wc": "rimraf static/svg/work && node svg.js --resolution=150 --output='./static/svg/webchat.svg' --usage='./src/webchat/index.ts'",
     "version": "yarn run build && auto-changelog -p && git add CHANGELOG.md",
     "locale:extract": "lit-localize extract --config localize.config.json",
     "locale:build": "lit-localize build --config localize.config.json"
@@ -34,6 +35,7 @@
   "dependencies": {
     "@lit/localize": "^0.11.4",
     "color-hash": "^2.0.2",
+    "croppie": "^2.6.5",
     "geojson": "^0.5.0",
     "highlight.js": "^10.7.1",
     "image-size": "^0.9.7",

package/src/contacts/ContactHistory.ts

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html, TemplateResult } from 'lit-html';
-import { Contact, CustomEventType, Ticket } from '../interfaces';
+import { Contact, CustomEventType, Msg, Ticket } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { Asset, getAssets, getClasses, postJSON, throttle } from '../utils';
 
@@ -58,6 +58,7 @@ import {
   SCROLL_THRESHOLD,
 } from './helpers';
 import { Lightbox } from '../lightbox/Lightbox';
+import { Store } from '../store/Store';
 
 // when images load, make sure we are on the bottom of the scroll window if necessary
 export const loadHandler = function (event) {
@@ -77,6 +78,7 @@ export const loadHandler = function (event) {
 
 export class ContactHistory extends RapidElement {
   public httpComplete: Promise<void | ContactHistoryPage>;
+  private store: Store;
 
   public constructor() {
     super();
@@ -85,6 +87,7 @@ export class ContactHistory extends RapidElement {
   connectedCallback() {
     super.connectedCallback();
     this.shadowRoot.addEventListener('load', loadHandler, true);
+    this.store = document.querySelector('temba-store') as Store;
   }
 
   disconnectedCallback() {
@@ -632,7 +635,13 @@ export class ContactHistory extends RapidElement {
       case Events.MESSAGE_CREATED:
       case Events.MESSAGE_RECEIVED:
       case Events.BROADCAST_CREATED:
-        return renderMsgEvent(event as MsgEvent, this.agent);
+        if ((event as MsgEvent).created_by) {
+          (event as MsgEvent).created_by = this.store.getUser(
+            (event as MsgEvent).created_by.email
+          );
+        }
+
+        return renderMsgEvent(event as MsgEvent);
 
       case Events.FLOW_ENTERED:
       case Events.FLOW_EXITED:
@@ -840,18 +849,23 @@ export class ContactHistory extends RapidElement {
         })}
       </div>
 
-      <div class="new-messages-container">
-        <div
-          @click=${() => {
-            this.scrollToBottom(true);
-          }}
-          class="new-messages ${getClasses({
-            expanded: this.showMessageAlert,
-          })}"
-        >
-          New Messages
-        </div>
-      </div>
+      ${
+        this.contact && this.contact.status === 'active'
+          ? html`<div class="new-messages-container">
+              <div
+                @click=${() => {
+                  this.scrollToBottom(true);
+                }}
+                class="new-messages ${getClasses({
+                  expanded: this.showMessageAlert,
+                })}"
+              >
+                New Messages
+              </div>
+            </div>`
+          : null
+      }
+      
       </div>
     `;
   }

package/src/contacts/ContactTickets.ts

@@ -2,15 +2,12 @@ import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType, Ticket, TicketStatus, User } from '../interfaces';
 import { StoreElement } from '../store/StoreElement';
-import {
-  getClasses,
-  getFullName,
-  postJSON,
-  renderAvatar,
-  stopEvent,
-} from '../utils';
+import { getClasses, postJSON, stopEvent } from '../utils';
 import { Icon } from '../vectoricon';
 
+const dropdownUserScale = 0.7;
+const inlineUserScale = 0.8;
+
 export class ContactTickets extends StoreElement {
   @property({ type: String })
   agent: string;
@@ -129,6 +126,10 @@ export class ContactTickets extends StoreElement {
         border-bottom: 1px solid #f3f3f3;
       }
 
+      .option-group temba-user {
+        flex-grow: 1;
+      }
+
       .assigned .user {
         flex-grow: 1;
       }
@@ -155,7 +156,6 @@ export class ContactTickets extends StoreElement {
 
       .user {
         display: flex;
-        padding: 0.4em 0.7em;
         align-items: center;
         border-radius: var(--curvature);
         cursor: pointer;
@@ -165,11 +165,6 @@ export class ContactTickets extends StoreElement {
         background: var(--color-selection);
       }
 
-      .user .avatar {
-        font-size: 0.5em;
-        margin-right: 1em;
-      }
-
       .user .name {
         display: -webkit-box;
         -webkit-line-clamp: 1;
@@ -246,16 +241,6 @@ export class ContactTickets extends StoreElement {
     }
   }
 
-  private renderUser(user: User) {
-    if (!user) {
-      return null;
-    }
-    return html`<div class="user">
-      <div class="avatar">${renderAvatar({ user: user })}</div>
-      <div class="name">${getFullName(user)}</div>
-    </div>`;
-  }
-
   private handleClose(uuid: string) {
     postJSON(`/api/v2/ticket_actions.json`, {
       tickets: [uuid],
@@ -288,6 +273,7 @@ export class ContactTickets extends StoreElement {
     if (ticket.assignee && ticket.assignee.email === email) {
       return;
     }
+    this.blur();
 
     postJSON(`/api/v2/ticket_actions.json`, {
       tickets: [uuid],
@@ -355,12 +341,10 @@ export class ContactTickets extends StoreElement {
                       <div slot="toggle" class="toggle">
                         ${ticket.assignee
                           ? html`
-                              <div style="font-size:0.5em">
-                                ${renderAvatar({
-                                  name: ticket.assignee.name,
-                                  position: 'left',
-                                })}
-                              </div>
+                              <temba-user
+                                email=${ticket.assignee.email}
+                                scale="${inlineUserScale}"
+                              ></temba-user>
                             `
                           : html`
                               <temba-button
@@ -386,11 +370,11 @@ export class ContactTickets extends StoreElement {
                                   ? 'current-user'
                                   : ''}"
                               >
-                                ${this.renderUser(
-                                  users.find(
-                                    user => user.email === ticket.assignee.email
-                                  )
-                                )}
+                                <temba-user
+                                  email=${ticket.assignee.email}
+                                  name
+                                  scale="${dropdownUserScale}"
+                                ></temba-user>
                                 <temba-button
                                   name="Unassign"
                                   primary
@@ -420,7 +404,11 @@ export class ContactTickets extends StoreElement {
                                   );
                                 }}
                               >
-                                ${this.renderUser(agent)}
+                                <temba-user
+                                  email=${agent.email}
+                                  name
+                                  scale="${dropdownUserScale}"
+                                ></temba-user>
                               </div>
                             `
                           : null}
@@ -446,7 +434,11 @@ export class ContactTickets extends StoreElement {
                                 );
                               }}
                             >
-                              ${this.renderUser(user)}
+                              <temba-user
+                                email=${user.email}
+                                scale="${dropdownUserScale}"
+                                name
+                              ></temba-user>
                             </div>`;
                           })}
                         </div>

package/src/contacts/events.ts

@@ -1,13 +1,6 @@
-import { css, EventPart, html, TemplateResult } from 'lit';
+import { css, html, TemplateResult } from 'lit';
 import { Msg, ObjectReference, User } from '../interfaces';
-import {
-  getClasses,
-  NamedObject,
-  oxford,
-  oxfordFn,
-  oxfordNamed,
-  renderAvatar,
-} from '../utils';
+import { getClasses, oxford, oxfordFn, oxfordNamed } from '../utils';
 import { Icon } from '../vectoricon';
 import { getDisplayName } from './helpers';
 
@@ -697,12 +690,6 @@ export const getEventGroupType = (event: ContactEvent, ticket: string) => {
   return 'verbose';
 };
 
-export const renderUserAvatar = (user: User) => {
-  return html`<div style="width:3.5em;font-size:0.8em">
-    ${renderAvatar({ user, position: 'left' })}
-  </div>`;
-};
-
 export const renderAttachment = (attachment: string): TemplateResult => {
   const idx = attachment.indexOf(':');
   const attType = attachment.substr(0, idx);
@@ -764,10 +751,7 @@ export const renderAttachment = (attachment: string): TemplateResult => {
   return html`<div style="">${inner}</div>`;
 };
 
-export const renderMsgEvent = (
-  event: MsgEvent,
-  agent: string
-): TemplateResult => {
+export const renderMsgEvent = (event: MsgEvent): TemplateResult => {
   const isInbound = event.type === Events.MESSAGE_RECEIVED;
   const isError = event.status === 'E';
   const isFailure = event.status === 'F';
@@ -880,9 +864,10 @@ export const renderMsgEvent = (
     </div>
 
     ${!isInbound && event.created_by
-      ? html`<div style="margin-left:0.8em;margin-top:0.3em;font-size:0.9em">
-          ${renderUserAvatar(event.created_by)}
-        </div>`
+      ? html`<temba-user
+          style="margin-left:0.5em"
+          email=${event.created_by.email}
+        ></temba-user>`
       : null}
   </div>`;
 };
@@ -1016,9 +1001,7 @@ export const renderNoteCreated = (event: TicketEvent): TemplateResult => {
         ></temba-date>
       </div>
     </div>
-    <div style="margin-left:0.8em;margin-top:0.3em;font-size:0.8em">
-      ${renderUserAvatar(event.created_by)}
-    </div>
+    <temba-user email=${event.created_by.email}></temba-user>
   </div>`;
 };
 

package/src/imagepicker/CroppieCSS.ts

@@ -0,0 +1,254 @@
+import { css } from 'lit';
+
+export const CroppieCSS = css`
+  .croppie-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .croppie-container .cr-image {
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+    max-height: none;
+    max-width: none;
+  }
+
+  .croppie-container .cr-boundary {
+    position: relative;
+    overflow: hidden;
+    margin: 0 auto;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .croppie-container .cr-viewport,
+  .croppie-container .cr-resizer {
+    position: absolute;
+    border: 2px solid #fff;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
+    z-index: 0;
+  }
+
+  .croppie-container .cr-resizer {
+    z-index: 2;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .croppie-container .cr-resizer-vertical,
+  .croppie-container .cr-resizer-horisontal {
+    position: absolute;
+    pointer-events: all;
+  }
+
+  .croppie-container .cr-resizer-vertical::after,
+  .croppie-container .cr-resizer-horisontal::after {
+    display: block;
+    position: absolute;
+    box-sizing: border-box;
+    border: 1px solid black;
+    background: #fff;
+    width: 10px;
+    height: 10px;
+    content: '';
+  }
+
+  .croppie-container .cr-resizer-vertical {
+    bottom: -5px;
+    cursor: row-resize;
+    width: 100%;
+    height: 10px;
+  }
+
+  .croppie-container .cr-resizer-vertical::after {
+    left: 50%;
+    margin-left: -5px;
+  }
+
+  .croppie-container .cr-resizer-horisontal {
+    right: -5px;
+    cursor: col-resize;
+    width: 10px;
+    height: 100%;
+  }
+
+  .croppie-container .cr-resizer-horisontal::after {
+    top: 50%;
+    margin-top: -5px;
+  }
+
+  .croppie-container .cr-original-image {
+    display: none;
+  }
+
+  .croppie-container .cr-vp-circle {
+    border-radius: 50%;
+  }
+
+  .croppie-container .cr-overlay {
+    z-index: 1;
+    position: absolute;
+    cursor: move;
+    touch-action: none;
+  }
+
+  .croppie-container .cr-slider-wrap {
+    width: 75%;
+    margin: 15px auto;
+    text-align: center;
+  }
+
+  .croppie-result {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .croppie-result img {
+    position: absolute;
+  }
+
+  .croppie-container .cr-image,
+  .croppie-container .cr-overlay,
+  .croppie-container .cr-viewport {
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+
+  /*************************************/
+  /***** STYLING RANGE INPUT ***********/
+  /*************************************/
+  /*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
+  /*************************************/
+
+  .cr-slider {
+    -webkit-appearance: none;
+    /*removes default webkit styles*/
+    /*border: 1px solid white; */ /*fix for FF unable to apply focus style bug */
+    width: 300px;
+    /*required for proper track sizing in FF*/
+    max-width: 100%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    background-color: transparent;
+  }
+
+  .cr-slider::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0;
+    border-radius: 3px;
+  }
+
+  .cr-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: -6px;
+  }
+
+  .cr-slider:focus {
+    outline: none;
+  }
+  /*
+.cr-slider:focus::-webkit-slider-runnable-track {
+background: #ccc;
+}
+*/
+
+  .cr-slider::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0;
+    border-radius: 3px;
+  }
+
+  .cr-slider::-moz-range-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: -6px;
+  }
+
+  /*hide the outline behind the border*/
+  .cr-slider:-moz-focusring {
+    outline: 1px solid white;
+    outline-offset: -1px;
+  }
+
+  .cr-slider::-ms-track {
+    width: 100%;
+    height: 5px;
+    background: transparent;
+    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+    border-color: transparent; /*leave room for the larger thumb to overflow with a transparent border */
+    border-width: 6px 0;
+    color: transparent; /*remove default tick marks*/
+  }
+  .cr-slider::-ms-fill-lower {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+  }
+  .cr-slider::-ms-fill-upper {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+  }
+  .cr-slider::-ms-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: 1px;
+  }
+  .cr-slider:focus::-ms-fill-lower {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .cr-slider:focus::-ms-fill-upper {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  /*******************************************/
+
+  /***********************************/
+  /* Rotation Tools */
+  /***********************************/
+  .cr-rotate-controls {
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
+    z-index: 1;
+  }
+  .cr-rotate-controls button {
+    border: 0;
+    background: none;
+  }
+  .cr-rotate-controls i:before {
+    display: inline-block;
+    font-style: normal;
+    font-weight: 900;
+    font-size: 22px;
+  }
+  .cr-rotate-l i:before {
+    content: '↺';
+  }
+  .cr-rotate-r i:before {
+    content: '↻';
+  }
+`;