@yoobic/yobi 8.3.0-38 → 8.3.0-41

package/dist/collection/components/form/form-qrcode/form-qrcode.js

@@ -1,5 +1,5 @@
-import { generateYoobicQRCode } from '@shared/utils';
-import { Component, Event, h, Prop, Watch } from '@stencil/core';
+import { copyToClipboard, downloadFile, generateYoobicQRCode, showToast, translate, updateSVGCustomColors } from '@shared/utils';
+import { Component, Event, getAssetPath, h, Prop, Watch } from '@stencil/core';
 import { setValidator } from '../../../utils/helpers/form-input-helpers';
 export class YooFormQrcodeComponent {
   constructor() {
@@ -9,13 +9,13 @@ export class YooFormQrcodeComponent {
     this.validate();
   }
   onValueChanged() {
-    this.renderQRCode();
+    this.generateQRCode();
   }
   componentWillLoad() {
     setValidator(this);
   }
   componentDidLoad() {
-    this.renderQRCode();
+    this.generateQRCode();
   }
   validate() {
     let isValid = true;
@@ -28,14 +28,54 @@ export class YooFormQrcodeComponent {
     }
     return this.validity;
   }
-  renderQRCode() {
-    if (this.value && this.canvasEl) {
+  generateQRCode() {
+    if (this.canvasEl) {
       return generateYoobicQRCode(this.value, this.canvasEl, this.size, this.logo, this.whiteLabel);
     }
   }
+  onDownloadQRCode() {
+    downloadFile(this.canvasEl.toDataURL('image/jpeg'), translate('QRCODE'));
+  }
+  onCopyLinkToClipboard() {
+    copyToClipboard(this.value);
+    showToast({
+      message: translate('COPIEDTOCLIPBOARD'),
+      duration: 2000,
+      cssClass: 'success header',
+      closable: true
+    });
+  }
+  renderIllustration() {
+    const path = getAssetPath('./assets/form-qrcode/general-course-qr-code.svg');
+    return (h("yoo-img", { src: path, svgOptions: { afterLoad: (_, svgString) => updateSVGCustomColors(svgString) } }));
+  }
+  renderShareLink() {
+    return (h("div", { class: "inner-container" },
+      h("div", { class: "header-container" },
+        h("span", null, translate('YOOBICSHARELINK')),
+        h("yoo-button", { color: "light", onClick: () => this.onCopyLinkToClipboard() },
+          h("yoo-icon", { slot: "start", size: "small", name: "link" }),
+          translate('COPYLINK')))));
+  }
+  renderDownload() {
+    return (h("div", { class: "header-container" },
+      h("span", null, translate('QRCODE')),
+      h("yoo-button", { color: "light", onClick: () => this.onDownloadQRCode() },
+        h("yoo-icon", { slot: "start", size: "small", name: "download" }),
+        translate('DOWNLOAD'))));
+  }
+  renderQRCode() {
+    return (h("div", { class: "inner-container" },
+      this.showDownload && this.renderDownload(),
+      h("div", { class: "canvas-container" },
+        h("canvas", { class: "canvas", ref: (el) => (this.canvasEl = el) }))));
+  }
   render() {
-    return (h("div", { class: { 'outer-container': true, readonly: this.readonly } },
-      h("canvas", { class: "canvas", ref: (el) => (this.canvasEl = el) })));
+    return this.value && (h("div", { class: { 'outer-container': true, readonly: this.readonly } },
+      this.showIllustration && this.renderIllustration(),
+      !!this.description && h("p", { class: "description" }, this.description),
+      this.showShareLink && this.renderShareLink(),
+      this.renderQRCode()));
   }
   static get is() { return "yoo-form-qrcode"; }
   static get encapsulation() { return "shadow"; }
@@ -45,6 +85,7 @@ export class YooFormQrcodeComponent {
   static get styleUrls() { return {
     "$": ["form-qrcode.css"]
   }; }
+  static get assetsDirs() { return ["assets/form-qrcode"]; }
   static get properties() { return {
     "validators": {
       "type": "unknown",
@@ -182,6 +223,74 @@ export class YooFormQrcodeComponent {
       "attribute": "logo",
       "reflect": false
     },
+    "showIllustration": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Show illustration on top of the description"
+      },
+      "attribute": "show-illustration",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Description displayed on top of Share Link button and QR Code"
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "showShareLink": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Show button to share QR Code link"
+      },
+      "attribute": "show-share-link",
+      "reflect": false
+    },
+    "showDownload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Show button to download QR Code link"
+      },
+      "attribute": "show-download",
+      "reflect": false
+    },
     "size": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/form/form-scorm/form-scorm.js

@@ -14,8 +14,9 @@ export class YooFormScormComponent {
     this.reloadScorm = true;
   }
   componentWillLoad() {
+    var _a;
     setValidator(this);
-    this.isPreview = window.location.href.indexOf(IRoute.missionviewer) >= 0 || window.location.href.indexOf(IRoute.courseeditor) >= 0;
+    this.isPreview = window.location.href.indexOf(IRoute.missionviewer) >= 0 || window.location.href.indexOf(IRoute.courseeditor) >= 0 || ((_a = getSession()) === null || _a === void 0 ? void 0 : _a.isExternal);
     this.fetchLocalizedScorm();
   }
   componentWillUpdate() {

package/dist/collection/components/form/form-text-editor/form-text-editor.js

@@ -62,7 +62,7 @@ export class YooFormTextEditorComponent {
     this.linkPreviews = [];
     this.formatAmpersandSymbol = false;
     this.allowLinkPreview = false;
-    this.resetHtml = false;
+    this.resetHtml = true;
     this.reloadText = false;
     this.customZIndex = MODAL_BASE_ZINDEX;
     this.mentionedUsers = [];
@@ -1032,7 +1032,7 @@ export class YooFormTextEditorComponent {
       },
       "attribute": "reset-html",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "true"
     },
     "isFullscreen": {
       "type": "boolean",

package/dist/collection/components/form/form-todo-single/form-todo-single.js

@@ -1,5 +1,5 @@
 import { IUser } from '@shared/interfaces';
-import { dateFormat, debounce, fromNow, getCssColor, getSession, getUserDisplayName, isDateAfter, isDateSame, isIOS, isNativeMobile, isNullOrUndefined, showAlert, translate, translateMulti } from '@shared/utils';
+import { dateFormat, debounce, getCssColor, getSession, getUserDisplayName, isDateAfter, isDateSame, isIOS, isNativeMobile, isNullOrUndefined, showAlert, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
 import { cloneDeep, pick } from 'lodash-es';
 import { cleanupTodoTaskSlides } from '../../../feature-operate/campaign/helpers/operation-helpers';
@@ -157,7 +157,7 @@ export class YooFormTodoSingleComponent {
     }
   }
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     // When a parent is already displaying the due date of the Action Plan into the DOM, and that all tasks have the same due date, do not display it for each of them
     const cleanDueDate = this.readonly && this.dueDateToClean && ((_a = this.valuesState) === null || _a === void 0 ? void 0 : _a.every((todo) => { var _a; return isDateSame((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, this.dueDateToClean, 'minute'); }));
     const slidesTodoTask = cleanupTodoTaskSlides(this.slidesTodoTask, cleanDueDate);
@@ -165,33 +165,31 @@ export class YooFormTodoSingleComponent {
     return (h("div", { class: "outer-container" },
       h("div", { class: "title" },
         h("yoo-badge", { class: "count", color: "dark", text: total.toString() }),
-        translate('YOOBICACTIONS', { smart_count: total })),
-      this.valuesState
-        ? this.valuesState.map((todo, index) => {
-          var _a, _b, _c, _d, _e, _f;
-          const dueDateCustomColor = isDateAfter((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, new Date(), 'day') ? getCssColor('text-color') : getCssColor('danger');
-          return (h("div", { class: "todo-container" },
-            h("div", { class: "previous" }, this.renderLinkedField(todo)),
-            h("div", { class: "content" },
-              h("div", { class: "content-left" }, this.renderContentLeft(todo, index))),
-            ((_b = todo.description) === null || _b === void 0 ? void 0 : _b.value) && h("div", { class: "description", innerHTML: todo.description.value }),
-            !this.readonly && ((_c = todo === null || todo === void 0 ? void 0 : todo.duedate) === null || _c === void 0 ? void 0 : _c.value) && (h("div", { class: "date" },
-              h("yoo-tag", { color: "stable", customColor: dueDateCustomColor },
-                h("yoo-icon", { class: { custom: !!dueDateCustomColor }, size: "small", name: "calendar", slot: "start" }),
-                translate('YOOBICDUEAT', { date: fromNow(todo.duedate.value), time: dateFormat(todo.duedate.value, 'HH:mm') })))),
-            ((_d = todo.user) === null || _d === void 0 ? void 0 : _d.value) && h("span", { class: "user" },
-              h("yoo-avatar", { user: todo.user.value, size: "small" }),
-              h("span", null, getUserDisplayName(todo.user.value))),
-            ((_e = todo.comments) === null || _e === void 0 ? void 0 : _e.value) && h("div", { class: "comments", innerHTML: todo.comments.value }),
-            ((_f = todo.hasphoto) === null || _f === void 0 ? void 0 : _f.value) && (!this.isReadonly(todo) || todo.imageData) && (h("div", { class: { 'photo-container': true, readonly: this.isReadonly(todo) } },
-              h("yoo-form-capture", { value: todo.imageData, type: "photo", size: "small", required: todo.isphotorequired && todo.isphotorequired.value, allowLibrary: todo.allowLibrary && todo.allowLibrary.value, readonly: this.isReadonly(todo), onInputChanged: (ev) => this.onImageChanged(ev, index) }))),
-            !this.isReadonly(todo) && (h("div", { class: "comment-container" },
-              h("span", { onClick: () => this.onToggleComments(todo, index) },
-                h("yoo-icon", { name: "comment", color: "stable-alt" })))),
-            (!this.isReadonly(todo) || this.valuesState[index].userComments) && (h("div", { ref: (el) => (this.textareaContainer = el), class: "textarea-container" }, this.renderComments(index))),
-            this.isReadonly(todo) && (slidesTodoTask === null || slidesTodoTask === void 0 ? void 0 : slidesTodoTask.length) > 0 && (h("yoo-form-dynamic", { class: "margin-left transparent no-last-border inline inline-row-narrow", scrollable: false, slides: slidesTodoTask, data: todo, suffix: ".value", showRecap: false, showTabs: false, forceReadonly: true }))));
-        })
-        : null));
+        translate('YOOBICACTIONS', { smart_count: total })), (_c = this.valuesState) === null || _c === void 0 ? void 0 :
+      _c.map((todo, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const dueDateCustomColor = isDateAfter((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, new Date(), 'day') ? getCssColor('text-color') : getCssColor('danger');
+        return (h("div", { class: "todo-container" },
+          h("div", { class: "previous" }, this.renderLinkedField(todo)),
+          h("div", { class: "content" },
+            h("div", { class: "content-left" }, this.renderContentLeft(todo, index))),
+          ((_b = todo.description) === null || _b === void 0 ? void 0 : _b.value) && h("div", { class: "description", innerHTML: todo.description.value }),
+          !this.readonly && ((_c = todo === null || todo === void 0 ? void 0 : todo.duedate) === null || _c === void 0 ? void 0 : _c.value) && (h("div", { class: "date" },
+            h("yoo-tag", { color: "stable", customColor: dueDateCustomColor },
+              h("yoo-icon", { class: { custom: !!dueDateCustomColor }, size: "small", name: "calendar-date", slot: "start" }),
+              translate('YOOBICDUEAT', { date: dateFormat((_d = todo.duedate) === null || _d === void 0 ? void 0 : _d.value, 'L'), time: dateFormat((_e = todo.duedate) === null || _e === void 0 ? void 0 : _e.value, 'LT') })))),
+          ((_f = todo.user) === null || _f === void 0 ? void 0 : _f.value) && h("span", { class: "user" },
+            h("yoo-avatar", { user: todo.user.value, size: "small" }),
+            h("span", null, getUserDisplayName(todo.user.value))),
+          ((_g = todo.comments) === null || _g === void 0 ? void 0 : _g.value) && h("div", { class: "comments", innerHTML: todo.comments.value }),
+          ((_h = todo.hasphoto) === null || _h === void 0 ? void 0 : _h.value) && (!this.isReadonly(todo) || todo.imageData) && (h("div", { class: { 'photo-container': true, readonly: this.isReadonly(todo) } },
+            h("yoo-form-capture", { value: todo.imageData, type: "photo", size: "small", required: todo.isphotorequired && todo.isphotorequired.value, allowLibrary: todo.allowLibrary && todo.allowLibrary.value, readonly: this.isReadonly(todo), onInputChanged: (ev) => this.onImageChanged(ev, index) }))),
+          !this.isReadonly(todo) && (h("div", { class: "comment-container" },
+            h("span", { onClick: () => this.onToggleComments(todo, index) },
+              h("yoo-icon", { name: "comment", color: "stable-alt" })))),
+          (!this.isReadonly(todo) || this.valuesState[index].userComments) && (h("div", { ref: (el) => (this.textareaContainer = el), class: "textarea-container" }, this.renderComments(index))),
+          this.isReadonly(todo) && (slidesTodoTask === null || slidesTodoTask === void 0 ? void 0 : slidesTodoTask.length) > 0 && (h("yoo-form-dynamic", { class: "margin-left transparent no-last-border inline inline-row-narrow", scrollable: false, slides: slidesTodoTask, data: todo, suffix: ".value", showRecap: false, showTabs: false, forceReadonly: true }))));
+      })));
   }
   static get is() { return "yoo-form-todo-single"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/form-todo-task/components/action.js

@@ -0,0 +1,3 @@
+import { h } from '@stencil/core';
+export const Action = ({ hidden, icon, text, onClick }) => (h("yoo-tooltip", { content: text, hidden: hidden, placement: "top" },
+  h("yoo-icon", { color: "stable", name: icon, onClick: onClick })));

package/dist/collection/components/form/form-todo-task/components/schedule.js

@@ -0,0 +1,85 @@
+import { closeModal, dateAdd, getHours, getMinutes, getRoundedMinutes, isWeb, showModal, translate } from '@shared/utils';
+const getRoundedDate = (date, minutesStep = 5) => {
+  const result = new Date(date.getTime());
+  const oldMinutes = result.getMinutes();
+  const newMinutes = +getRoundedMinutes(result, minutesStep);
+  result.setMinutes(newMinutes, 0, 0);
+  if (newMinutes === 0 && oldMinutes !== newMinutes) {
+    result.setHours(result.getHours() + 1);
+  }
+  return result;
+};
+const getCalendarElement = (activeDay, onChange) => {
+  const calendar = document.createElement('yoo-calendar');
+  calendar.classList.add('calendar-picker');
+  calendar.activeDay = activeDay;
+  calendar.isDatePicker = true;
+  calendar.addEventListener('dateChanged', ({ detail }) => {
+    const { date } = detail;
+    date.setHours(getHours(activeDay), getMinutes(activeDay));
+    onChange(date);
+  });
+  return calendar;
+};
+const getTimeElement = (activeDay, onChange) => {
+  const time = document.createElement('yoo-form-time');
+  time.style.setProperty('--spacing', 'var(--spacing-04)');
+  time.type = 'datetime';
+  time.value = activeDay;
+  time.addEventListener('amPmToggled', ({ detail }) => onChange(dateAdd(activeDay, 'h', detail === 'AM' ? -12 : 12)));
+  time.addEventListener('inputChanged', ({ detail }) => onChange(new Date(detail)));
+  return time;
+};
+const getSaveElement = (web, onClick) => {
+  const button = document.createElement('yoo-button');
+  button.color = 'app-color';
+  button.fill = 'transparent';
+  button.size = 'large';
+  button.style.background = 'var(--light)';
+  button.style.setProperty('--hover-color', 'transparent');
+  button.style.setProperty('--side-padding', '0');
+  button.textContent = translate('DONE');
+  button.addEventListener('click', onClick);
+  if (web) {
+    button.style.position = 'sticky';
+    button.style.bottom = '0';
+    button.style.borderTop = 'var(--border-width-01) solid var(--stable-light)';
+  }
+  else {
+    button.style.position = 'fixed';
+    button.style.top = '0';
+    button.style.right = 'var(--spacing-16)';
+  }
+  return button;
+};
+export const getScheduleElement = (target, dueDate, onChange) => {
+  const schedule = document.createElement('div');
+  const activeDate = dueDate ? new Date(dueDate) : getRoundedDate(new Date());
+  const web = isWeb(target);
+  schedule.style.overflow = 'auto';
+  if (web) {
+    const { top, right, bottom, left } = target.getBoundingClientRect();
+    const space = { top, right: window.innerWidth - left, bottom: window.innerHeight - bottom, left: right };
+    const margin = 8;
+    const width = Math.min(240, Math.max(space.right, space.left) - margin);
+    const height = Math.min(470, Math.max(space.top, space.bottom) - 2 * margin);
+    schedule.style.position = 'absolute';
+    schedule.style.top = space.top < space.bottom ? `${bottom + margin}px` : `${top - margin - height}px`;
+    schedule.style.left = space.left < space.right ? `${left}px` : `${right - width}px`;
+    schedule.style.width = `${width}px`;
+    schedule.style.height = `${height}px`;
+    schedule.style.backgroundColor = 'var(--light)';
+    schedule.style.boxShadow = 'var(--shadow-03)';
+  }
+  schedule.appendChild(getCalendarElement(activeDate, (date) => activeDate.setFullYear(date.getFullYear(), date.getMonth(), date.getDate())));
+  schedule.appendChild(getTimeElement(activeDate, (date) => activeDate.setHours(date.getHours(), date.getMinutes())));
+  schedule.appendChild(getSaveElement(web, () => closeModal(null, schedule)));
+  return {
+    schedule,
+    showSchedule: async () => {
+      const modal = await showModal(schedule, web ? {} : { half: true, coeffHalf: 0.66 }, web ? 'context-menu' : null, web ? 'fadeEnterAnimation' : 'slideYEnterAnimation', web ? 'fadeLeaveAnimation' : 'slideYLeaveAnimation', !web, web);
+      onChange(activeDate);
+      return modal;
+    }
+  };
+};

package/dist/collection/components/form/form-todo-task/components/tag.js

@@ -0,0 +1,8 @@
+import { h } from '@stencil/core';
+export const Tag = ({ color, hidden, icon, removable, text, web, onClick, onRemove }) => (h("yoo-tag", { color: `${color}-10`, hidden: hidden, size: web ? 'extra-small' : 'medium', style: { cursor: onClick ? 'pointer' : undefined }, onClick: onClick },
+  h("yoo-icon", { color: color, name: icon, slot: "start", size: web ? 'extra-small' : 'small' }),
+  text,
+  h("yoo-icon", { color: color, hidden: !removable, name: "cross", slot: "end", size: web ? 'extra-small' : 'small', onClick: (event) => {
+      event.stopPropagation();
+      onRemove();
+    } })));

package/dist/collection/components/form/{form-todo-list-task/form-todo-list-task.css → form-todo-task/form-todo-task.css}

@@ -201,102 +201,94 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-:host yoo-form-text-area {
-  width: 100%;
+:host {
+  position: relative;
+  border-radius: var(--border-radius-08, 0.5rem);
 }
-:host .task {
-  width: 100%;
-  margin-bottom: var(--spacing-16, 1rem);
-}
-:host .task.web .task-title yoo-avatar {
-  display: block;
-}
-:host .task.web .task-title .actions {
-  display: none;
-}
-:host .task.web.editable .task-title:hover {
-  background-color: var(--stable-light-40, rgba(241, 241, 241, 0.4));
+:host yoo-icon[name=cross],
+:host .actions > * {
   cursor: pointer;
 }
-:host .task.web.editable .task-title:hover yoo-avatar {
-  display: none !important;
-}
-:host .task.web.editable .task-title:hover .actions {
-  display: flex !important;
-}
-:host .task .task-title {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
+:host .actions {
+  position: absolute;
 }
-:host .task .task-title .title {
+:host .actions:not([hidden]) {
   display: flex;
-  flex: 1;
+  gap: var(--spacing-08, 0.5rem);
 }
-:host .task .task-title .title yoo-avatar {
-  margin-left: var(--spacing-08, 0.5rem);
+:host .tags {
+  overflow: hidden;
 }
-:host .task .task-title .title yoo-icon {
-  margin-right: var(--spacing-08, 0.5rem);
+:host .tags:not([hidden]) {
+  display: flex;
+  flex-flow: wrap;
+  gap: var(--spacing-08, 0.5rem);
 }
-:host .task .task-title .title yoo-icon.strict {
-  cursor: default;
+
+:host([readonly]) {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--spacing-08, 0.5rem);
 }
-:host .task .task-title .title div {
-  flex: 1;
-  overflow-wrap: anywhere;
+:host([readonly]) h1 {
+  margin: 0;
 }
-:host .task .task-title .title .done {
-  text-decoration: line-through;
+:host([readonly]) .tags {
+  grid-column: 2;
 }
-:host .task .task-details {
-  padding-left: var(--spacing-32, 2rem);
+
+:host(:not([readonly])) {
+  display: block;
 }
-:host .task .task-details.edited {
-  padding-left: 0;
+:host(:not([readonly])) .tags {
+  position: absolute;
 }
-:host .task .task-details yoo-tag {
-  margin-right: var(--spacing-08, 0.5rem);
+
+:host(.web) {
+  background: var(--stable-ultralight, #fafafa);
 }
-:host .task .task-details yoo-tag,
-:host .task .task-details .task-note {
-  margin-top: var(--spacing-08, 0.5rem);
+:host(.web) .actions {
+  top: calc(var(--spacing-16, 1rem) + var(--spacing-04, 0.25rem));
+  right: var(--spacing-24, 1.5rem);
 }
-:host .task .task-details yoo-context-menu {
-  display: table;
+
+:host(.web[readonly]) {
+  padding: var(--spacing-16, 1rem) var(--spacing-48, 3rem) var(--spacing-16, 1rem) var(--spacing-32, 2rem);
 }
-:host .task .task-details .user {
-  display: flex;
-  margin-top: var(--spacing-08, 0.5rem);
+:host(.web[readonly]) h1 {
+  font-size: var(--font-size-14, 0.875rem);
+  line-height: 1.14;
 }
-:host .task .task-details .user yoo-avatar {
-  margin-right: var(--spacing-08, 0.5rem);
+
+:host(.web:not([readonly])) {
+  padding: var(--spacing-16, 1rem);
 }
-:host .task .task-details .task-note.readonly {
-  color: var(--stable, #adadad);
-  font-size: var(--font-size-14, 0.875rem);
+:host(.web:not([readonly])) .tags {
+  right: var(--spacing-24, 1.5rem);
+  bottom: var(--spacing-24, 1.5rem);
+  left: var(--spacing-24, 1.5rem);
 }
-:host .actions {
-  display: flex;
+
+:host(.mobile) {
+  background: var(--stable-10, rgba(173, 173, 173, 0.1));
 }
-:host .actions.all-web {
-  justify-content: space-between;
-  padding-bottom: var(--spacing-16, 1rem);
+:host(.mobile) .actions {
+  top: calc(var(--spacing-08, 0.5rem) + var(--spacing-04, 0.25rem));
+  right: var(--spacing-16, 1rem);
 }
-:host .actions.all-mobile {
-  position: fixed;
-  bottom: 0;
-  z-index: 999999;
-  justify-content: space-between;
-  width: 100%;
-  margin-left: calc(var(--spacing-16, 1rem) * -1);
+:host(.mobile) .tags:not([hidden]) {
+  flex-direction: column;
 }
-:host .actions.all-mobile yoo-button {
-  padding: var(--spacing-16, 1rem);
+
+:host(.mobile[readonly]) {
+  padding: calc(var(--spacing-08, 0.5rem) + var(--spacing-04, 0.25rem)) var(--spacing-16, 1rem);
 }
-:host .actions.primary {
-  flex-grow: 0;
+:host(.mobile[readonly]) h1 {
+  font-size: var(--font-size-16, 1rem);
 }
-:host .actions.spaced-btn-right yoo-button {
-  margin-right: var(--spacing-08, 0.5rem);
+
+:host(.mobile:not([readonly])) .tags {
+  right: var(--spacing-16, 1rem);
+  bottom: calc(var(--spacing-08, 0.5rem) + var(--spacing-04, 0.25rem));
+  left: var(--spacing-16, 1rem);
 }