@yoobic/yobi 8.4.0-1 → 8.4.0-4

package/dist/collection/feature-operate/campaign/card-campaign/card-campaign.js

@@ -26,13 +26,20 @@ export class YooCardCampaignComponent {
     return this.keepUndefinedValues && !isPresent(this[kpiName]);
   }
   get kpis() {
-    const kpis = compact([
-      (isPresent(this.locations) && this.locations >= 0) || this.keepUndefinedKpi('locations') ? { title: translate('LOCATIONS'), type: 'number', value: this.locations } : undefined,
-      (isPresent(this.users) && this.users >= 0) || this.keepUndefinedKpi('users') ? { title: translate('USERS'), type: 'number', value: this.users } : undefined,
-      (isPresent(this.completed) && this.completed >= 0) || this.keepUndefinedKpi('completed') ? { title: translate('COMPLETED'), type: 'number', value: this.completed } : undefined,
-      (isPresent(this.available) && this.available > 0) || this.keepUndefinedKpi('available') ? { title: translate('MISSIONSTODO'), type: 'number', value: this.available } : undefined,
-      (isPresent(this.completion) && this.completion >= 0) || this.keepUndefinedKpi('completion') ? { title: translate('COMPLETION'), type: 'percent', value: isPresent(this.completion) ? +(this.completion * 100).toFixed(0) : undefined } : undefined,
-      (isPresent(this.compliance) && this.compliance >= 0) || this.keepUndefinedKpi('compliance') ? { title: translate('COMPLIANCE'), type: 'percent', value: isPresent(this.compliance) ? +(this.compliance * 100).toFixed(0) : undefined } : undefined,
+    const kpis = !this.isFeed ? compact([
+      ((isPresent(this.locations) && this.locations >= 0) || this.keepUndefinedKpi('locations')) ? { title: translate('LOCATIONS'), type: 'number', value: this.locations } : undefined,
+      ((isPresent(this.users) && this.users >= 0) || this.keepUndefinedKpi('users')) ? { title: translate('USERS'), type: 'number', value: this.users } : undefined,
+      ((isPresent(this.completed) && this.completed >= 0) || this.keepUndefinedKpi('completed')) ? { title: translate('COMPLETED'), type: 'number', value: this.completed } : undefined,
+      ((isPresent(this.available) && this.available > 0) || this.keepUndefinedKpi('available')) ? { title: translate('MISSIONSTODO'), type: 'number', value: this.available } : undefined,
+      ((isPresent(this.completion) && this.completion >= 0) || this.keepUndefinedKpi('completion')) ? { title: translate('COMPLETION'), type: 'percent', value: isPresent(this.completion) ? +(this.completion * 100).toFixed(0) : undefined } : undefined,
+      ((isPresent(this.compliance) && this.compliance >= 0) || this.keepUndefinedKpi('compliance')) ? { title: translate('COMPLIANCE'), type: 'percent', value: isPresent(this.compliance) ? +(this.compliance * 100).toFixed(0) : undefined } : undefined,
+      ...this.extraKpis || []
+    ]) : compact([
+      ((isPresent(this.views) && this.views >= 0) || this.keepUndefinedKpi('views')) ? { title: translate('VIEWS'), type: 'number', value: this.views } : undefined,
+      ((isPresent(this.likes) && this.likes >= 0) || this.keepUndefinedKpi('likes')) ? { title: translate('LIKES'), type: 'number', value: this.likes } : undefined,
+      ((isPresent(this.comments) && this.comments >= 0) || this.keepUndefinedKpi('comments')) ? { title: translate('NUMBEROFCOMMENTS'), type: 'number', value: this.comments } : undefined,
+      ((isPresent(this.reposts) && this.reposts >= 0) || this.keepUndefinedKpi('reposts')) ? { title: translate('YOOBICNUMBEROFREPOSTS'), type: 'number', value: this.reposts } : undefined,
+      ((isPresent(this.audienceShare) && this.audienceShare >= 0) || this.keepUndefinedKpi('audienceShare')) ? { title: translate('YOOBICAUDIENCESHARE'), type: 'percent', value: isPresent(this.audienceShare) ? +(this.audienceShare * 100).toFixed(0) : undefined } : undefined,
       ...this.extraKpis || []
     ]);
     if (this.keepUndefinedValues) {
@@ -321,6 +328,108 @@ export class YooCardCampaignComponent {
       "reflect": false,
       "defaultValue": "false"
     },
+    "isFeed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-feed",
+      "reflect": false
+    },
+    "views": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "views",
+      "reflect": false
+    },
+    "likes": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "likes",
+      "reflect": false
+    },
+    "comments": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "comments",
+      "reflect": false
+    },
+    "reposts": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "reposts",
+      "reflect": false
+    },
+    "audienceShare": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "audience-share",
+      "reflect": false
+    },
     "keepUndefinedValues": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/feature-operate/campaign/detail-bar/detail-bar.js

