@yoobic/yobi 8.3.1-4 → 8.3.1-5

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

@@ -200,7 +200,7 @@ export class YooFormInputComponent {
         el.value = this.localValue + '.';
       }
       if (!isNumberInput || el.value || ev.data !== '-') {
-        if (!(isNumberInput && (el.value.length === 1 && el.value[0] === '-'))) {
+        if (!(isNumberInput && el.value.length === 1 && el.value[0] === '-')) {
           if (isNumberInput && ['e', '+'].includes(ev.data)) {
             el.value = this.value;
           }
@@ -384,8 +384,8 @@ export class YooFormInputComponent {
     }
     return [
       this.copyToClipboard && h("yoo-icon", { onClick: () => this.onCopyToClipboard(copyText), class: "float-left", name: "duplicate", size: this.getIconSize() }),
-      this.type !== 'email' && h("p", { class: { 'truncate': this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) }),
-      this.type === 'email' && h("a", { href: `mailto:${value}`, class: { 'truncate': this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) })
+      this.type !== 'email' && h("p", { class: { truncate: this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) }),
+      this.type === 'email' && (h("a", { href: `mailto:${value}`, class: { truncate: this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) }))
     ];
   }
   renderMaxCharacterCounter() {
@@ -406,8 +406,8 @@ export class YooFormInputComponent {
           invalid: this.uiValidation.invalid && this.validity === false && !this.inputReloaded
         } },
         this.finalIconPrefix && this.hasIconPrefix && (h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) },
-          h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize() }))),
-        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autoComplete: ['username', 'password'].includes(this.name) ? this.name : undefined, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
+          h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize(), color: this.iconPrefixColor }))),
+        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autoComplete: ['username', 'password'].includes(this.name) ? this.name : undefined, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => (this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation()), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
             last: !((hasValue && this.clearable) || (this.type === 'password' && this.showPasswordToggle) || (this.uiValidation.invalid && this.validity === false)),
             'hide-value': (_a = this.checkboxParams) === null || _a === void 0 ? void 0 : _a.value,
             'has-icon-prefix': this.finalIconPrefix && this.hasIconPrefix
