@yoobic/yobi 8.3.3 → 8.4.0-0

package/dist/collection/components/form/form-missing-word/form-missing-word.css

@@ -201,90 +201,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-.accent {
-  color: var(--accent, #276ef1);
-  fill: var(--accent, #276ef1);
-}
-
-.app-color {
-  color: var(--app-color, #5a30f4);
-  fill: var(--app-color, #5a30f4);
-}
-
-.danger {
-  color: var(--danger, #d44333);
-  fill: var(--danger, #d44333);
-}
-
-.dark {
-  color: var(--dark, #000000);
-  fill: var(--dark, #000000);
-}
-
-.energized {
-  color: var(--energized, #ffc043);
-  fill: var(--energized, #ffc043);
-}
-
-.info {
-  color: var(--info, #d84c96);
-  fill: var(--info, #d84c96);
-}
-
-.light {
-  color: var(--light, #ffffff);
-  fill: var(--light, #ffffff);
-}
-
-.stable {
-  color: var(--stable, #adadad);
-  fill: var(--stable, #adadad);
-}
-
-.stable-alt {
-  color: var(--stable-alt, #d0d0d0);
-  fill: var(--stable-alt, #d0d0d0);
-}
-
-.stable-light {
-  color: var(--stable-light, #f1f1f1);
-  fill: var(--stable-light, #f1f1f1);
-}
-
-.stable-ultralight {
-  color: var(--stable-ultralight, #fafafa);
-  fill: var(--stable-ultralight, #fafafa);
-}
-
-.success {
-  color: var(--success, #3aa76d);
-  fill: var(--success, #3aa76d);
-}
-
-.text-color {
-  color: var(--text-color, #807f83);
-  fill: var(--text-color, #807f83);
-}
-
-.warning {
-  color: var(--warning, #ed6e33);
-  fill: var(--warning, #ed6e33);
-}
-
-.wood {
-  color: var(--wood, #99644c);
-  fill: var(--wood, #99644c);
-}
-
 :host {
   display: block;
-  padding: var(--spacing-04, 0.25rem);
-  overflow: visible;
-}
-:host .instructions {
-  margin: var(--spacing-32, 2rem) 0 var(--spacing-08, 0.5rem);
-  color: var(--stable, #adadad);
-  font-size: var(--font-size-18, 1.125rem);
 }
 :host yoo-banner {
   height: 0;
@@ -293,53 +211,67 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   height: fit-content;
 }
-:host .dropzone#zone-tags {
-  min-height: 5rem;
-  margin: calc(var(--spacing-08, 0.5rem) / -2) calc(var(--spacing-08, 0.5rem) / -2);
-}
-:host .dropzone#zone-tags > * {
-  margin: calc(var(--spacing-08, 0.5rem) / 2) calc(var(--spacing-08, 0.5rem) / 2);
+:host #paragraph {
+  line-height: 2;
+  user-select: none;
 }
-:host .dropzone:not(#zone-tags) {
-  height: 2rem;
+:host #paragraph .dropzone {
+  display: inline-flex;
+  height: var(--spacing-32, 2rem);
   margin: 0 var(--spacing-04, 0.25rem);
   text-align: center;
   border-bottom-width: var(--border-width-01, 0.0625rem);
   border-bottom-style: solid;
-  transition: background-color 250ms ease-in-out;
 }
-:host .dropzone:not(#zone-tags).has-tag {
-  margin-top: var(--spacing-04, 0.25rem);
+:host #paragraph .dropzone.has-tag {
+  margin: 0;
   padding: var(--spacing-04, 0.25rem);
   border-bottom-color: transparent;
 }
-:host .dropzone:not(#zone-tags):not(.has-tag) {
+
+:host(:not([readonly])) main {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  gap: var(--spacing-08, 0.5rem);
+  height: 100%;
+}
+:host(:not([readonly])) main #paragraph .dropzone:not(.has-tag) {
   width: 5rem;
-  padding-right: var(--spacing-02, 0.125rem);
-  padding-left: var(--spacing-02, 0.125rem);
+  padding: 0 var(--spacing-02, 0.125rem);
   border-bottom-color: var(--app-color, #5a30f4);
-  transform: translateY(0.75rem);
 }
-:host .dropzone:not(#zone-tags)[hit] {
-  background: var(--stable-alt-40, rgba(208, 208, 208, 0.4));
+:host(:not([readonly])) main #paragraph .dropzone[hit] {
+  background-color: var(--stable-ultralight, #fafafa);
 }
-:host .dropzone-container {
+:host(:not([readonly])) main #instructions {
+  color: var(--stable, #adadad);
+}
+:host(:not([readonly])) main #zone-tags {
   display: inline-flex;
+  flex-wrap: wrap;
+  align-content: baseline;
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(100% - var(--spacing-16, 1rem));
+  min-height: 5rem;
+  padding: var(--spacing-08, 0.5rem);
+  white-space: nowrap;
+  border: var(--border-width-01, 0.0625rem) solid transparent;
+  border-radius: var(--border-radius-08, 0.5rem);
 }
-:host section.paragraph {
-  line-height: 2;
-  user-select: none;
+:host(:not([readonly])) main #zone-tags[hit] {
+  background-color: var(--stable-ultralight, #fafafa);
+  border: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }
-
-:host([readonly]) .dropzone:not(#zone-tags) {
-  margin-right: 0;
-  margin-left: 0;
+:host(:not([readonly])) main #zone-tags yoo-tag {
+  margin-right: var(--spacing-08, 0.5rem);
+  margin-bottom: var(--spacing-08, 0.5rem);
 }
 
-:host([animated]) .dropzone-container {
+:host([animated]) .dropzone {
   transform-origin: 50% 100%;
-  transition: all 500ms ease-in-out;
+  transition: all 350ms ease-in-out;
 }
-:host([animated]) .dropzone-container[hidden] {
+:host([animated]) .dropzone[hidden] {
   transform: scale(0);
 }

package/dist/collection/components/form/form-missing-word/form-missing-word.js

@@ -61,14 +61,9 @@ export class YooFormMissingWordComponent {
   get tagConfig() {
     const onReleaseTag = () => {
       this.tags.checkOverflowingTags();
-      const userAnswers = this.tags.getDroppedValues(true)
+      this.value = this.tags.getDroppedValues(true)
         .map(ua => this.values.find(v => ua === translateMulti(v)));
-      if (!this.livePreview) {
-        setValueAndValidateInput(userAnswers, this);
-      }
-      else {
-        this.value = userAnswers;
-      }
+      setValueAndValidateInput(this.value, this);
     };
     return {
       clickToDrop: true,
@@ -85,7 +80,7 @@ export class YooFormMissingWordComponent {
   validate() {
     var _a, _b;
     if (checkArray(this.translatedAnswers)) {
-      this.validity = !this.required || (((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.filter(v => v)) === null || _b === void 0 ? void 0 : _b.length) === this.translatedAnswers.length);
+      this.validity = !this.required || ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.filter(v => v)) === null || _b === void 0 ? void 0 : _b.length) === this.translatedAnswers.length;
       this.validityChanged.emit(this.validity);
       return this.validity;
     }
@@ -133,11 +128,10 @@ export class YooFormMissingWordComponent {
     return -1;
   }
   renderInstructions() {
-    return h("p", { class: "instructions" }, translate(this.placeholder));
+    return h("section", { id: "instructions" }, translate(this.placeholder));
   }
   renderTagsZone() {
-    return h("section", { class: "tags" },
-      h("div", { class: "dropzone", id: "zone-tags" }));
+    return h("section", { class: "dropzone", id: "zone-tags" });
   }
   renderBanner() {
     return this.livePreview && !this.readonly && h("yoo-banner", null,
@@ -145,12 +139,11 @@ export class YooFormMissingWordComponent {
   }
   renderSentence() {
     const sentence = this.isMatchingBrackets ? this.translatedSentence.split(' ') : this.translatedSentence.split(this.parenthesesRegexp.g);
-    return (h("section", { class: "paragraph" }, (sentence === null || sentence === void 0 ? void 0 : sentence.map(v => {
+    return (h("section", { id: "paragraph" }, (sentence === null || sentence === void 0 ? void 0 : sentence.map(v => {
       var _a;
       const zoneIndex = this.getZoneIndex(v);
       if (zoneIndex >= 0) {
-        return zoneIndex <= this.translatedAnswers.length - 1 ? (h("div", { class: "dropzone-container", hidden: this.animated && !this.readonly && !((_a = this.value) === null || _a === void 0 ? void 0 : _a[zoneIndex]) && !this.revealDropzones },
-          h("div", { class: "dropzone", id: `zone-${zoneIndex}` }))) : '';
+        return zoneIndex <= this.translatedAnswers.length - 1 ? (h("div", { class: "dropzone", id: `zone-${zoneIndex}`, hidden: this.animated && !this.readonly && !((_a = this.value) === null || _a === void 0 ? void 0 : _a[zoneIndex]) && !this.revealDropzones })) : '';
       }
       else {
         return v.concat(' ');
@@ -158,11 +151,15 @@ export class YooFormMissingWordComponent {
     }))
       || this.translatedSentence));
   }
+  renderMain() {
+    return h("main", null,
+      this.sentence && this.renderSentence(),
+      !this.readonly && [this.renderInstructions(), this.renderTagsZone()]);
+  }
   render() {
     return (h(Host, null,
       this.renderBanner(),
-      this.sentence && this.renderSentence(),
-      !this.readonly && [this.renderInstructions(), this.renderTagsZone()]));
+      this.renderMain()));
   }
   static get is() { return "yoo-form-missing-word"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/form-multi-input/form-multi-input.js

@@ -463,7 +463,7 @@ export class YooFormMultiInputComponent {
     this.reset(keys);
   }
   renderCell(cell) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
     const isLastMinRow = cell.column.rows && cell.column.rows >= cell.rowIndex + 1;
     const canAddNextRow = !cell.column.maxRows || cell.rowIndex + 1 < cell.column.maxRows;
     const isPlatformWeb = isWeb(this.host);
@@ -547,7 +547,7 @@ export class YooFormMultiInputComponent {
       (textInput || cell.column.label !== undefined);
     if (cell.column.hasImage) {
       imageChoice = (h("div", { class: "image-container" },
-        h("yoo-form-capture", { readonly: this.readonly, required: this.required, value: cell.value && cell.value.file ? cell.value.file : null, onInputChanged: (ev) => this.onInputChanged(ev, cell, 'file'), multiple: false, allowLibrary: true, allowUnsplash: true, maxWidth: (_w = (_v = cell === null || cell === void 0 ? void 0 : cell.column) === null || _v === void 0 ? void 0 : _v.imageOptions) === null || _w === void 0 ? void 0 : _w.width, maxHeight: (_y = (_x = cell === null || cell === void 0 ? void 0 : cell.column) === null || _x === void 0 ? void 0 : _x.imageOptions) === null || _y === void 0 ? void 0 : _y.height, cropperOptions: { cropRatio: (_0 = (_z = cell === null || cell === void 0 ? void 0 : cell.column) === null || _z === void 0 ? void 0 : _z.imageOptions) === null || _0 === void 0 ? void 0 : _0.cropRatio }, type: "photo", size: this.customSize }),
+        h("yoo-form-capture", { readonly: this.readonly, required: this.required, value: cell.value && cell.value.file ? cell.value.file : null, onInputChanged: (ev) => this.onInputChanged(ev, cell, 'file'), multiple: false, allowLibrary: true, allowUnsplash: true, allowCamera: (_w = (_v = cell === null || cell === void 0 ? void 0 : cell.column) === null || _v === void 0 ? void 0 : _v.imageOptions) === null || _w === void 0 ? void 0 : _w.allowCamera, maxWidth: (_y = (_x = cell === null || cell === void 0 ? void 0 : cell.column) === null || _x === void 0 ? void 0 : _x.imageOptions) === null || _y === void 0 ? void 0 : _y.width, maxHeight: (_0 = (_z = cell === null || cell === void 0 ? void 0 : cell.column) === null || _z === void 0 ? void 0 : _z.imageOptions) === null || _0 === void 0 ? void 0 : _0.height, cropperOptions: { cropRatio: (_2 = (_1 = cell === null || cell === void 0 ? void 0 : cell.column) === null || _1 === void 0 ? void 0 : _1.imageOptions) === null || _2 === void 0 ? void 0 : _2.cropRatio }, type: "photo", size: this.customSize }),
         !renderTextInput && [
           this.renderRemoveCell(cell, isPlatformWeb),
           this.renderDraggableCell(cell)
@@ -563,7 +563,7 @@ export class YooFormMultiInputComponent {
           textInput,
           isPlatformWeb && this.renderRemoveCell(cell, isPlatformWeb),
           this.renderDraggableCell(cell)),
-        !((_1 = cell === null || cell === void 0 ? void 0 : cell.column) === null || _1 === void 0 ? void 0 : _1.hideTranslation) && this.renderTranslation(cell.value.text || null)));
+        !((_3 = cell === null || cell === void 0 ? void 0 : cell.column) === null || _3 === void 0 ? void 0 : _3.hideTranslation) && this.renderTranslation(cell.value.text || null)));
     }
     if (this.isLinkedRow(cell)) {
       const linkIconClass = {

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

@@ -202,29 +202,31 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
-  display: block;
-}
-:host .outer-container {
   position: relative;
+  display: block;
   width: 100%;
 }
-:host .outer-container .list-item {
+:host ul {
+  padding: 0;
+  list-style: none;
+}
+:host ul li {
   position: absolute;
-  top: 0;
   width: 100%;
 }
-:host .outer-container .list-item .item-content {
-  display: flex;
+:host ul li.active {
+  box-shadow: var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1));
+  cursor: grabbing;
+}
+:host ul li.active > div {
+  background-color: var(--stable-ultralight, #fafafa);
+}
+:host ul li > div {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: var(--spacing-08, 0.5rem);
   align-items: center;
-  justify-content: space-between;
-  height: 100%;
+  padding: var(--spacing-08, 0.5rem);
   background-color: var(--light, #ffffff);
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
-}
-:host .outer-container .list-item .item-content .value {
-  width: 100%;
-  padding: var(--spacing-08, 0.5rem);
-}
-:host .outer-container .list-item .item-content yoo-icon {
-  margin-right: var(--spacing-08, 0.5rem);
 }