@verdocs/web-sdk 1.9.9 → 1.9.14

package/dist/components/verdocs-template-recipients2.js.map

@@ -1 +1 @@
-{"file":"verdocs-template-recipients2.js","mappings":";;;;;;;;;;;AAAA,MAAM,4BAA4B,GAAG,ooGAAooG;;ACOzqG,MAAM,SAAS,GAAG,CAAC,GAAU,EAAE,SAAiB,EAAE,OAAe;EAC/D,MAAM,MAAM,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;EACxB,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EAC1D,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAIF,MAAM,YAAY,GAAwC;EACxD,CAAC,mBAAmB,CAAC,QAAQ,GAAG,UAAU;EAC1C,CAAC,mBAAmB,CAAC,mBAAmB,GAAG,gBAAgB;EAC3D,CAAC,mBAAmB,CAAC,mBAAmB,GAAG,qBAAqB;EAChE,CAAC,mBAAmB,CAAC,8BAA8B,GAAG,2BAA2B;EACjF,CAAC,mBAAmB,CAAC,OAAO,GAAG,IAAI;CACpC,CAAC;AAEF,MAAM,YAAY,GAChB,kxCAAkxC,CAAC;AAErxC,MAAM,SAAS,GACb,kOAAkO,CAAC;AAErO,MAAM,QAAQ,GACZ,gQAAgQ,CAAC;AAEnQ,MAAM,QAAQ,GACZ,8PAA8P,CAAC;MAuEpP,yBAAyB;;;;;;;;IAiDpC,cAAS,GAAa,EAAE,CAAC;IACzB,oBAAe,GAAqC,EAAE,CAAC;oBA9CnB,eAAe,CAAC,UAAU,EAAE;wBAK3B,IAAI;8BAMuB,EAAE;;;;;2BA2B9B,KAAK;uBACT,KAAK;qBACP,KAAK;kBACI,mBAAmB,CAAC,OAAO;+BACnC,KAAK;wBACM,EAAE;;EAK5C,iBAAiB;IACf,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,IAAI,EAAE,CAAC;MAC9C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC;MAC3C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC;MAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,IAAI,KAAK,CAAC;MACtD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,CAAC;MAC/C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,KAAK,EAAE,CAAC;KACxC;IAED,IAAI,CAAC,YAAY,GAAG;MAClB;QACE,KAAK,EAAE,CAAC;QACR,WAAW,EAAE,sCAAsC;QACnD,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,EAAE;QACb,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,EAAE;QACV,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,EAAE;OACV;MACD;QACE,KAAK,EAAE,CAAC;QACR,WAAW,EAAE,sCAAsC;QACnD,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,EAAE;QACb,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,EAAE;QACV,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,EAAE;OACV;MACD;QACE,KAAK,EAAE,CAAC;QACR,WAAW,EAAE,sCAAsC;QACnD,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,EAAE;QACb,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,EAAE;QACV,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,EAAE;OACV;MACD;QACE,KAAK,EAAE,CAAC;QACR,WAAW,EAAE,sCAAsC;QACnD,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,EAAE;QACb,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,EAAE;QACV,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,EAAE;OACV;KACF,CAAC;IAEF,IAAI,CAAC,sBAAsB,EAAE,CAAC;GAC/B;EAED,kBAAkB;IAChB,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC3B,QAAQ,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC;MAC/B,SAAS,EAAE;QACT,KAAK,CAAC,KAAK;UACT,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;SACrD;QACD,IAAI,CAAC,KAAK;UACR,MAAM,IAAI,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;UACvD,MAAM,IAAI,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;UACvD,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;UAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;UAC7B,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;UACxC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;UACxC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,IAAI,OAAO,IAAI,KAAK,CAAC;SAClE;QACD,GAAG,CAAC,KAAK;UACP,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;UAC1B,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;UACrC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;UACrC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,qBAAqB,CAAC;SACtD;OACF;KACF,CAAC,CAAC;IAEH,QAAQ,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;MAC7B,OAAO,EAAE,IAAI;MACb,MAAM,EAAE,KAAK;QACX,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAExC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,GAAG,oBAAoB,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAE7E,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC;QACtD,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QAChD,MAAM,cAAc,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC;;QAGtD,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;QAC9E,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;UACpB,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,EAAC,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAC,CAAC,CAAC;UAC7E,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;UAC1C,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC;UAE/B,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;UACrE,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;UACzE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;YACpC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;WACpB,CAAC,CAAC;UACH,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;UACpE,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;OACF;MACD,cAAc,EAAE,CAAC;;QAEf,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;OACnC;MACD,gBAAgB,EAAE,CAAC;QACjB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;OACtC;MACD,WAAW,EAAE,CAAC;;QAEZ,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAClC;MACD,WAAW,EAAE,CAAC;;QAEZ,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;OACrC;KACF,CAAC,CAAC;GACJ;EAED,sBAAsB;IACpB,MAAM,eAAe,GAAqC,EAAE,CAAC;IAE7D,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI;;MAC5B,eAAe,MAAC,IAAI,CAAC,QAAQ,MAA7B,eAAe,OAAoB,EAAE,EAAC;MACtC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3C,CAAC,CAAC;IAEH,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;IAEvC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC;IACzE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;GACtC;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IAC7B,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,EAAE,CAAC;GACrB;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IAC7B,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC;MACzB,SAAS,EAAE,IAAI,CAAC,IAAI;MACpB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,SAAS,EAAE,IAAI,CAAC,SAAS;KAC1B,CAAC,CAAC;IAEH,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC,EAAE,CAAC,CAAC;GAChC;EAED,MAAM;IACJ,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAC5E,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACjE,IAAI,WAAW,GAAG,CAAC,CAAC;IAEpB,QACE,YAAM,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,EAAE,YAAY,EAAC,KAAK,IAC5F,kCAA0B,EAE1B,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAC,WAAW,GAAG,EACzB,WAAK,KAAK,EAAC,KAAK,IACd,WAAK,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,GAAI,EAC1C,WAAK,KAAK,EAAC,QAAQ,IACjB,YAAM,KAAK,EAAC,OAAO,cAAe,OAAE,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,EAClE,WAAK,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,eAAY,QAAQ,GAAG,CACzH,CACF,EAEL,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,KAC1B,WAAK,KAAK,EAAC,KAAK,IACd,WAAK,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,QAAQ,GAAI,EACzC,WAAK,KAAK,EAAC,UAAU,gBAAa,WAAW,mBAAiB,QAAQ,GAAI,EACzE,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,IAAI;MACtC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;MACzB,QACE,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAC,eAAe,EAAE,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,EAAC,mBAAiB,IAAI,CAAC,IAAI,IACnH,IAAI,CAAC,IAAI,OAAE,WAAK,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,eAAY,QAAQ,GAAG,CACrI,EACN,WAAK,KAAK,EAAC,UAAU,gBAAa,WAAW,mBAAiB,QAAQ,GAAI,CACjE,EACX;KACH,CAAC,CACE,CACP,CAAC,EAEF,WAAK,KAAK,EAAC,KAAK,IACd,WAAK,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,QAAQ,GAAI,EACzC,WAAK,KAAK,EAAC,UAAU,wBAAwB,CACzC,CACF,EAEN,WAAK,KAAK,EAAC,SAAS,IAClB,WAAK,KAAK,EAAC,WAAW,GAAG,EAEzB,sBAAgB,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,EACpG,sBAAgB,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,CAC1E,EAGL,IAAI,CAAC,mBAAmB,KACvB,sCACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,QAAQ,EAAE,OAAO,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC,EAClD,MAAM,EAAE,CAAC;QACP,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;QACjC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;OAC/B,GACD,CACH,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/elements/verdocs-template-recipients/verdocs-template-recipients.scss?tag=verdocs-template-recipients","./src/components/elements/verdocs-template-recipients/verdocs-template-recipients.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-recipients {\n  font-family: $verdocs-primary-font;\n\n  form {\n    background-color: $verdocs-grey-4;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    h5 {\n      font-size: 16px;\n      font-weight: bold;\n      color: $verdocs-deep-blue;\n      margin: 0 0 10px 0;\n    }\n\n    .participants {\n      position: relative;\n    }\n\n    // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n    // background obscures the horizontal lines.\n    .left-line {\n      top: 32px;\n      left: 20px;\n      z-index: 1;\n      width: 12px;\n      bottom: 30px;\n      position: absolute;\n      background: #ffffff;\n      border-left: 3px dotted #9b9b9b;\n    }\n\n    .row {\n      display: flex;\n      column-gap: 0;\n      margin-left: 50px;\n      position: relative;\n      flex-direction: row;\n      padding: 6px 0 4px 0;\n\n      .icon {\n        top: 14px;\n        z-index: 2;\n        left: -40px;\n        width: 24px;\n        height: 24px;\n        position: absolute;\n        background: #ffffff;\n\n        svg {\n          fill: #00000089;\n        }\n      }\n\n      .sender {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        padding: 0 5px 0 15px;\n        line-height: 30px;\n        flex-direction: row;\n        border-radius: 30px;\n        margin: 0 0 0 14px;\n        background-color: $verdocs-grey-3;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .complete {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        padding: 0 15px;\n        line-height: 30px;\n        flex-direction: row;\n        border-radius: 30px;\n        margin: 0 0 0 14px;\n        background-color: $verdocs-grey-3;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .label {\n        font-weight: bold;\n        margin-right: 6px;\n        color: $verdocs-grey-1;\n      }\n\n      .settings-button {\n        margin: 4px 0 0 9px;\n        cursor: pointer;\n      }\n\n      .recipient {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        line-height: 30px;\n        border-radius: 30px;\n        flex-direction: row;\n        padding: 0 5px 0 15px;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .dropzone {\n        width: 14px;\n        height: 30px;\n        //visibility: hidden;\n\n        svg {\n          fill: #cccccc;\n        }\n\n        &.visible {\n          margin: 0 7px;\n          //visibility: visible;\n        }\n\n        &.active {\n          width: 100px;\n          border-radius: 30px;\n          background: #654dcb7f;\n          border: 1px dashed #654dcb;\n\n          svg {\n          }\n        }\n      }\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {IRole, TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, State} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\n\nconst arrayMove = (arr: any[], fromIndex: number, toIndex: number) => {\n  const newArr = [...arr];\n  newArr.splice(toIndex, 0, newArr.splice(fromIndex, 1)[0]);\n  return newArr;\n};\n\ntype TAnnotatedRole = IRole & {order: number};\n\nconst senderLabels: Record<TemplateSenderTypes, string> = {\n  [TemplateSenderTypes.EVERYONE]: 'Everyone',\n  [TemplateSenderTypes.EVERYONE_AS_CREATOR]: 'Everyone as Me',\n  [TemplateSenderTypes.ORGANIZATION_MEMBER]: 'Organization member',\n  [TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR]: 'Organization Member as Me',\n  [TemplateSenderTypes.CREATOR]: 'Me',\n};\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z\"/></svg>';\n\nconst startIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n  // The text the user has entered in the search field\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  full_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n}\n\nexport interface IEmailContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone?: string;\n\n  [key: string]: any;\n}\n\nexport interface IPhoneContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email?: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone: string;\n\n  [key: string]: any;\n}\n\n/**\n * Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n */\n@Component({\n  tag: 'verdocs-template-recipients',\n  styleUrl: 'verdocs-template-recipients.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateRecipients {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: (IEmailContact | IPhoneContact)[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) settingsUpdated: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) contactSelected: EventEmitter<IContactSelectEvent>;\n\n  @State() name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n  @State() sender: TemplateSenderTypes = TemplateSenderTypes.CREATOR;\n  @State() showingSenderDialog = false;\n  @State() orderedRoles: TAnnotatedRole[] = [];\n\n  sequences: number[] = [];\n  rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      this.name = this.templateRole.full_name || '';\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n    }\n\n    this.orderedRoles = [\n      {\n        order: 0,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Seller 1',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 1,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 1,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Seller 2',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 1,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 2,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Buyer 1',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 2,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 3,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Buyer 2',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 2,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n    ];\n\n    this.computeRolesBySequence();\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n    interact('.recipient').draggable({\n      listeners: {\n        start(event) {\n          console.log('drag start', event.type, event.target);\n        },\n        move(event) {\n          const oldX = +(event.target.getAttribute('posX') || 0);\n          const oldY = +(event.target.getAttribute('posY') || 0);\n          const newX = event.dx + oldX;\n          const newY = event.dy + oldY;\n          event.target.setAttribute('posX', newX);\n          event.target.setAttribute('posy', newY);\n          event.target.style.transform = `translate(${newX}px, ${newY}px)`;\n        },\n        end(event) {\n          console.log('end', event);\n          event.target.setAttribute('posX', 0);\n          event.target.setAttribute('posy', 0);\n          event.target.style.transform = `translate(0px, 0px)`;\n        },\n      },\n    });\n\n    interact('.dropzone').dropzone({\n      overlap: 0.05,\n      ondrop: event => {\n        event.target.classList.remove('active');\n\n        console.log(event.relatedTarget.id + ' was dropped into ' + event.target.id);\n\n        const roleName = event.relatedTarget.dataset.rolename;\n        const targetOrder = +event.target.dataset.order;\n        const targetSequence = +event.target.dataset.sequence;\n        // const roleIndex = this.orderedRoles.findIndex(role => role.name === roleToMove);\n\n        const roleIndex = this.orderedRoles.findIndex(role => role.name === roleName);\n        if (roleIndex !== -1) {\n          console.log('Will move', {roleName, targetOrder, targetSequence, roleIndex});\n          const role = this.orderedRoles[roleIndex];\n          role.sequence = targetSequence;\n\n          console.log('before', JSON.parse(JSON.stringify(this.orderedRoles)));\n          this.orderedRoles = arrayMove(this.orderedRoles, roleIndex, targetOrder);\n          this.orderedRoles.forEach((role, index) => {\n            role.order = index;\n          });\n          console.log('after', JSON.parse(JSON.stringify(this.orderedRoles)));\n          this.computeRolesBySequence();\n        }\n      },\n      ondropactivate: e => {\n        // console.log('drop activated');\n        e.target.classList.add('visible');\n      },\n      ondropdeactivate: e => {\n        e.target.classList.remove('visible');\n      },\n      ondragenter: e => {\n        // console.log('drag enter', e);\n        e.target.classList.add('active');\n      },\n      ondragleave: e => {\n        // console.log('drag leave', e);\n        e.target.classList.remove('active');\n      },\n    });\n  }\n\n  computeRolesBySequence() {\n    const rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n    this.orderedRoles.forEach(role => {\n      rolesAtSequence[role.sequence] ||= [];\n      rolesAtSequence[role.sequence].push(role);\n    });\n\n    this.rolesAtSequence = rolesAtSequence;\n\n    console.log('ras', this.rolesAtSequence);\n    this.sequences = Object.keys(rolesAtSequence).map(levelStr => +levelStr);\n    this.sequences.sort((a, b) => a - b);\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.contactSelected?.emit({\n      full_name: this.name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n    });\n\n    this.settingsUpdated?.emit({});\n  }\n\n  render() {\n    console.log('ordered roles', JSON.parse(JSON.stringify(this.orderedRoles)));\n    const roleNames = this.orderedRoles.map(role => role.name) || [];\n    let beforeOrder = 0;\n\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <h5>Participant Order</h5>\n\n        <div class=\"participants\">\n          <div class=\"left-line\" />\n          <div class=\"row\">\n            <div class=\"icon\" innerHTML={startIcon} />\n            <div class=\"sender\">\n              <span class=\"label\">Sender:</span> {senderLabels[this.sender]}{' '}\n              <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n            </div>\n          </div>\n\n          {this.sequences.map(sequence => (\n            <div class=\"row\">\n              <div class=\"icon\" innerHTML={stepIcon} />\n              <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n              {this.rolesAtSequence[sequence].map(role => {\n                beforeOrder = role.order;\n                return (\n                  <Fragment>\n                    <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} data-rolename={role.name}>\n                      {role.name} <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n                    </div>\n                    <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n                  </Fragment>\n                );\n              })}\n            </div>\n          ))}\n\n          <div class=\"row\">\n            <div class=\"icon\" innerHTML={doneIcon} />\n            <div class=\"complete\">Document Complete</div>\n          </div>\n        </div>\n\n        <div class=\"buttons\">\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n        </div>\n\n        {/* We do it this way instead of setting open so the widget resets each time it's displayed, in case the user opens/changes/cancels */}\n        {this.showingSenderDialog && (\n          <verdocs-template-sender-dialog\n            open={true}\n            value={this.sender}\n            onCancel={() => (this.showingSenderDialog = false)}\n            onDone={e => {\n              this.showingSenderDialog = false;\n              this.sender = e.detail.sender;\n            }}\n          />\n        )}\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-template-recipients2.js","mappings":"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","names":[],"sources":["./src/components/elements/verdocs-template-recipients/verdocs-template-recipients.scss?tag=verdocs-template-recipients","./src/components/elements/verdocs-template-recipients/verdocs-template-recipients.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-recipients {\n  font-family: $verdocs-primary-font;\n\n  form {\n    background-color: $verdocs-grey-4;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    h5 {\n      font-size: 16px;\n      font-weight: bold;\n      color: $verdocs-deep-blue;\n      margin: 0 0 10px 0;\n    }\n\n    .participants {\n      position: relative;\n    }\n\n    // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n    // background obscures the horizontal lines.\n    .left-line {\n      top: 32px;\n      left: 20px;\n      z-index: 1;\n      width: 12px;\n      bottom: 30px;\n      position: absolute;\n      background: #ffffff;\n      border-left: 3px dotted #9b9b9b;\n    }\n\n    .row {\n      display: flex;\n      column-gap: 0;\n      margin-left: 50px;\n      position: relative;\n      flex-direction: row;\n      padding: 6px 0 4px 0;\n\n      .icon {\n        top: 14px;\n        z-index: 2;\n        left: -40px;\n        width: 24px;\n        height: 24px;\n        position: absolute;\n        background: #ffffff;\n\n        svg {\n          fill: #00000089;\n        }\n      }\n\n      .sender {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        padding: 0 5px 0 15px;\n        line-height: 30px;\n        flex-direction: row;\n        border-radius: 30px;\n        margin: 0 0 0 14px;\n        background-color: $verdocs-grey-3;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .complete {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        padding: 0 15px;\n        line-height: 30px;\n        flex-direction: row;\n        border-radius: 30px;\n        margin: 0 0 0 14px;\n        background-color: $verdocs-grey-3;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .label {\n        font-weight: bold;\n        margin-right: 6px;\n        color: $verdocs-grey-1;\n      }\n\n      .settings-button {\n        margin: 4px 0 0 9px;\n        cursor: pointer;\n      }\n\n      .recipient {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        line-height: 30px;\n        border-radius: 30px;\n        flex-direction: row;\n        padding: 0 5px 0 15px;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .dropzone {\n        width: 14px;\n        height: 30px;\n        //visibility: hidden;\n\n        svg {\n          fill: #cccccc;\n        }\n\n        &.visible {\n          margin: 0 7px;\n          //visibility: visible;\n        }\n\n        &.active {\n          width: 100px;\n          border-radius: 30px;\n          background: #654dcb7f;\n          border: 1px dashed #654dcb;\n\n          svg {\n          }\n        }\n      }\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {IRole, TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, State} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\n\nconst arrayMove = (arr: any[], fromIndex: number, toIndex: number) => {\n  const newArr = [...arr];\n  newArr.splice(toIndex, 0, newArr.splice(fromIndex, 1)[0]);\n  return newArr;\n};\n\ntype TAnnotatedRole = IRole & {order: number};\n\nconst senderLabels: Record<TemplateSenderTypes, string> = {\n  [TemplateSenderTypes.EVERYONE]: 'Everyone',\n  [TemplateSenderTypes.EVERYONE_AS_CREATOR]: 'Everyone as Me',\n  [TemplateSenderTypes.ORGANIZATION_MEMBER]: 'Organization member',\n  [TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR]: 'Organization Member as Me',\n  [TemplateSenderTypes.CREATOR]: 'Me',\n};\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z\"/></svg>';\n\nconst startIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n  // The text the user has entered in the search field\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  full_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n}\n\nexport interface IEmailContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone?: string;\n\n  [key: string]: any;\n}\n\nexport interface IPhoneContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email?: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone: string;\n\n  [key: string]: any;\n}\n\n/**\n * Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n */\n@Component({\n  tag: 'verdocs-template-recipients',\n  styleUrl: 'verdocs-template-recipients.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateRecipients {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: (IEmailContact | IPhoneContact)[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user selects a contact.\n   */\n  @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n  @State() name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n  @State() sender: TemplateSenderTypes = TemplateSenderTypes.CREATOR;\n  @State() showingSenderDialog = false;\n  @State() orderedRoles: TAnnotatedRole[] = [];\n\n  sequences: number[] = [];\n  rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      this.name = this.templateRole.full_name || '';\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n    }\n\n    this.orderedRoles = [\n      {\n        order: 0,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Seller 1',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 1,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 1,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Seller 2',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 1,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 2,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Buyer 1',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 2,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 3,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Buyer 2',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 2,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n    ];\n\n    this.computeRolesBySequence();\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n    interact('.recipient').draggable({\n      listeners: {\n        start(event) {\n          console.log('drag start', event.type, event.target);\n        },\n        move(event) {\n          const oldX = +(event.target.getAttribute('posX') || 0);\n          const oldY = +(event.target.getAttribute('posY') || 0);\n          const newX = event.dx + oldX;\n          const newY = event.dy + oldY;\n          event.target.setAttribute('posX', newX);\n          event.target.setAttribute('posy', newY);\n          event.target.style.transform = `translate(${newX}px, ${newY}px)`;\n        },\n        end(event) {\n          console.log('end', event);\n          event.target.setAttribute('posX', 0);\n          event.target.setAttribute('posy', 0);\n          event.target.style.transform = `translate(0px, 0px)`;\n        },\n      },\n    });\n\n    interact('.dropzone').dropzone({\n      overlap: 0.05,\n      ondrop: event => {\n        event.target.classList.remove('active');\n\n        console.log(event.relatedTarget.id + ' was dropped into ' + event.target.id);\n\n        const roleName = event.relatedTarget.dataset.rolename;\n        const targetOrder = +event.target.dataset.order;\n        const targetSequence = +event.target.dataset.sequence;\n        // const roleIndex = this.orderedRoles.findIndex(role => role.name === roleToMove);\n\n        const roleIndex = this.orderedRoles.findIndex(role => role.name === roleName);\n        if (roleIndex !== -1) {\n          console.log('Will move', {roleName, targetOrder, targetSequence, roleIndex});\n          const role = this.orderedRoles[roleIndex];\n          role.sequence = targetSequence;\n\n          console.log('before', JSON.parse(JSON.stringify(this.orderedRoles)));\n          this.orderedRoles = arrayMove(this.orderedRoles, roleIndex, targetOrder);\n          this.orderedRoles.forEach((role, index) => {\n            role.order = index;\n          });\n          console.log('after', JSON.parse(JSON.stringify(this.orderedRoles)));\n          this.computeRolesBySequence();\n        }\n      },\n      ondropactivate: e => {\n        // console.log('drop activated');\n        e.target.classList.add('visible');\n      },\n      ondropdeactivate: e => {\n        e.target.classList.remove('visible');\n      },\n      ondragenter: e => {\n        // console.log('drag enter', e);\n        e.target.classList.add('active');\n      },\n      ondragleave: e => {\n        // console.log('drag leave', e);\n        e.target.classList.remove('active');\n      },\n    });\n  }\n\n  computeRolesBySequence() {\n    const rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n    this.orderedRoles.forEach(role => {\n      rolesAtSequence[role.sequence] ||= [];\n      rolesAtSequence[role.sequence].push(role);\n    });\n\n    this.rolesAtSequence = rolesAtSequence;\n\n    console.log('ras', this.rolesAtSequence);\n    this.sequences = Object.keys(rolesAtSequence).map(levelStr => +levelStr);\n    this.sequences.sort((a, b) => a - b);\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.next?.emit({\n      full_name: this.name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n    });\n  }\n\n  render() {\n    console.log('ordered roles', JSON.parse(JSON.stringify(this.orderedRoles)));\n    const roleNames = this.orderedRoles.map(role => role.name) || [];\n    let beforeOrder = 0;\n\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <h5>Participant Order</h5>\n\n        <div class=\"participants\">\n          <div class=\"left-line\" />\n          <div class=\"row\">\n            <div class=\"icon\" innerHTML={startIcon} />\n            <div class=\"sender\">\n              <span class=\"label\">Sender:</span> {senderLabels[this.sender]}{' '}\n              <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n            </div>\n          </div>\n\n          {this.sequences.map(sequence => (\n            <div class=\"row\">\n              <div class=\"icon\" innerHTML={stepIcon} />\n              <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n              {this.rolesAtSequence[sequence].map(role => {\n                beforeOrder = role.order;\n                return (\n                  <Fragment>\n                    <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} data-rolename={role.name}>\n                      {role.name} <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n                    </div>\n                    <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n                  </Fragment>\n                );\n              })}\n            </div>\n          ))}\n\n          <div class=\"row\">\n            <div class=\"icon\" innerHTML={doneIcon} />\n            <div class=\"complete\">Document Complete</div>\n          </div>\n        </div>\n\n        <div class=\"buttons\">\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onClick={e => this.handleSubmit(e)} />\n        </div>\n\n        {/* We do it this way instead of setting open so the widget resets each time it's displayed, in case the user opens/changes/cancels */}\n        {this.showingSenderDialog && (\n          <verdocs-template-sender-dialog\n            value={this.sender}\n            onCancel={() => (this.showingSenderDialog = false)}\n            onNext={e => {\n              this.showingSenderDialog = false;\n              this.sender = e.detail;\n            }}\n          />\n        )}\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-template-sender-dialog2.js

@@ -4,16 +4,15 @@ import { d as defineCustomElement$3 } from './verdocs-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$1 } from './verdocs-radio-button2.js';
 
-const verdocsTemplateSenderDialogCss = "verdocs-template-sender-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-sender-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-sender-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-template-sender-dialog .dialog{width:340px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-template-sender-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-template-sender-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-sender-dialog .buttons verdocs-button{margin-left:16px}verdocs-template-sender-dialog .options{row-gap:10px}verdocs-template-sender-dialog .options .option{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-sender-dialog .options .option .description{margin-left:10px}verdocs-template-sender-dialog .options .option .description .name{display:inline-block;vertical-align:top;margin-top:4px;margin-right:4px}";
+const verdocsTemplateSenderDialogCss = "verdocs-template-sender-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-sender-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-sender-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-template-sender-dialog .dialog{width:340px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-template-sender-dialog .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-sender-dialog .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-sender-dialog .buttons verdocs-button{margin-left:16px}verdocs-template-sender-dialog .options{row-gap:10px}verdocs-template-sender-dialog .options .option{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-sender-dialog .options .option .description{margin-left:10px}verdocs-template-sender-dialog .options .option .description .name{display:inline-block;vertical-align:top;margin-top:4px;margin-right:4px}";
 
 const VerdocsTemplateSenderDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.cancel = createEvent(this, "cancel", 7);
-    this.done = createEvent(this, "done", 7);
+    this.next = createEvent(this, "next", 7);
     this.value = TemplateSenderTypes.EVERYONE;
-    this.open = false;
     this.newValue = TemplateSenderTypes.EVERYONE;
   }
   componentWillLoad() {
@@ -21,7 +20,6 @@ const VerdocsTemplateSenderDialog = /*@__PURE__*/ proxyCustomElement(class exten
   }
   handleCancel() {
     this.cancel.emit();
-    this.open = false;
   }
   // We need a separate event handler for clicking the background because it can receive events "through" other child components
   handleDismiss(e) {
@@ -31,19 +29,17 @@ const VerdocsTemplateSenderDialog = /*@__PURE__*/ proxyCustomElement(class exten
     }
   }
   handleDone() {
-    this.done.emit({ sender: this.newValue });
-    this.open = false;
+    this.next.emit(this.newValue);
   }
   handleSelectSetting(value) {
     this.newValue = value;
   }
   render() {
-    return (h(Host, { style: { display: this.open ? 'block' : 'none' } }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "options" }, h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.EVERYONE, name: "template-sender", value: TemplateSenderTypes.EVERYONE, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR, name: "template-sender", value: TemplateSenderTypes.EVERYONE_AS_CREATOR, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER, name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.CREATOR, name: "template-sender", value: TemplateSenderTypes.CREATOR, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Me"), h("verdocs-help-icon", { text: "Only I can use this template." })))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onPress: () => this.handleDone() }))))));
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "options" }, h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.EVERYONE, checked: this.value === TemplateSenderTypes.EVERYONE, onInput: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.EVERYONE_AS_CREATOR, checked: this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER, checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER, onInput: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.CREATOR, checked: this.value === TemplateSenderTypes.CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Me"), h("verdocs-help-icon", { text: "Only I can use this template." })))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onClick: () => this.handleDone() }))))));
   }
   static get style() { return verdocsTemplateSenderDialogCss; }
 }, [0, "verdocs-template-sender-dialog", {
     "value": [1],
-    "open": [4],
     "newValue": [32]
   }]);
 function defineCustomElement() {

package/dist/components/verdocs-template-sender-dialog2.js.map

@@ -1 +1 @@
-{"file":"verdocs-template-sender-dialog2.js","mappings":"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","names":[],"sources":["./src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.scss?tag=verdocs-template-sender-dialog","./src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-sender-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 340px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .options {\n    row-gap: 10px;\n\n    .option {\n      display: flex;\n      flex-direction: row;\n\n      .description {\n        margin-left: 10px;\n\n        .name {\n          display: inline-block;\n          vertical-align: top;\n          margin-top: 4px;\n          margin-right: 4px;\n        }\n      }\n    }\n  }\n}\n","import {TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows a template sender to be selected.\n */\n@Component({\n  tag: 'verdocs-template-sender-dialog',\n  styleUrl: 'verdocs-template-sender-dialog.scss',\n})\nexport class VerdocsTemplateSenderDialog {\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() value: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) done: EventEmitter<{sender: TemplateSenderTypes}>;\n\n  @State() newValue: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  componentWillLoad() {\n    this.newValue = this.value;\n  }\n\n  handleCancel() {\n    this.cancel.emit();\n    this.open = false;\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.done.emit({sender: this.newValue});\n    this.open = false;\n  }\n\n  handleSelectSetting(value: TemplateSenderTypes) {\n    this.newValue = value;\n  }\n\n  render() {\n    return (\n      <Host style={{display: this.open ? 'block' : 'none'}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"options\">\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.EVERYONE}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web</div>\n                  <verdocs-help-icon text=\"Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web as me</div>\n                  <verdocs-help-icon text=\"Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization as me</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.CREATOR}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.CREATOR}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Me</div>\n                  <verdocs-help-icon text=\"Only I can use this template.\" />\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onPress={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onPress={() => this.handleDone()} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-template-sender-dialog2.js","mappings":"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","names":[],"sources":["./src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.scss?tag=verdocs-template-sender-dialog","./src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-sender-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 340px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    font-size: 20px;\n    font-weight: 500;\n    flex-direction: row;\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .options {\n    row-gap: 10px;\n\n    .option {\n      display: flex;\n      flex-direction: row;\n\n      .description {\n        margin-left: 10px;\n\n        .name {\n          display: inline-block;\n          vertical-align: top;\n          margin-top: 4px;\n          margin-right: 4px;\n        }\n      }\n    }\n  }\n}\n","import {TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows a template sender to be selected.\n */\n@Component({\n  tag: 'verdocs-template-sender-dialog',\n  styleUrl: 'verdocs-template-sender-dialog.scss',\n})\nexport class VerdocsTemplateSenderDialog {\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() value: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the selected value.\n   */\n  @Event({composed: true}) next: EventEmitter<TemplateSenderTypes>;\n\n  @State() newValue: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  componentWillLoad() {\n    this.newValue = this.value;\n  }\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.newValue);\n  }\n\n  handleSelectSetting(value: TemplateSenderTypes) {\n    this.newValue = value;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"options\">\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE}\n                  checked={this.value === TemplateSenderTypes.EVERYONE}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web</div>\n                  <verdocs-help-icon text=\"Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  checked={this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web as me</div>\n                  <verdocs-help-icon text=\"Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization as me</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.CREATOR}\n                  checked={this.value === TemplateSenderTypes.CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Me</div>\n                  <verdocs-help-icon text=\"Only I can use this template.\" />\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onClick={() => this.handleDone()} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-text-input2.js

@@ -12,15 +12,7 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.autocomplete = '';
     this.type = 'text';
     this.disabled = false;
-    this._value = '';
   }
-  componentWillLoad() {
-    // this._value = this.value;
-  }
-  componentDidLoad() { }
-  // handleInput(e: any) {
-  //   this._value = e.target.value;
-  // }
   render() {
     return (h(Host, { class: "input-field" }, h("label", null, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("input", { type: this.type, value: this.value, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete }))));
   }
@@ -31,8 +23,7 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "placeholder": [1],
     "autocomplete": [1],
     "type": [1],
-    "disabled": [4],
-    "_value": [32]
+    "disabled": [4]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/verdocs-text-input2.js.map

@@ -1 +1 @@
-{"file":"verdocs-text-input2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,2+BAA2+B;;MCW1/B,gBAAgB;;;;iBAIH,EAAE;iBAKF,EAAE;uBAKI,EAAE;wBAKD,EAAE;gBAMmD,MAAM;oBAK9D,KAAK;kBAEP,EAAE;;EAE5B,iBAAiB;;GAEhB;EAED,gBAAgB,MAAK;;;;EAMrB,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa,IACvB,iBACG,IAAI,CAAC,KAAK,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,GAAG,cAAO,EACzE,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,eAAe,mBACP,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,GAE/B,CACI,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","./src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-text-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 28px;\n    padding: 4px 12px;\n    outline: none;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      outline: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 700;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n}\n","import {Component, Prop, State, Host, h} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() _value: string = '';\n\n  componentWillLoad() {\n    // this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  // handleInput(e: any) {\n  //   this._value = e.target.value;\n  // }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            value={this.value}\n            class=\"input-element\"\n            data-lpignore=\"true\"\n            disabled={this.disabled}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n            // onInput={e => this.handleInput(e)}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-text-input2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,2+BAA2+B;;MCW1/B,gBAAgB;;;;iBAIH,EAAE;iBAKF,EAAE;uBAKI,EAAE;wBAKD,EAAE;gBAMmD,MAAM;oBAK9D,KAAK;;EAEjC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa,IACvB,iBACG,IAAI,CAAC,KAAK,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,GAAG,cAAO,EACzE,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,eAAe,mBACP,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,GAC/B,CACI,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","./src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-text-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 28px;\n    padding: 4px 12px;\n    outline: none;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      outline: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 700;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n}\n","import {Component, Prop, Host, h} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            value={this.value}\n            class=\"input-element\"\n            data-lpignore=\"true\"\n            disabled={this.disabled}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-toggle.js

@@ -14,28 +14,6 @@ const VerdocsToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     var _a;
     this.selectedOption = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.defaultSelection) || 0;
   }
-  // @Listen('click', {
-  //   target: 'document',
-  //   capture: true,
-  //   passive: false,
-  // })
-  // handleClick(event) {
-  //   event.preventDefault();
-  //   let container = event.target;
-  //   if (container.matches('toggle-icon-buttons')) {
-  //     container = event.target.shadowRoot;
-  //     const element = container.activeElement;
-  //     const siblings = Array.from(element.parentElement.children).filter(child => {
-  //       return child !== element;
-  //     });
-  //     siblings.map((sibling: any) => {
-  //       return sibling.classList.remove('selected');
-  //     });
-  //     if (!element.classList.contains('selected')) {
-  //       element.classList.add('selected');
-  //     }
-  //   }
-  // }
   render() {
     return (h("div", { class: "container" }, h("span", { class: "label" }, `${this.options.label}:`), h("div", { class: "buttons" }, this.options.buttons.map((button, index) => (h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index === this.selectedOption ? 'selected' : '', onClick: () => {
         console.log('clicked', index);

package/dist/components/verdocs-toggle.js.map

@@ -1 +1 @@
-{"file":"verdocs-toggle.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,ulCAAulC;;MCwBnmCA,eAAa;;;;;;0BAWU,CAAC;;EAEnC,iBAAiB;;IACf,IAAI,CAAC,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,gBAAgB,KAAI,CAAC,CAAC;GAC3D;;;;;;;;;;;;;;;;;;;;;;;EAyBD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAQ,EACrD,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAgB,EAAE,KAAa,MACxD,cACE,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc,GAAG,UAAU,GAAG,EAAE,EACtD,OAAO,EAAE;QACP,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC7B,GACD,CACH,CAAC,CACE,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsToggle"],"sources":["./src/components/controls/verdocs-toggle/verdocs-toggle.scss?tag=verdocs-toggle","./src/components/controls/verdocs-toggle/verdocs-toggle.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toggle {\n  font-family: $primary-font;\n\n  .container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    background-color: $container-bg;\n  }\n\n  .label {\n    font-size: 24px;\n    font-weight: 700;\n    color: $medium-bg;\n    align-self: center;\n    margin-right: 27px;\n    font-family: sans-serif;\n  }\n\n  .buttons {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n  }\n\n  .buttons button {\n    width: 60px;\n    height: 60px;\n    border: 2px solid $item-border-color;\n    border-radius: 5px;\n    cursor: pointer;\n  }\n\n  .buttons button:not(:last-child) {\n    margin-right: 11px;\n  }\n\n  .buttons svg {\n    width: 30px;\n    height: 30px;\n  }\n\n  .buttons button:hover {\n    background-color: $item-border-color;\n    transition: 0.25s;\n  }\n\n  .buttons button:hover svg {\n    fill: $container-bg;\n    transition: 0.25s;\n  }\n\n  .selected {\n    background-color: $border-color;\n    transition: 0.25s;\n  }\n\n  .selected svg {\n    fill: #ffffff;\n    transition: 0.25s;\n  }\n}\n","import {Component, Prop, h, State} from '@stencil/core';\n\nexport interface IButtons {\n  id: string;\n  icon: string;\n}\n\nexport interface IToggleIconButtons {\n  label: string;\n  defaultSelection: number;\n  buttons: IButtons[];\n}\n\n/**\n * Displays a label and a set of buttons, also allowing a default selection of a button\n *\n * ```typescript\n *\n * ```\n */\n@Component({\n  tag: 'verdocs-toggle',\n  styleUrl: 'verdocs-toggle.scss',\n})\nexport class VerdocsToggle {\n  /**\n   * The tags to display\n   */\n  @Prop() options: IToggleIconButtons;\n\n  /**\n   * The \"theme\" to be used\n   */\n  @Prop() theme: 'light' | 'dark';\n\n  @State() selectedOption: number = 0;\n\n  componentWillLoad() {\n    this.selectedOption = this.options?.defaultSelection || 0;\n  }\n\n  // @Listen('click', {\n  //   target: 'document',\n  //   capture: true,\n  //   passive: false,\n  // })\n  // handleClick(event) {\n  //   event.preventDefault();\n  //   let container = event.target;\n  //   if (container.matches('toggle-icon-buttons')) {\n  //     container = event.target.shadowRoot;\n  //     const element = container.activeElement;\n  //     const siblings = Array.from(element.parentElement.children).filter(child => {\n  //       return child !== element;\n  //     });\n  //     siblings.map((sibling: any) => {\n  //       return sibling.classList.remove('selected');\n  //     });\n  //     if (!element.classList.contains('selected')) {\n  //       element.classList.add('selected');\n  //     }\n  //   }\n  // }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <span class=\"label\">{`${this.options.label}:`}</span>\n        <div class=\"buttons\">\n          {this.options.buttons.map((button: IButtons, index: number) => (\n            <button\n              id={button.id}\n              key={button.id}\n              innerHTML={button.icon}\n              class={index === this.selectedOption ? 'selected' : ''}\n              onClick={() => {\n                console.log('clicked', index);\n                this.selectedOption = index;\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-toggle.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,ulCAAulC;;MCoBnmCA,eAAa;;;;;;0BAWU,CAAC;;EAEnC,iBAAiB;;IACf,IAAI,CAAC,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,gBAAgB,KAAI,CAAC,CAAC;GAC3D;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAQ,EACrD,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAgB,EAAE,KAAa,MACxD,cACE,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc,GAAG,UAAU,GAAG,EAAE,EACtD,OAAO,EAAE;QACP,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC7B,GACD,CACH,CAAC,CACE,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsToggle"],"sources":["./src/components/controls/verdocs-toggle/verdocs-toggle.scss?tag=verdocs-toggle","./src/components/controls/verdocs-toggle/verdocs-toggle.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toggle {\n  font-family: $primary-font;\n\n  .container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    background-color: $container-bg;\n  }\n\n  .label {\n    font-size: 24px;\n    font-weight: 700;\n    color: $medium-bg;\n    align-self: center;\n    margin-right: 27px;\n    font-family: sans-serif;\n  }\n\n  .buttons {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n  }\n\n  .buttons button {\n    width: 60px;\n    height: 60px;\n    border: 2px solid $item-border-color;\n    border-radius: 5px;\n    cursor: pointer;\n  }\n\n  .buttons button:not(:last-child) {\n    margin-right: 11px;\n  }\n\n  .buttons svg {\n    width: 30px;\n    height: 30px;\n  }\n\n  .buttons button:hover {\n    background-color: $item-border-color;\n    transition: 0.25s;\n  }\n\n  .buttons button:hover svg {\n    fill: $container-bg;\n    transition: 0.25s;\n  }\n\n  .selected {\n    background-color: $border-color;\n    transition: 0.25s;\n  }\n\n  .selected svg {\n    fill: #ffffff;\n    transition: 0.25s;\n  }\n}\n","import {Component, Prop, h, State} from '@stencil/core';\n\nexport interface IButtons {\n  id: string;\n  icon: string;\n}\n\nexport interface IToggleIconButtons {\n  label: string;\n  defaultSelection: number;\n  buttons: IButtons[];\n}\n\n/**\n * Displays a label and a set of buttons, also allowing a default selection of a button\n */\n@Component({\n  tag: 'verdocs-toggle',\n  styleUrl: 'verdocs-toggle.scss',\n})\nexport class VerdocsToggle {\n  /**\n   * The tags to display\n   */\n  @Prop() options: IToggleIconButtons;\n\n  /**\n   * The \"theme\" to be used\n   */\n  @Prop() theme: 'light' | 'dark';\n\n  @State() selectedOption: number = 0;\n\n  componentWillLoad() {\n    this.selectedOption = this.options?.defaultSelection || 0;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <span class=\"label\">{`${this.options.label}:`}</span>\n        <div class=\"buttons\">\n          {this.options.buttons.map((button: IButtons, index: number) => (\n            <button\n              id={button.id}\n              key={button.id}\n              innerHTML={button.icon}\n              class={index === this.selectedOption ? 'selected' : ''}\n              onClick={() => {\n                console.log('clicked', index);\n                this.selectedOption = index;\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-toolbar-icon2.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createPopper } from './popper.js';
 
 const verdocsToolbarIconCss = "verdocs-toolbar-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-toolbar-icon .icon{display:inline-block;cursor:pointer}verdocs-toolbar-icon .icon svg{fill:#5c6575}verdocs-toolbar-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;padding:5px 10px;font-size:13px;position:relative;border-radius:4px;z-index:10000}verdocs-toolbar-icon .tooltip .arrow,verdocs-toolbar-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-toolbar-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-toolbar-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-toolbar-icon .tooltip[data-show]{display:block}verdocs-toolbar-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
@@ -7,7 +7,6 @@ const VerdocsToolbarIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   constructor() {
     super();
     this.__registerHost();
-    this.press = createEvent(this, "press", 7);
     this.text = '';
     this.icon = '';
     this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
@@ -33,12 +32,11 @@ const VerdocsToolbarIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     var _a;
     (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
   }
-  handlePress() {
-    var _a;
-    (_a = this.press) === null || _a === void 0 ? void 0 : _a.emit();
-  }
+  // handlePress() {
+  //   this.press?.emit();
+  // }
   render() {
-    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), onClick: () => this.handlePress(), ref: el => (this.iconEl = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltip = el) }, this.text, h("div", { "data-popper-arrow": "true", class: "arrow" }))));
+    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltip = el) }, this.text, h("div", { "data-popper-arrow": "true", class: "arrow" }))));
   }
   static get style() { return verdocsToolbarIconCss; }
 }, [0, "verdocs-toolbar-icon", {

package/dist/components/verdocs-toolbar-icon2.js.map

@@ -1 +1 @@
-{"file":"verdocs-toolbar-icon2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,yrCAAyrC;;MCW1sC,kBAAkB;;;;;gBAQN,EAAE;gBAKF,EAAE;uBAOF,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE;;EAE5F,gBAAgB;IACd,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;;;KAG7D,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;MAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;GACF;EAED,IAAI;;IACF,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,GAAG,KAAK,CAAC,SAAQ,CAAC,CAAC;GAC/C;EAED,IAAI;;IACF,MAAA,IAAI,CAAC,OAAO,0CAAE,eAAe,CAAC,WAAW,CAAC,CAAC;GAC5C;EAED,WAAW;;IACT,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,CAAC;GACpB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,IACb,+BACoB,IAAI,CAAC,WAAW,EAClC,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC1B,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC/B,MAAM,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EACzB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAoB,CAAC,GAC/C,EACF,WACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,SAAS,2BAEO,QAAQ,EAC9B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,IAE/C,IAAI,CAAC,IAAI,EACV,gCAAuB,MAAM,EAAC,KAAK,EAAC,OAAO,GAAG,CAC1C,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    padding: 5px 10px;\n    font-size: 13px;\n    position: relative;\n    border-radius: 4px;\n    z-index: 10000;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  handlePress() {\n    this.press?.emit();\n  }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          onClick={() => this.handlePress()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div\n          id={this.containerId}\n          role=\"tooltip\"\n          class=\"tooltip\"\n          // style=\"display: none; visibility: visible; margin: 0px; position: absolute; inset: 0px auto auto 0px; transform: translate(951px, 5510px);\"\n          data-popper-placement=\"bottom\"\n          ref={el => (this.tooltip = el as HTMLDivElement)}\n        >\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-toolbar-icon2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,yrCAAyrC;;MCY1sC,kBAAkB;;;;gBAQN,EAAE;gBAKF,EAAE;uBAOF,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE;;EAE5F,gBAAgB;IACd,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;;;KAG7D,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;MAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;GACF;EAED,IAAI;;IACF,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,GAAG,KAAK,CAAC,SAAQ,CAAC,CAAC;GAC/C;EAED,IAAI;;IACF,MAAA,IAAI,CAAC,OAAO,0CAAE,eAAe,CAAC,WAAW,CAAC,CAAC;GAC5C;;;;EAMD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,IACb,+BACoB,IAAI,CAAC,WAAW,EAClC,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC1B,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC/B,MAAM,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EACzB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAoB,CAAC,GAC/C,EACF,WAAK,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,2BAAuB,QAAQ,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,IACtI,IAAI,CAAC,IAAI,EACV,gCAAuB,MAAM,EAAC,KAAK,EAAC,OAAO,GAAG,CAC1C,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    padding: 5px 10px;\n    font-size: 13px;\n    position: relative;\n    border-radius: 4px;\n    z-index: 10000;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  // @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  // handlePress() {\n  //   this.press?.emit();\n  // }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement=\"bottom\" ref={el => (this.tooltip = el as HTMLDivElement)}>\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-upload-dialog2.js

@@ -27,31 +27,21 @@ var fileToDataUrl = function (file) {
     });
 };
 
-const Paperclip = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-</svg>
-`;
-
-const Trash = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-</svg>
-`;
-
 const verdocsUploadDialogCss = "verdocs-upload-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-upload-dialog .dialog{width:300px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-upload-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-upload-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-upload-dialog .buttons verdocs-button{margin-left:16px}verdocs-upload-dialog .drop-target{padding:30px 15px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#f5f5f5;border:2px dashed #979797;min-height:260px;text-align:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:rgba(0, 0, 0, 0.54);opacity:1;margin:20px 0}verdocs-upload-dialog .drop-target p{margin:12px 0}verdocs-upload-dialog .drop-target.dragging-over{border:5px solid #4c56cb}verdocs-upload-dialog .drop-target>verdocs-button{margin:12px 0;display:inline-block}verdocs-upload-dialog .attachments{height:56px;font-size:0;margin:20px 0;padding:0 16px;line-height:56px;white-space:normal;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)}verdocs-upload-dialog .attachments .attachment{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .attachments .attachment .icon{width:18px;height:18px;line-height:18px}verdocs-upload-dialog .attachments .attachment .icon.trash{cursor:pointer}verdocs-upload-dialog .attachments .attachment .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;padding:0 8px;font-size:14px;font-weight:400}";
 
+const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>`;
+const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
 const VerdocsUploadDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.cancel = createEvent(this, "cancel", 7);
-    this.done = createEvent(this, "done", 7);
-    this.open = false;
+    this.next = createEvent(this, "next", 7);
     this.draggingOver = false;
     this.decodedFiles = [];
   }
   handleCancel() {
     this.cancel.emit();
-    this.open = false;
   }
   // We need a separate event handler for clicking the background because it can receive events "through" other child components
   handleDismiss(e) {
@@ -61,8 +51,7 @@ const VerdocsUploadDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     }
   }
   handleDone() {
-    this.done.emit(this.decodedFiles);
-    this.open = false;
+    this.next.emit(this.decodedFiles);
   }
   handleDragOver(e) {
     e.preventDefault();
@@ -99,22 +88,19 @@ const VerdocsUploadDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     var _a;
     (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
   }
-  async handleFileChange(e) {
-    var _a, _b, _c;
-    console.log('fileChange', e);
-    console.log('files', (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files);
+  async handleFileChange() {
+    var _a, _b;
     let droppedFiles = [];
-    for (let i = 0; i < ((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files.length); i++) {
-      droppedFiles.push((_c = this.fileInput) === null || _c === void 0 ? void 0 : _c.files[i]);
+    for (let i = 0; i < ((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files.length); i++) {
+      droppedFiles.push((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files[i]);
     }
     this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
   }
   render() {
-    return (h(Host, { style: { display: this.open ? 'block' : 'none' } }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onPress: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: e => this.handleFileChange(e) }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: Paperclip }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: Trash, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onPress: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onClick: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
   }
   static get style() { return verdocsUploadDialogCss; }
 }, [0, "verdocs-upload-dialog", {
-    "open": [4],
     "draggingOver": [32],
     "decodedFiles": [32]
   }]);

package/dist/components/verdocs-upload-dialog2.js.map

@@ -1 +1 @@
-{"file":"verdocs-upload-dialog2.js","mappings":"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","names":[],"sources":["./node_modules/@verdocs/js-sdk/Utils/Files.js","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"sourcesContent":["/**\n * Given a File, extract the file's content as a base64 encoded data URL. The response will have a prefix that\n * includes the MIME type of the file, e.g. \"data:image/jpeg;base64,iVBORw0K......\"\n */\nexport var fileToDataUrl = function (file) {\n    return new Promise(function (resolve, reject) {\n        var reader = new FileReader();\n        reader.onload = function () {\n            return resolve({\n                lastModified: file.lastModified,\n                size: file.size,\n                type: file.type,\n                name: file.name,\n                data: reader.result,\n            });\n        };\n        reader.onerror = reject;\n        if (file) {\n            reader.readAsDataURL(file);\n        }\n        else {\n            reject(new Error('Invalid file'));\n        }\n    });\n};\n","@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 300px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .drop-target {\n    padding: 30px 15px;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    background-color: #f5f5f5;\n    border: 2px dashed #979797;\n    min-height: 260px;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    color: rgba(0, 0, 0, 0.54);\n    opacity: 1;\n    margin: 20px 0;\n\n    p {\n      margin: 12px 0;\n    }\n\n    &.dragging-over {\n      border: 5px solid $verdocs-deep-blue;\n    }\n\n    > verdocs-button {\n      margin: 12px 0;\n      display: inline-block;\n    }\n  }\n\n  .attachments {\n    height: 56px;\n    font-size: 0;\n    margin: 20px 0;\n    padding: 0 16px;\n    line-height: 56px;\n    white-space: normal;\n    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n\n    .attachment {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      .icon {\n        width: 18px;\n        height: 18px;\n        line-height: 18px;\n\n        &.trash {\n          cursor: pointer;\n        }\n      }\n\n      .name {\n        flex: 1;\n        display: flex;\n        padding: 0 8px;\n        font-size: 14px;\n        font-weight: 400;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\nimport Paperclip from './paperclip.svg';\nimport Trash from './trash.svg';\n\n/**\n * Display a file upload experience.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) done: EventEmitter<FileWithData[]>;\n\n  @State() draggingOver = false;\n\n  @State() decodedFiles = [] as FileWithData[];\n\n  handleCancel() {\n    this.cancel.emit();\n    this.open = false;\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.done.emit(this.decodedFiles);\n    this.open = false;\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n\n    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n    let droppedFiles = [] as File[];\n    if (e.dataTransfer.items) {\n      for (let i = 0; i < e.dataTransfer.items.length; i++) {\n        if (e.dataTransfer.items[i].kind === 'file') {\n          const file = e.dataTransfer.items[i].getAsFile();\n          droppedFiles.push(file);\n        }\n      }\n    } else {\n      droppedFiles = e.dataTransfer.files;\n    }\n\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.decodedFiles];\n    newFiles.splice(index, 1);\n    this.decodedFiles = newFiles;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange(e) {\n    console.log('fileChange', e);\n    console.log('files', this.fileInput?.files);\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  render() {\n    return (\n      <Host style={{display: this.open ? 'block' : 'none'}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.decodedFiles.length < 1 ? (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop a file here...</p>\n                <p>- or -</p>\n\n                <verdocs-button label=\"Select a file...\" onPress={() => this.handleSelectFile()} />\n                <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={e => this.handleFileChange(e)} />\n              </div>\n            ) : (\n              <div class=\"attachments\">\n                {this.decodedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={Paperclip} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={Trash} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onPress={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onPress={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-upload-dialog2.js","mappings":"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","names":[],"sources":["./node_modules/@verdocs/js-sdk/Utils/Files.js","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"sourcesContent":["/**\n * Given a File, extract the file's content as a base64 encoded data URL. The response will have a prefix that\n * includes the MIME type of the file, e.g. \"data:image/jpeg;base64,iVBORw0K......\"\n */\nexport var fileToDataUrl = function (file) {\n    return new Promise(function (resolve, reject) {\n        var reader = new FileReader();\n        reader.onload = function () {\n            return resolve({\n                lastModified: file.lastModified,\n                size: file.size,\n                type: file.type,\n                name: file.name,\n                data: reader.result,\n            });\n        };\n        reader.onerror = reject;\n        if (file) {\n            reader.readAsDataURL(file);\n        }\n        else {\n            reject(new Error('Invalid file'));\n        }\n    });\n};\n","@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 300px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .drop-target {\n    padding: 30px 15px;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    background-color: #f5f5f5;\n    border: 2px dashed #979797;\n    min-height: 260px;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    color: rgba(0, 0, 0, 0.54);\n    opacity: 1;\n    margin: 20px 0;\n\n    p {\n      margin: 12px 0;\n    }\n\n    &.dragging-over {\n      border: 5px solid $verdocs-deep-blue;\n    }\n\n    > verdocs-button {\n      margin: 12px 0;\n      display: inline-block;\n    }\n  }\n\n  .attachments {\n    height: 56px;\n    font-size: 0;\n    margin: 20px 0;\n    padding: 0 16px;\n    line-height: 56px;\n    white-space: normal;\n    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n\n    .attachment {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      .icon {\n        width: 18px;\n        height: 18px;\n        line-height: 18px;\n\n        &.trash {\n          cursor: pointer;\n        }\n      }\n\n      .name {\n        flex: 1;\n        display: flex;\n        padding: 0 8px;\n        font-size: 14px;\n        font-weight: 400;\n      }\n    }\n  }\n}\n","import {Component, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" /></svg>`;\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\n/**\n * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by\n * callers with a variety of workflows. Instead, data about the chosen file will be passed to the\n * caller via the onNext event handler.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  /**\n   * Event fired when the dialog is cancelled.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the file selected.\n   */\n  @Event({composed: true}) next: EventEmitter<FileWithData[]>;\n\n  @State() draggingOver = false;\n\n  @State() decodedFiles = [] as FileWithData[];\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.decodedFiles);\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n\n    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n    let droppedFiles = [] as File[];\n    if (e.dataTransfer.items) {\n      for (let i = 0; i < e.dataTransfer.items.length; i++) {\n        if (e.dataTransfer.items[i].kind === 'file') {\n          const file = e.dataTransfer.items[i].getAsFile();\n          droppedFiles.push(file);\n        }\n      }\n    } else {\n      droppedFiles = e.dataTransfer.files;\n    }\n\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.decodedFiles];\n    newFiles.splice(index, 1);\n    this.decodedFiles = newFiles;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange() {\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.decodedFiles.length < 1 ? (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop a file here...</p>\n                <p>- or -</p>\n\n                <verdocs-button label=\"Select a file...\" onClick={() => this.handleSelectFile()} />\n                <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={() => this.handleFileChange()} />\n              </div>\n            ) : (\n              <div class=\"attachments\">\n                {this.decodedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={PaperclipIcon} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={TrashIcon} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onClick={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}