@yoobic/yobi 8.3.0-35 → 8.3.0-38

package/dist/collection/feature-platform/admin/draw-flow/draw-flow.js

@@ -1,31 +1,27 @@
 import { findParent, translate } from '@shared/utils';
 import { Component, Event, forceUpdate, h, Method, Prop } from '@stencil/core';
 import Drawflow from 'drawflow';
-import { isEmpty } from 'lodash-es';
+import { isEmpty, keys, max } from 'lodash-es';
 export class YooDrawFlowComponent {
   constructor() {
-    this.exportTriggers = ['nodeCreated', 'nodeRemoved', 'nodeMoved', 'connectionCreated', 'connectionRemoved', 'moduleCreated', 'moduleChanged', 'moduleRemoved'];
+    this.exportTriggers = ['nodeCreated', 'nodeRemoved', 'nodeMoved', 'connectionCreated', 'connectionRemoved', 'moduleCreated', 'moduleChanged', 'moduleRemoved', 'zoom', 'translate'];
   }
   async addBlock(block) {
-    var _a, _b, _c;
-    const template = `
-      <div>
-        <div class="title-box">
-              <yoo-icon class="margin-right" name="${block.icon}" ></yoo-icon>
-              ${translate(block.title)} 
-              <yoo-icon class="margin-left" name="settings" ></yoo-icon>
-        </div>
-        <div class="description-box">${translate((_a = block.config) === null || _a === void 0 ? void 0 : _a.description)}</div>
-      </div>
-    `;
+    var _a, _b;
+    const html = this.getNodeTemplate(block);
     let x = 10;
     let y = 10;
     if (this.lastCreatedId) {
       const previousNode = this.editor.getNodeFromId(this.lastCreatedId);
-      x = previousNode.pos_x + 100;
-      y = previousNode.pos_y + 100;
+      x = previousNode.pos_x + 250;
+      y = previousNode.pos_y + 250;
     }
-    this.editor.addNode(block.type, (_b = block.config) === null || _b === void 0 ? void 0 : _b.inputsNumber, (_c = block.config) === null || _c === void 0 ? void 0 : _c.outputsNumber, x, y, block.category, { title: block.title, category: block.category, type: block.type }, template, false);
+    this.editor.addNode(block.type, (_a = block.config) === null || _a === void 0 ? void 0 : _a.inputsNumber, (_b = block.config) === null || _b === void 0 ? void 0 : _b.outputsNumber, x, y, block.category, {
+      title: block.title,
+      category: block.category,
+      type: block.type,
+      slotName: block.slotName
+    }, html, false);
   }
   async updateNodeConfig(nodeId, config) {
     const node = this.editor.getNodeFromId(nodeId);
@@ -33,13 +29,21 @@ export class YooDrawFlowComponent {
     this.editor.updateNodeDataFromId(nodeId, node.data);
     this.onUpdate();
   }
+  async updateConnectionNodes(nodeId) {
+    this.editor.updateConnectionNodes(`node-${nodeId}`);
+  }
   async clear() {
     this.editor.clear();
     this.lastCreatedId = null;
+    this.editor.zoom = 1;
+    this.editor.canvas_x = 0;
+    this.editor.canvas_y = 0;
+    this.editor.zoom_refresh();
     const data = this.editor.export();
     this.flowUpdated.emit(data);
   }
   componentDidLoad() {
+    var _a, _b, _c, _d, _e, _f, _g;
     this.editor = new Drawflow(this.containerEl);
     this.editor.reroute = true;
     this.editor.editor_mode = 'edit';
@@ -47,12 +51,8 @@ export class YooDrawFlowComponent {
     this.editor.on('nodeSelected', () => { });
     this.editor.on('click', (ev) => {
       var _a, _b;
-      if (((_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'yoo-icon' && ev.target.name === 'settings') {
-        const nodeId = findParent(ev.target, '.drawflow-node').id;
-        if (nodeId) {
-          const node = this.editor.getNodeFromId(nodeId.replace('node-', ''));
-          setTimeout(() => this.blockSelected.emit({ node, edit: false }), 200); //timeout is needed to release the drag drop of the node
-        }
+      if (((_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'yoo-collapsible') {
+        this.toggleCollapsed(ev.target);
       }
     });
     this.editor.on('nodeCreated', (id) => {
@@ -64,12 +64,35 @@ export class YooDrawFlowComponent {
         }
       }
       this.lastCreatedId = id;
-      this.blockSelected.emit({ node, edit: true });
+      this.editor.container.querySelector('#node-' + id + ' yoo-collapsible').collapsed = false;
     });
+    this.editor.zoom = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.zoom) || this.editor.zoom;
+    this.editor.canvas_x = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.canvas_x) || this.editor.canvas_x;
+    this.editor.canvas_y = ((_c = this.config) === null || _c === void 0 ? void 0 : _c.canvas_y) || this.editor.canvas_y;
+    this.editor.editor_mode = this.editor.editor_mode || ((_d = this.config) === null || _d === void 0 ? void 0 : _d.editor_mode);
     this.editor.start();
     if (this.config) {
       this.editor.import(this.config);
     }
+    if (this.editor.zoom !== 1) {
+      this.editor.zoom_refresh();
+    }
+    const nodeIds = keys((_g = (_f = (_e = this === null || this === void 0 ? void 0 : this.config) === null || _e === void 0 ? void 0 : _e.drawflow) === null || _f === void 0 ? void 0 : _f.Home) === null || _g === void 0 ? void 0 : _g.data).map((k) => parseInt(k));
+    this.lastCreatedId = max(nodeIds);
+    if (!(this.lastCreatedId > 0)) {
+      this.lastCreatedId = null;
+    }
+  }
+  toggleCollapsed(target) {
+    var _a;
+    if (((_a = target === null || target === void 0 ? void 0 : target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'yoo-collapsible') {
+      const nodeId = findParent(target, '.drawflow-node').id;
+      if (nodeId) {
+        const node = this.editor.getNodeFromId(nodeId.replace('node-', ''));
+        this.blockToggled.emit({ node, collasped: target.shadowRoot.firstChild.classList.contains('collapsed') });
+        this.updateConnectionNodes(node.id);
+      }
+    }
   }
   registerEvents() {
     this.exportTriggers.forEach((event) => {
@@ -80,7 +103,7 @@ export class YooDrawFlowComponent {
   }
   onUpdate() {
     const data = this.editor.export();
-    this.flowUpdated.emit(data);
+    this.flowUpdated.emit({ ...data, zoom: this.editor.zoom, canvas_x: this.editor.canvas_x, canvas_y: this.editor.canvas_y, editor_mode: this.editor.editor_mode });
   }
   onToggleEditMode() {
     if (this.editor.editor_mode === 'edit') {
@@ -89,6 +112,7 @@ export class YooDrawFlowComponent {
     else {
       this.editor.editor_mode = 'edit';
     }
+    this.onUpdate();
     forceUpdate(this);
   }
   onZoomOut() {
@@ -103,11 +127,43 @@ export class YooDrawFlowComponent {
     var _a;
     (_a = this.editor) === null || _a === void 0 ? void 0 : _a.zoom_reset();
   }
+  onCollapseAll() {
+    this.editor.container.querySelectorAll('yoo-collapsible').forEach((target) => {
+      target.collapsed = true;
+      this.toggleCollapsed(target);
+    });
+  }
+  onExpandAll() {
+    this.editor.container.querySelectorAll('yoo-collapsible').forEach((target) => {
+      target.collapsed = false;
+      this.toggleCollapsed(target);
+    });
+  }
+  getNodeTemplate(block) {
+    const template = `
+      <div class="block-container">
+      <yoo-collapsible 
+        class="bold full-width"
+        header="${translate(block.title)}"
+        icon="${block.icon}" 
+        icon-color="${block.iconColor}"
+        icon-size="medium"
+        toggle-with-arrow-only="true"
+      >
+          <slot name="block-${block.slotName}"></slot>
+        </yoo-collapsible>
+      </div>
+    `;
+    return template;
+  }
   render() {
     var _a;
     return (h("div", { class: "drawflow-container" },
       h("div", { ref: (el) => (this.containerEl = el), class: "outer-container" }),
       h("div", { class: "toolbar" },
+        h("yoo-icon", { name: "side-menu-collapse", size: "medium", onClick: () => this.onCollapseAll() }),
+        h("yoo-icon", { name: "side-menu-expand", size: "medium", onClick: () => this.onExpandAll() }),
+        h("div", { class: "spacing" }),
         h("yoo-icon", { name: ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.editor_mode) === 'fixed' ? 'unlocked' : 'lock', size: "medium", onClick: () => this.onToggleEditMode() }),
         h("div", { class: "spacing" }),
         h("yoo-icon", { name: "circle-minor", size: "medium", onClick: () => this.onZoomOut() }),
@@ -115,6 +171,7 @@ export class YooDrawFlowComponent {
         h("yoo-icon", { name: "circle-plus", size: "medium", onClick: () => this.onZoomIn() }))));
   }
   static get is() { return "yoo-draw-flow"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["draw-flow.scss"]
   }; }
@@ -126,12 +183,12 @@ export class YooDrawFlowComponent {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DrawflowExport",
-        "resolved": "DrawflowExport",
+        "original": "IDrawflowExport",
+        "resolved": "IDrawflowExport",
         "references": {
-          "DrawflowExport": {
+          "IDrawflowExport": {
             "location": "import",
-            "path": "drawflow"
+            "path": "@shared/interfaces"
           }
         }
       },
@@ -163,6 +220,26 @@ export class YooDrawFlowComponent {
           }
         }
       }
+    }, {
+      "method": "blockToggled",
+      "name": "blockToggled",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ node: DrawflowNode, collasped: boolean }",
+        "resolved": "{ node: DrawflowNode; collasped: boolean; }",
+        "references": {
+          "DrawflowNode": {
+            "location": "import",
+            "path": "drawflow"
+          }
+        }
+      }
     }, {
       "method": "flowUpdated",
       "name": "flowUpdated",
@@ -174,12 +251,12 @@ export class YooDrawFlowComponent {
         "text": ""
       },
       "complexType": {
-        "original": "DrawflowExport",
-        "resolved": "DrawflowExport",
+        "original": "IDrawflowExport",
+        "resolved": "IDrawflowExport",
         "references": {
-          "DrawflowExport": {
+          "IDrawflowExport": {
             "location": "import",
-            "path": "drawflow"
+            "path": "@shared/interfaces"
           }
         }
       }
@@ -234,6 +311,25 @@ export class YooDrawFlowComponent {
         "tags": []
       }
     },
+    "updateConnectionNodes": {
+      "complexType": {
+        "signature": "(nodeId: number) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "clear": {
       "complexType": {
         "signature": "() => Promise<void>",

package/dist/design-system/{buffer-es6-666e2742.js → buffer-es6-18d736a3.js}

@@ -1,4 +1,4 @@
-import { g as global } from './lodash-f839ddb6.js';
+import { g as global } from './lodash-826bb5e6.js';
 
 var lookup = [];
 var revLookup = [];

package/dist/design-system/{button.factory-267a47c5.js → button.factory-85d0c5e1.js}

@@ -1,6 +1,6 @@
-import './index-cf714d9a.js';
-import { h } from './index-54cb3c5d.js';
-import { V as translateMulti } from './overlays-a6b28f2f.js';
+import './index-747782d9.js';
+import { h } from './index-becca019.js';
+import { X as translateMulti } from './overlays-824c1d61.js';
 
 const getButton = (button) => {
   return !button.isVisible || button.isVisible() ? (h("yoo-button", { class: button.cssClass, color: button.color || 'light', type: button.type || 'button', size: button.size || 'medium', shape: button.shape || 'rectangular', fill: button.fill || 'solid', rippleType: button.rippleType || 'bounded', disabled: button.disabled === null ? false : button.disabled, animated: button.animated === null ? true : button.animated, onClick: button.handler },

package/dist/design-system/{camera-helpers-0fe4abe6.js → camera-helpers-dbeffd77.js}

@@ -1,5 +1,5 @@
-import { cc as cordova, cd as AwesomeCordovaNativePlugin, ce as cordovaPropertyGet, cf as cordovaPropertySet, cg as registerPlugin, X as getSession, ch as isIonic, f as isNativeMobile, ci as Device, h as isAndroid, F as isIOS, cj as getMediaDevices, x as showModal, w as getModalAnimation, y as isWeb } from './overlays-a6b28f2f.js';
-import './index-91143f04.js';
+import { ce as cordova, cf as AwesomeCordovaNativePlugin, cg as cordovaPropertyGet, ch as cordovaPropertySet, ci as registerPlugin, $ as getSession, cj as isIonic, j as isNativeMobile, ck as Device, k as isAndroid, H as isIOS, cl as getMediaDevices, z as showModal, y as getModalAnimation, A as isWeb } from './overlays-824c1d61.js';
+import './index-63fdae29.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -243,7 +243,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-83addf61.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-1238fd5d.js').then(m => new m.CameraWeb()),
 });
 
 var MediaPictureOptions;

package/dist/{esm/chat-helpers-584b7b94.js → design-system/chat-helpers-c82f9090.js}

@@ -1,6 +1,6 @@
-import './index-91143f04.js';
-import { i as isArray } from './lodash-f839ddb6.js';
-import { af as is24Hour, ag as isFile, x as showModal, y as isWeb } from './overlays-a6b28f2f.js';
+import './index-63fdae29.js';
+import { i as isArray } from './lodash-826bb5e6.js';
+import { ai as is24Hour, aj as isFile, z as showModal, A as isWeb } from './overlays-824c1d61.js';
 
 /**
  * Get the proper data format for a single message aswell as grouped messages

package/dist/design-system/{common-helpers-9287d544.js → common-helpers-f77fac0f.js}

@@ -1,6 +1,6 @@
-import { w as getModalAnimation, t as translate, x as showModal, y as isWeb, z as debounce, A as querySelectorDeep$1, f as isNativeMobile, S as ScreenOrientation, C as findParent, D as isIphoneX, j as isIpadPro, l as isTablet, e as isFullScreenFalse, F as isIOS, h as isAndroid, G as setAnimation, H as animations, I as getCssColor, Y as YOOBICON_ENTITIES_MAP, J as startOf, K as isDateBefore, L as dateDiffInCalendarDays, M as isDateAfter, N as getAsyncExtraData, O as isNativeFilePath, P as cleanupWKWebViewFilePath, Q as Cloudinary, R as getProtocol, T as CloudinaryGradientLayer } from './overlays-a6b28f2f.js';
-import './index-91143f04.js';
-import { B as get } from './lodash-f839ddb6.js';
+import { y as getModalAnimation, t as translate, z as showModal, A as isWeb, C as debounce, D as querySelectorDeep$1, j as isNativeMobile, S as ScreenOrientation, F as findParent, G as isIphoneX, l as isIpadPro, n as isTablet, h as isFullScreenFalse, H as isIOS, k as isAndroid, I as setAnimation, J as animations, K as getCssColor, Y as YOOBICON_ENTITIES_MAP, L as startOf, M as isDateBefore, N as dateDiffInCalendarDays, O as isDateAfter, P as getAsyncExtraData, Q as isNativeFilePath, R as cleanupWKWebViewFilePath, T as Cloudinary, U as getProtocol, V as CloudinaryGradientLayer } from './overlays-824c1d61.js';
+import './index-63fdae29.js';
+import { B as get } from './lodash-826bb5e6.js';
 
 function getDefaultModalAnimation() {
   return ['Enter', 'Leave'].map((v) => getModalAnimation(v, 'X', true));

package/dist/{esm/css-shim-60f618b9.js → design-system/css-shim-5fa6665a.js}

@@ -1,4 +1,4 @@
 /*
- Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.17.1 | MIT Licensed | https://stenciljs.com
  */
 var __assign=undefined&&undefined.__assign||function(){return (__assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var s in t=arguments[r])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)},StyleNode=function(){this.start=0,this.end=0,this.previous=null,this.parent=null,this.rules=null,this.parsedCssText="",this.cssText="",this.atRule=!1,this.type=0,this.keyframesName="",this.selector="",this.parsedSelector="";};function parse(e){return parseCss(lex(e=clean(e)),e)}function clean(e){return e.replace(RX.comments,"").replace(RX.port,"")}function lex(e){var t=new StyleNode;t.start=0,t.end=e.length;for(var r=t,n=0,s=e.length;n<s;n++)if(e[n]===OPEN_BRACE){r.rules||(r.rules=[]);var o=r,a=o.rules[o.rules.length-1]||null;(r=new StyleNode).start=n+1,r.parent=o,r.previous=a,o.rules.push(r);}else e[n]===CLOSE_BRACE&&(r.end=n+1,r=r.parent||t);return t}function parseCss(e,t){var r=t.substring(e.start,e.end-1);if(e.parsedCssText=e.cssText=r.trim(),e.parent){var n=e.previous?e.previous.end:e.parent.start;r=(r=(r=_expandUnicodeEscapes(r=t.substring(n,e.start-1))).replace(RX.multipleSpaces," ")).substring(r.lastIndexOf(";")+1);var s=e.parsedSelector=e.selector=r.trim();e.atRule=0===s.indexOf(AT_START),e.atRule?0===s.indexOf(MEDIA_START)?e.type=types.MEDIA_RULE:s.match(RX.keyframesRule)&&(e.type=types.KEYFRAMES_RULE,e.keyframesName=e.selector.split(RX.multipleSpaces).pop()):0===s.indexOf(VAR_START)?e.type=types.MIXIN_RULE:e.type=types.STYLE_RULE;}var o=e.rules;if(o)for(var a=0,i=o.length,l=void 0;a<i&&(l=o[a]);a++)parseCss(l,t);return e}function _expandUnicodeEscapes(e){return e.replace(/\\([0-9a-f]{1,6})\s/gi,(function(){for(var e=arguments[1],t=6-e.length;t--;)e="0"+e;return "\\"+e}))}var types={STYLE_RULE:1,KEYFRAMES_RULE:7,MEDIA_RULE:4,MIXIN_RULE:1e3},OPEN_BRACE="{",CLOSE_BRACE="}",RX={comments:/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,port:/@import[^;]*;/gim,customProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,mixinProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,mixinApply:/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,varApply:/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,keyframesRule:/^@[^\s]*keyframes/,multipleSpaces:/\s+/g},VAR_START="--",MEDIA_START="@media",AT_START="@";function findRegex(e,t,r){e.lastIndex=0;var n=t.substring(r).match(e);if(n){var s=r+n.index;return {start:s,end:s+n[0].length}}return null}var VAR_USAGE_START=/\bvar\(/,VAR_ASSIGN_START=/\B--[\w-]+\s*:/,COMMENTS=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,TRAILING_LINES=/^[\t ]+\n/gm;function resolveVar(e,t,r){return e[t]?e[t]:r?executeTemplate(r,e):""}function findVarEndIndex(e,t){for(var r=0,n=t;n<e.length;n++){var s=e[n];if("("===s)r++;else if(")"===s&&--r<=0)return n+1}return n}function parseVar(e,t){var r=findRegex(VAR_USAGE_START,e,t);if(!r)return null;var n=findVarEndIndex(e,r.start),s=e.substring(r.end,n-1).split(","),o=s[0],a=s.slice(1);return {start:r.start,end:n,propName:o.trim(),fallback:a.length>0?a.join(",").trim():void 0}}function compileVar(e,t,r){var n=parseVar(e,r);if(!n)return t.push(e.substring(r,e.length)),e.length;var s=n.propName,o=null!=n.fallback?compileTemplate(n.fallback):void 0;return t.push(e.substring(r,n.start),(function(e){return resolveVar(e,s,o)})),n.end}function executeTemplate(e,t){for(var r="",n=0;n<e.length;n++){var s=e[n];r+="string"==typeof s?s:s(t);}return r}function findEndValue(e,t){for(var r=!1,n=!1,s=t;s<e.length;s++){var o=e[s];if(r)n&&'"'===o&&(r=!1),n||"'"!==o||(r=!1);else if('"'===o)r=!0,n=!0;else if("'"===o)r=!0,n=!1;else {if(";"===o)return s+1;if("}"===o)return s}}return s}function removeCustomAssigns(e){for(var t="",r=0;;){var n=findRegex(VAR_ASSIGN_START,e,r),s=n?n.start:e.length;if(t+=e.substring(r,s),!n)break;r=findEndValue(e,s);}return t}function compileTemplate(e){var t=0;e=removeCustomAssigns(e=e.replace(COMMENTS,"")).replace(TRAILING_LINES,"");for(var r=[];t<e.length;)t=compileVar(e,r,t);return r}function resolveValues(e){var t={};e.forEach((function(e){e.declarations.forEach((function(e){t[e.prop]=e.value;}));}));for(var r={},n=Object.entries(t),s=function(e){var t=!1;if(n.forEach((function(e){var n=e[0],s=executeTemplate(e[1],r);s!==r[n]&&(r[n]=s,t=!0);})),!t)return "break"},o=0;o<10;o++){if("break"===s())break}return r}function getSelectors(e,t){if(void 0===t&&(t=0),!e.rules)return [];var r=[];return e.rules.filter((function(e){return e.type===types.STYLE_RULE})).forEach((function(e){var n=getDeclarations(e.cssText);n.length>0&&e.parsedSelector.split(",").forEach((function(e){e=e.trim(),r.push({selector:e,declarations:n,specificity:computeSpecificity(),nu:t});})),t++;})),r}function computeSpecificity(e){return 1}var IMPORTANT="!important",FIND_DECLARATIONS=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;function getDeclarations(e){for(var t,r=[];t=FIND_DECLARATIONS.exec(e.trim());){var n=normalizeValue(t[2]),s=n.value,o=n.important;r.push({prop:t[1].trim(),value:compileTemplate(s),important:o});}return r}function normalizeValue(e){var t=(e=e.replace(/\s+/gim," ").trim()).endsWith(IMPORTANT);return t&&(e=e.slice(0,e.length-IMPORTANT.length).trim()),{value:e,important:t}}function getActiveSelectors(e,t,r){var n=[],s=getScopesForElement(t,e);return r.forEach((function(e){return n.push(e)})),s.forEach((function(e){return n.push(e)})),sortSelectors(getSelectorsForScopes(n).filter((function(t){return matches(e,t.selector)})))}function getScopesForElement(e,t){for(var r=[];t;){var n=e.get(t);n&&r.push(n),t=t.parentElement;}return r}function getSelectorsForScopes(e){var t=[];return e.forEach((function(e){t.push.apply(t,e.selectors);})),t}function sortSelectors(e){return e.sort((function(e,t){return e.specificity===t.specificity?e.nu-t.nu:e.specificity-t.specificity})),e}function matches(e,t){return ":root"===t||"html"===t||e.matches(t)}function parseCSS(e){var t=parse(e),r=compileTemplate(e);return {original:e,template:r,selectors:getSelectors(t),usesCssVars:r.length>1}}function addGlobalStyle(e,t){if(e.some((function(e){return e.styleEl===t})))return !1;var r=parseCSS(t.textContent);return r.styleEl=t,e.push(r),!0}function updateGlobalScopes(e){var t=resolveValues(getSelectorsForScopes(e));e.forEach((function(e){e.usesCssVars&&(e.styleEl.textContent=executeTemplate(e.template,t));}));}function reScope(e,t){var r=e.template.map((function(r){return "string"==typeof r?replaceScope(r,e.scopeId,t):r})),n=e.selectors.map((function(r){return __assign(__assign({},r),{selector:replaceScope(r.selector,e.scopeId,t)})}));return __assign(__assign({},e),{template:r,selectors:n,scopeId:t})}function replaceScope(e,t,r){return e=replaceAll(e,"\\.".concat(t),".".concat(r))}function replaceAll(e,t,r){return e.replace(new RegExp(t,"g"),r)}function loadDocument(e,t){return loadDocumentStyles(e,t),loadDocumentLinks(e,t).then((function(){updateGlobalScopes(t);}))}function startWatcher(e,t){"undefined"!=typeof MutationObserver&&new MutationObserver((function(){loadDocumentStyles(e,t)&&updateGlobalScopes(t);})).observe(document.head,{childList:!0});}function loadDocumentLinks(e,t){for(var r=[],n=e.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])'),s=0;s<n.length;s++)r.push(addGlobalLink(e,t,n[s]));return Promise.all(r)}function loadDocumentStyles(e,t){return Array.from(e.querySelectorAll("style:not([data-styles]):not([data-no-shim])")).map((function(e){return addGlobalStyle(t,e)})).some(Boolean)}function addGlobalLink(e,t,r){var n=r.href;return fetch(n).then((function(e){return e.text()})).then((function(s){if(hasCssVariables(s)&&r.parentNode){hasRelativeUrls(s)&&(s=fixRelativeUrls(s,n));var o=e.createElement("style");o.setAttribute("data-styles",""),o.textContent=s,addGlobalStyle(t,o),r.parentNode.insertBefore(o,r),r.remove();}})).catch((function(e){console.error(e);}))}var CSS_VARIABLE_REGEXP=/[\s;{]--[-a-zA-Z0-9]+\s*:/m;function hasCssVariables(e){return e.indexOf("var(")>-1||CSS_VARIABLE_REGEXP.test(e)}var CSS_URL_REGEXP=/url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;function hasRelativeUrls(e){return CSS_URL_REGEXP.lastIndex=0,CSS_URL_REGEXP.test(e)}function fixRelativeUrls(e,t){var r=t.replace(/[^/]*$/,"");return e.replace(CSS_URL_REGEXP,(function(e,t){var n=r+t;return e.replace(t,n)}))}var CustomStyle=function(){function e(e,t){this.win=e,this.doc=t,this.count=0,this.hostStyleMap=new WeakMap,this.hostScopeMap=new WeakMap,this.globalScopes=[],this.scopesMap=new Map,this.didInit=!1;}return e.prototype.i=function(){var e=this;return this.didInit||!this.win.requestAnimationFrame?Promise.resolve():(this.didInit=!0,new Promise((function(t){e.win.requestAnimationFrame((function(){startWatcher(e.doc,e.globalScopes),loadDocument(e.doc,e.globalScopes).then((function(){return t()}));}));})))},e.prototype.addLink=function(e){var t=this;return addGlobalLink(this.doc,this.globalScopes,e).then((function(){t.updateGlobal();}))},e.prototype.addGlobalStyle=function(e){addGlobalStyle(this.globalScopes,e)&&this.updateGlobal();},e.prototype.createHostStyle=function(e,t,r,n){if(this.hostScopeMap.has(e))throw new Error("host style already created");var s=this.registerHostTemplate(r,t,n),o=this.doc.createElement("style");return o.setAttribute("data-no-shim",""),s.usesCssVars?n?(o["s-sc"]=t="".concat(s.scopeId,"-").concat(this.count),o.textContent="/*needs update*/",this.hostStyleMap.set(e,o),this.hostScopeMap.set(e,reScope(s,t)),this.count++):(s.styleEl=o,s.usesCssVars||(o.textContent=executeTemplate(s.template,{})),this.globalScopes.push(s),this.updateGlobal(),this.hostScopeMap.set(e,s)):o.textContent=r,o},e.prototype.removeHost=function(e){var t=this.hostStyleMap.get(e);t&&t.remove(),this.hostStyleMap.delete(e),this.hostScopeMap.delete(e);},e.prototype.updateHost=function(e){var t=this.hostScopeMap.get(e);if(t&&t.usesCssVars&&t.isScoped){var r=this.hostStyleMap.get(e);if(r){var n=resolveValues(getActiveSelectors(e,this.hostScopeMap,this.globalScopes));r.textContent=executeTemplate(t.template,n);}}},e.prototype.updateGlobal=function(){updateGlobalScopes(this.globalScopes);},e.prototype.registerHostTemplate=function(e,t,r){var n=this.scopesMap.get(t);return n||((n=parseCSS(e)).scopeId=t,n.isScoped=r,this.scopesMap.set(t,n)),n},e}();!function(e){!e||e.__cssshim||e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")||(e.__cssshim=new CustomStyle(e,e.document));}("undefined"!=typeof window&&window);

package/dist/design-system/design-system.css

@@ -413,7 +413,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -1856,7 +1856,7 @@ span.fr-sr-only {
   position: relative !important; }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -4042,7 +4042,7 @@ span.fr-sr-only {
   fill: #0098f7; }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -6228,7 +6228,7 @@ span.fr-sr-only {
   fill: #0098f7; }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -6326,7 +6326,7 @@ textarea.fr-code {
     background: #ebebeb; }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -6425,7 +6425,7 @@ textarea.fr-code {
   -o-transform: translate3d(100%, 0, 0); }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -6467,7 +6467,7 @@ textarea.fr-code {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -6502,7 +6502,7 @@ textarea.fr-code {
     width: 368px; } }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -6631,7 +6631,7 @@ textarea.fr-code {
     left: 100%; } }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -6711,7 +6711,7 @@ body.fr-fullscreen {
   overflow: visible !important; }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -6948,7 +6948,7 @@ div.fr-modal-body {
   background: #ebebeb; }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -7165,7 +7165,7 @@ img.fr-draggable {
   user-select: none; }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -7204,7 +7204,7 @@ img.fr-draggable {
       width: 24px; }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -7277,7 +7277,7 @@ img.fr-draggable {
       -o-transform: scale(1); }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -7311,7 +7311,7 @@ img.fr-draggable {
     width: 368px; } }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -7416,7 +7416,7 @@ img.fr-draggable {
   white-space: nowrap; }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -7618,7 +7618,7 @@ img.fr-draggable {
   margin-top: 0px !important; }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -7985,7 +7985,7 @@ span.fr-img-caption.fr-view {
       max-width: calc(100% - 5px); }
 
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */