@yoobic/yobi 7.7.40 → 7.7.44

package/dist/cjs/yoo-form-creator-translate-dialog.cjs.entry.js

@@ -6,6 +6,7 @@ const index = require('./index-fd52e687.js');
 const inputBar_interface = require('./input-bar.interface-b96b7107.js');
 const rrule = require('./rrule-f8e7fec2.js');
 const formCreatorHelpers = require('./form-creator-helpers-886c1eaa.js');
+const stringHelpers = require('./string-helpers-4852718a.js');
 const index$1 = require('./index-2557ade6.js');
 const cloneDeep = require('./cloneDeep-e00dc6ae.js');
 const isEmpty = require('./isEmpty-1723db8b.js');
@@ -147,9 +148,6 @@ const YooFormCreatorTranslateDialogComponent = class {
   isCreateTranslationMode() {
     return this.mode === 'create' || this.mode === 'createInitial';
   }
-  isTextEditor(translatableFormField, fieldType) {
-    return translatableFormField === 'description' || translatableFormField === 'explanation' || (translatableFormField === 'value' && fieldType === 'information');
-  }
   initTranslationForms() {
     var _a;
     this.selectedFieldLocation = this.initialSelectedFieldLocation;
@@ -219,13 +217,14 @@ const YooFormCreatorTranslateDialogComponent = class {
       field.values = field.values.filter((val) => !field.answer.includes(val));
     }
     inputBar_interface.TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((translatableFormField) => {
+      const isRTE = stringHelpers.isHTML(rrule.translateMulti((field === null || field === void 0 ? void 0 : field[translatableFormField]) || ''));
       if (field[translatableFormField] && !(hasComplexSentence && translatableFormField === 'sentence')) {
         if (translatableFormField === 'complexSentence') {
           hasComplexSentence = true;
         }
         slides[0].items.push({
           type: inputBar_interface.FormFieldType.textarea,
-          language: this.isTextEditor(translatableFormField, field.type) ? 'html' : null,
+          language: isRTE && 'html',
           autoInitialRows: true,
           title: rrule.translate(translatableFormField.toUpperCase()),
           name: `${translatableFormField}Base`,
@@ -234,7 +233,7 @@ const YooFormCreatorTranslateDialogComponent = class {
         });
         slides[0].items.push({
           type: inputBar_interface.FormFieldType.textarea,
-          language: this.isTextEditor(translatableFormField, field.type) ? 'html' : null,
+          language: isRTE && 'html',
           autoInitialRows: true,
           title: rrule.translate(translatableFormField.toUpperCase()),
           name: translatableFormField,
@@ -262,11 +261,12 @@ const YooFormCreatorTranslateDialogComponent = class {
               hasComplexValues = true;
               const value = isString.isString(multiInputValue) ? multiInputValue : multiInputValue.text;
               if (value) {
+                const isRTE = stringHelpers.isHTML(rrule.translateMulti(value));
                 slides[0].items.push({
                   type: inputBar_interface.FormFieldType.textarea,
                   title: rrule.translate('VALUES'),
                   hideLabel: complexValueIndex !== 0 || valueIndex !== 0,
-                  language: complexTranslatableAttr === 'complexTextSequenceValues' ? 'html' : null,
+                  language: isRTE && 'html',
                   formatAmpersandSymbol: true,
                   autoInitialRows: true,
                   name: `${complexTranslatableAttr}${complexValueIndex}${valueIndex}Base`,
@@ -277,7 +277,7 @@ const YooFormCreatorTranslateDialogComponent = class {
                   type: inputBar_interface.FormFieldType.textarea,
                   title: rrule.translate('VALUES'),
                   hideLabel: complexValueIndex !== 0 || valueIndex !== 0,
-                  language: complexTranslatableAttr === 'complexTextSequenceValues' ? 'html' : null,
+                  language: isRTE && 'html',
                   formatAmpersandSymbol: true,
                   autoInitialRows: true,
                   name: `${complexTranslatableAttr}${complexValueIndex}${valueIndex}`,
@@ -313,6 +313,7 @@ const YooFormCreatorTranslateDialogComponent = class {
               hideLabel: valueIndex > 0,
               formatAmpersandSymbol: true,
               autoInitialRows: true,
+              language: stringHelpers.isHTML(rrule.translate(value)) && 'html',
               name: `${singleArrayAttr}${valueIndex}Base`,
               width: 292,
               readonly: this.isTranslator
@@ -323,6 +324,7 @@ const YooFormCreatorTranslateDialogComponent = class {
               hideLabel: valueIndex > 0,
               formatAmpersandSymbol: true,
               autoInitialRows: true,
+              language: stringHelpers.isHTML(rrule.translate(value)) && 'html',
               name: `${singleArrayAttr}${valueIndex}`,
               inlineActions: [
                 { icon: 'translate', iconColor: 'stable-alt', text: 'GOOGLETRANSLATE', handler: () => this.onTranslateField(value, locale) },

package/dist/cjs/yoo-form-image-tagging.cjs.entry.js

@@ -8,7 +8,7 @@ require('./input-bar.interface-b96b7107.js');
 require('./ResizeObserver.es-a563c836.js');
 const annotationsHelpers = require('./annotations-helpers-558ceb1e.js');
 const commonHelpers = require('./common-helpers-312e97a3.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-b353ad65.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-557e8f4c.js');
 const formInputHelpers = require('./form-input-helpers-3a4341c2.js');
 const debounce = require('./debounce-fda84c7b.js');
 require('./isUndefined-8f9cfd10.js');
@@ -47,9 +47,6 @@ const YooFormImageTaggingComponent = class {
     this.placeholder = 'DRAGDROPTAGS';
     this.zones = [];
   }
-  async isValid() {
-    this.validate();
-  }
   onModalAnimationFinished(iaf) {
     if (iaf && this.zones.length && draggableTagsHelpers.getTagZone(this.zones)) {
       draggableTagsHelpers.setDynamicTagZoneHeight(draggableTagsHelpers.getTagZone(this.zones).element);
@@ -58,6 +55,9 @@ const YooFormImageTaggingComponent = class {
   onRequireChanged() {
     this.validate();
   }
+  onAnnotationsChanged() {
+    this.hasAnnotationsChanged = true;
+  }
   onValuesChanged(newValues, oldValues) {
     this.hasValuesChanged = false;
     const hasDuplicatedValues = draggableTagsHelpers.hasDuplicates(newValues) === 1;
@@ -69,8 +69,16 @@ const YooFormImageTaggingComponent = class {
       this.hasValuesChanged = true;
     }
   }
-  onAnnotationsChanged() {
-    this.hasAnnotationsChanged = true;
+  onIsVisibleChanged() {
+    // Timeout set here to reset the draggables in case of being 
+    // in a slide to prevent the non-draggable tags issue 
+    this.isVisible && setTimeout(() => {
+      this.shouldRender = true;
+      index.forceUpdate(this);
+    }, 150);
+  }
+  async isValid() {
+    this.validate();
   }
   componentWillLoad() {
     var _a;
@@ -83,16 +91,16 @@ const YooFormImageTaggingComponent = class {
     }
   }
   componentDidUpdate() {
-    if (this.livePreview && (this.hasValuesChanged || this.hasAnnotationsChanged)) {
+    if ((this.livePreview && (this.hasValuesChanged || this.hasAnnotationsChanged)) || this.shouldRender) {
+      this.shouldRender = false;
       this.initImageTagging();
     }
   }
   validate() {
-    if (draggableTagsHelpers.checkArray(this.annotations)) {
-      this.validity = this.value.length === this.annotations.length;
-      this.validityChanged.emit(this.validity);
-      return this.validity;
-    }
+    var _a, _b;
+    this.validity = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.annotations) === null || _b === void 0 ? void 0 : _b.length);
+    this.validityChanged.emit(this.validity);
+    return this.validity;
   }
   initImageTagging() {
     if (this.image && this.outerContainerElement) {
@@ -131,7 +139,7 @@ const YooFormImageTaggingComponent = class {
       newValue: this.newValue,
       zones: this.zones,
       isReadonly: this.readonly,
-      shouldAnimateTags: !(this.readonly || this.livePreview),
+      shouldAnimateTags: !(this.readonly || this.livePreview || this.isVisible),
       shouldTruncateTagsValue: true,
       getColorTag: (tagValue) => this.getColorTag(tagValue),
       boundingElement: this.outerContainerElement,
@@ -200,8 +208,8 @@ const YooFormImageTaggingComponent = class {
   static get watchers() { return {
     "isAnimationFinished": ["onModalAnimationFinished"],
     "required": ["onRequireChanged"],
-    "values": ["onValuesChanged"],
-    "annotations": ["onAnnotationsChanged"]
+    "annotations": ["onAnnotationsChanged"],
+    "values": ["onValuesChanged"]
   }; }
 };
 YooFormImageTaggingComponent.style = formImageTaggingCss;

package/dist/cjs/yoo-form-json.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-fd52e687.js');
 const rrule = require('./rrule-f8e7fec2.js');
 require('./input-bar.interface-b96b7107.js');
 require('./ResizeObserver.es-a563c836.js');
-const formHelpers = require('./form-helpers-b1514b99.js');
+const formHelpers = require('./form-helpers-6b5129aa.js');
 const formInputHelpers = require('./form-input-helpers-3a4341c2.js');
 require('./isUndefined-8f9cfd10.js');
 require('./isNumber-4c1ace60.js');
@@ -45,6 +45,7 @@ require('./toFinite-3604340c.js');
 require('./toNumber-8907f58c.js');
 require('./clone-502cf9c3.js');
 require('./isBoolean-d41e779d.js');
+require('./string-helpers-4852718a.js');
 require('./set-d1ffd68d.js');
 require('./_baseSet-ed6aa75d.js');
 require('./common-helpers-312e97a3.js');

package/dist/cjs/yoo-form-missing-word.cjs.entry.js

@@ -8,7 +8,7 @@ require('./input-bar.interface-b96b7107.js');
 const boostHelpers = require('./boost-helpers-0fe0ab90.js');
 const formCreatorHelpers = require('./form-creator-helpers-886c1eaa.js');
 require('./ResizeObserver.es-a563c836.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-b353ad65.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-557e8f4c.js');
 const formInputHelpers = require('./form-input-helpers-3a4341c2.js');
 require('./validate-f2c2f205.js');
 require('./get-91c14783.js');

package/dist/cjs/yoo-form-product-batch.cjs.entry.js

@@ -8,7 +8,7 @@ require('./input-bar.interface-b96b7107.js');
 require('./ResizeObserver.es-a563c836.js');
 const commonHelpers = require('./common-helpers-312e97a3.js');
 const formInputHelpers = require('./form-input-helpers-3a4341c2.js');
-const operationHelpers = require('./operation-helpers-14994f09.js');
+const operationHelpers = require('./operation-helpers-fd31a44e.js');
 require('./isUndefined-8f9cfd10.js');
 require('./isNumber-4c1ace60.js');
 require('./get-91c14783.js');

package/dist/cjs/yoo-form-ranking.cjs.entry.js

@@ -7,7 +7,7 @@ const rrule = require('./rrule-f8e7fec2.js');
 require('./input-bar.interface-b96b7107.js');
 require('./ResizeObserver.es-a563c836.js');
 const commonHelpers = require('./common-helpers-312e97a3.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-b353ad65.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-557e8f4c.js');
 const formInputHelpers = require('./form-input-helpers-3a4341c2.js');
 require('./isUndefined-8f9cfd10.js');
 require('./isNumber-4c1ace60.js');

package/dist/cjs/yoo-form-swipe-cards.cjs.entry.js

@@ -8,7 +8,7 @@ require('./input-bar.interface-b96b7107.js');
 const index$1 = require('./index-dccbc1a7.js');
 require('./ResizeObserver.es-a563c836.js');
 const commonHelpers = require('./common-helpers-312e97a3.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-b353ad65.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-557e8f4c.js');
 const formInputHelpers = require('./form-input-helpers-3a4341c2.js');
 const shuffle = require('./shuffle-8d86ba89.js');
 const inRange = require('./inRange-009d0389.js');

package/dist/cjs/yoo-form-text-editor.cjs.entry.js

@@ -7191,6 +7191,7 @@ const YooFormTextEditorComponent = class {
           quickInsertButtons: ['yooTemplateQuick', 'yooUploadButtonQuick', 'emoticons', 'ol', 'ul'],
           colorsBackground: ((_c = (_b = (_a = rrule.getSession()) === null || _a === void 0 ? void 0 : _a.tenant) === null || _b === void 0 ? void 0 : _b.rteColors) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (_e = (_d = rrule.getSession()) === null || _d === void 0 ? void 0 : _d.tenant) === null || _e === void 0 ? void 0 : _e.rteColors : rrule.getColorSwatches(),
           colorsText: ((_h = (_g = (_f = rrule.getSession()) === null || _f === void 0 ? void 0 : _f.tenant) === null || _g === void 0 ? void 0 : _g.rteColors) === null || _h === void 0 ? void 0 : _h.length) > 0 ? (_k = (_j = rrule.getSession()) === null || _j === void 0 ? void 0 : _j.tenant) === null || _k === void 0 ? void 0 : _k.rteColors : rrule.getColorSwatches(),
+          imageEditButtons: ['imageReplace', 'imageAlign', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageSize'],
           toolbarButtons: {
             moreRich: {
               buttons: ['yooUploadButton', 'emoticons', 'insertImage', 'insertVideo', 'insertTable', 'insertLink', 'specialCharacters', 'insertFile', 'insertHR'],

package/dist/cjs/yoo-form-todo-single.cjs.entry.js

@@ -8,7 +8,7 @@ const rrule = require('./rrule-f8e7fec2.js');
 const entitiesHelpers = require('./entities-helpers-f08c39e2.js');
 require('./ResizeObserver.es-a563c836.js');
 const commonHelpers = require('./common-helpers-312e97a3.js');
-const operationHelpers = require('./operation-helpers-14994f09.js');
+const operationHelpers = require('./operation-helpers-fd31a44e.js');
 const pick = require('./pick-fc797980.js');
 const cloneDeep = require('./cloneDeep-e00dc6ae.js');
 require('./pipe-9c0f36df.js');

package/dist/cjs/yoo-mission-heading_3.cjs.entry.js

@@ -8,7 +8,7 @@ require('./input-bar.interface-b96b7107.js');
 const pipe = require('./pipe-9c0f36df.js');
 require('./ResizeObserver.es-a563c836.js');
 const commonHelpers = require('./common-helpers-312e97a3.js');
-const operationHelpers = require('./operation-helpers-14994f09.js');
+const operationHelpers = require('./operation-helpers-fd31a44e.js');
 const entitiesHelpers = require('./entities-helpers-f08c39e2.js');
 const _baseFlatten = require('./_baseFlatten-4570005c.js');
 const flatten = require('./flatten-89de0e61.js');

package/dist/cjs/yoo-mission-results.cjs.entry.js

@@ -9,7 +9,7 @@ const pipe = require('./pipe-9c0f36df.js');
 require('./ResizeObserver.es-a563c836.js');
 const commonHelpers = require('./common-helpers-312e97a3.js');
 const geolocationHelpers = require('./geolocation-helpers-0f3560f5.js');
-const operationHelpers = require('./operation-helpers-14994f09.js');
+const operationHelpers = require('./operation-helpers-fd31a44e.js');
 require('./toInteger-31800ffe.js');
 require('./toFinite-3604340c.js');
 require('./toNumber-8907f58c.js');

package/dist/cjs/yoo-mission-todo.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-fd52e687.js');
 require('./rrule-f8e7fec2.js');
 require('./input-bar.interface-b96b7107.js');
 require('./ResizeObserver.es-a563c836.js');
-const operationHelpers = require('./operation-helpers-14994f09.js');
+const operationHelpers = require('./operation-helpers-fd31a44e.js');
 require('./isUndefined-8f9cfd10.js');
 require('./isNumber-4c1ace60.js');
 require('./pipe-9c0f36df.js');

package/dist/collection/components/1.atoms/loader/loader.css

@@ -876,10 +876,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   stroke: var(--stable-light, #f1f1f1);
 }
 
+:host([color=stable-light-to-light-10]) circle {
+  stroke: var(--stable-light-to-light-10, #f1f1f1);
+}
+
 :host([color=stable-ultralight]) circle {
   stroke: var(--stable-ultralight, #fafafa);
 }
 
+:host([color=stable-ultralight-to-light-10]) circle {
+  stroke: var(--stable-ultralight-to-light-10, #fafafa);
+}
+
 :host([color=success]) circle {
   stroke: var(--success, #3aa76d);
 }
@@ -892,6 +900,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   stroke: var(--warning, #ff6402);
 }
 
+:host([color=dark-to-light]) circle {
+  stroke: var(--dark-to-light, #000000);
+}
+
 :host {
   display: flex;
   flex-direction: column;

package/dist/collection/components/1.atoms/markdown/markdown.js

@@ -8,6 +8,7 @@ export class YooMarkdownComponent {
      * The markdown content to display inside the component
      */
     this.content = '';
+    this.isVisible = true;
     this.treatedContent = this.content;
   }
   onContentChanged() {
@@ -74,7 +75,7 @@ export class YooMarkdownComponent {
     }
   }
   render() {
-    return (h("div", { class: "markdown-content fr-view", ref: (el) => this.contentDiv = el, innerHTML: this.treatedContent }));
+    return (this.isVisible && h("div", { class: "markdown-content fr-view", ref: (el) => this.contentDiv = el, innerHTML: this.treatedContent }));
   }
   static get is() { return "yoo-markdown"; }
   static get encapsulation() { return "shadow"; }
@@ -123,6 +124,24 @@ export class YooMarkdownComponent {
       "attribute": "content",
       "reflect": false,
       "defaultValue": "''"
+    },
+    "isVisible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-visible",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get methods() { return {

package/dist/collection/components/entities/card-list/card-list.css

@@ -1981,6 +1981,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: 0;
   font-size: var(--font-size-12, 0.75rem);
 }
+:host(.filesFolders) .outer-container .content-container .subheading-container em,
+:host(.files) .outer-container .content-container .subheading-container em {
+  color: var(--dark, #000000);
+  font-weight: bold;
+  background: #FDFB2F;
+}
 
 :host(.locations.external) .outer-container .content-container .subheading-container {
   white-space: normal;

package/dist/collection/components/entities/entity/entity.js

@@ -875,7 +875,8 @@ export class YooEntityComponent {
         tags: isWeb(this.host) ? null : file.tags,
         avatarFrame: file.imgSrc ? 'rounded-square' : 'square',
         avatarSize: this.isAutocompleteSelected() && this.item.avatarSize ? this.item.avatarSize : 'large',
-        subheadings: this.isAutocompleteSelected() ? null : [directory + pipes.fileSize.transform(file.size)] // , //, file.mimeType
+        allowCustomHtml: true,
+        subheadings: this.isAutocompleteSelected() ? null : compact([directory + pipes.fileSize.transform(file.size), (file.highlight || []).join(', ')]) // , //, file.mimeType
         // badges: [{ iconLeft: getIcon(file), cssClass: 'tag small round dark' }]
       };
     }

package/dist/collection/components/entities/entity-search/entity-search.css

@@ -855,4 +855,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host yoo-grid.empty {
   height: 100%;
+}
+
+:host(.web) .content {
+  height: auto;
 }

package/dist/collection/components/entities/entity-search/entity-search.js

@@ -1,6 +1,6 @@
 import { debounce, disableKeyboardResize, enableKeyboardResize, hideKeyboard, isAndroid, isWeb, showModal, translate } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
-import { querySelectorDeep } from '@utils';
+import { getAppContext, querySelectorDeep } from '@utils';
 import { cloneDeep, isArray, keys } from 'lodash-es';
 export class YooEntitySearchComponent {
   constructor() {
@@ -220,7 +220,7 @@ export class YooEntitySearchComponent {
         : null)));
   }
   render() {
-    return (h(Host, null,
+    return (h(Host, { class: Object.assign({}, getAppContext(this.host)) },
       this.renderHeader(),
       this.renderBody()));
   }

package/dist/collection/components/form/form-connect/form-connect.css

@@ -1121,6 +1121,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 :host {
   display: block;
+  width: 100%;
+  max-width: 24rem;
+  margin: 0 auto;
 }
 :host p {
   display: flex;
@@ -1133,6 +1136,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-14, 0.875rem);
   text-align: center;
 }
+:host yoo-banner {
+  height: 0;
+}
 :host yoo-icon {
   position: absolute;
   top: var(--spacing-08, 0.5rem);
@@ -1143,36 +1149,48 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host yoo-img {
   border-radius: inherit;
 }
-:host .draggable-container,
-:host .connectable-container {
+:host .inner-container,
+:host .draggables,
+:host .connectables {
   display: grid;
-  grid-auto-rows: 1fr;
-  grid-auto-columns: minmax(0, 1fr);
+  grid-gap: var(--spacing-08, 0.5rem);
 }
-:host .connect-container {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+:host .draggables,
+:host .connectables {
+  height: max-content;
+  padding: var(--spacing-08, 0.5rem) 0;
 }
-:host .connect-container::-webkit-scrollbar {
-  width: 0;
+:host .inner-container {
+  grid-template-rows: repeat(auto-fit, 75%);
+  grid-template-columns: 1fr 1fr;
+  padding: 0 var(--spacing-08, 0.5rem);
+  overflow: hidden auto;
+  background-color: var(--stable-alt-20, rgba(208, 208, 208, 0.2));
+  border-radius: var(--border-radius-04, 0.25rem);
+  transition: height 500ms linear;
+  /* Track */
+  /* Handle */
 }
-:host .item-container {
-  display: flex;
-  color: var(--dark-to-light, #000000);
+:host .inner-container::-webkit-scrollbar {
+  width: var(--spacing-08, 0.5rem);
 }
-:host .connectable-container .item-container {
-  justify-content: flex-start;
+:host .inner-container::-webkit-scrollbar-track {
+  border-radius: var(--border-radius-04, 0.25rem);
+  box-shadow: inset 0 0 5px var(--stable, #adadad);
 }
-:host .draggable-container .item-container {
-  justify-content: flex-end;
+:host .inner-container::-webkit-scrollbar-thumb {
+  background: var(--app-color);
+  border-radius: var(--border-radius-04, 0.25rem);
 }
 :host .connectable,
 :host .draggable {
   position: relative;
   width: 100%;
-  max-width: 13rem;
+  max-width: 12rem;
+  height: 100%;
   background-color: var(--light-to-dark, #ffffff);
   border-radius: var(--border-radius-08, 0.5rem);
+  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
 }
 :host .connectable:before,
 :host .draggable:before {
@@ -1203,20 +1221,4 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-color: inherit;
   border-radius: inherit;
   opacity: 0.6;
-}
-
-:host([readonly]) .connect-container,
-:host([readonly]) .draggable-container,
-:host([readonly]) .connectable-container {
-  grid-gap: var(--spacing-16, 1rem);
-}
-
-:host(:not([readonly])) .connect-container,
-:host(:not([readonly])) .draggable-container,
-:host(:not([readonly])) .connectable-container {
-  grid-gap: 0.0625rem;
-}
-:host(:not([readonly])) .item-container {
-  padding: var(--spacing-08, 0.5rem);
-  background: var(--stable-light-40-to-stable-light-10, rgba(241, 241, 241, 0.4));
 }