@yoobic/yobi 8.3.0-39 → 8.3.0-42

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);
 }