@yoobic/yobi 8.3.0-39 → 8.3.0-42

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

@@ -1,384 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2e1afd31.js');
-const overlays = require('./overlays-c1a26868.js');
-require('./index-4aedd374.js');
-const lodash = require('./lodash-597bda6d.js');
-const formField_instance = require('./form-field.instance-610e61e1.js');
-const formInputHelpers = require('./form-input-helpers-1f423642.js');
-require('./index-56ac2e14.js');
-require('./_commonjsHelpers-94df2ea7.js');
-require('./common-helpers-bbf76229.js');
-
-const formTodoListCss = ":host yoo-form-input{width:100%}:host .list-title{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--spacing-08, 0.5rem)}:host .list-title .title{-ms-flex:1;flex:1}:host .progress{margin-bottom:var(--spacing-16, 1rem)}:host .allDone{margin-bottom:var(--spacing-08, 0.5rem)}:host .actions{display:-ms-flexbox;display:flex}:host .actions.all{-ms-flex-pack:justify;justify-content:space-between;margin-top:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-16, 1rem)}:host .actions.primary{-ms-flex-positive:0;flex-grow:0}:host .actions yoo-button.add.with-margin{margin-top:var(--spacing-08, 0.5rem)}:host .actions.spaced-btn-left yoo-button{margin-left:var(--spacing-08, 0.5rem)}:host .actions.spaced-btn-right yoo-button{margin-right:var(--spacing-08, 0.5rem)}:host yoo-ion-item-sliding yoo-ion-item{width:100%;color:var(--dark, #000000)}:host yoo-ion-item-sliding yoo-ion-item yoo-form-todo-list-task{width:100%;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}:host yoo-ion-item-sliding yoo-ion-item yoo-form-todo-list-task:not(.isFirstItem){padding-top:var(--spacing-08, 0.5rem)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container{display:-ms-flexbox;display:flex;margin-bottom:0.0625rem}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-accent{background-color:var(--accent, #276ef1) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-accent-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-accent-hover:hover{color:var(--light, #ffffff);background-color:var(--accent, #276ef1)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-app-color{background-color:var(--app-color, #5a30f4) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-app-color-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-app-color-hover:hover{color:var(--light, #ffffff);background-color:var(--app-color, #5a30f4)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-danger{background-color:var(--danger, #d44333) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-danger-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-danger-hover:hover{color:var(--light, #ffffff);background-color:var(--danger, #d44333)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-dark{background-color:var(--dark, #000000) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-dark-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-dark-hover:hover{color:var(--light, #ffffff);background-color:var(--dark, #000000)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-energized{background-color:var(--energized, #ffc043) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-energized-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-energized-hover:hover{color:var(--light, #ffffff);background-color:var(--energized, #ffc043)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-info{background-color:var(--info, #d84c96) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-info-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-info-hover:hover{color:var(--light, #ffffff);background-color:var(--info, #d84c96)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-light{background-color:var(--light, #ffffff) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-light-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-light-hover:hover{color:var(--light, #ffffff);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable{background-color:var(--stable, #adadad) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-hover:hover{color:var(--light, #ffffff);background-color:var(--stable, #adadad)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-alt-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-alt-hover:hover{color:var(--light, #ffffff);background-color:var(--stable-alt, #d0d0d0)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-light-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-light-hover:hover{color:var(--light, #ffffff);background-color:var(--stable-light, #f1f1f1)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-ultralight-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-ultralight-hover:hover{color:var(--light, #ffffff);background-color:var(--stable-ultralight, #fafafa)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-success{background-color:var(--success, #3aa76d) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-success-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-success-hover:hover{color:var(--light, #ffffff);background-color:var(--success, #3aa76d)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-text-color{background-color:var(--text-color, #807f83) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-text-color-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-text-color-hover:hover{color:var(--light, #ffffff);background-color:var(--text-color, #807f83)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-warning{background-color:var(--warning, #ed6e33) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-warning-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-warning-hover:hover{color:var(--light, #ffffff);background-color:var(--warning, #ed6e33)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-wood{background-color:var(--wood, #99644c) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-wood-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-wood-hover:hover{color:var(--light, #ffffff);background-color:var(--wood, #99644c)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host yoo-ion-item-sliding yoo-ion-item-options button{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-height:var(--spacing-56, 3.5rem);margin:0;padding:var(--spacing-08, 0.5rem);border:none;visibility:hidden}:host yoo-ion-item-sliding yoo-ion-item-options button .text-action{margin-top:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem);font-family:var(--font-family, \"Lato\")}:host yoo-ion-item-sliding yoo-ion-item-options button yoo-icon{width:var(--spacing-56, 3.5rem);font-size:var(--font-size-18, 1.125rem)}:host yoo-ion-item-sliding.item-sliding-active-slide yoo-ion-item-options button{visibility:visible}";
-
-const YooFormTodoListComponent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.validityChanged = index.createEvent(this, "validityChanged", 7);
-    this.inputChanged = index.createEvent(this, "inputChanged", 7);
-    this.delete = index.createEvent(this, "delete", 7);
-    this.fitChanged = index.createEvent(this, "fitChanged", 7);
-    this.convertTaskToCard = index.createEvent(this, "convertTaskToCard", 7);
-    this.translationValueUpdated = index.createEvent(this, "translationValueUpdated", 7);
-    /** @prop {boolean} mode used to adapt the UI according to the chosen mode */
-    this.mode = formField_instance.TodoListMode.none;
-    /** @prop {boolean} hideHeader Hide the title and the main actions from the list. in this case, title is no more required */
-    this.hideHeader = false;
-    this.isCompledtedTasksHiddenState = false;
-    this.isEditedState = false;
-    this.isEditedTitleState = false;
-    this.isEditedNewTaskState = false;
-    // directly keep a reference to the edited item, because the list used to display the tasks can have different indexes,
-    //  due to the hiding of the completed tasks (see constant 'tasks' into 'renderTasks')
-    this.editedItem = null;
-    this.editedItemIndex = null;
-    this.editedTitle = null;
-    this.itemsSlidingNeedToBeUpdated = false;
-    // keep a trace of all cancelled editions, to resume them where the user left off
-    this.backup = { title: null, task: null };
-    // when the user saves his new task, the inputBlur event must be cancelled until the other new task is created and focused
-    this.isNewTasksCreationOngoing = false;
-    this.itemsSliding = [];
-    this.mainMenuActions = [
-      { text: overlays.translate('YOOBICEDIT'), handler: () => this.updateEditedState(null, false, true) },
-      { text: overlays.translate('DELETE'), handler: () => this.delete.emit() }
-    ];
-  }
-  updateKeyboardOpenState() {
-    this.isKeyboardOpen = !this.isKeyboardOpen;
-    if (!this.isKeyboardOpen && this.keyboardDidHideCallback) {
-      this.keyboardDidHideCallback();
-    }
-  }
-  onValueChange() {
-    // convert the old format of the tasks { header: string, tasks: any[] } if needed
-    this.convertIfNeeded();
-    this.setDefaultValueIfNeeded(false);
-    this.validate();
-  }
-  componentWillLoad() {
-    this.convertIfNeeded();
-    this.setDefaultValueIfNeeded();
-    formInputHelpers.setValidator(this);
-    // keep the trace of unachieved modifications on title, in addition of any unachieved new task
-    this.backup.title = null;
-    this.backup.task = null;
-  }
-  componentDidLoad() {
-    if (overlays.isNativeMobile()) {
-      this.keyboardWillShowListener = lodash.debounce(this.updateKeyboardOpenState, 500).bind(this);
-      window.addEventListener('keyboardWillShow', this.keyboardWillShowListener);
-      this.keyboardDidHideListener = lodash.debounce(this.updateKeyboardOpenState, 500).bind(this);
-      window.addEventListener('keyboardDidHide', this.keyboardDidHideListener);
-    }
-  }
-  componentDidUpdate() {
-    var _a;
-    if (this.itemsSlidingNeedToBeUpdated) {
-      (_a = this.itemsSliding) === null || _a === void 0 ? void 0 : _a.forEach(item => item === null || item === void 0 ? void 0 : item.updateOptions());
-      this.itemsSlidingNeedToBeUpdated = false;
-    }
-    // for now, we just need to raise this event when the component fit is readjust after because a new task is being added
-    if (this.isEditedNewTaskState) {
-      this.fitChanged.emit(this.host.getBoundingClientRect());
-    }
-  }
-  disconnectedCallback() {
-    if (overlays.isNativeMobile()) {
-      window.removeEventListener('keyboardWillShow', this.keyboardWillShowListener);
-      window.removeEventListener('keyboardDidHide', this.keyboardDidHideListener);
-    }
-  }
-  validate() {
-    var _a, _b, _c, _d;
-    const emptyItems = ((_a = this.value.values) === null || _a === void 0 ? void 0 : _a.filter(item => { var _a, _b; return !((_b = (_a = item.text) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim().length); })) || [];
-    const validity = (!!((_b = this.value.title) === null || _b === void 0 ? void 0 : _b.trim().length) || this.hideHeader) && !emptyItems.length && (!this.isEditedState || this.isEditedNewTaskState) && !this.isEditedTitleState && (!this.required || ((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.values) === null || _d === void 0 ? void 0 : _d.length) > 0);
-    if (!this.validity || this.validity !== validity) {
-      this.validity = validity;
-      this.validityChanged.emit(this.validity);
-    }
-    return this.validity;
-  }
-  isReadonly() {
-    // always set this field as editable in a Mission type Kanban
-    return this.readonly && this.mode !== formField_instance.TodoListMode.kanban;
-  }
-  getTaskInlineActions(item) {
-    switch (this.mode) {
-      case formField_instance.TodoListMode.kanban:
-        return [
-          { text: overlays.translate('CONVERTTOCARD'), handler: () => this.convertTaskToCard.emit(item) }
-        ];
-      default:
-        return [];
-    }
-  }
-  convertIfNeeded() {
-    var _a;
-    if (this.value && (Object.prototype.hasOwnProperty.call(this.value, 'header') || Object.prototype.hasOwnProperty.call(this.value, 'tasks'))) {
-      const oldFormatValue = this.value;
-      this.value = {
-        title: oldFormatValue.header, values: (_a = oldFormatValue.tasks) === null || _a === void 0 ? void 0 : _a.map(t => {
-          var _a;
-          return ({
-            text: { value: t.text },
-            finished: { value: ((_a = t.isDone) === null || _a === void 0 ? void 0 : _a.value) || t.isDone },
-            user: { value: t.user }
-          });
-        })
-      };
-    }
-  }
-  setDefaultValueIfNeeded(emit = true) {
-    var _a;
-    if (!this.value) {
-      this.value = { title: overlays.translate('TODOLIST'), values: [] };
-    }
-    else {
-      if (!this.value.values) {
-        this.value.values = [];
-      }
-      if (!((_a = this.value.title) === null || _a === void 0 ? void 0 : _a.trim().length)) {
-        this.value.title = overlays.translate('TODOLIST');
-      }
-    }
-    if (emit) {
-      this.setValueAndEmitChanged();
-    }
-  }
-  setValueAndEmitChanged() {
-    formInputHelpers.setValueAndValidateInput(this.value, this);
-  }
-  updateEditedState(item = null, isEditedNewTaskState = false, isEditedTitleState = false) {
-    var _a, _b;
-    this.editedItem = lodash.cloneDeep(item); // clone it to be able to revert to the previous state when cancel
-    this.editedItemIndex = (_a = this.value.values) === null || _a === void 0 ? void 0 : _a.indexOf(item);
-    this.isEditedNewTaskState = isEditedNewTaskState;
-    this.isEditedTitleState = isEditedTitleState;
-    this.isEditedState = isEditedTitleState || !!item;
-    if (isEditedTitleState) {
-      this.editedTitle = this.backup.title || this.value.title;
-    }
-    // do not add any new task to the list until it is saved
-    if (this.isEditedNewTaskState) {
-      this.value.values.pop();
-      if (this.backup.task) {
-        this.editedItem = this.backup.task;
-      }
-    }
-    if (item) {
-      if (!overlays.isWeb(this.host)) {
-        this.taskEditionModal = document.createElement('yoo-form-todo-list-dialog');
-        this.taskEditionModal.mode = this.mode;
-        this.taskEditionModal.value = this.editedItem;
-        this.taskEditionModal.header = isEditedNewTaskState ? overlays.translate('NEWTASK') : overlays.translate('EDITTASK');
-        this.taskEditionModal.saveBtnText = isEditedNewTaskState ? overlays.translate('YOOBICADD') : overlays.translate('YOOBICSAVE');
-        this.taskEditionModal.placeholder = this.isEditedNewTaskState ? 'TODOADDITEM' : 'EDITTASK';
-        this.taskEditionModal.locations = (_b = this.extraData) === null || _b === void 0 ? void 0 : _b.locations;
-        this.taskEditionModal.addEventListener('saveTask', (ev) => {
-          this.itemsSlidingNeedToBeUpdated = true;
-          this.onSaveTask(ev.detail);
-        });
-        this.taskEditionModal.addEventListener('cancelTask', (ev) => {
-          this.itemsSlidingNeedToBeUpdated = true;
-          this.onCancelTask(ev.detail);
-        });
-        // need to be sure that the keyboard has been totally hidden first, as it is not possible to calculate the position/height of the new modal until it is fully hidden
-        const hideKeyboardPromise = overlays.isNativeMobile() && (overlays.Keyboard === null || overlays.Keyboard === void 0 ? void 0 : overlays.Keyboard.hide) ? overlays.Keyboard.hide() : Promise.resolve();
-        this.keyboardDidHideCallback = () => {
-          this.keyboardDidHideCallback = null;
-          overlays.showModal(this.taskEditionModal, { half: true, coeffHalf: 0.8 }, null, 'slideYEnterAnimation', 'slideYLeaveAnimation', true, false).then(() => {
-            this.taskEditionModal = null;
-          });
-        };
-        hideKeyboardPromise.then(() => {
-          if (!this.isKeyboardOpen) {
-            this.keyboardDidHideCallback();
-          }
-        }).catch(() => {
-          // if there is any failure from the plugin to hide the keyboard, still display the modal to edit the task
-          this.keyboardDidHideCallback();
-        });
-      }
-    }
-    else {
-      if (this.taskEditionModal) {
-        overlays.closeModal(null, this.taskEditionModal);
-      }
-    }
-    this.validate();
-  }
-  onShowTodoListMobileMenu(ev) {
-    ev.stopPropagation();
-    overlays.showActionSheet(this.mainMenuActions);
-  }
-  onShowTaskMobileMenu(ev, actions = []) {
-    ev.stopPropagation();
-    overlays.showActionSheet(actions);
-  }
-  onSwitchCompledtedTasksHiddenState(ev) {
-    ev.stopPropagation();
-    this.isCompledtedTasksHiddenState = !this.isCompledtedTasksHiddenState;
-  }
-  onTaskAdded(ev) {
-    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-    const item = {
-      _id: overlays.getUUID(),
-      text: { value: null },
-      hasphoto: { value: true }
-    };
-    this.value.values.push(item);
-    this.updateEditedState(item, true);
-  }
-  onTaskRemoved(ev, item) {
-    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-    const index$1 = this.value.values.indexOf(item);
-    this.value.values.splice(index$1, 1);
-    this.setValueAndEmitChanged();
-    index.forceUpdate(this);
-  }
-  onEditTitle(ev) {
-    ev.stopPropagation();
-    this.editedTitle = ev.detail;
-  }
-  onSaveTitle(ev) {
-    var _a;
-    ev.stopPropagation();
-    if ((_a = this.editedTitle) === null || _a === void 0 ? void 0 : _a.trim().length) {
-      this.value.title = this.editedTitle.trim();
-      this.backup.title = null;
-    }
-    this.updateEditedState();
-    this.setValueAndEmitChanged();
-  }
-  onCancelTitle(ev) {
-    var _a;
-    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-    const backupValue = (_a = this.editedTitle) === null || _a === void 0 ? void 0 : _a.trim();
-    if (backupValue) {
-      this.backup.title = backupValue;
-    }
-    this.updateEditedState();
-  }
-  onSetTaskComplete() {
-    // allow to keep the progress bar updated, as the click on the task to update the complete state does not automatically trigger the re-render
-    index.forceUpdate(this);
-  }
-  onSaveTask(task) {
-    this.value.values[this.editedItemIndex] = task;
-    this.value.values = this.value.values.filter(item => { var _a, _b; return (_b = (_a = item.text) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim().length; });
-    this.backup.task = null;
-    // do it now, as 'this.isEditedNewTaskState' is modified by 'updateEditedState'
-    this.isNewTasksCreationOngoing = overlays.isWeb(this.host) && this.isEditedNewTaskState;
-    this.updateEditedState();
-    this.setValueAndEmitChanged();
-    // automatically add a new task after saving the last new one
-    if (this.isNewTasksCreationOngoing) {
-      this.onTaskAdded(null);
-    }
-  }
-  onCancelTask(task) {
-    this.value.values = this.value.values.filter(item => { var _a, _b; return (_b = (_a = item.text) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim().length; });
-    if (this.isEditedNewTaskState) {
-      this.backup.task = task;
-    }
-    this.updateEditedState();
-  }
-  onInputBlur() {
-    setTimeout(() => {
-      // check "this.isEditedState" to avoid to cancel it twice and raise side effects, like when the user cancel
-      //  the current operation by clicking on the "cancel" button and raises the "inputBlur" event in the same time
-      if (this.isEditedState && !this.isNewTasksCreationOngoing) {
-        this.onCancelTitle();
-      }
-      this.isNewTasksCreationOngoing = false;
-    }, 200); // let time to the 'save' action to be raised if clicked on it
-  }
-  renderTitle() {
-    var _a;
-    const completedTasks = ((_a = this.value.values) === null || _a === void 0 ? void 0 : _a.filter(item => { var _a; return (_a = item.finished) === null || _a === void 0 ? void 0 : _a.value; })) || [];
-    const colorOpt = overlays.isWeb(this.host) ? {}
-      : {
-        color: 'stable'
-      };
-    const fillOpt = overlays.isWeb(this.host) ? {}
-      : {
-        fill: 'transparent'
-      };
-    const sizeOpt = {
-      size: (overlays.isWeb(this.host) ? 'small' : 'medium')
-    };
-    return [
-      index.h("div", { class: "list-title" }, overlays.isWeb(this.host) && this.isEditedTitleState && (index.h("yoo-form-input", { type: "text", size: "medium", value: this.editedTitle, focusOnRendered: true, onInputChanged: (ev) => this.onEditTitle(ev), onEnterPressed: (ev) => this.onSaveTitle(ev), onInputBlurred: () => this.onInputBlur(), translations: this.translations, onTranslationValueUpdated: (ev) => {
-          ev.stopPropagation();
-          this.translationValueUpdated.emit(ev.detail);
-        } })), (!overlays.isWeb(this.host) || !this.isEditedTitleState) && (index.h("div", { class: { title: true, editable: overlays.isWeb(this.host) && !this.isReadonly() }, onClick: () => (overlays.isWeb(this.host) && !this.isReadonly() && !this.isEditedState ? this.updateEditedState(null, false, true) : null) }, overlays.translateMulti(this.value.title))), !this.isEditedState && (index.h("div", { class: "actions primary spaced-btn-left" }, !!(completedTasks === null || completedTasks === void 0 ? void 0 : completedTasks.length) && (index.h("yoo-button", { shape: "square", ...sizeOpt, ...fillOpt, ...colorOpt, onClick: (ev) => this.onSwitchCompledtedTasksHiddenState(ev) }, index.h("yoo-icon", { name: this.isCompledtedTasksHiddenState ? 'eye' : 'offline', ...sizeOpt, ...colorOpt }))), !this.isReadonly() && [
-        overlays.isWeb(this.host) && (index.h("yoo-context-menu", { contentButtons: this.mainMenuActions, placement: "below" }, index.h("yoo-button", { shape: "square", ...sizeOpt, ...fillOpt, ...colorOpt }, index.h("yoo-icon", { name: "more", ...sizeOpt, ...colorOpt })))),
-        !overlays.isWeb(this.host) && (index.h("yoo-button", { shape: "square", ...sizeOpt, ...fillOpt, ...colorOpt, onClick: (ev) => this.onShowTodoListMobileMenu(ev) }, index.h("yoo-icon", { name: "more", ...sizeOpt, ...colorOpt })))
-      ]))),
-      overlays.isWeb(this.host) && this.isEditedTitleState && index.h("div", { class: "actions all" }, index.h("div", { class: "actions primary spaced-btn-right" }, index.h("yoo-button", { fill: "solid", color: "app-color", onClick: (ev) => this.onSaveTitle(ev) }, overlays.translate('YOOBICSAVE')), index.h("yoo-button", { class: "cancel", shape: "circular", fill: "transparent", color: "stable", onClick: (ev) => this.onCancelTitle(ev) }, index.h("yoo-icon", { name: "close", color: "stable" }))))
-    ];
-  }
-  renderProgress() {
-    var _a;
-    const progress = ((_a = this.value.values) === null || _a === void 0 ? void 0 : _a.length) ? this.value.values.reduce((sum, item) => { var _a; return sum + (((_a = item.finished) === null || _a === void 0 ? void 0 : _a.value) ? 100 : 0); }, 0) / this.value.values.length : 0;
-    return index.h("yoo-progress-bar", { class: "progress", value: progress });
-  }
-  renderTask(item, index$1, actions) {
-    var _a;
-    const placeHolder = !this.value.values.length ? 'TODOADDFIRSTITEM' : 'TODOADDITEM';
-    const saveBtnText = this.isEditedNewTaskState ? overlays.translate('YOOBICADD') : overlays.translate('YOOBICSAVE');
-    const isTaskEdited = overlays.isWeb(this.host) && (index$1 === this.editedItemIndex); // check if the current task is being edited
-    const readonly = this.isReadonly() || (this.isEditedState && !isTaskEdited); // when a task is being edited, put all the other task in readonly mode
-    return index.h("yoo-form-todo-list-task", { class: { isFirstItem: index$1 === 0 }, value: isTaskEdited ? this.editedItem : item, actions: actions, placeholder: placeHolder, saveBtnText: saveBtnText, readonly: readonly, mode: this.mode, isCompleteLocked: this.isCompleteLocked, locations: (_a = this.extraData) === null || _a === void 0 ? void 0 : _a.locations, isTaskEdited: isTaskEdited, onEditTask: (ev) => this.updateEditedState(ev.detail), onSaveTask: (ev) => this.onSaveTask(ev.detail), onSetTaskComplete: () => this.onSetTaskComplete(), onCancelTask: (ev) => this.onCancelTask(ev.detail), onValidityChanged: (ev) => ev.stopPropagation(), onDataChanged: (ev) => ev.stopPropagation(), translations: this.translations, onTranslationValueUpdated: (ev) => {
-        ev.stopPropagation();
-        this.translationValueUpdated.emit(ev.detail);
-      } });
-  }
-  renderTaskMobile(item, index$1, actions) {
-    return index.h("yoo-ion-item-sliding", { ref: (el) => (this.itemsSliding[index$1] = el) }, index.h("yoo-ion-item", { lines: "none" }, this.renderTask(item, index$1)), !this.isReadonly() && !this.isEditedState && (index.h("yoo-ion-item-options", { side: "end" }, index.h("div", { class: "options-container" }, index.h("button", { onClick: (ev) => {
-        this.onShowTaskMobileMenu(ev, actions);
-        this.itemsSliding[index$1].close();
-      }, class: "bg-stable light" }, index.h("yoo-icon", { color: "light", name: "more" }))))));
-  }
-  renderTasks() {
-    var _a, _b;
-    const tasks = ((_a = this.value.values) === null || _a === void 0 ? void 0 : _a.filter(item => { var _a; return !this.isCompledtedTasksHiddenState || !((_a = item.finished) === null || _a === void 0 ? void 0 : _a.value); })) || [];
-    // do not add any new task to the list until it is saved
-    if (this.isEditedNewTaskState) {
-      tasks.push(this.editedItem);
-    }
-    // when all tasks are completed, but hidden, display an explanatory text
-    if (this.isCompledtedTasksHiddenState && ((_b = this.value.values) === null || _b === void 0 ? void 0 : _b.length) && !tasks.length) {
-      return index.h("div", { class: "allDone" }, overlays.translate('ALLCOMPLETED'));
-    }
-    // no task is hidden, or some of them are not done
-    return tasks.map((item, index) => {
-      const actions = [
-        { text: overlays.translate('YOOBICEDIT'), handler: () => this.updateEditedState(item) },
-        ...this.getTaskInlineActions(item),
-        { text: overlays.translate('DELETE'), handler: () => this.onTaskRemoved(null, item) }
-      ];
-      return overlays.isWeb(this.host) ? this.renderTask(item, index, actions) : this.renderTaskMobile(item, index, actions);
-    });
-  }
-  renderAddTaskButton() {
-    var _a;
-    const isFirstItem = !((_a = this.value.values) === null || _a === void 0 ? void 0 : _a.length);
-    const addBtnText = isFirstItem ? overlays.translate('TODOADDFIRSTITEM') : overlays.translate('TODOADDITEM');
-    return !this.isReadonly() && !this.isEditedState && index.h("div", { class: "actions primary spaced-btn-right" }, index.h("yoo-button", { class: { add: true, 'with-margin': !overlays.isWeb(this.host) && !isFirstItem }, fill: "transparent", color: "app-color", onClick: (ev) => this.onTaskAdded(ev) }, addBtnText));
-  }
-  render() {
-    return (index.h(index.Host, null, !this.hideHeader && this.renderTitle(), this.renderTasks(), this.renderAddTaskButton()));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["onValueChange"]
-  }; }
-};
-YooFormTodoListComponent.style = formTodoListCss;
-
-exports.yoo_form_todo_list = YooFormTodoListComponent;