@yoobic/yobi 7.7.89 → 7.7.90

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

@@ -224,9 +224,9 @@ export class YooFormChoiceComponent {
       values = values.filter(({ text }) => answers.some((answer) => answer === text));
     }
     return (h("div", { class: { 'images-container': true, readonly: this.readonly } }, values.map((value, index) => {
-      var _a;
       const { text, image } = value || {};
-      const isCorrect = ((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length) <= 0 ? null : this.answer.includes(text);
+      const answer = this.type === 'image' ? [].concat(this.answer).map(a => a.text ? a.text : a) : this.answer;
+      const isCorrect = (answer === null || answer === void 0 ? void 0 : answer.length) <= 0 ? null : answer.includes(text);
       return image && (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(values, index), style: this.animated ? { '--choice-index': index.toString() } : {} },
         h("div", { class: { 'image-content': true, 'correct-answer': this.readonly && isCorrect === true, 'wrong-answer': this.readonly && isCorrect === false } },
           image && h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && this.onItemSelect(text) }),

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

@@ -865,23 +865,20 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   box-sizing: border-box;
   direction: ltr;
   background: var(--input-background-color);
-  border: 0.0625rem solid var(--stable-alt-to-light-60, #d0d0d0);
+  border: var(--border-width-01, 0.0625rem) solid var(--stable-alt-to-light-60, #d0d0d0);
   border-radius: var(--border-radius-08, 0.5rem);
 }
 :host .input-container.noborder {
   border: none !important;
 }
 :host .input-container.valid {
-  border: 0.0625rem solid var(--app-color);
+  border: var(--border-width-01, 0.0625rem) solid var(--app-color);
 }
 :host .input-container.invalid {
-  border: 0.0625rem solid var(--danger, #d44333);
-}
-:host .input-container.invalid .valid-icon yoo-icon {
-  fill: var(--danger, #d44333);
+  border: var(--border-width-01, 0.0625rem) solid var(--danger, #d44333);
 }
 :host .input-container.focused {
-  border: 0.0625rem solid var(--input-border-color);
+  border: var(--border-width-01, 0.0625rem) solid var(--input-border-color);
 }
 :host .input-container.focused .valid-icon {
   display: none;
@@ -891,7 +888,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.5rem;
+  padding: var(--spacing-08, 0.5rem);
   color: inherit;
 }
 :host .input-container .icon-prefix {
@@ -909,7 +906,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.5rem;
+  padding: var(--spacing-08, 0.5rem);
   color: inherit;
   display: none;
   padding-right: var(--spacing-10-deprecated, 0.625rem);
@@ -918,9 +915,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: row;
 }
-:host .input-container .valid-icon yoo-icon {
-  fill: var(--app-color);
-}
 :host .input-container .valid-icon.valid {
   color: var(--app-color);
 }
@@ -931,7 +925,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.5rem;
+  padding: var(--spacing-08, 0.5rem);
   color: inherit;
 }
 :host .input-container .icon-suffix-focus {
@@ -965,7 +959,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex: 1;
   width: 100%;
   min-width: 0;
-  padding: 0.5rem;
+  padding: var(--spacing-08, 0.5rem);
   color: inherit;
   font-weight: var(--font-weight-400, 400);
   font-size: var(--input-font-size);
@@ -975,7 +969,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: transparent;
   border: none;
   border-radius: var(--border-radius-08, 0.5rem);
-  box-shadow: transparent 0px 0px 0px 1000px inset;
+  box-shadow: transparent 0 0 0 62.5rem inset;
   -webkit-appearance: none;
   caret-color: var(--caret-color);
 }
@@ -1009,34 +1003,34 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-left: 0;
 }
 :host .placeholderlabel {
-  margin-top: 0.5rem;
+  margin-top: var(--spacing-08, 0.5rem);
 }
 :host .placeholderlabel.active {
-  margin-top: 0rem;
+  margin-top: 0;
 }
 :host .label {
-  margin-bottom: 0.25rem;
-  padding-left: 0.5rem;
+  margin-bottom: var(--spacing-04, 0.25rem);
+  padding-left: var(--spacing-08, 0.5rem);
   color: var(--input-text-color);
   font-size: var(--font-size-16, 1rem);
   line-height: 1.5;
-  letter-spacing: 2px;
+  letter-spacing: var(--spacing-02, 0.125rem);
   text-align: left;
   transform: translateY(1.875rem);
   transition: transform 0.2s ease-in;
 }
 :host .label.active {
-  margin-top: 0.25rem;
+  margin-top: var(--spacing-04, 0.25rem);
   transform: translateY(0rem);
 }
 :host .label .label-required {
-  margin-left: 0.25rem;
+  margin-left: var(--spacing-04, 0.25rem);
   color: var(--danger, #d44333);
 }
 :host .invalid-message {
   display: none;
-  min-height: 15px;
-  padding-top: 0.125rem;
+  min-height: 0.9375rem;
+  padding-top: var(--spacing-02, 0.125rem);
   color: var(--danger, #d44333);
   font-size: var(--font-size-12, 0.75rem);
   letter-spacing: initial;
@@ -1124,37 +1118,29 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 :host(.simple) .input-container {
   border: none;
-  border-bottom: 0.0625rem solid var(--stable-alt, #d0d0d0);
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);
 }
 :host(.simple) .input-container input {
-  padding: 0.5rem 0;
+  padding: var(--spacing-08, 0.5rem) 0;
 }
 :host(.simple) .input-container .icon-suffix {
-  padding: 0rem;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
+  padding: 0 var(--spacing-08, 0.5rem);
   background: var(--light-to-dark, #ffffff);
   border: none;
 }
 :host(.simple) .input-container .icon-prefix {
-  padding: 0rem;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
+  padding: 0 var(--spacing-08, 0.5rem);
   background: var(--light-to-dark, #ffffff);
   border: none;
 }
 
 :host(.simple-icon) .input-container .icon-suffix {
-  padding: 0rem;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
+  padding: 0 var(--spacing-08, 0.5rem);
   background: var(--light-to-dark, #ffffff);
   border: none;
 }
 :host(.simple-icon) .input-container .icon-prefix {
-  padding: 0rem;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
+  padding: 0 var(--spacing-08, 0.5rem);
   background: var(--light-to-dark, #ffffff);
   border: none;
 }
@@ -1181,36 +1167,33 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   max-height: 2.25rem;
   overflow: hidden;
   background: var(--light-to-dark, #ffffff);
-  border: none;
-  border: 0.0625rem solid var(--stable-alt, #d0d0d0);
-  border-radius: 0.5rem;
+  border: var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);
+  border-radius: var(--spacing-08, 0.5rem);
   transition: all 0.3s;
   animation: fadeIn 0.6s forwards;
 }
 :host(.search) .input-container.focused {
-  border: 0.0625rem solid var(--dark-to-light, #000000);
+  border: var(--border-width-01, 0.0625rem) solid var(--dark-to-light, #000000);
 }
 :host(.search) .input-container .icon-prefix {
   border-right: none;
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
+  border-top-left-radius: var(--spacing-08, 0.5rem);
+  border-bottom-left-radius: var(--spacing-08, 0.5rem);
   transition: all 0.3s;
 }
 :host(.search) .input-container .icon-prefix yoo-icon {
   fill: var(--stable-to-light, #adadad);
 }
 :host(.search) .input-container .icon-suffix {
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
+  border-top-right-radius: var(--spacing-08, 0.5rem);
+  border-bottom-right-radius: var(--spacing-08, 0.5rem);
   transition: all 0.3s;
 }
 :host(.search) .input-container input {
   padding: 0.1875rem var(--spacing-10-deprecated, 0.625rem);
   background: var(--light-to-dark, #ffffff);
-  border-radius: 0.5rem;
-  border-top-left-radius: 0rem;
-  border-bottom-left-radius: 0rem;
-  box-shadow: var(--light-to-dark, #ffffff) 0px 0px 0px 1000px inset;
+  border-radius: 0 var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0;
+  box-shadow: var(--light-to-dark, #ffffff) 0 0 0 62.5rem inset;
   transition: all 0.3s;
 }
 :host(.search) .input-container input::-webkit-input-placeholder {
@@ -1231,8 +1214,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.search) .input-container .icon-prefix,
 :host(.search) .input-container .icon-suffix {
-  padding: 0.1875rem 0;
-  padding-left: 0.75rem;
+  padding: 0.1875rem 0 0.1875rem 0.75rem;
   background: var(--light-to-dark, #ffffff);
 }
 :host(.search) .input-container .valid-icon {
@@ -1247,7 +1229,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.search.disabled) .input-container {
-  border: 0.0625rem solid var(--stable-ultralight-to-light-10, #fafafa);
+  border: var(--border-width-01, 0.0625rem) solid var(--stable-ultralight-to-light-10, #fafafa);
 }
 :host(.search.disabled) .input-container .icon-prefix,
 :host(.search.disabled) .input-container .icon-suffix {
@@ -1270,11 +1252,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.grid-search.web) {
+  --input-font-size: var(--font-size-14);
   flex: unset;
   width: 100%;
   min-width: 6rem;
   max-width: 12.5rem;
-  --input-font-size: var(--font-size-14);
 }
 :host(.grid-search.web) .input-container {
   background: var(--stable-light-60-to-light-20, rgba(241, 241, 241, 0.6));
@@ -1285,7 +1267,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.grid-search.web) .input-container input {
   background: transparent;
-  box-shadow: transparent 0px 0px 0px 1000px inset;
+  box-shadow: transparent 0 0 0 62.5rem inset;
 }
 
 :host(.drop-down.web) .input-container {
@@ -1315,8 +1297,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 :host(.drop-down) .input-container {
   background: transparent;
-  border: none;
-  border-color: var(--light, #ffffff);
+  border: none var(--light, #ffffff);
 }
 :host(.drop-down) .input-container .icon-prefix {
   padding-left: 0;
@@ -1324,8 +1305,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 :host(.web-menu) .input-container {
   width: 100%;
-  max-width: 250px;
-  height: 24px;
+  max-width: 15.625rem;
+  height: 1.5rem;
   color: var(--stable, #adadad);
   background: var(--stable-light, #f1f1f1);
   border: none;
@@ -1342,7 +1323,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.photos-tab) {
-  padding-left: 2.5rem !important;
+  padding-left: var(--spacing-40, 2.5rem) !important;
 }
 
 :host(.full-width) {
@@ -1362,7 +1343,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-color: var(--stable-alt, #d0d0d0);
 }
 :host(.has-checkbox) .input-container input {
-  border-radius: 5px 0 5px 0;
+  border-radius: 0.3125rem 0 0.3125rem 0;
 }
 :host(.has-checkbox) .input-container .icon-suffix-focus.hide {
   display: none;
@@ -1419,7 +1400,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.accordion-search) .input-container {
   height: 1.875rem;
   background-color: var(--stable-ultralight-to-light-10, #fafafa);
-  border: 0.0625rem solid var(--stable-light, #f1f1f1);
+  border: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }
 :host(.accordion-search) .input-container input,
 :host(.accordion-search) .input-container .icon-prefix {

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

@@ -363,7 +363,7 @@ export class YooFormInputComponent {
         this.host.classList.contains('warning') && h("div", { class: "warning-icon" }),
         (hasValue && !isNullOrUndefined(this.validity) && this.uiValidation && this.uiValidation.valid && this.validity) ||
           (this.uiValidation.invalid && this.validity === false && (h("div", { class: 'valid-icon ' + (this.validity ? 'valid' : 'invalid' + (this.clearable && hasValue && this.type === 'password' && this.showPasswordToggle ? '' : ' last')) },
-            h("yoo-icon", { name: this.validity ? 'check' : 'rejected', size: this.getIconSize() })))),
+            h("yoo-icon", { color: this.validity ? 'app-color' : 'danger', name: this.validity ? 'check' : 'rejected', size: this.getIconSize() })))),
         this.type === 'password' && this.showPasswordToggle && (h("div", { class: 'icon-suffix-focus' + (this.clearable && hasValue ? '' : ' last'), onClick: this.onShowPassword.bind(this) }, hasValue && h("yoo-icon", { size: this.getIconSize(), name: "eye", color: this.inputType === 'password' ? 'stable-alt' : 'light' }))),
         this.clearable && !((_b = this.checkboxParams) === null || _b === void 0 ? void 0 : _b.value) && (h("div", { class: { 'icon-suffix-focus last icon-close': true }, style: { display: hasValue ? undefined : 'none' }, onClick: () => (hasValue ? this.clearInput() : null) },
           h("yoo-icon", { size: this.getIconSize(), name: "cross" }))),

package/dist/collection/components/form/form-number-picker/form-number-picker.js

@@ -57,7 +57,6 @@ export class YooFormNumberPickerComponent {
     if (!this.value && this.useButtons) {
       this.value = this.min;
     }
-    this.updateValidity();
   }
   componentDidLoad() {
     this.setCaretColor();