@@ -429,7 +429,7 @@ export class YooFormInputComponent {
       this.tooltip && (h("div", { class: { 'icon-suffix-focus last icon-close': true } },
         h("yoo-tooltip", { content: this.tooltip },
           h("yoo-icon", { size: "medium", name: "help" })))),
-      this.uiValidation.invalid && h("div", { class: { 'invalid-message': true, invalid: (this.validity === false && !this.inputReloaded) } }, translate(invalidMessageKey))
+      this.uiValidation.invalid && h("div", { class: { 'invalid-message': true, invalid: this.validity === false && !this.inputReloaded } }, translate(invalidMessageKey))
     ];
   }
   contentEditableInputBlurred(ev) {
@@ -487,9 +487,9 @@ export class YooFormInputComponent {
       this.renderAction('confirm')));
   }
   renderAction(type) {
-    return h("div", { class: type },
+    return (h("div", { class: type },
       h("yoo-button", { disabled: !this.modified || this.disabled, size: this.size, customColor: "stable-alt", onClick: () => this[type]() },
-        h("yoo-icon", { size: this.getIconSize(), name: type === 'cancel' ? 'close' : 'tick' })));
+        h("yoo-icon", { size: this.getIconSize(), name: type === 'cancel' ? 'close' : 'tick' }))));
   }
   render() {
     return (h(Host, { class: {
@@ -776,6 +776,28 @@ export class YooFormInputComponent {
       "attribute": "icon-prefix",
       "reflect": false
     },
+    "iconPrefixColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TColor",
+        "resolved": "\"accent\" | \"anthracite\" | \"app-color\" | \"danger\" | \"dark\" | \"energized\" | \"info\" | \"light\" | \"stable\" | \"stable-alt\" | \"stable-light\" | \"stable-ultralight\" | \"success\" | \"text-color\" | \"warning\" | \"wood\" | \"accent-10\" | \"accent-20\" | \"accent-40\" | \"accent-60\" | \"accent-80\" | \"anthracite-10\" | \"anthracite-20\" | \"anthracite-40\" | \"anthracite-60\" | \"anthracite-80\" | \"app-color-10\" | \"app-color-20\" | \"app-color-40\" | \"app-color-60\" | \"app-color-80\" | \"danger-10\" | \"danger-20\" | \"danger-40\" | \"danger-60\" | \"danger-80\" | \"dark-10\" | \"dark-20\" | \"dark-40\" | \"dark-60\" | \"dark-80\" | \"energized-10\" | \"energized-20\" | \"energized-40\" | \"energized-60\" | \"energized-80\" | \"info-10\" | \"info-20\" | \"info-40\" | \"info-60\" | \"info-80\" | \"light-10\" | \"light-20\" | \"light-40\" | \"light-60\" | \"light-80\" | \"stable-10\" | \"stable-20\" | \"stable-40\" | \"stable-60\" | \"stable-80\" | \"stable-alt-10\" | \"stable-alt-20\" | \"stable-alt-40\" | \"stable-alt-60\" | \"stable-alt-80\" | \"stable-light-10\" | \"stable-light-20\" | \"stable-light-40\" | \"stable-light-60\" | \"stable-light-80\" | \"stable-ultralight-10\" | \"stable-ultralight-20\" | \"stable-ultralight-40\" | \"stable-ultralight-60\" | \"stable-ultralight-80\" | \"success-10\" | \"success-20\" | \"success-40\" | \"success-60\" | \"success-80\" | \"text-color-10\" | \"text-color-20\" | \"text-color-40\" | \"text-color-60\" | \"text-color-80\" | \"warning-10\" | \"warning-20\" | \"warning-40\" | \"warning-60\" | \"warning-80\" | \"wood-10\" | \"wood-20\" | \"wood-40\" | \"wood-60\" | \"wood-80\" | \"transparent\"",
+        "references": {
+          "TColor": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon-prefix-color",
+      "reflect": false
+    },
     "iconSuffix": {
       "type": "string",
       "mutable": false,

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

@@ -98,24 +98,18 @@ export class YooFormInputContainerComponent {
     }
   }
   initShowDescription(showDescriptionAndTitle, field, readOnly, forceReadOnly, forceDescription) {
-    return (field === null || field === void 0 ? void 0 : field.description) && !field.hideLabel &&
-      (!readOnly ||
-        this.isCheckboxOrToggle(field.type) ||
-        (field.type === FormFieldType.formula && forceReadOnly) ||
-        forceDescription ||
-        showDescriptionAndTitle);
+    return ((field === null || field === void 0 ? void 0 : field.description) &&
+      !field.hideLabel &&
+      (!readOnly || this.isCheckboxOrToggle(field.type) || (field.type === FormFieldType.formula && forceReadOnly) || forceDescription || showDescriptionAndTitle));
   }
   initShowLabel(showDescription, showDescriptionAndTitle, field, readOnly) {
     const hasLabel = field.title || field.name;
-    return hasLabel &&
-      (!showDescription || showDescriptionAndTitle) &&
-      (!field.hideLabel || (readOnly && field.placeholder)) &&
-      !this.isCheckboxOrToggle(field.type);
+    return hasLabel && (!showDescription || showDescriptionAndTitle) && (!field.hideLabel || (readOnly && field.placeholder)) && !this.isCheckboxOrToggle(field.type);
   }
   initShouldShowDefaultInstructions(showDefaultInstructions, fieldType, readOnly) {
     const NO_INSTRUCTIONS = [FormFieldType.selectmulti, FormFieldType.number, FormFieldType.feedback];
     const ALWAYS_SHOW = [FormFieldType.plan];
-    return !readOnly && (ALWAYS_SHOW.includes(fieldType) || showDefaultInstructions && NO_INSTRUCTIONS.includes(fieldType));
+    return !readOnly && (ALWAYS_SHOW.includes(fieldType) || (showDefaultInstructions && NO_INSTRUCTIONS.includes(fieldType)));
   }
   shouldShowComments() {
     return (this.showComments || (this.readonly && this.comments));
@@ -124,10 +118,11 @@ export class YooFormInputContainerComponent {
     return fieldType === FormFieldType.toggle || fieldType === FormFieldType.checkbox;
   }
   isMedia(excludeVideo) {
-    return this.field && ((excludeVideo ? false : this.field.type === FormFieldType.video) ||
-      this.field.type === FormFieldType.image ||
-      this.field.type === FormFieldType.document ||
-      this.field.type === FormFieldType.videoplayer);
+    return (this.field &&
+      ((excludeVideo ? false : this.field.type === FormFieldType.video) ||
+        this.field.type === FormFieldType.image ||
+        this.field.type === FormFieldType.document ||
+        this.field.type === FormFieldType.videoplayer));
   }
   getComponentDescriptionExtraClass() {
     let extraClass = '';
@@ -147,7 +142,8 @@ export class YooFormInputContainerComponent {
     return extraClass;
   }
   getFieldTitle() {
-    const fieldTitle = this.field.title || (this.field.name && !this.host.classList.contains('lesson-live-preview')) ? translateMulti(this.field.title || this.field.name.toUpperCase()) : '';
+    let fieldTitle = this.field.title || (this.field.name && !this.host.classList.contains('lesson-live-preview')) ? translateMulti(this.field.title || this.field.name.toUpperCase()) : '';
+    this.useUppercaseLabel && this.field.title && (fieldTitle = fieldTitle.toUpperCase());
     return this.isLesson && this.readonly
       ? translateMulti(this.field.description) || (this.shouldShowDefaultInstructions && this.getFieldDefaultInstructions()) || fieldTitle
       : fieldTitle;
@@ -219,8 +215,7 @@ export class YooFormInputContainerComponent {
   }
   animateContent() {
     var _a, _b;
-    const isAnimatedField = this.animated && (((_a = this.field) === null || _a === void 0 ? void 0 : _a.type) === FormFieldType.number ||
-      ((_b = this.field) === null || _b === void 0 ? void 0 : _b.type) === FormFieldType.selectimage);
+    const isAnimatedField = this.animated && (((_a = this.field) === null || _a === void 0 ? void 0 : _a.type) === FormFieldType.number || ((_b = this.field) === null || _b === void 0 ? void 0 : _b.type) === FormFieldType.selectimage);
     if (this.isLesson && isAnimatedField) {
       resizeObserve(this.host, this.onResize);
     }
@@ -291,19 +286,22 @@ export class YooFormInputContainerComponent {
     const hasRightSide = this.markAsInvalid || this.time || fieldhelp || !!this.host.querySelector('[slot="right-side"]');
     return (hasRightSide && (h("div", { class: "right-side" },
       h("slot", { name: "right-side" }),
-      this.markAsInvalid && h("yoo-tag", { size: "extra-small", class: "not-compliant", color: "danger" }, translate('NOTSATISFACTORY')),
+      this.markAsInvalid && (h("yoo-tag", { size: "extra-small", class: "not-compliant", color: "danger" }, translate('NOTSATISFACTORY'))),
       this.time && (h("yoo-tooltip", { hoverable: isWeb(this.host), content: translate('LASTEDIT') + ': ' + pipes.dateFormat.transform(this.time, 'L LT'), placement: "top-end" },
         h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', class: "recent", name: "recent" }))),
       fieldhelp && !this.field.hideTooltip && !hideTooltip && (h("yoo-tooltip", { hoverable: isWeb(this.host), content: this.getHelpContent(fieldhelp), placement: "top-end" },
         h("yoo-icon", { size: this.field.tooltipSize ? this.field.tooltipSize : isWeb(this.host) ? 'small' : 'medium', name: "help", color: this.field.tooltipColor ? this.field.tooltipColor : 'stable' }))))));
   }
   renderOriginalMarkAsInvalid() {
-    return !this.markAsInvalid && !this.hideComplianceTags && this.originalMarkAsInvalid &&
-      h("yoo-tag", { size: "extra-small", class: "original-invalid", color: "danger" }, translate('ORIGINALMARKASINVALID'));
+    return (!this.markAsInvalid &&
+      !this.hideComplianceTags &&
+      this.originalMarkAsInvalid && (h("yoo-tag", { size: "extra-small", class: "original-invalid", color: "danger" }, translate('ORIGINALMARKASINVALID'))));
   }
   renderOriginalMarkAsModified() {
-    return !this.markAsInvalid && !this.hideComplianceTags && !this.originalMarkAsInvalid && this.markAsModified &&
-      h("yoo-tag", { size: "extra-small", class: "original-modified", color: "danger" }, translate('ORIGINALMARKASMODIFIED'));
+    return (!this.markAsInvalid &&
+      !this.hideComplianceTags &&
+      !this.originalMarkAsInvalid &&
+      this.markAsModified && (h("yoo-tag", { size: "extra-small", class: "original-modified", color: "danger" }, translate('ORIGINALMARKASMODIFIED'))));
   }
   renderLabel() {
     var _a, _b, _c;
@@ -329,11 +327,7 @@ export class YooFormInputContainerComponent {
       }, onClick: () => this.headerClicked.emit(), ref: (el) => (this.instructionElement = el) }, this.getFieldDefaultInstructions()));
   }
   renderTopText() {
-    return [
-      this.showLabel && this.renderLabel(),
-      this.showDescription && this.renderDescription(),
-      this.shouldShowDefaultInstructions && this.renderDefaultInstructions()
-    ];
+    return [this.showLabel && this.renderLabel(), this.showDescription && this.renderDescription(), this.shouldShowDefaultInstructions && this.renderDefaultInstructions()];
   }
   renderInnerContent() {
     var _a, _b, _c;
@@ -344,11 +338,12 @@ export class YooFormInputContainerComponent {
         'no-margin': this.field.allowTask,
         'no-padding': ((_a = this.field) === null || _a === void 0 ? void 0 : _a.type) === FormFieldType.multiinput
       } },
-      this.slotInputConfig && ((_b = this.slotInputConfig) === null || _b === void 0 ? void 0 : _b.inputFn([
-        h("div", { class: "title-wrapper", slot: "image-title" },
-          ((_c = this.slotInputConfig) === null || _c === void 0 ? void 0 : _c.slideTitle) && this.slotInputConfig.slideTitle(),
-          this.renderTopText())
-      ])),
+      this.slotInputConfig &&
+        ((_b = this.slotInputConfig) === null || _b === void 0 ? void 0 : _b.inputFn([
+          h("div", { class: "title-wrapper", slot: "image-title" },
+            ((_c = this.slotInputConfig) === null || _c === void 0 ? void 0 : _c.slideTitle) && this.slotInputConfig.slideTitle(),
+            this.renderTopText())
+        ])),
       h("slot", null),
       this.renderRemovable()));
   }
@@ -363,18 +358,15 @@ export class YooFormInputContainerComponent {
       this.renderInnerContent()));
   }
   renderRemovable() {
-    return (this.field.removable && (h("div", { class: "removable", onClick: () => this.onRemove() }, isWeb(this.host) ?
-      h("yoo-tooltip", { content: translate('REMOVEFIELD'), placement: "top-end" },
-        h("yoo-icon", { size: this.size || 'medium', color: "danger", name: "cross" }))
-      : h("yoo-icon", { size: this.size || 'medium', color: "danger", name: "cross" }))));
+    return (this.field.removable && (h("div", { class: "removable", onClick: () => this.onRemove() }, isWeb(this.host) ? (h("yoo-tooltip", { content: translate('REMOVEFIELD'), placement: "top-end" },
+      h("yoo-icon", { size: this.size || 'medium', color: "danger", name: "cross" }))) : (h("yoo-icon", { size: this.size || 'medium', color: "danger", name: "cross" })))));
   }
   renderHint() {
     return h("div", { class: "hint-container", innerHTML: this.field.hint });
   }
   renderFooter() {
     return [
-      ((this.field.allowComments || this.field.allowTask || this.field.shareToFeed) &&
-        !this.readonly) && (h("div", { class: "footer-container" },
+      (this.field.allowComments || this.field.allowTask || this.field.shareToFeed) && !this.readonly && (h("div", { class: "footer-container" },
         this.field.allowComments && (h("span", { class: "comment-container", onClick: () => this.onToggleComments() },
           h("yoo-icon", { name: "comment", color: "text-color" }))),
         this.field.shareToFeed && (h("span", { class: "feed-container" },
@@ -388,24 +380,21 @@ export class YooFormInputContainerComponent {
   renderValidationFooter() {
     const isMobile = !isWeb(this.host);
     // the layout is not the same on web and mobile, so need to render the validations comments according to the platform
-    return (this.displayValidationFooter &&
-      h("div", { class: { 'footer-container': true, 'validation': true, 'mobile': isMobile } },
-        h("span", { class: "comment-container", onClick: () => this.onToggleValidationComments() },
-          h("yoo-icon", { name: "comment", size: "medium", color: "text-color" }),
-          " ",
-          translate(this.validationComments ? 'EDITCOMMENTS' : 'ADDCOMMENTS')),
-        isMobile && this.renderValidationComments(),
-        h("span", { class: "validation-container" },
-          h("yoo-form-checkbox", { animated: this.animated, value: this.markAsInvalid, class: "danger web", size: "large", header: translate('MARKFIELDASINVALID'), onInputChanged: (ev) => this.onValidationMarkAsInvalid(ev.detail) }))));
+    return (this.displayValidationFooter && (h("div", { class: { 'footer-container': true, validation: true, mobile: isMobile } },
+      h("span", { class: "comment-container", onClick: () => this.onToggleValidationComments() },
+        h("yoo-icon", { name: "comment", size: "medium", color: "text-color" }),
+        " ",
+        translate(this.validationComments ? 'EDITCOMMENTS' : 'ADDCOMMENTS')),
+      isMobile && this.renderValidationComments(),
+      h("span", { class: "validation-container" },
+        h("yoo-form-checkbox", { animated: this.animated, value: this.markAsInvalid, class: "danger web", size: "large", header: translate('MARKFIELDASINVALID'), onInputChanged: (ev) => this.onValidationMarkAsInvalid(ev.detail) })))));
   }
   renderComments() {
-    return (this.shouldShowComments() &&
-      h("yoo-form-input-comments", { class: { 'with-border-bottom': this.displayValidationComments }, readonly: this.readonly, user: this.commentsUser, comments: this.comments, onInputChanged: (ev) => this.onCommentsChange(ev), onInputFocused: (ev) => this.onCommentFocused(ev) }));
+    return (this.shouldShowComments() && (h("yoo-form-input-comments", { class: { 'with-border-bottom': this.displayValidationComments }, readonly: this.readonly, user: this.commentsUser, comments: this.comments, onInputChanged: (ev) => this.onCommentsChange(ev), onInputFocused: (ev) => this.onCommentFocused(ev) })));
   }
   renderValidationComments() {
     const readonly = !this.allowFieldValidation || !this.showValidationComments;
-    return (this.displayValidationComments &&
-      h("yoo-form-input-comments", { readonly: readonly, user: this.validationCommentsUser, comments: this.validationComments, onInputChanged: (ev) => this.onValidationCommentsChange(ev), onInputFocused: (ev) => this.onCommentFocused(ev), onCommentsToggled: () => this.onToggleValidationComments() }));
+    return (this.displayValidationComments && (h("yoo-form-input-comments", { readonly: readonly, user: this.validationCommentsUser, comments: this.validationComments, onInputChanged: (ev) => this.onValidationCommentsChange(ev), onInputFocused: (ev) => this.onCommentFocused(ev), onCommentsToggled: () => this.onToggleValidationComments() })));
   }
   render() {
     var _a;
@@ -415,7 +404,7 @@ export class YooFormInputContainerComponent {
         line: this.isCheckboxOrToggle((_a = this.field) === null || _a === void 0 ? void 0 : _a.type) && this.forceReadonly,
         media: this.isMedia(),
         invalid: this.markAsInvalid
-      }, ...getConfig().isE2E ? this.getE2EAttributes() : {} }, this.field && [
+      }, ...(getConfig().isE2E ? this.getE2EAttributes() : {}) }, this.field && [
       this.renderContent(),
       this.field.hint && this.renderHint(),
       this.renderFooter(),
@@ -840,6 +829,23 @@ export class YooFormInputContainerComponent {
       "attribute": "hide-compliance-tags",
       "reflect": false
     },
+    "useUppercaseLabel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "use-uppercase-label",
+      "reflect": false
+    },
     "fullscreen": {
       "type": "boolean",
       "mutable": false,
@@ -862,7 +868,7 @@ export class YooFormInputContainerComponent {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "{ inputFn: (slots: HTMLElement[]) => any, slideTitle: any }",
+        "original": "{ inputFn: (slots: HTMLElement[]) => any; slideTitle: any }",
         "resolved": "{ inputFn: (slots: HTMLElement[]) => any; slideTitle: any; }",
         "references": {
           "HTMLElement": {

package/dist/collection/feature-platform/login/reset-password/reset-password.css

@@ -225,8 +225,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 15rem;
   margin-top: var(--spacing-08, 0.5rem);
 }
-:host yoo-form-input {
+:host yoo-form-input-container {
   display: block;
   max-width: 18.75rem;
   margin: auto;
+}
+:host yoo-form-input-container.web {
+  font-size: var(--font-size-12, 0.75rem);
 }

package/dist/collection/feature-platform/login/reset-password/reset-password.js

@@ -52,13 +52,13 @@ export class YooResetPasswordComponent {
   }
   renderRequest() {
     return [
-      !!this.instruction && h("p", null, this.instruction),
+      !!this.instruction && h("p", { style: { maxWidth: '350px', margin: '0 auto' } }, this.instruction),
       h("yoo-empty-state", { ref: (el) => (this.emptyState = el), type: this.isMagicLink ? 'magic-link' : 'password' }),
-      h("yoo-form-input-container", { field: { title: translate('YOOBICUSERNAME') }, hideOptional: true, hideLabel: true },
-        h("yoo-form-input", { ref: (el) => (this.emailInput = el), validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: translate('YOOBICUSERNAMEENTER'), 
-          //! Do not set up onInputBlur without confirming on mobile device (We don't want to have to press submit more than once)
+      h("yoo-form-input-container", { field: { title: 'YOOBICUSERNAME' }, hideOptional: true, useUppercaseLabel: true },
+        h("yoo-form-input", { ref: (el) => (this.emailInput = el), iconPrefixColor: 'app-color', validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: translate('YOOBICUSERNAMEENTER'), 
+          //! Do not set up onInputBlur without confirming on mobile device. We don't want to have to press submit more than once
           size: isWeb(this.host) ? 'medium' : 'large' })),
-      h("yoo-button", { ref: (el) => (this.submitButton = el), size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, translate('SUBMIT'))
+      h("yoo-button", { ref: (el) => (this.submitButton = el), size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, this.isMagicLink ? translate('YOOBICMAGICLINK') : translate('YOOBICRESETPASSWORD'))
     ];
   }
   renderResetForm() {
@@ -80,6 +80,7 @@ export class YooResetPasswordComponent {
           },
           {
             type: FormFieldType.password,
+            iconPrefixColor: 'app-color',
             name: 'newpassword',
             placeholder: 'NEWPASSWORD',
             required: true,
@@ -88,6 +89,7 @@ export class YooResetPasswordComponent {
           },
           {
             type: FormFieldType.password,
+            iconPrefixColor: 'app-color',
             name: 'verify',
             placeholder: 'CONFIRMPASSWORD',
             required: true,
@@ -97,9 +99,9 @@ export class YooResetPasswordComponent {
         ]
       }
     ];
-    return h("yoo-form-dynamic", { class: "margin-top", animated: false, slides: slides, showRecap: false, showSave: true, skipValidation: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onSave: () => this.onSubmit() },
+    return (h("yoo-form-dynamic", { class: "margin-top", animated: false, slides: slides, showRecap: false, showSave: true, skipValidation: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onSave: () => this.onSubmit() },
       h("div", { slot: "footer" },
-        h("yoo-button", { size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, onClick: () => this.onSubmit() }, translate('SUBMIT'))));
+        h("yoo-button", { size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, onClick: () => this.onSubmit() }, translate('SUBMIT')))));
   }
   render() {
     return h("div", null, this.token ? this.renderResetForm() : this.renderRequest());