@@ -133,7 +133,7 @@ export class YooDetailBarComponent {
       h("div", { class: "section-title" },
         translate('YOOBICGENERAL'),
         this.isArchived && h("yoo-tag", { color: "dark", size: "small" }, translate('PAUSEDCAMPAIGN'))),
-      this.type !== 'todo' && h("div", { class: "sub-section" },
+      this.type !== 'todo' && this.type !== 'feed' && h("div", { class: "sub-section" },
         h("div", null, (_a = this.slides) === null || _a === void 0 ? void 0 :
           _a.length,
           " ",
@@ -148,7 +148,7 @@ export class YooDetailBarComponent {
           " ",
           translate('YOOBICFIELDS')))),
       h("div", { class: "action-container" },
-        h("yoo-button", { color: "light", size: "small", onClick: () => this.onPreview() },
+        this.type !== 'feed' && h("yoo-button", { color: "light", size: "small", onClick: () => this.onPreview() },
           h("yoo-icon", { slot: "start", name: "play", size: "small" }),
           translate('PREVIEW')),
         this.isCourse && (h("yoo-button", { color: "light", size: "small", onClick: () => this.onSharePreview() },
@@ -167,7 +167,7 @@ export class YooDetailBarComponent {
       this.image && (h("div", { class: "sub-section" },
         h("yoo-img", { src: this.image }))),
       this.description && this.renderTruncateContent('DESCRIPTION', this.description),
-      this.type && this.renderContent('YOOBICTYPE', translate((this.type === 'todo' ? 'CAMPAIGN' : '') + ((_a = this.type) === null || _a === void 0 ? void 0 : _a.toUpperCase()))),
+      this.type && this.renderContent('YOOBICTYPE', translate((this.type === 'todo' || this.type === 'feed' ? 'CAMPAIGN' : '') + ((_a = this.type) === null || _a === void 0 ? void 0 : _a.toUpperCase()))),
       this.type === 'mission' && this.campaign.recurrenceType && this.renderContent('RECURRENCE', translate('CAMPAIGN' + this.campaign.recurrenceType.toUpperCase())),
       this.renderLanguage(),
       this.renderTeamsAndRoles('teams'),
@@ -191,7 +191,7 @@ export class YooDetailBarComponent {
       this.renderContent('ACTIVE', isBoolean(this.isActive) ? (this.isActive ? 'YOOBICYES' : 'YOOBICNO') : '-'),
       this.period && this.period !== '-' && this.renderContent('PERIOD', this.period),
       this.isFeatured !== null && this.renderContent('FEATUREDCOURSE', this.isFeatured ? 'YOOBICYES' : 'YOOBICNO'),
-      this.progressiveLessons != null && this.renderContent('PROGRESSIVELESSONS', this.progressiveLessons ? 'YOOBICYES' : 'YOOBICNO'),
+      this.progressiveLessons !== null && this.renderContent('PROGRESSIVELESSONS', this.progressiveLessons ? 'YOOBICYES' : 'YOOBICNO'),
       this.category && this.renderContent('CATEGORY', this.category),
       havePoints &&
         this.renderContent('POINTS', h("yoo-tag", { color: "app-color" },

package/dist/collection/feature-operate/campaign/helpers/operation-helpers.js

@@ -22,7 +22,13 @@ export function getCampaignTemplateTags(template) {
       iconOnlySize: 'medium'
     });
   }
-  if ((_a = template.type) === null || _a === void 0 ? void 0 : _a.toUpperCase) {
+  if (template.type === 'feed') {
+    retVal.push({
+      innerHTML: translate('CAMPAIGNFEED'),
+      color: template.active ? 'warning' : 'warning-10'
+    });
+  }
+  else if ((_a = template.type) === null || _a === void 0 ? void 0 : _a.toUpperCase) {
     retVal.push({
       innerHTML: translate(template.type === 'todo' ? 'CAMPAIGNTODO' : template.type.toUpperCase()),
       color: template.active ? 'app-color-10' : 'text-color-10'
@@ -346,7 +352,19 @@ export function getCampaignStateTags(campaign, removeStats) {
       iconOnlySize: 'medium'
     });
   }
-  if ((_b = campaign.type) === null || _b === void 0 ? void 0 : _b.toUpperCase) {
+  if (campaign.type === 'feed') {
+    retVal.push({
+      innerHTML: translate('CAMPAIGNFEED'),
+      color: campaign.active ? 'warning' : 'warning-10'
+    });
+    if ((campaign === null || campaign === void 0 ? void 0 : campaign.originalRef) || (campaign === null || campaign === void 0 ? void 0 : campaign.parentRef)) {
+      retVal.push({
+        innerHTML: translate('FORWARD'),
+        color: 'dark'
+      });
+    }
+  }
+  else if ((_b = campaign.type) === null || _b === void 0 ? void 0 : _b.toUpperCase) {
     retVal.push({
       innerHTML: translate(campaign.type === 'todo' ? 'CAMPAIGNTODO' : campaign.type.toUpperCase()),
       color: campaign.active ? 'app-color-10' : 'text-color-10'

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.css

@@ -213,6 +213,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16, 1rem);
+  box-sizing: border-box;
   padding: var(--spacing-16, 1rem);
   color: var(--announcement-color);
   background-color: var(--announcement-background-color);
@@ -290,7 +291,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-16, 1rem);
   background-color: var(--announcement-color);
 }
+:host(.feed) .description {
+  padding-top: var(--spacing-16, 1rem);
+}
 
 :host([is-preview]) .outer-container .progress .quick-task-progress yoo-progress-bar {
   --svg-width: 1.5rem;
+}
+
+:host(.overlay) .outer-container {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 11%, var(--dark-60, rgba(0, 0, 0, 0.6)));
 }

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.js

@@ -12,6 +12,10 @@ export class YooAnnouncementHeadingComponent {
     var _a;
     return getCssColor(((_a = this.getAnnouncement()) === null || _a === void 0 ? void 0 : _a.backgroundColor) || 'stable-light');
   }
+  get isFeed() {
+    var _a;
+    return ((_a = this.getAnnouncement()) === null || _a === void 0 ? void 0 : _a.type) === 'feed';
+  }
   get color() {
     var _a;
     return getCssColor(((_a = this.getAnnouncement()) === null || _a === void 0 ? void 0 : _a.color) || 'dark');
@@ -99,7 +103,7 @@ export class YooAnnouncementHeadingComponent {
   renderContent() {
     const dueDate = getMissionDueDate(this.announcement);
     return (h("div", { class: "outer-container" },
-      this.isLayoutFeed && this.renderTag(translate('ANNOUNCEMENT'), 'request', this.color, getCssColor('light'), 1),
+      this.isLayoutFeed && this.renderTag(translate(this.isFeed ? 'YOOBICMESSAGES' : 'ANNOUNCEMENT'), 'request', this.color, getCssColor('light'), 1),
       this.isLayoutFeed && h("div", { class: "details" }, this.renderContentDetails()),
       !this.isLayoutFeed && this.renderContentDetails(),
       !this.isLayoutFeed && dueDate && [

package/dist/collection/feature-operate/mission/workflow-state/workflow-state.js

@@ -12,7 +12,7 @@ export class YooWorkflowStateComponent {
       } },
       h("div", { class: "header" },
         h("div", { class: "title" }, translateMulti(step.title)),
-        (isActive || (history === null || history === void 0 ? void 0 : history.state)) && h("div", { class: "detail" }, translate('DETAILS'))),
+        (isActive || (history === null || history === void 0 ? void 0 : history.state)) && h("div", { class: "detail" }, translate('YOOBICDETAILS'))),
       step.type === 'parallel' &&
         (
         // this.state?.stepId === step._id &&

package/dist/collection/feature-operate/waitlist/waitlist-location-start/waitlist-location-start.css

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.14 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */

package/dist/collection/feature-platform/app/app/app.js

@@ -83,7 +83,7 @@ export class YooAppComponent {
       "mutable": false,
       "complexType": {
         "original": "IAppPermissions",
-        "resolved": "{ canAddBluetoothDevices: boolean; canArchiveLearners: boolean; canAskQuestion: boolean; canAssignCourse: boolean; canBroadcast: boolean; canCreateCommunity: boolean; canChat: boolean; canChatMultiple: boolean; canChatSingle: boolean; canCreateBattles: boolean; canViewCommunities: boolean; canCreateCampaignAudit: boolean; canCreateCampaignMission: boolean; canCreateCampaignPoll: boolean; canCreateCampaignRequest: boolean; canCreateCampaigns: boolean; canCreateCourse: boolean; canCreateCustomApps: boolean; canCreateAppMixer: boolean; canCreateDashboard: boolean; canCreateDocument: boolean; canCreateFeed: boolean; canCreateFeedNoValidation: boolean; canCreateIncentives: boolean; canCreateMemo: boolean; canCreatePublicEvent: boolean; canCreateService: boolean; canCreateCampaignTodo: boolean; canCreateCampaignQuicktask: boolean; canCreateCampaignQuicktaskMobile: boolean; canCreateVisit: boolean; canCreateWiki: boolean; canDeleteQuestion: boolean; canEditOrPauseMissions: boolean; canEditProject: boolean; canEditWorkflow: boolean; canInviteNewLearners: boolean; canManageLiveShopping: boolean; canNotifyUsers: boolean; canReassignMission: boolean; canReceiveService: boolean; canScheduleMission: boolean; canSendCourseReminders: boolean; canSendRemindersToAll: boolean; canShareByEmail: boolean; canShareFeed: boolean; canSocialShare: boolean; canValidate: boolean; canValidateVisit: boolean; canVerifyQuestion: boolean; canVideoCall: boolean; canViewActionPlans: boolean; canViewAisle: boolean; canViewAICatalog: boolean; canViewAISuggestions: boolean; canViewAllPolls: boolean; canViewCalendar: boolean; canViewCampaignAnalytics: boolean; canViewCampaignNewAnalytics: boolean; canViewCampaigns: boolean; canViewDashboard: boolean; canViewDatabase: boolean; canViewDocuments: boolean; canViewEngagementAnalytics: boolean; canViewFeed: boolean; canViewHealthscore: boolean; canViewInsightsActiveUsers: boolean; canViewInsightsOperate: boolean; canViewInsightsLearning: boolean; canViewInsightsEngagement: boolean; canViewIncentives: boolean; canViewInsight: boolean; canViewInsights: boolean; canViewInsightsOverviewAnalytics: boolean; canViewInventory: boolean; canViewJourneys: boolean; canViewLeaderboard: boolean; canViewLearningManager: boolean; canViewLiveShopping: boolean; canViewLocationDetailTabs: boolean; canViewMemo: boolean; canViewMenuCreate: boolean; canViewMicrolearning: boolean; canViewMissionAnalysis: boolean; canViewMissionsMore: boolean; canViewOthersCalendar: boolean; canViewPoll: boolean; canViewPollAnalytics: boolean; canViewPriceActions: boolean; canViewProductBatch: boolean; canViewProductBatchKpis: boolean; canViewProject: boolean; canViewQuestion: boolean; canViewQuestionKnowledgeBase: boolean; canViewQuestionKnowledgeLibrary: boolean; canViewQuestionKnowledgeBaseInDocuments: boolean; canViewSalesAIAnalytics: boolean; canViewScorm: boolean; canViewService: boolean; canViewServiceAnalytics: boolean; canViewStoreCampaignInsights: boolean; canViewStoreInsights: boolean; canViewManagerInsights: boolean; canViewStoreVisits: boolean; canViewTaskAnalytics: boolean; canViewTodoAnalytics: boolean; canViewUsers: boolean; canViewUsersOrStores: boolean; canViewVirtualShopping: boolean; canViewVirtualShoppingAnalytics: boolean; canViewWaitlist: boolean; canViewWaitlistAnalytics: boolean; canViewYext: boolean; hasBoost: boolean; hasDataset: boolean; hasOperations: boolean; hasRetailNext: boolean; hasWorkflow: boolean; hasMemos: boolean; isAdmin: boolean; isStore: boolean; }",
+        "resolved": "{ canAddBluetoothDevices: boolean; canArchiveLearners: boolean; canAskQuestion: boolean; canAssignCourse: boolean; canBroadcast: boolean; canCreateCommunity: boolean; canChat: boolean; canChatMultiple: boolean; canChatSingle: boolean; canCreateBattles: boolean; canViewCommunities: boolean; canCreateCampaignAudit: boolean; canCreateCampaignMission: boolean; canCreateCampaignPoll: boolean; canCreateCampaignRequest: boolean; canCreateCampaigns: boolean; canCreateCourse: boolean; canCreateCustomApps: boolean; canCreateAppMixer: boolean; canCreateDashboard: boolean; canCreateDocument: boolean; canCreateFeed: boolean; canCreateFeedNoValidation: boolean; canCreateIncentives: boolean; canCreateMemo: boolean; canCreatePublicEvent: boolean; canCreateService: boolean; canCreateCampaignTodo: boolean; canCreateCampaignQuicktask: boolean; canCreateCampaignQuicktaskMobile: boolean; canCreateVisit: boolean; canCreateWiki: boolean; canDeleteQuestion: boolean; canEditOrPauseMissions: boolean; canEditProject: boolean; canEditWorkflow: boolean; canInviteNewLearners: boolean; canManageLiveShopping: boolean; canNotifyUsers: boolean; canReassignMission: boolean; canReceiveService: boolean; canScheduleMission: boolean; canSendCourseReminders: boolean; canSendRemindersToAll: boolean; canShareByEmail: boolean; canShareFeed: boolean; canSocialShare: boolean; canValidate: boolean; canValidateVisit: boolean; canVerifyQuestion: boolean; canVideoCall: boolean; canViewActionPlans: boolean; canViewAisle: boolean; canViewAICatalog: boolean; canViewAISuggestions: boolean; canViewAllPolls: boolean; canViewCalendar: boolean; canViewCampaignAnalytics: boolean; canViewCampaignNewAnalytics: boolean; canViewCampaigns: boolean; canViewDashboard: boolean; canViewDatabase: boolean; canViewDocuments: boolean; canViewEngagementAnalytics: boolean; canViewFeed: boolean; canViewHealthscore: boolean; canViewInsightsActiveUsers: boolean; canViewInsightsOperate: boolean; canViewInsightsLearning: boolean; canViewInsightsEngagement: boolean; canViewIncentives: boolean; canViewInsight: boolean; canViewInsights: boolean; canViewInsightsOverviewAnalytics: boolean; canViewInventory: boolean; canViewJourneys: boolean; canViewLeaderboard: boolean; canViewLearningManager: boolean; canViewLiveShopping: boolean; canViewLocationDetailTabs: boolean; canViewMemo: boolean; canViewMessages: boolean; canViewMenuCreate: boolean; canViewMicrolearning: boolean; canViewMissionAnalysis: boolean; canViewMissionsMore: boolean; canViewOthersCalendar: boolean; canViewPoll: boolean; canViewPollAnalytics: boolean; canViewPriceActions: boolean; canViewProductBatch: boolean; canViewProductBatchKpis: boolean; canViewProject: boolean; canViewQuestion: boolean; canViewQuestionKnowledgeBase: boolean; canViewQuestionKnowledgeLibrary: boolean; canViewQuestionKnowledgeBaseInDocuments: boolean; canViewSalesAIAnalytics: boolean; canViewScorm: boolean; canViewService: boolean; canViewServiceAnalytics: boolean; canViewStoreCampaignInsights: boolean; canViewStoreInsights: boolean; canViewManagerInsights: boolean; canViewStoreVisits: boolean; canViewTaskAnalytics: boolean; canViewTodoAnalytics: boolean; canViewUsers: boolean; canViewUsersOrStores: boolean; canViewVirtualShopping: boolean; canViewVirtualShoppingAnalytics: boolean; canViewWaitlist: boolean; canViewWaitlistAnalytics: boolean; canViewYext: boolean; hasBoost: boolean; hasDataset: boolean; hasOperations: boolean; hasRetailNext: boolean; hasWorkflow: boolean; hasMemos: boolean; isAdmin: boolean; isStore: boolean; }",
         "references": {
           "IAppPermissions": {
             "location": "import",

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

@@ -210,7 +210,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   height: 100%;
 }
-.outer-login-container .login-main-title, .outer-login-container .login-sub-title {
+.outer-login-container .login-main-title,
+.outer-login-container .login-sub-title {
   font-weight: 900;
 }
 .outer-login-container .login-main-title {
@@ -220,7 +221,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 .outer-login-container .login-sub-title {
   width: fit-content;
   margin-top: 0;
-  margin-bottom: 0.875rem;
+  margin-bottom: var(--spacing-16, 1rem);
   transition: all ease-in-out 0.2s;
 }
 .outer-login-container .content-container {
@@ -320,7 +321,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-12, 0.75rem);
 }
 .outer-login-container #divider div {
-  border-top: 0.0675rem solid var(--divider-color);
+  border-top: var(--border-width-01, 0.0625rem) solid var(--divider-color);
 }
 .outer-login-container #divider p {
   grid-area: or;
@@ -363,10 +364,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   .outer-login-container:not(.emulated) footer {
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
-    border-top: var(--header-footer-border-color) 0.0675rem solid;
+    border-top: var(--border-width-01, 0.0625rem) solid var(--header-footer-border-color);
   }
   .outer-login-container:not(.emulated) footer * {
-    margin: var(--spacing-24, 1.5rem) 0 1.875rem 0;
+    margin: var(--spacing-24, 1.5rem) 0 var(--spacing-32, 2rem) 0;
     line-height: 1.125rem;
   }
 }
@@ -396,7 +397,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin: 0.5rem 0;
+  margin: var(--spacing-08, 0.5rem) 0;
 }
 .outer-login-container #error-alert .error-content p {
   margin: 0;
@@ -412,21 +413,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  margin: 1rem 0;
+  margin: var(--spacing-16, 1rem) 0;
 }
 .outer-login-container #error-alert .error-content.web p {
-  margin: 0 1rem 0 0;
+  margin: 0 var(--spacing-16, 1rem) 0 0;
   text-align: left;
 }
 .outer-login-container #error-alert .error-content.web .link {
   text-align: right;
 }
 .outer-login-container.ios #error-alert {
-  padding-top: var(--spacing-32, 2rem);
+  padding-top: var(--safe-area-inset-top);
 }
 .outer-login-container .header img {
-  height: 4rem;
-  max-height: 4rem;
+  height: var(--logo-06, 4rem);
+  max-height: var(--logo-06, 4rem);
 }
 .outer-login-container .header {
   position: absolute;
@@ -443,7 +444,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 .outer-login-container .header .login-main-title {
   margin: 0;
-  padding: 0 0.3rem;
+  padding: 0 var(--spacing-04, 0.25rem);
 }
 .outer-login-container .header img {
   max-width: 80%;
@@ -451,8 +452,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: all ease-in-out 0.2s;
 }
 .outer-login-container[shape=square] .header img {
-  height: 6rem;
-  max-height: 6rem;
+  height: var(--logo-08, 6rem);
+  max-height: var(--logo-08, 6rem);
 }
 .outer-login-container[is-whitelabel] .header .login-main-title {
   display: none;
@@ -460,26 +461,26 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 @media screen and (min-width: 750px) {
   .outer-login-container:not(.emulated) .header img {
-    height: 4rem;
-    max-height: 4rem;
+    height: var(--logo-06, 4rem);
+    max-height: var(--logo-06, 4rem);
   }
   .outer-login-container:not(.emulated)[logo-shape=square] .header img {
-    height: 6rem;
-    max-height: 6rem;
+    height: var(--logo-08, 6rem);
+    max-height: var(--logo-08, 6rem);
   }
 }
 @media screen and (min-width: 1000px) {
   .outer-login-container:not(.emulated) .header img {
-    height: 4rem;
-    max-height: 4rem;
+    height: var(--logo-06, 4rem);
+    max-height: var(--logo-06, 4rem);
   }
   .outer-login-container:not(.emulated) .header {
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
-    border-bottom: var(--header-footer-border-color) 0.0675rem solid;
+    border-bottom: var(--border-width-01, 0.0625rem) solid var(--header-footer-border-color);
   }
   .outer-login-container:not(.emulated) .header img {
-    margin: 2rem 0;
+    margin: var(--spacing-32, 2rem) 0;
   }
   .outer-login-container:not(.emulated) .header .login-main-title {
     display: none;
@@ -493,8 +494,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     top: 9rem;
   }
   .outer-login-container:not(.emulated)[logo-shape=square] .header img {
-    height: 6rem;
-    max-height: 6rem;
+    height: var(--logo-08, 6rem);
+    max-height: var(--logo-08, 6rem);
   }
   .outer-login-container:not(.emulated)[logo-shape=square] #error-alert {
     top: 11rem;
@@ -509,8 +510,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 @media screen and (max-width: 750px) {
   .outer-login-container[is-whitelabel]:not(.emulated) .header img {
-    height: 4rem;
-    max-height: 4rem;
+    height: var(--logo-06, 4rem);
+    max-height: var(--logo-06, 4rem);
   }
   .outer-login-container[is-whitelabel]:not(.emulated) header .login-main-title {
     display: none;
@@ -520,16 +521,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     margin-top: var(--spacing-48, 3rem);
   }
   .outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img {
-    height: 6rem;
-    max-height: 6rem;
+    height: var(--logo-08, 6rem);
+    max-height: var(--logo-08, 6rem);
   }
   .outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img {
     margin-top: var(--spacing-64, 4rem);
   }
 }
 .outer-login-container[is-whitelabel].emulated .header img {
-  height: 4rem;
-  max-height: 4rem;
+  height: var(--logo-06, 4rem);
+  max-height: var(--logo-06, 4rem);
 }
 .outer-login-container[is-whitelabel].emulated header .login-main-title {
   display: none;
@@ -539,15 +540,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-top: var(--spacing-48, 3rem);
 }
 .outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img {
-  height: 6rem;
-  max-height: 6rem;
+  height: var(--logo-08, 6rem);
+  max-height: var(--logo-08, 6rem);
 }
 .outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img {
   margin-top: var(--spacing-64, 4rem);
 }
 .outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img {
-  height: 6rem;
-  max-height: 6rem;
+  height: var(--logo-08, 6rem);
+  max-height: var(--logo-08, 6rem);
 }
 .outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img {
   margin-top: var(--spacing-48, 3rem);
@@ -625,8 +626,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 .outer-login-container:not([is-whitelabel]) .header img {
-  height: 2rem;
-  max-height: 2rem;
+  height: var(--logo-04, 2rem);
+  max-height: var(--logo-04, 2rem);
 }
 .outer-login-container:not([is-whitelabel]) .header {
   margin-top: var(--spacing-16, 1rem);
@@ -636,7 +637,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 .outer-login-container.emulated #error-alert {
-  padding-top: var(--spacing-24, 1.5rem);
+  padding-top: var(--safe-area-inset-top);
 }
 
 .outer-login-container {
@@ -664,21 +665,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 .outer-login-container .help-buttons yoo-button#help-button {
   width: fit-content;
   height: 1.5rem;
-  margin: -0.5rem 0 0 0;
+  margin: calc(var(--spacing-08, 0.5rem) * -1) 0 0 0;
 }
 .outer-login-container .help-buttons yoo-button#magic-button {
   width: fit-content;
   height: 1.5rem;
-  margin: -0.5rem 0 0 0;
+  margin: calc(var(--spacing-08, 0.5rem) * -1) 0 0 0;
 }
 .outer-login-container .help-buttons.mobile, .outer-login-container .help-buttons.emulated {
   justify-content: flex-end;
 }
 .outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#help-button {
-  margin: -0.25rem -0.5rem 0 0;
+  margin: calc(var(--spacing-04, 0.25rem) * -1) calc(var(--spacing-08, 0.5rem) * -1) 0 0;
 }
 .outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button {
-  margin: -0.25rem 0 0 -0.5rem;
+  margin: calc(var(--spacing-04, 0.25rem) * -1) 0 0 calc(var(--spacing-08, 0.5rem) * -1);
 }
 .outer-login-container #default-login-button {
   box-sizing: border-box;
@@ -932,7 +933,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  margin-top: 0.625rem;
+  margin-top: var(--spacing-08, 0.5rem);
   direction: ltr;
   background: var(--input-background-color);
   border: var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);
@@ -946,7 +947,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.4375rem var(--spacing-08, 0.5rem);
+  padding: var(--spacing-08, 0.5rem);
   color: inherit;
 }
 .outer-input-container .inner-input-container .inline-left {
@@ -957,7 +958,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.4375rem var(--spacing-08, 0.5rem);
+  padding: var(--spacing-08, 0.5rem);
   color: inherit;
   display: flex;
   flex-direction: row;
@@ -978,9 +979,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex: 1;
   width: 100%;
   min-width: 0;
-  padding: var(--spacing-08, 0.5rem);
-  padding-right: 2rem;
-  padding-left: 2rem;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-32, 2rem);
   color: inherit;
   font-weight: var(--font-weight-400, 400);
   font-size: var(--input-font-size);
@@ -1021,7 +1020,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: transparent;
 }
 .outer-input-container .inner-input-container.password input {
-  padding-right: 4rem;
+  padding-right: var(--spacing-64, 4rem);
 }
 .outer-input-container .inner-input-container .icon-prefix,
 .outer-input-container .inner-input-container .password-input-clear-icon,
@@ -1038,7 +1037,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   right: 0;
 }
 .outer-input-container .inner-input-container .input-show-icon {
-  right: 2rem;
+  right: var(--spacing-32, 2rem);
 }
 
 .outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon {
@@ -1055,21 +1054,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 3rem;
 }
 .outer-input-container.large .inner-input-container input {
-  padding-right: 2.5rem;
-  padding-left: 2.5rem;
+  padding-right: var(--spacing-56, 3.5rem);
+  padding-left: var(--spacing-56, 3.5rem);
 }
 .outer-input-container.large .inner-input-container.password input {
-  padding-right: 4.5rem;
+  padding-right: var(--spacing-96, 6rem);
 }
 .outer-input-container.large .inner-input-container .icon-prefix {
-  padding: 0.75rem var(--spacing-08, 0.5rem);
+  padding: 0.75rem var(--spacing-16, 1rem);
 }
 .outer-input-container.large .inner-input-container .password-input-clear-icon,
 .outer-input-container.large .inner-input-container .username-input-clear-icon {
-  padding: 0.75rem var(--spacing-08, 0.5rem);
+  padding: 0.75rem var(--spacing-16, 1rem);
 }
 .outer-input-container.large .inner-input-container .input-show-icon {
-  padding: 0.75rem var(--spacing-08, 0.5rem);
+  right: var(--spacing-40, 2.5rem);
+  padding: 0.75rem var(--spacing-16, 1rem);
 }
 
 .outer-input-container.medium .inner-input-container {

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

@@ -1,5 +1,5 @@
 import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
-import { addKeyboardEventListener, disableKeyboardResize, isAndroid, isFullScreenFalse, isIonic, isIOS, isNativeMobile, isTabletOrIpad, isWeb, removeKeyboardEventListeners, setStatusBarDarkMode, showActionSheet, translate } from '@shared/utils';
+import { addKeyboardEventListener, disableKeyboardResize, isAndroid, isChrome, isFullScreenFalse, isIonic, isIOS, isNativeMobile, isTabletOrIpad, isWeb, removeKeyboardEventListeners, setStatusBarDarkMode, showActionSheet, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State } from '@stencil/core';
 import googleLogo from './assets/login/google_color.svg';
 import { Background, Footer, Header, LoginForm, LoginOptions, MainContent, Sidepanel } from './parts';
@@ -61,6 +61,7 @@ export class YooLoginComponent {
   }
   componentDidLoad() {
     var _a;
+    !isNativeMobile() && isChrome() && this.checkAutofill();
     (_a = ScreenOrientation === null || ScreenOrientation === void 0 ? void 0 : ScreenOrientation.onChange) === null || _a === void 0 ? void 0 : _a.call(ScreenOrientation).subscribe(() => forceUpdate(this));
     this.validateLogin();
   }
@@ -68,6 +69,17 @@ export class YooLoginComponent {
     setStatusBarDarkMode(false);
     isAndroid() && removeKeyboardEventListeners();
   }
+  checkAutofill() {
+    let areFieldsAutofilled = false;
+    const intervalCheck = setInterval(() => {
+      if (document.querySelectorAll(':-webkit-autofill').length === 2 && !areFieldsAutofilled) {
+        this.loginButtonElement.classList.remove('disabled');
+        this.loginButtonElement.removeAttribute('disabled');
+        areFieldsAutofilled = true;
+        clearInterval(intervalCheck);
+      }
+    });
+  }
   onAlertClosed() {
     this.error = '';
   }