@yoobic/yobi 8.1.0-13 → 8.1.0-17

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

@@ -0,0 +1,190 @@
+import { getUserDisplayName } from '@shared/utils';
+import { Component, Event, h, Host, Method, Prop } from '@stencil/core';
+export class YooFormInputCommentsComponent {
+  async setFocus() {
+    var _a;
+    (_a = this.textArea) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  onInputChanged(ev) {
+    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+    this.inputChanged.emit(ev.detail);
+  }
+  onInputFocused(ev) {
+    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+    this.inputFocused.emit(this.textArea);
+  }
+  onToggleComments() {
+    if (this.readonly) {
+      this.commentsToggled.emit();
+    }
+  }
+  renderEditableComments() {
+    return h("yoo-form-text-area", { ref: (el) => this.textArea = el, class: { 'animated fadeIn comment-text-area': true }, onInputChanged: (ev) => this.onInputChanged(ev), onInputFocused: (ev) => this.onInputFocused(ev), clearable: true, value: this.comments, onClick: () => this.onToggleComments() });
+  }
+  renderReadonlyComments() {
+    return h("q", { onClick: () => this.onToggleComments() }, this.comments);
+  }
+  render() {
+    return h(Host, { class: { 'readonly': this.readonly } },
+      h("div", { class: "outer-container" },
+        this.readonly &&
+          h("yoo-icon", { color: "dark", name: "comment", size: "small" }),
+        h("div", { class: { 'comments': true, 'readonly': this.readonly } },
+          this.readonly && this.user &&
+            h("div", { class: "user" },
+              h("yoo-avatar", { size: "extra-small", user: this.user }),
+              h("div", { class: "label dark" },
+                h("span", null, `${getUserDisplayName(this.user)}`))),
+          !this.readonly && this.renderEditableComments(),
+          this.readonly && this.renderReadonlyComments())));
+  }
+  static get is() { return "yoo-form-input-comments"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["form-input-comments.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["form-input-comments.css"]
+  }; }
+  static get properties() { return {
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": false
+    },
+    "user": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IUser",
+        "resolved": "IUser",
+        "references": {
+          "IUser": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "comments": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "comments",
+      "reflect": false
+    },
+    "isInvalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-invalid",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "inputChanged",
+      "name": "inputChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "inputFocused",
+      "name": "inputFocused",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLYooFormTextAreaElement",
+        "resolved": "HTMLYooFormTextAreaElement",
+        "references": {
+          "HTMLYooFormTextAreaElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "commentsToggled",
+      "name": "commentsToggled",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/form/form-input-container/form-input-container.css

@@ -1069,6 +1069,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   opacity: 1 !important;
 }
 
+:host(.mission:not(.pdf)) {
+  background: var(--stable-10, rgba(173, 173, 173, 0.1));
+}
+
+:host(.mission.invalid),
+:host(.mission.invalid.readonly) {
+  background: var(--danger-10, rgba(212, 67, 51, 0.1));
+}
+
+:host(.mission.readonly) {
+  margin-top: var(--spacing-08, 0.5rem);
+  margin-bottom: var(--spacing-08, 0.5rem);
+  padding: var(--spacing-08, 0.5rem);
+  border-radius: var(--spacing-08, 0.5rem);
+}
+
 :host {
   --content-padding-top: var(--spacing-08, 0.5rem);
   --content-padding-bottom: initial;
@@ -1076,14 +1092,41 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --font-size-description: var(--font-size-28, 1.75rem);
   display: block;
 }
+:host .original-invalid,
+:host .original-modified {
+  display: inline-block;
+  margin-bottom: var(--spacing-16, 1rem);
+  padding: var(--spacing-08, 0.5rem);
+  color: var(--light, #ffffff);
+  font-size: var(--font-size-12, 0.75rem);
+  line-height: var(--font-size-16, 1rem);
+  border-radius: var(--border-radius-08, 0.5rem);
+}
+:host .original-invalid {
+  background: var(--danger, #d44333);
+}
+:host .original-modified {
+  background: var(--warning, #ed6e33);
+}
 :host .optional {
-  margin-left: 0.5rem !important;
+  margin-left: var(--spacing-08, 0.5rem) !important;
   color: var(--stable, #adadad);
   white-space: nowrap;
 }
 :host .full-width {
   width: 100%;
 }
+:host .user {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: var(--spacing-04, 0.25rem);
+  align-items: flex-start;
+  width: 100%;
+}
+:host .user .label {
+  display: flex;
+  flex-direction: column;
+}
 :host .slide-title {
   width: 100%;
   margin-top: var(--spacing-08, 0.5rem);
@@ -1132,6 +1175,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-left: auto;
   color: var(--stable, #adadad);
 }
+:host .description .label .right-side yoo-tag.not-compliant,
+:host .description .optional .right-side yoo-tag.not-compliant,
+:host .top-container .label .right-side yoo-tag.not-compliant,
+:host .top-container .optional .right-side yoo-tag.not-compliant {
+  --padding: var(--spacing-04, 0.25rem);
+  font-weight: normal;
+  border-radius: var(--border-radius-04, 0.25rem);
+}
 :host .description .label .right-side yoo-icon.recent,
 :host .description .optional .right-side yoo-icon.recent,
 :host .top-container .label .right-side yoo-icon.recent,
@@ -1143,7 +1194,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .top-container .label.readonly,
 :host .top-container .optional.readonly {
   color: var(--text-color, #807f83);
-  letter-spacing: 0px;
+  letter-spacing: 0;
   text-transform: initial;
   font-variant-caps: initial;
 }
@@ -1253,12 +1304,19 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.5rem;
-  padding-top: 1rem;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--spacing-08, 0.5rem);
+  padding-top: var(--spacing-16, 1rem);
   padding-bottom: 0;
   padding-left: 0.0625rem;
+  color: var(--text-color, #807f83);
   font-size: var(--font-size-14, 0.875rem);
 }
+:host .footer-container.validation {
+  margin-top: var(--spacing-08, 0.5rem);
+  border-top: var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);
+}
 :host .footer-container .comment-container,
 :host .footer-container .feed-container,
 :host .footer-container .newtask {
@@ -1267,12 +1325,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   min-height: 22px;
 }
 :host .footer-container yoo-form-task {
-  padding-left: 0.5rem;
+  padding-left: var(--spacing-08, 0.5rem);
 }
 :host .footer-container yoo-icon {
   display: flex;
   flex: 1;
-  margin-right: 1rem;
+  margin-right: var(--spacing-08, 0.5rem);
 }
 :host .footer-container .newtask {
   display: flex;
@@ -1286,7 +1344,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-right: 0.125rem;
 }
 :host .footer-container .newtask .icon yoo-icon {
-  margin-right: 0.5rem;
+  margin-right: var(--spacing-08, 0.5rem);
 }
 :host .content-container {
   position: relative;
@@ -1339,6 +1397,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .content-container:hover .removable {
   display: block;
 }
+:host yoo-form-input-comments.readonly {
+  margin-top: var(--spacing-16, 1rem);
+}
+:host yoo-form-input-comments.readonly.with-border-bottom {
+  padding-bottom: var(--spacing-16, 1rem);
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-alt-40, rgba(208, 208, 208, 0.4));
+}
 :host .instructions {
   display: block;
   color: var(--stable, #adadad);
@@ -1354,6 +1419,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .instructions.app-color {
   color: var(--app-color, #5a30f4);
 }
+:host .comment-container {
+  margin-right: var(--spacing-16, 1rem);
+}
 
 :host(.lesson-live-preview.web) .description.fr-view,
 :host(.lesson-live-preview.web) .label {
@@ -1376,7 +1444,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.line) {
   display: flex;
   flex-direction: column;
-  padding-bottom: 0.5rem;
+  padding-bottom: var(--spacing-08, 0.5rem);
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);
 }
 :host(.line) .top-container {
@@ -1387,7 +1455,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.line) .top-container .description {
   flex: 1;
   align-self: center;
-  margin-left: 0.5rem;
+  margin-left: var(--spacing-08, 0.5rem);
 }
 :host(.line) .top-container .label {
   color: inherit;
@@ -1411,11 +1479,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: 0 !important;
 }
 
-:host(.no-border) {
-  padding-bottom: 0;
-  border-bottom: none;
-}
-
 :host(.line.reversed) .top-container {
   flex-direction: row-reverse;
 }
@@ -1425,8 +1488,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.readonly) {
-  padding: var(--spacing-08, 0.5rem) 0;
-  padding-bottom: 0;
   border: none;
 }
 :host(.readonly) .top-container .field-title-name {
@@ -1461,18 +1522,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-weight: var(--font-weight-700, 700);
 }
 
-:host(.form-readonly:not(.web)) {
-  padding: var(--spacing-08, 0.5rem) 0;
-  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
-}
-
-:host(.web.form-readonly) {
-  padding: var(--spacing-08, 0.5rem) 0;
-}
-
-:host(.form-readonly.quickview) {
-  padding: var(--spacing-08, 0.5rem) 0;
-}
 :host(.form-readonly.quickview) .description .label .right-side,
 :host(.form-readonly.quickview) .description .optional .right-side,
 :host(.form-readonly.quickview) .top-container .label .right-side,
@@ -1500,11 +1549,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--field-title-color);
 }
 
-:host(.form-readonly.no-border) {
-  padding-bottom: 0;
-  border-bottom: none;
-}
-
 :host(:not(.lesson)) .description span p {
   margin-bottom: 0;
 }
@@ -1584,7 +1628,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.web.lesson:not(.categorizewords):not(.lesson-live-preview):not(.reveal):not(.imagecollection):not(.swipecards):not(.confidence)) .top-container div:first-child {
-  padding: 0.5rem 1rem;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   background: var(--stable-background);
   border-top: unset;
 }
@@ -1604,7 +1648,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   height: 100%;
   min-height: 100%;
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-16, 1rem);
 }
 :host(.web.lesson:not(.lesson-live-preview):not(.media):not(.swipecards):not(.connect):not(.categorizewords):not(.imagecollection):not(.scratch):not(.reveal):not(.confidence)) .top-container .description,
 :host(.web.lesson:not(.lesson-live-preview):not(.media):not(.swipecards):not(.connect):not(.categorizewords):not(.imagecollection):not(.scratch):not(.reveal):not(.confidence)) .top-container .instructions {
@@ -1707,10 +1751,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   white-space: normal;
 }
 
-:host(.web:not(.preview)) {
+:host(.web:not(.preview):not(.readonly)) {
   --label-padding-top: var(--spacing-08, 0.5rem);
 }
-:host(.web:not(.preview)) .top-container .label {
+:host(.web:not(.preview):not(.readonly)) .top-container .label {
   padding-top: var(--label-padding-top);
 }
 
@@ -1825,7 +1869,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.inline-row:not(.label-top-aligned)) .top-container .label {
   width: auto;
   min-width: 5rem;
-  margin-right: 0.5rem;
+  margin-right: var(--spacing-08, 0.5rem);
 }
 :host(.inline-row:not(.label-top-aligned)) .top-container .content-container {
   width: 100%;