@edm-sdui/sdui 1.0.16 → 1.0.18

package/fesm2022/edm-sdui-sdui.mjs

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, Injector, Component, Input, Directive, HostListener, inject, ViewChild, NgModule, EventEmitter, ChangeDetectionStrategy, Output } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, Injector, Component, Input, EventEmitter, Output, Directive, HostListener, ViewChild, inject, NgModule, ChangeDetectionStrategy } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$2 from '@angular/router';
+import * as i1$3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { map, BehaviorSubject, finalize, catchError, of } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { tap } from 'rxjs/operators';
+import * as i1$2 from '@angular/platform-browser';
 
 var UIScreenIdentifier;
 (function (UIScreenIdentifier) {
@@ -116,6 +117,7 @@ class UIScreenService {
             header: json.header ? this.mapToUIComponent(json.header) : null,
             main: json.main ? this.mapToUIComponent(json.main) : null,
             footer: json.footer ? this.mapToUIComponent(json.footer) : null,
+            fab: json.fab ? this.mapToUIElement(json.fab) : null,
         };
     }
     mapToCenteredContentLayout(json) {
@@ -191,7 +193,9 @@ class UIScreenService {
     }
     mapBackground(json) {
         return {
-            backgroundColor: json.background_color,
+            backgroundColor: json.background_color ? json.background_color : null,
+            gradientColor1: json.gradient_color_1 ? json.gradient_color_1 : null,
+            gradientColor2: json.gradient_color_2 ? json.gradient_color_2 : null,
         };
     }
     mapAction(json) {
@@ -410,1145 +414,220 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-class SingleColumnLayoutComponent {
-    ngOnChanges(changes) {
-        if (changes['uiLayout']) {
-            console.debug('[SingleColumnLayout] Novo layout recebido:', changes['uiLayout'].currentValue);
+var UIActionType;
+(function (UIActionType) {
+    // navegação
+    UIActionType["INTERNAL_URL"] = "INTERNAL_URL";
+    UIActionType["RELOAD_INTERNAL_URL"] = "RELOAD_INTERNAL_URL";
+    UIActionType["DISMISS_TO_SCENE"] = "DISMISS_TO_SCENE";
+    UIActionType["EXTERNAL_URL"] = "EXTERNAL_URL";
+    UIActionType["WEBVIEW_URL"] = "WEBVIEW_URL";
+    // paywall
+    UIActionType["PAYWALL"] = "PAYWALL";
+    UIActionType["REGISTER"] = "REGISTER";
+    // conteúdo
+    UIActionType["HTML"] = "HTML";
+    UIActionType["FILE"] = "FILE";
+})(UIActionType || (UIActionType = {}));
+
+class UIActionHandlersService {
+    registerLogout(handler) {
+        this.logoutHandler = handler;
+    }
+    executeLogout() {
+        if (this.logoutHandler) {
+            this.logoutHandler();
+        }
+        else {
+            console.warn('Nenhum handler de logout registrado.');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SingleColumnLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SingleColumnLayoutComponent, selector: "edm-sdui-single-column-layout", inputs: { uiLayout: "uiLayout" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"single-column-layout\" *ngIf=\"!!uiLayout\">\n  <!-- <pre>{{ uiLayout | json }}</pre> -->\n\n  <edm-sdui-navigation [uiNavigation]=\"uiLayout.nav\"></edm-sdui-navigation>\n\n  <div class=\"header\" *ngIf=\"!!uiLayout?.header\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.header\"></edm-sdui-component>\n  </div>\n\n  <div class=\"scrollview\" *ngIf=\"!!uiLayout?.main\">\n    <div class=\"main\">\n      <edm-sdui-component\n        *ngIf=\"!!uiLayout?.main\"\n        [uiComponent]=\"uiLayout.main\"\n      ></edm-sdui-component>\n    </div>\n  </div>\n\n  <div class=\"footer\" *ngIf=\"!!uiLayout?.footer\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.footer\"></edm-sdui-component>\n  </div>\n</div>\n", styles: [":host{display:contents}.single-column-layout{display:flex;flex-direction:column;width:100%;min-height:100vh;position:relative}.single-column-layout .header{width:100%;z-index:100}.single-column-layout .scrollview .main{flex:1;display:flex;align-items:center;justify-content:center}.single-column-layout .footer{position:fixed;bottom:0;left:0;width:100%;z-index:100}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UINavigationComponent, selector: "edm-sdui-navigation", inputs: ["uiNavigation"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionHandlersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionHandlersService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SingleColumnLayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'edm-sdui-single-column-layout', standalone: false, template: "<div class=\"single-column-layout\" *ngIf=\"!!uiLayout\">\n  <!-- <pre>{{ uiLayout | json }}</pre> -->\n\n  <edm-sdui-navigation [uiNavigation]=\"uiLayout.nav\"></edm-sdui-navigation>\n\n  <div class=\"header\" *ngIf=\"!!uiLayout?.header\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.header\"></edm-sdui-component>\n  </div>\n\n  <div class=\"scrollview\" *ngIf=\"!!uiLayout?.main\">\n    <div class=\"main\">\n      <edm-sdui-component\n        *ngIf=\"!!uiLayout?.main\"\n        [uiComponent]=\"uiLayout.main\"\n      ></edm-sdui-component>\n    </div>\n  </div>\n\n  <div class=\"footer\" *ngIf=\"!!uiLayout?.footer\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.footer\"></edm-sdui-component>\n  </div>\n</div>\n", styles: [":host{display:contents}.single-column-layout{display:flex;flex-direction:column;width:100%;min-height:100vh;position:relative}.single-column-layout .header{width:100%;z-index:100}.single-column-layout .scrollview .main{flex:1;display:flex;align-items:center;justify-content:center}.single-column-layout .footer{position:fixed;bottom:0;left:0;width:100%;z-index:100}\n"] }]
-        }], propDecorators: { uiLayout: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionHandlersService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class CenteredContentLayoutComponent {
-    ngOnInit() {
-        console.log(this.uiLayout);
+class ModalComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.title = '';
+        this.closed = new EventEmitter();
     }
-    ngOnChanges(changes) {
-        if (changes['uiLayout']) {
-            console.debug('[CenteredContentLayoutComponent] Novo layout recebido:', changes['uiLayout'].currentValue);
-        }
+    get safeUrl() {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CenteredContentLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CenteredContentLayoutComponent, selector: "edm-sdui-centered-content-layout", inputs: { uiLayout: "uiLayout" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"centered-content-layout\" *ngIf=\"!!uiLayout\">\n  <!-- <pre>{{ uiLayout | json }}</pre> -->\n\n  <edm-sdui-navigation [uiNavigation]=\"uiLayout.nav\"></edm-sdui-navigation>\n\n  <div class=\"header\" *ngIf=\"uiLayout?.header\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.header\"></edm-sdui-component>\n  </div>\n\n  <div class=\"centered\">\n    <edm-sdui-component\n      *ngIf=\"!!uiLayout?.centered\"\n      [uiComponent]=\"uiLayout.centered\"\n    ></edm-sdui-component>\n  </div>\n\n  <div class=\"footer\" *ngIf=\"!!uiLayout?.footer\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.footer\"></edm-sdui-component>\n  </div>\n</div>\n", styles: [":host{display:contents}.centered-content-layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;position:relative}.centered-content-layout .header{width:100%;z-index:100}.centered-content-layout .centered{flex:1;display:flex;align-items:center;justify-content:center}.centered-content-layout .footer{position:fixed;bottom:0;left:0;width:100%;z-index:100}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UINavigationComponent, selector: "edm-sdui-navigation", inputs: ["uiNavigation"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }] }); }
+    close() {
+        this.closed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ModalComponent, isStandalone: true, selector: "edm-modal", inputs: { url: "url", title: "title" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"edm-modal-backdrop\">\n  <div class=\"edm-modal-content\" (click)=\"$event.stopPropagation()\">\n\n    <div class=\"edm-modal-header\">\n      <span class=\"edm-modal-title\">{{ title }}</span>\n      <button class=\"edm-modal-close-btn\" (click)=\"close()\">\n        <img src=\"/assets/images/bt-close.svg\" width=\"28px\" height=\"28px\" />\n      </button>\n    </div>\n\n    <iframe [src]=\"safeUrl\" frameborder=\"0\"></iframe>\n\n  </div>\n</div>\n", styles: [".edm-modal-backdrop{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999999}.edm-modal-backdrop:before{content:\"\";opacity:.8;background-color:var(--bg);z-index:-1;position:absolute;inset:0}.edm-modal-content{min-width:50vw;max-width:90vw;height:80vh;box-shadow:0 0 16px #ffffff1a;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;position:relative}.edm-modal-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--bg);color:var(--main-1);font-size:1rem;font-weight:600;border-bottom:1px solid var(--aux)}.edm-modal-title{flex:1}.edm-modal-close-btn{background:var(--bg-module);border:none;cursor:pointer}iframe{flex:1;padding-top:16px;width:100%;border:none}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CenteredContentLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'edm-sdui-centered-content-layout', standalone: false, template: "<div class=\"centered-content-layout\" *ngIf=\"!!uiLayout\">\n  <!-- <pre>{{ uiLayout | json }}</pre> -->\n\n  <edm-sdui-navigation [uiNavigation]=\"uiLayout.nav\"></edm-sdui-navigation>\n\n  <div class=\"header\" *ngIf=\"uiLayout?.header\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.header\"></edm-sdui-component>\n  </div>\n\n  <div class=\"centered\">\n    <edm-sdui-component\n      *ngIf=\"!!uiLayout?.centered\"\n      [uiComponent]=\"uiLayout.centered\"\n    ></edm-sdui-component>\n  </div>\n\n  <div class=\"footer\" *ngIf=\"!!uiLayout?.footer\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.footer\"></edm-sdui-component>\n  </div>\n</div>\n", styles: [":host{display:contents}.centered-content-layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;position:relative}.centered-content-layout .header{width:100%;z-index:100}.centered-content-layout .centered{flex:1;display:flex;align-items:center;justify-content:center}.centered-content-layout .footer{position:fixed;bottom:0;left:0;width:100%;z-index:100}\n"] }]
-        }], propDecorators: { uiLayout: [{
+            args: [{ selector: 'edm-modal', standalone: true, template: "<div class=\"edm-modal-backdrop\">\n  <div class=\"edm-modal-content\" (click)=\"$event.stopPropagation()\">\n\n    <div class=\"edm-modal-header\">\n      <span class=\"edm-modal-title\">{{ title }}</span>\n      <button class=\"edm-modal-close-btn\" (click)=\"close()\">\n        <img src=\"/assets/images/bt-close.svg\" width=\"28px\" height=\"28px\" />\n      </button>\n    </div>\n\n    <iframe [src]=\"safeUrl\" frameborder=\"0\"></iframe>\n\n  </div>\n</div>\n", styles: [".edm-modal-backdrop{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999999}.edm-modal-backdrop:before{content:\"\";opacity:.8;background-color:var(--bg);z-index:-1;position:absolute;inset:0}.edm-modal-content{min-width:50vw;max-width:90vw;height:80vh;box-shadow:0 0 16px #ffffff1a;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;position:relative}.edm-modal-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--bg);color:var(--main-1);font-size:1rem;font-weight:600;border-bottom:1px solid var(--aux)}.edm-modal-title{flex:1}.edm-modal-close-btn{background:var(--bg-module);border:none;cursor:pointer}iframe{flex:1;padding-top:16px;width:100%;border:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { url: [{
+                type: Input
+            }], title: [{
                 type: Input
+            }], closed: [{
+                type: Output
             }] } });
 
-var UISpacingLevel;
-(function (UISpacingLevel) {
-    UISpacingLevel["S1"] = "s1";
-    UISpacingLevel["S2"] = "s2";
-    UISpacingLevel["S3"] = "s3";
-    UISpacingLevel["S4"] = "s4";
-    UISpacingLevel["S5"] = "s5";
-    UISpacingLevel["S6"] = "s6";
-})(UISpacingLevel || (UISpacingLevel = {}));
+class ModalService {
+    constructor(injector, appRef, cfr) {
+        this.injector = injector;
+        this.appRef = appRef;
+        this.cfr = cfr;
+    }
+    open(url, title = '') {
+        const factory = this.cfr.resolveComponentFactory(ModalComponent);
+        const componentRef = factory.create(this.injector);
+        componentRef.instance.url = url;
+        componentRef.instance.title = title;
+        componentRef.instance.closed.subscribe(() => {
+            this.appRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+        });
+        this.appRef.attachView(componentRef.hostView);
+        const domElem = componentRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalService, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }] });
 
-const spaceMapping = {
-    [UISpacingLevel.S1]: '4px',
-    [UISpacingLevel.S2]: '8px',
-    [UISpacingLevel.S3]: '16px',
-    [UISpacingLevel.S4]: '24px',
-    [UISpacingLevel.S5]: '32px',
-    [UISpacingLevel.S6]: '40px',
-};
-
-var UIColor;
-(function (UIColor) {
-    UIColor["ALERT"] = "alert";
-    UIColor["BG_TAG"] = "bg_tag";
-    UIColor["ACTINDCOLOR"] = "actindcolor";
-    UIColor["TEXT_WEB"] = "text_web";
-    UIColor["TEXT_RANKING_HIGHLIGHT"] = "text_ranking_highlight";
-    UIColor["RANKING_HIGHLIGHT"] = "ranking_highlight";
-    UIColor["TEXT_RANKING_MAIN"] = "text_ranking_main";
-    UIColor["TEXT_RANKING_AUX"] = "text_ranking_aux";
-    UIColor["BT_SELECT_ACTIVITY"] = "bt_select_activity";
-    UIColor["FONT_BT"] = "font_bt";
-    UIColor["FONT_BT_PRICE"] = "font_bt_price";
-    UIColor["FONT_TAG"] = "font_tag";
-    UIColor["FONT_LIVE"] = "font_live";
-    UIColor["QUIZ_SELECT"] = "quiz_select";
-    UIColor["MAIN1"] = "main_1";
-    UIColor["AUX"] = "aux";
-    UIColor["VOTE_OFF"] = "vote_off";
-    UIColor["BG_VOTE"] = "bg_vote";
-    UIColor["VOTE_ON"] = "vote_on";
-    UIColor["STORY_OFF"] = "story_off";
-    UIColor["STORY_ON"] = "story_on";
-    UIColor["FONT_ACTIONS"] = "font_actions";
-    UIColor["FONT_SEARCH_OFF"] = "font_search_off";
-    UIColor["FONT_SEARCH_ON"] = "font_search_on";
-    UIColor["SLIDER_OFF"] = "slider_off";
-    UIColor["SLIDER_ON"] = "slider_on";
-    UIColor["PROGRESS_VIEW_OFF"] = "progress_view_off";
-    UIColor["PROGRESS_VIEW_RANKING_OFF"] = "progress_view_ranking_off";
-    UIColor["PROGRESS_STORY_OFF"] = "progress_story_off";
-    UIColor["PROGRESS_STORY_ON"] = "progress_story_on";
-    UIColor["PROGRESS_VIEW_ON"] = "progress_view_on";
-    UIColor["FONT_DISABLED"] = "font_disabled";
-    UIColor["BT_TAB_OFF"] = "bt_tab_off";
-    UIColor["BG"] = "bg";
-    UIColor["FONT_BT_PROGRAM"] = "font_bt_program";
-    UIColor["BG_RANKING"] = "bg_ranking";
-    UIColor["BG_STORY"] = "bg_story";
-    UIColor["BG_NEW_COMMENT"] = "bg_new_comment";
-    UIColor["SHADOW"] = "shadow";
-    UIColor["BG_SURVEY"] = "bg_survey";
-    UIColor["BG_LIVE"] = "bg_live";
-    UIColor["BG_VIEW_LIVE"] = "bg_view_live";
-    UIColor["MAIN2"] = "main_2";
-    UIColor["BT_TAG_ON"] = "bt_tag_on";
-    UIColor["TEXT_COLOR"] = "text_color";
-    UIColor["TEXT_STORY"] = "text_story";
-    UIColor["BT_REGISTER"] = "bt_register";
-    UIColor["BT_SHADOW_PROFILE"] = "bt_shadow_profile";
-    UIColor["FONT_REGISTER"] = "font_register";
-    UIColor["FONT_BT_MAIN"] = "font_bt_main";
-    UIColor["FONT_BT_QUIZ"] = "font_bt_quiz";
-    UIColor["FONT_BT_VIEW"] = "font_bt_view";
-    UIColor["FONT_BT_TAG_OFF"] = "font_bt_tag_off";
-    UIColor["FONT_BT_TAG_ON"] = "font_bt_tag_on";
-    UIColor["ATTENTION_COLOR"] = "attention_color";
-    UIColor["QUIZ_ERROR"] = "quiz_error";
-    UIColor["BG_NAV"] = "bg_nav";
-    UIColor["BT_OPEN_E_CLOSE"] = "bt_open_e_close";
-    UIColor["IC_TYPE_CLASS"] = "ic_type_class";
-    UIColor["IC_TYPE_LIVE"] = "ic_type_live";
-    UIColor["IC_TYPE_DISABLED"] = "ic_type_disabled";
-    UIColor["BT_DOWNLOAD"] = "bt_download";
-    UIColor["BT_DISABLED"] = "bt_disabled";
-    UIColor["BT_DISABLED_HOME"] = "bt_disabled_home";
-    UIColor["BT_CHECK_OFF"] = "bt_check_off";
-    UIColor["ACTIONS_OFF"] = "actions_off";
-    UIColor["BT_PROGRAM"] = "bt_program";
-    UIColor["PLAYER_CONTROLS"] = "player_controls";
-    UIColor["RATING_OFF"] = "rating_off";
-    UIColor["RATING_ON"] = "rating_on";
-    UIColor["ACTIONS_ON"] = "actions_on";
-    UIColor["TAG_VIP_HIGHLIGHT"] = "tag_vip_highlight";
-    UIColor["BT_CHECK_ON"] = "bt_check_on";
-    UIColor["BT_TAB_ON"] = "bt_tab_on";
-    UIColor["BT_VIEW_DEG1"] = "bt_view_deg1";
-    UIColor["LINE_DIVISER"] = "line_diviser";
-    UIColor["BG_SEC"] = "bg_sec";
-    UIColor["BG_SEARCH"] = "bg_search";
-    UIColor["FONT_PRICE"] = "font_price";
-    UIColor["BT_LIKE_ON"] = "bt_like_on";
-    UIColor["BG_CARD"] = "bg_card";
-    UIColor["BT_TAG_OFF"] = "bt_tag_off";
-    UIColor["BT_TAG_VIP"] = "bt_tag_vip";
-    UIColor["BT_PROFILE"] = "bt_profile";
-    UIColor["BT_PRICE_DEG1"] = "bt_price_deg1";
-    UIColor["BT_PRICE_DEG2"] = "bt_price_deg2";
-    UIColor["BT_LIKE_OFF"] = "bt_like_off";
-    UIColor["BT_LOCK"] = "bt_lock";
-    UIColor["BT_TRASH"] = "bt_trash";
-    UIColor["BG_COMMENT"] = "bg_comment";
-    UIColor["BG_POST"] = "bg_post";
-    UIColor["BT_HIGHLIGHT"] = "bt_highlight";
-    UIColor["ATTENTION_BADGE"] = "attention_badge";
-    UIColor["BT_BORDER_PROFILE"] = "bt_border_profile";
-    UIColor["BT_MAIN_DEG1"] = "bt_main_deg1";
-    UIColor["BT_MAIN_DEG2"] = "bt_main_deg2";
-    UIColor["BT_VIEW_DEG2"] = "bt_view_deg2";
-    UIColor["BG_MODULO"] = "bg_modulo";
-    UIColor["BG_MODULO_RANKING"] = "bg_modulo_ranking";
-    UIColor["QUIZ_RIGHT"] = "quiz_right";
-    UIColor["BT_BANNER_MAIN"] = "bt_banner_main";
-    UIColor["FONT_BT_BANNER"] = "font_bt_banner";
-    UIColor["BT_BANNER"] = "bt_banner";
-    UIColor["FONT_BT_BANNER_MAIN"] = "font_bt_banner_main";
-    UIColor["BORDER_BANNER"] = "border_banner";
-    UIColor["INPUT_ERROR"] = "input_error";
-    UIColor["BT_BACK"] = "bt_back";
-    UIColor["TEXT_COMMENT_SEC"] = "text_comment_sec";
-    UIColor["BT_IA_DEG1"] = "bt_ia_deg1";
-    UIColor["BT_IA_DEG2"] = "bt_ia_deg2";
-    UIColor["NORMAL"] = "normal";
-    UIColor["BG_CLIPS"] = "bg_clips";
-    UIColor["FONT_CLIPS"] = "font_clips";
-    UIColor["BG_MASK_0"] = "bg_mask_0";
-    UIColor["BG_MASK_80"] = "bg_mask_80";
-    UIColor["BG_MASK_20"] = "bg_mask_20";
-    UIColor["TEXT_CHALLENGE_AUX"] = "text_challenge_aux";
-    UIColor["TEXT_CHALLENGE_HIGHLIGHT"] = "text_challenge_highlight";
-    UIColor["BG_CHALLENGE"] = "bg_challenge";
-    UIColor["BG_MODULO_CHALLENGE"] = "bg_modulo_challenge";
-    UIColor["CHALLENGE_HIGHLIGHT"] = "challenge_highlight";
-    UIColor["BT_CHALLENGE"] = "bt_challenge";
-    UIColor["FONT_BT_CHALLENGE"] = "font_bt_challenge";
-    UIColor["CHALLENGE_OFF"] = "challenge_off";
-    UIColor["TEXT_CHALLENGE_DISABLED"] = "text_challenge_disabled";
-    UIColor["TEXT_CHALLENGE_MAIN"] = "text_challenge_main";
-    UIColor["CHALLENGE_WAY"] = "challenge_way";
-})(UIColor || (UIColor = {}));
-
-const colorMapping = {
-    [UIColor.ALERT]: 'var(--alert)',
-    [UIColor.BG_TAG]: 'var(--bg-tag)',
-    [UIColor.ACTINDCOLOR]: 'var(--actindcolor)',
-    [UIColor.TEXT_WEB]: 'var(--text-web)',
-    [UIColor.TEXT_RANKING_HIGHLIGHT]: 'var(--text-ranking-highlight)',
-    [UIColor.RANKING_HIGHLIGHT]: 'var(--ranking-highlight)',
-    [UIColor.TEXT_RANKING_MAIN]: 'var(--text-ranking-main)',
-    [UIColor.TEXT_RANKING_AUX]: 'var(--text-ranking-aux)',
-    [UIColor.BT_SELECT_ACTIVITY]: 'var(--bt-select-activity)',
-    [UIColor.FONT_BT]: 'var(--font-bt)',
-    [UIColor.FONT_BT_PRICE]: 'var(--font-bt-price)',
-    [UIColor.FONT_TAG]: 'var(--font-tag)',
-    [UIColor.FONT_LIVE]: 'var(--font-live)',
-    [UIColor.QUIZ_SELECT]: 'var(--quiz-select)',
-    [UIColor.MAIN1]: 'var(--main-1)',
-    [UIColor.AUX]: 'var(--aux)',
-    [UIColor.VOTE_OFF]: 'var(--vote-off)',
-    [UIColor.BG_VOTE]: 'var(--bg-vote)',
-    [UIColor.VOTE_ON]: 'var(--vote-on)',
-    [UIColor.STORY_OFF]: 'var(--story-off)',
-    [UIColor.STORY_ON]: 'var(--story-on)',
-    [UIColor.FONT_ACTIONS]: 'var(--font-actions)',
-    [UIColor.FONT_SEARCH_OFF]: 'var(--font-search-off)',
-    [UIColor.FONT_SEARCH_ON]: 'var(--font-search-on)',
-    [UIColor.SLIDER_OFF]: 'var(--slider-off)',
-    [UIColor.SLIDER_ON]: 'var(--slider-on)',
-    [UIColor.PROGRESS_VIEW_OFF]: 'var(--progress-view-off)',
-    [UIColor.PROGRESS_VIEW_RANKING_OFF]: 'var(--progress-view-ranking-off)',
-    [UIColor.PROGRESS_STORY_OFF]: 'var(--progress-story-off)',
-    [UIColor.PROGRESS_STORY_ON]: 'var(--progress-story-on)',
-    [UIColor.PROGRESS_VIEW_ON]: 'var(--progress-view-on)',
-    [UIColor.FONT_DISABLED]: 'var(--font-disabled)',
-    [UIColor.BT_TAB_OFF]: 'var(--bt-tab-off)',
-    [UIColor.BG]: 'var(--bg)',
-    [UIColor.FONT_BT_PROGRAM]: 'var(--font-bt-program)',
-    [UIColor.BG_RANKING]: 'var(--bg-ranking)',
-    [UIColor.BG_STORY]: 'var(--bg-story)',
-    [UIColor.BG_NEW_COMMENT]: 'var(--bg-new-comment)',
-    [UIColor.SHADOW]: 'var(--shadow)',
-    [UIColor.BG_SURVEY]: 'var(--bg-survey)',
-    [UIColor.BG_LIVE]: 'var(--bg-live)',
-    [UIColor.BG_VIEW_LIVE]: 'var(--bg-view-live)',
-    [UIColor.MAIN2]: 'var(--main-2)',
-    [UIColor.BT_TAG_ON]: 'var(--bt-tag-on)',
-    [UIColor.TEXT_COLOR]: 'var(--text-color)',
-    [UIColor.TEXT_STORY]: 'var(--text-story)',
-    [UIColor.BT_REGISTER]: 'var(--bt-register)',
-    [UIColor.BT_SHADOW_PROFILE]: 'var(--bt-shadow-profile)',
-    [UIColor.FONT_REGISTER]: 'var(--font-register)',
-    [UIColor.FONT_BT_MAIN]: 'var(--font-bt-main)',
-    [UIColor.FONT_BT_QUIZ]: 'var(--font-bt-quiz)',
-    [UIColor.FONT_BT_VIEW]: 'var(--font-bt-view)',
-    [UIColor.FONT_BT_TAG_OFF]: 'var(--font-bt-tag-off)',
-    [UIColor.FONT_BT_TAG_ON]: 'var(--font-bt-tag-on)',
-    [UIColor.ATTENTION_COLOR]: 'var(--attention-color)',
-    [UIColor.QUIZ_ERROR]: 'var(--quiz-error)',
-    [UIColor.BG_NAV]: 'var(--bg-nav)',
-    [UIColor.BT_OPEN_E_CLOSE]: 'var(--bt-open-e-close)',
-    [UIColor.IC_TYPE_CLASS]: 'var(--ic-type-class)',
-    [UIColor.IC_TYPE_LIVE]: 'var(--ic-type-live)',
-    [UIColor.IC_TYPE_DISABLED]: 'var(--ic-type-disabled)',
-    [UIColor.BT_DOWNLOAD]: 'var(--bt-download)',
-    [UIColor.BT_DISABLED]: 'var(--bt-disabled)',
-    [UIColor.BT_DISABLED_HOME]: 'var(--bt-disabled-home)',
-    [UIColor.BT_CHECK_OFF]: 'var(--bt-check-off)',
-    [UIColor.ACTIONS_OFF]: 'var(--actions-off)',
-    [UIColor.BT_PROGRAM]: 'var(--bt-program)',
-    [UIColor.PLAYER_CONTROLS]: 'var(--player-controls)',
-    [UIColor.RATING_OFF]: 'var(--rating-off)',
-    [UIColor.RATING_ON]: 'var(--rating-on)',
-    [UIColor.ACTIONS_ON]: 'var(--actions-on)',
-    [UIColor.TAG_VIP_HIGHLIGHT]: 'var(--tag-vip-highlight)',
-    [UIColor.BT_CHECK_ON]: 'var(--bt-check-on)',
-    [UIColor.BT_TAB_ON]: 'var(--bt-tab-on)',
-    [UIColor.BT_VIEW_DEG1]: 'var(--bt-view-deg1)',
-    [UIColor.LINE_DIVISER]: 'var(--line-diviser)',
-    [UIColor.BG_SEC]: 'var(--bg-sec)',
-    [UIColor.BG_SEARCH]: 'var(--bg-search)',
-    [UIColor.FONT_PRICE]: 'var(--font-price)',
-    [UIColor.BT_LIKE_ON]: 'var(--bt-like-on)',
-    [UIColor.BG_CARD]: 'var(--bg-card)',
-    [UIColor.BT_TAG_OFF]: 'var(--bt-tag-off)',
-    [UIColor.BT_TAG_VIP]: 'var(--bt-tag-vip)',
-    [UIColor.BT_PROFILE]: 'var(--bt-profile)',
-    [UIColor.BT_PRICE_DEG1]: 'var(--bt-price-deg1)',
-    [UIColor.BT_PRICE_DEG2]: 'var(--bt-price-deg2)',
-    [UIColor.BT_LIKE_OFF]: 'var(--bt-like-off)',
-    [UIColor.BT_LOCK]: 'var(--bt-lock)',
-    [UIColor.BT_TRASH]: 'var(--bt-trash)',
-    [UIColor.BG_COMMENT]: 'var(--bg-comment)',
-    [UIColor.BG_POST]: 'var(--bg-post)',
-    [UIColor.BT_HIGHLIGHT]: 'var(--bt-highlight)',
-    [UIColor.ATTENTION_BADGE]: 'var(--attention-badge)',
-    [UIColor.BT_BORDER_PROFILE]: 'var(--bt-border-profile)',
-    [UIColor.BT_MAIN_DEG1]: 'var(--bt-main-deg1)',
-    [UIColor.BT_MAIN_DEG2]: 'var(--bt-main-deg2)',
-    [UIColor.BT_VIEW_DEG2]: 'var(--bt-view-deg2)',
-    [UIColor.BG_MODULO]: 'var(--bg-modulo)',
-    [UIColor.BG_MODULO_RANKING]: 'var(--bg-modulo-ranking)',
-    [UIColor.QUIZ_RIGHT]: 'var(--quiz-right)',
-    [UIColor.BT_BANNER_MAIN]: 'var(--bt-banner-main)',
-    [UIColor.FONT_BT_BANNER]: 'var(--font-bt-banner)',
-    [UIColor.BT_BANNER]: 'var(--bt-banner)',
-    [UIColor.FONT_BT_BANNER_MAIN]: 'var(--font-bt-banner-main)',
-    [UIColor.BORDER_BANNER]: 'var(--border-banner)',
-    [UIColor.INPUT_ERROR]: 'var(--input-error)',
-    [UIColor.BT_BACK]: 'var(--bt-back)',
-    [UIColor.TEXT_COMMENT_SEC]: 'var(--text-comment-sec)',
-    [UIColor.BT_IA_DEG1]: 'var(--bt-ia-deg1)',
-    [UIColor.BT_IA_DEG2]: 'var(--bt-ia-deg2)',
-    [UIColor.NORMAL]: 'var(--normal)',
-    [UIColor.BG_CLIPS]: 'var(--bg-clips)',
-    [UIColor.FONT_CLIPS]: 'var(--font-clips)',
-    [UIColor.BG_MASK_0]: 'var(--bg-mask-0)',
-    [UIColor.BG_MASK_80]: 'var(--bg-mask-80)',
-    [UIColor.BG_MASK_20]: 'var(--bg-mask-20)',
-    [UIColor.TEXT_CHALLENGE_AUX]: 'var(--text-challenge-aux)',
-    [UIColor.TEXT_CHALLENGE_HIGHLIGHT]: 'var(--text-challenge-highlight)',
-    [UIColor.BG_CHALLENGE]: 'var(--bg-challenge)',
-    [UIColor.BG_MODULO_CHALLENGE]: 'var(--bg-modulo-challenge)',
-    [UIColor.CHALLENGE_HIGHLIGHT]: 'var(--challenge-highlight)',
-    [UIColor.BT_CHALLENGE]: 'var(--bt-challenge)',
-    [UIColor.FONT_BT_CHALLENGE]: 'var(--font-bt-challenge)',
-    [UIColor.CHALLENGE_OFF]: 'var(--challenge-off)',
-    [UIColor.TEXT_CHALLENGE_DISABLED]: 'var(--text-challenge-disabled)',
-    [UIColor.TEXT_CHALLENGE_MAIN]: 'var(--text-challenge-main)',
-    [UIColor.CHALLENGE_WAY]: 'var(--challenge-way)',
-};
-
-var UIPaddingLevel;
-(function (UIPaddingLevel) {
-    UIPaddingLevel["P1"] = "p1";
-    UIPaddingLevel["P2"] = "p2";
-    UIPaddingLevel["P3"] = "p3";
-    UIPaddingLevel["P4"] = "p4";
-    UIPaddingLevel["P5"] = "p5";
-    UIPaddingLevel["P6"] = "p6";
-    UIPaddingLevel["P7"] = "p7";
-    UIPaddingLevel["P8"] = "p8";
-})(UIPaddingLevel || (UIPaddingLevel = {}));
-
-const padMapping = {
-    [UIPaddingLevel.P1]: '4px',
-    [UIPaddingLevel.P2]: '8px',
-    [UIPaddingLevel.P3]: '16px',
-    [UIPaddingLevel.P4]: '24px',
-    [UIPaddingLevel.P5]: '32px',
-    [UIPaddingLevel.P6]: '40px',
-    [UIPaddingLevel.P7]: '48px',
-    [UIPaddingLevel.P8]: '56px',
-};
-
-var UIRadiusLevel;
-(function (UIRadiusLevel) {
-    UIRadiusLevel["R1"] = "r1";
-    UIRadiusLevel["R2"] = "r2";
-    UIRadiusLevel["R3"] = "r3";
-    UIRadiusLevel["R4"] = "r4";
-    UIRadiusLevel["R5"] = "r5";
-    UIRadiusLevel["R50"] = "r50";
-})(UIRadiusLevel || (UIRadiusLevel = {}));
-
-const radiusMapping = {
-    [UIRadiusLevel.R1]: '3px',
-    [UIRadiusLevel.R2]: '5px',
-    [UIRadiusLevel.R3]: '8px',
-    [UIRadiusLevel.R4]: '10px',
-    [UIRadiusLevel.R5]: '12px',
-    [UIRadiusLevel.R50]: '50%',
-};
-
-var UIAlignmentType;
-(function (UIAlignmentType) {
-    UIAlignmentType["START"] = "start";
-    UIAlignmentType["CENTER"] = "center";
-    UIAlignmentType["END"] = "end";
-})(UIAlignmentType || (UIAlignmentType = {}));
-
-const alignmentMapping = {
-    [UIAlignmentType.CENTER]: 'center',
-    [UIAlignmentType.END]: 'end',
-    [UIAlignmentType.START]: 'start',
-};
-
-var UIDimension;
-(function (UIDimension) {
-    UIDimension["P100"] = "p100";
-    UIDimension["P90"] = "p90";
-    UIDimension["P80"] = "p80";
-    UIDimension["P70"] = "p70";
-    UIDimension["P60"] = "p60";
-    UIDimension["P50"] = "p50";
-    UIDimension["P40"] = "p40";
-    UIDimension["P30"] = "p30";
-    UIDimension["P20"] = "p20";
-    UIDimension["P10"] = "p10";
-    UIDimension["D180"] = "d180";
-    UIDimension["D150"] = "d150";
-    UIDimension["D120"] = "d120";
-    UIDimension["D110"] = "d110";
-    UIDimension["D100"] = "d100";
-    UIDimension["D90"] = "d90";
-    UIDimension["D80"] = "d80";
-    UIDimension["D72"] = "d72";
-    UIDimension["D64"] = "d64";
-    UIDimension["D60"] = "d60";
-    UIDimension["D56"] = "d56";
-    UIDimension["D48"] = "d48";
-    UIDimension["D42"] = "d42";
-    UIDimension["D40"] = "d40";
-    UIDimension["D36"] = "d36";
-    UIDimension["D32"] = "d32";
-    UIDimension["D30"] = "d30";
-    UIDimension["D28"] = "d28";
-    UIDimension["D26"] = "d26";
-    UIDimension["D24"] = "d24";
-    UIDimension["D22"] = "d22";
-    UIDimension["D20"] = "d20";
-    UIDimension["D18"] = "d18";
-    UIDimension["D16"] = "d16";
-    UIDimension["D14"] = "d14";
-    UIDimension["D12"] = "d12";
-    UIDimension["D10"] = "d10";
-    UIDimension["D8"] = "d8";
-    UIDimension["D5"] = "d5";
-    UIDimension["D4"] = "d4";
-    UIDimension["D3"] = "d3";
-    UIDimension["D2"] = "d2";
-    UIDimension["D1"] = "d1";
-})(UIDimension || (UIDimension = {}));
-
-const dimensionMapping = {
-    // Percentage values
-    [UIDimension.P100]: '100%',
-    [UIDimension.P90]: '90%',
-    [UIDimension.P80]: '80%',
-    [UIDimension.P70]: '70%',
-    [UIDimension.P60]: '60%',
-    [UIDimension.P50]: '50%',
-    [UIDimension.P40]: '40%',
-    [UIDimension.P30]: '30%',
-    [UIDimension.P20]: '20%',
-    [UIDimension.P10]: '10%',
-    // Pixel values
-    [UIDimension.D180]: '180px',
-    [UIDimension.D150]: '150px',
-    [UIDimension.D120]: '120px',
-    [UIDimension.D110]: '110px',
-    [UIDimension.D100]: '100px',
-    [UIDimension.D90]: '90px',
-    [UIDimension.D80]: '80px',
-    [UIDimension.D72]: '72px',
-    [UIDimension.D64]: '64px',
-    [UIDimension.D60]: '60px',
-    [UIDimension.D56]: '56px',
-    [UIDimension.D48]: '48px',
-    [UIDimension.D42]: '42px',
-    [UIDimension.D40]: '40px',
-    [UIDimension.D36]: '36px',
-    [UIDimension.D32]: '32px',
-    [UIDimension.D30]: '30px',
-    [UIDimension.D28]: '28px',
-    [UIDimension.D26]: '26px',
-    [UIDimension.D24]: '24px',
-    [UIDimension.D22]: '22px',
-    [UIDimension.D20]: '20px',
-    [UIDimension.D18]: '18px',
-    [UIDimension.D16]: '16px',
-    [UIDimension.D14]: '14px',
-    [UIDimension.D12]: '12px',
-    [UIDimension.D10]: '10px',
-    [UIDimension.D8]: '8px',
-    [UIDimension.D5]: '5px',
-    [UIDimension.D4]: '4px',
-    [UIDimension.D3]: '3px',
-    [UIDimension.D2]: '2px',
-    [UIDimension.D1]: '1px',
-};
-
-var UIShadowOffset;
-(function (UIShadowOffset) {
-    UIShadowOffset["S1"] = "s1";
-})(UIShadowOffset || (UIShadowOffset = {}));
-
-var UIShadowBlurRadius;
-(function (UIShadowBlurRadius) {
-    UIShadowBlurRadius["B1"] = "b1";
-})(UIShadowBlurRadius || (UIShadowBlurRadius = {}));
-
-const shadowOffsetMapping = {
-    [UIShadowOffset.S1]: '1px',
-};
-const shadowBlurRadiusMapping = {
-    [UIShadowBlurRadius.B1]: '3px',
-};
-
-var UIJustify;
-(function (UIJustify) {
-    UIJustify["START"] = "start";
-    UIJustify["CENTER"] = "center";
-    UIJustify["END"] = "end";
-    UIJustify["BETWEEN"] = "space-between";
-    UIJustify["EVENLY"] = "space-evenly";
-})(UIJustify || (UIJustify = {}));
-
-const justifyMapping = {
-    [UIJustify.START]: 'flex-start',
-    [UIJustify.CENTER]: 'center',
-    [UIJustify.END]: 'flex-end',
-    [UIJustify.BETWEEN]: 'space-between',
-    [UIJustify.EVENLY]: 'space-evenly',
-};
-
-var UIActionType;
-(function (UIActionType) {
-    // navegação
-    UIActionType["INTERNAL_URL"] = "INTERNAL_URL";
-    UIActionType["RELOAD_INTERNAL_URL"] = "RELOAD_INTERNAL_URL";
-    UIActionType["DISMISS_TO_SCENE"] = "DISMISS_TO_SCENE";
-    UIActionType["EXTERNAL_URL"] = "EXTERNAL_URL";
-    UIActionType["WEBVIEW_URL"] = "WEBVIEW_URL";
-    // paywall
-    UIActionType["PAYWALL"] = "PAYWALL";
-    UIActionType["REGISTER"] = "REGISTER";
-    // conteúdo
-    UIActionType["HTML"] = "HTML";
-    UIActionType["FILE"] = "FILE";
-})(UIActionType || (UIActionType = {}));
-
-class UIActionHandlersService {
-    registerLogout(handler) {
-        this.logoutHandler = handler;
-    }
-    executeLogout() {
-        if (this.logoutHandler) {
-            this.logoutHandler();
-        }
-        else {
-            console.warn('Nenhum handler de logout registrado.');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionHandlersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionHandlersService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionHandlersService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class UIActionService {
-    constructor(router, actionHandlers) {
-        this.router = router;
-        this.actionHandlers = actionHandlers;
-    }
-    execute(action) {
-        if (!action || !action.type)
-            return;
-        console.log(action);
-        switch (action.type) {
-            case UIActionType.INTERNAL_URL:
-                if (action.url && isSduiUrl(action.url)) {
-                    const resolved = resolveSduiUrl(action.url);
-                    this.router.navigate([], {
-                        queryParams: { [SDUI_URL_PARAM]: resolved },
-                        queryParamsHandling: 'merge',
-                    });
-                }
-                else {
-                    this.handleCustomNavigation(action.url || '');
-                }
-                break;
-            case UIActionType.RELOAD_INTERNAL_URL:
-                if (action.url) {
-                    console.debug('[UIActionService] Navigating to:', action.url);
-                    if (isSduiUrl(action.url)) {
-                        const resolved = resolveSduiUrl(action.url);
-                        this.router.navigate([], {
-                            queryParams: { [SDUI_URL_PARAM]: resolved },
-                            queryParamsHandling: 'merge',
-                        });
-                    }
-                    else {
-                        this.router.navigateByUrl(action.url, { replaceUrl: false });
-                    }
-                }
-                break;
-            case UIActionType.EXTERNAL_URL:
-                if (action.url) {
-                    window.open(action.url, '_blank');
-                }
-            // Outros tipos de ação podem ser adicionados aqui
-        }
-    }
-    handleCustomNavigation(url) {
-        if (url.includes('timeline/')) {
-            const broken = url.split('timeline/')[1];
-            this.router.navigate(['comunidade', 'postagem', broken], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('live/')) {
-            const broken = url.split('live/')[1];
-            this.router.navigate(['comunidade', 'postagem', 'live', broken], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('lesson/')) {
-            const lessonId = url.split('lesson/')[1];
-            const productId = url.includes('product/') ? url.split('product/')[1].split('/')[0] : null;
-            if (productId) {
-                this.router.navigate(['produtos', productId, 'aula', lessonId], { queryParams: { from: 'sdui' } });
-                return true;
-            }
-        }
-        if (url.includes('product/')) {
-            const productId = url.split('product/')[1];
-            this.router.navigate(['produtos', productId], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('posts/')) {
-            const postId = url.split('posts/')[1];
-            this.router.navigate(['comunidade', 'postagem', postId], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('my-purchases')) {
-            this.router.navigate(['perfil', 'compras'], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('my-annotations')) {
-            this.router.navigate(['perfil', 'meu-caderno'], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('my-list')) {
-            this.router.navigate(['perfil', 'minha-lista'], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('my-certificates')) {
-            this.router.navigate(['perfil', 'certificados'], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('my-subscriptions')) {
-            this.router.navigate(['perfil', 'assinaturas'], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('edit-profile')) {
-            this.router.navigate(['perfil', 'editar'], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('ranking')) {
-            this.router.navigate(['perfil', 'ranking'], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('ranking/rules')) {
-            this.router.navigate(['perfil', 'ranking', 'regras'], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        if (url.includes('logout')) {
-            this.router.navigate(['logout'], { queryParams: { from: 'sdui' } });
-            return true;
-        }
-        return false; // nenhum dos casos especiais foi tratado
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionService, deps: [{ token: i1$2.Router }, { token: UIActionHandlersService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: UIActionHandlersService }] });
-
-class UIViewDirective {
-    constructor(elementRef, renderer, router, actionService, screenViewModel) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.router = router;
-        this.actionService = actionService;
-        this.screenViewModel = screenViewModel;
-        this.disableClick = false;
-    }
-    ngOnChanges(changes) {
-        if (this.edmSduiView) {
-            this.applyStyles(this.edmSduiView);
-        }
-    }
-    applyStyles(uiView) {
-        if (uiView.padding) {
-            this.applyPadding(uiView.padding);
-        }
-        if (uiView.background) {
-            this.applyBackground(uiView.background);
-        }
-        if (uiView.action) {
-            this.applyAction(uiView.action);
-        }
-        if (uiView.alignment) {
-            this.applyAlignment(uiView.alignment);
-        }
-        if (uiView.shadow) {
-            this.applyShadow(uiView.shadow);
-        }
-        if (uiView.radius) {
-            this.applyRadius(uiView.radius);
-        }
-        if (uiView.spacing) {
-            this.applySpacing(uiView.spacing);
-        }
-        if (uiView.height) {
-            this.applyHeight(uiView.height);
-        }
-        if (uiView.width) {
-            this.applyWidth(uiView.width);
-        }
-        if (uiView.borderWidth) {
-            this.applyBorderWidth(uiView.borderWidth);
-        }
-        if (uiView.borderColor) {
-            this.applyBorderColor(uiView.borderColor);
-        }
-        if (uiView.justify) {
-            this.applyJustify(uiView.justify);
-        }
-    }
-    applyPadding(uiPadding) {
-        if (uiPadding.top) {
-            const padValue = padMapping[uiPadding.top];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-top', padValue);
-        }
-        if (uiPadding.left) {
-            const padValue = padMapping[uiPadding.left];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-left', padValue);
-        }
-        if (uiPadding.right) {
-            const padValue = padMapping[uiPadding.right];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-right', padValue);
-        }
-        if (uiPadding.bottom) {
-            const padValue = padMapping[uiPadding.bottom];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-bottom', padValue);
-        }
-    }
-    applyBackground(uiBackground) {
-        if (uiBackground.backgroundColor) {
-            const backgroundColor = colorMapping[uiBackground.backgroundColor];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', backgroundColor);
-        }
-    }
-    applyAction(uiAction) {
-        if (this.disableClick) {
-            return;
-        }
-        this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
-    }
-    applyAlignment(uiAlignment) {
-        if (uiAlignment.alignment) {
-            // console.debug('alignment:', uiAlignment.alignment);
-            const alignment = alignmentMapping[uiAlignment.alignment];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'align-items', alignment);
-        }
-    }
-    applyShadow(uiShadow) {
-        if (uiShadow.color && uiShadow.offsetX && uiShadow.offsetY && uiShadow.blurRadius) {
-            const color = colorMapping[uiShadow.color];
-            const offsetX = shadowOffsetMapping[uiShadow.offsetX];
-            const offsetY = shadowOffsetMapping[uiShadow.offsetY];
-            const blurRadius = shadowBlurRadiusMapping[uiShadow.blurRadius];
-            const opacity = uiShadow.opacity !== undefined ? uiShadow.opacity : 1;
-            // Format: box-shadow: offsetX offsetY blurRadius color
-            const shadowValue = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
-            this.renderer.setStyle(this.elementRef.nativeElement, 'box-shadow', shadowValue);
-            if (opacity !== 1) {
-                this.renderer.setStyle(this.elementRef.nativeElement, 'opacity', opacity.toString());
-            }
-        }
-    }
-    applyRadius(uiRadius) {
-        if (uiRadius.topLeft) {
-            const radius = radiusMapping[uiRadius.topLeft];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'border-top-left-radius', radius);
-        }
-        if (uiRadius.topRight) {
-            const radius = radiusMapping[uiRadius.topRight];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'border-top-right-radius', radius);
-        }
-        if (uiRadius.bottomLeft) {
-            const radius = radiusMapping[uiRadius.bottomLeft];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'border-bottom-left-radius', radius);
-        }
-        if (uiRadius.bottomRight) {
-            const radius = radiusMapping[uiRadius.bottomRight];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'border-bottom-right-radius', radius);
-        }
-    }
-    applySpacing(uiSpacing) {
-        if (uiSpacing.spacing) {
-            const spacingValue = spaceMapping[uiSpacing.spacing];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'gap', spacingValue);
-        }
-    }
-    applyHeight(height) {
-        if (height) {
-            const heightValue = dimensionMapping[height];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'height', heightValue);
-        }
-    }
-    applyWidth(width) {
-        if (width) {
-            const widthValue = dimensionMapping[width];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'width', widthValue);
-        }
-    }
-    applyBorderWidth(borderWidth) {
-        if (borderWidth !== null && borderWidth !== undefined) {
-            this.renderer.setStyle(this.elementRef.nativeElement, 'border-width', `${borderWidth}px`);
-            // Ensure border style is set, otherwise border-width won't be visible
-            this.renderer.setStyle(this.elementRef.nativeElement, 'border-style', 'solid');
-        }
-    }
-    applyBorderColor(borderColor) {
-        if (borderColor) {
-            const color = colorMapping[borderColor];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'border-color', color);
-        }
-    }
-    applyJustify(justify) {
-        if (justify) {
-            const justifyValue = justifyMapping[justify];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'justify-content', justifyValue);
-        }
-    }
-    onClick(event) {
-        if (this.disableClick)
-            return;
-        if (this.edmSduiView?.action) {
-            event.stopPropagation();
-            this.actionService.execute(this.edmSduiView.action);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIViewDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.Router }, { token: UIActionService }, { token: UIScreenViewModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: UIViewDirective, selector: "[edmSduiView]", inputs: { edmSduiView: "edmSduiView", disableClick: "disableClick" }, host: { listeners: { "click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIViewDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[edmSduiView]',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$2.Router }, { type: UIActionService }, { type: UIScreenViewModel, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { edmSduiView: [{
-                type: Input
-            }], disableClick: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class NavigationControlsComponent {
-    constructor(viewModel) {
-        this.viewModel = viewModel;
-    }
-    ngOnInit() {
-        // Monitorar o estado do botão de voltar para debugging
-        this.viewModel.canGoBack$.subscribe((canGoBack) => {
-            console.debug('[NavigationControls] Estado do botão de voltar:', canGoBack);
-        });
-    }
-    goBack() {
-        console.debug('[NavigationControls] Botão de voltar clicado');
-        this.viewModel.goBack();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavigationControlsComponent, deps: [{ token: UIScreenViewModel }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavigationControlsComponent, selector: "edm-sdui-navigation-controls", ngImport: i0, template: "<div class=\"navigation-controls\" *ngIf=\"false\">\n  <button\n    class=\"back-button\"\n    [disabled]=\"!(viewModel.canGoBack$ | async)\"\n    (click)=\"goBack()\"\n  >\n    <img src=\"assets/images/bt-back.svg\" width=\"100%\" height=\"40px\"/>\n  </button>\n</div>\n", styles: [":host{display:contents}.navigation-controls{display:flex;gap:8px}.navigation-controls button{display:flex;align-items:center;justify-content:center;padding:0;border-radius:4px;cursor:pointer;transition:all .2s ease}.navigation-controls button:hover:not(:disabled){background-color:#e8e8e8}.navigation-controls button:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavigationControlsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'edm-sdui-navigation-controls', standalone: false, template: "<div class=\"navigation-controls\" *ngIf=\"false\">\n  <button\n    class=\"back-button\"\n    [disabled]=\"!(viewModel.canGoBack$ | async)\"\n    (click)=\"goBack()\"\n  >\n    <img src=\"assets/images/bt-back.svg\" width=\"100%\" height=\"40px\"/>\n  </button>\n</div>\n", styles: [":host{display:contents}.navigation-controls{display:flex;gap:8px}.navigation-controls button{display:flex;align-items:center;justify-content:center;padding:0;border-radius:4px;cursor:pointer;transition:all .2s ease}.navigation-controls button:hover:not(:disabled){background-color:#e8e8e8}.navigation-controls button:disabled{opacity:.5;cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [{ type: UIScreenViewModel }] });
-
-class UIScreenComponent {
-    constructor(viewModel) {
-        this.viewModel = viewModel;
-        this.UIScreenIdentifier = UIScreenIdentifier;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIScreenComponent, deps: [{ token: UIScreenViewModel }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UIScreenComponent, selector: "edm-sdui-uiscreen", ngImport: i0, template: "<ng-container *ngIf=\"viewModel.isLoading$ | async; else loaded\">\n  <div class=\"loading-spinner\">\n    <div class=\"spinner\"></div>\n  </div>\n</ng-container>\n\n<ng-template #loaded>\n  <ng-container\n    *ngIf=\"viewModel.error$ | async as errorMessage; else renderScreen\"\n  >\n    <div class=\"error-label\">\n      Erro ao carregar a tela:\n      <pre>{{ errorMessage }}</pre>\n    </div>\n  </ng-container>\n\n  <ng-template #renderScreen>\n    <div\n      class=\"ui-screen\"\n      *ngIf=\"viewModel.uiScreen$ | async as uiScreen\"\n      [edmSduiView]=\"uiScreen\"\n    >\n      <edm-sdui-navigation-controls\n        [edmSduiView]=\"uiScreen\"\n      ></edm-sdui-navigation-controls>\n\n      <ng-container [ngSwitch]=\"uiScreen.identifier\">\n        <edm-sdui-single-column-layout\n          *ngSwitchCase=\"UIScreenIdentifier.SINGLE_COLUMN\"\n          [uiLayout]=\"uiScreen.content\"\n        ></edm-sdui-single-column-layout>\n\n        <edm-sdui-centered-content-layout\n          *ngSwitchCase=\"UIScreenIdentifier.CENTERED_CONTENT\"\n          [uiLayout]=\"uiScreen.content\"\n        ></edm-sdui-centered-content-layout>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [":host{display:contents}.ui-screen{width:100vw;min-height:100vh}.error-label{color:var(--input-error)}.loading-spinner{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;box-sizing:border-box;position:relative}.spinner{width:48px;height:48px;border:5px solid var(--actindcolor);border-top-color:#333;border-radius:50%;animation:spin 1s linear infinite;top:50%;left:50%}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SingleColumnLayoutComponent, selector: "edm-sdui-single-column-layout", inputs: ["uiLayout"] }, { kind: "component", type: CenteredContentLayoutComponent, selector: "edm-sdui-centered-content-layout", inputs: ["uiLayout"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }, { kind: "component", type: NavigationControlsComponent, selector: "edm-sdui-navigation-controls" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIScreenComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'edm-sdui-uiscreen', standalone: false, template: "<ng-container *ngIf=\"viewModel.isLoading$ | async; else loaded\">\n  <div class=\"loading-spinner\">\n    <div class=\"spinner\"></div>\n  </div>\n</ng-container>\n\n<ng-template #loaded>\n  <ng-container\n    *ngIf=\"viewModel.error$ | async as errorMessage; else renderScreen\"\n  >\n    <div class=\"error-label\">\n      Erro ao carregar a tela:\n      <pre>{{ errorMessage }}</pre>\n    </div>\n  </ng-container>\n\n  <ng-template #renderScreen>\n    <div\n      class=\"ui-screen\"\n      *ngIf=\"viewModel.uiScreen$ | async as uiScreen\"\n      [edmSduiView]=\"uiScreen\"\n    >\n      <edm-sdui-navigation-controls\n        [edmSduiView]=\"uiScreen\"\n      ></edm-sdui-navigation-controls>\n\n      <ng-container [ngSwitch]=\"uiScreen.identifier\">\n        <edm-sdui-single-column-layout\n          *ngSwitchCase=\"UIScreenIdentifier.SINGLE_COLUMN\"\n          [uiLayout]=\"uiScreen.content\"\n        ></edm-sdui-single-column-layout>\n\n        <edm-sdui-centered-content-layout\n          *ngSwitchCase=\"UIScreenIdentifier.CENTERED_CONTENT\"\n          [uiLayout]=\"uiScreen.content\"\n        ></edm-sdui-centered-content-layout>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [":host{display:contents}.ui-screen{width:100vw;min-height:100vh}.error-label{color:var(--input-error)}.loading-spinner{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;box-sizing:border-box;position:relative}.spinner{width:48px;height:48px;border:5px solid var(--actindcolor);border-top-color:#333;border-radius:50%;animation:spin 1s linear infinite;top:50%;left:50%}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [{ type: UIScreenViewModel }] });
-
-class RowComponent {
-    constructor(uiComponent) {
-        this.uiComponent = uiComponent;
-    }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RowComponent, deps: [{ token: 'uiComponent' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RowComponent, selector: "edm-sdui-row", ngImport: i0, template: "<div class=\"row-1\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <edm-sdui-component\n    *ngFor=\"let component of uiComponent.components\"\n    [uiComponent]=\"component\"\n  >\n  </edm-sdui-component>\n</div>\n", styles: [":host{display:contents}.row-1{display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RowComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'edm-sdui-row', standalone: false, template: "<div class=\"row-1\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <edm-sdui-component\n    *ngFor=\"let component of uiComponent.components\"\n    [uiComponent]=\"component\"\n  >\n  </edm-sdui-component>\n</div>\n", styles: [":host{display:contents}.row-1{display:flex;flex-direction:row;align-items:center}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['uiComponent']
-                }] }] });
-
-var row_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    RowComponent: RowComponent
-});
-
-class ColumnComponent {
-    constructor(uiComponent) {
-        this.uiComponent = uiComponent;
-    }
-    ngOnInit() {
-        // console.debug('column.uiComponent: ', this.uiComponent);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnComponent, deps: [{ token: 'uiComponent' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ColumnComponent, selector: "edm-sdui-column", ngImport: i0, template: "<div class=\"column\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <edm-sdui-component\n    *ngFor=\"let child of uiComponent.components\"\n    [uiComponent]=\"child\"\n  >\n  </edm-sdui-component>\n</div>\n", styles: [":host{display:contents}.column{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'edm-sdui-column', standalone: false, template: "<div class=\"column\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <edm-sdui-component\n    *ngFor=\"let child of uiComponent.components\"\n    [uiComponent]=\"child\"\n  >\n  </edm-sdui-component>\n</div>\n", styles: [":host{display:contents}.column{display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['uiComponent']
-                }] }] });
-
-var column_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    ColumnComponent: ColumnComponent
-});
-
-var UITextStyle;
-(function (UITextStyle) {
-    UITextStyle["LARGE_TITLE"] = "large_title";
-    UITextStyle["TITLE_1"] = "title_1";
-    UITextStyle["TITLE_2"] = "title_2";
-    UITextStyle["TITLE_3"] = "title_3";
-    UITextStyle["CALLOUT"] = "callout";
-    UITextStyle["HEADLINE"] = "headline";
-    UITextStyle["SUBHEADLINE"] = "subheadline";
-    UITextStyle["BODY"] = "body";
-    UITextStyle["CAPTION_1"] = "caption_1";
-    UITextStyle["CAPTION_2"] = "caption_2";
-    UITextStyle["FOOTNOTE"] = "footnote";
-})(UITextStyle || (UITextStyle = {}));
-
-class FontSizeMappingService {
-    constructor() {
-        this.baseFontSize = inject(SDUI_FONT_ADJUST, { optional: true }) ?? 0;
-        this.mapping = {
-            caption_2: `${13 + this.baseFontSize}px`,
-            caption_1: `${14 + this.baseFontSize}px`,
-            body: `${16 + this.baseFontSize}px`,
-            title_2: `${16 + this.baseFontSize}px`,
-            title_1: `${21 + this.baseFontSize}px`,
-            callout: `${19 + this.baseFontSize}px`,
-            headline: `${18 + this.baseFontSize}px`,
-            large_title: `${35 + this.baseFontSize}px`,
-            subheadline: `${16 + this.baseFontSize}px`,
-            footnote: `${12 + this.baseFontSize}px`,
-        };
-    }
-    getMapping() {
-        return this.mapping;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FontSizeMappingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FontSizeMappingService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FontSizeMappingService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-function getTextStyleMappingFontSize() {
-    return inject(FontSizeMappingService).getMapping();
-}
-const textStyleMappingFontWeight = {
-    [UITextStyle.BODY]: 'regular',
-    [UITextStyle.LARGE_TITLE]: 'bold',
-    [UITextStyle.TITLE_1]: 'bold',
-    [UITextStyle.TITLE_2]: 'bold',
-    [UITextStyle.TITLE_3]: 'bold',
-    [UITextStyle.CALLOUT]: 'regular',
-    [UITextStyle.HEADLINE]: 'bold',
-    [UITextStyle.SUBHEADLINE]: 'bold',
-    [UITextStyle.CAPTION_1]: 'regular',
-    [UITextStyle.CAPTION_2]: 'regular',
-    [UITextStyle.FOOTNOTE]: 'regular',
-};
-const textStyleMappingLineHeight = {
-    [UITextStyle.BODY]: '18px',
-    [UITextStyle.LARGE_TITLE]: '37px',
-    [UITextStyle.TITLE_1]: '23px',
-    [UITextStyle.TITLE_2]: '23px',
-    [UITextStyle.TITLE_3]: '23px',
-    [UITextStyle.CALLOUT]: '21px',
-    [UITextStyle.HEADLINE]: '20px',
-    [UITextStyle.SUBHEADLINE]: '18px',
-    [UITextStyle.CAPTION_1]: '16px',
-    [UITextStyle.CAPTION_2]: '15px',
-    [UITextStyle.FOOTNOTE]: '14px',
-};
-
-class LabelComponent {
-    constructor(uiComponent, renderer, fontSizeMappingService) {
-        this.uiComponent = uiComponent;
-        this.renderer = renderer;
-        this.fontSizeMappingService = fontSizeMappingService;
-    }
-    ngOnInit() {
-        // console.debug('label.uiComponent: ', this.uiComponent);
-    }
-    ngAfterViewInit() {
-        if (this.uiComponent.element) {
-            this.applyElement(this.uiComponent.element);
-        }
-    }
-    applyElement(element) {
-        if (element.textColor) {
-            const color = colorMapping[element.textColor];
-            this.renderer.setStyle(this.spanElementRef.nativeElement, 'color', color);
-        }
-        if (element.textStyle) {
-            const textStyleMappingFontSize = this.fontSizeMappingService.getMapping();
-            const fontSize = textStyleMappingFontSize[element.textStyle];
-            const fontWeight = textStyleMappingFontWeight[element.textStyle];
-            const lineHeight = textStyleMappingLineHeight[element.textStyle];
-            //TODO: Substituir por classe no futuro.
-            this.renderer.setStyle(this.spanElementRef.nativeElement, 'font-weight', fontWeight);
-            this.renderer.setStyle(this.spanElementRef.nativeElement, 'font-size', fontSize);
-            this.renderer.setStyle(this.spanElementRef.nativeElement, 'line-height', lineHeight);
-        }
-        const maxLines = element.maxLines ?? 1;
-        if (element.maxLines) {
-            this.renderer.setStyle(this.spanElementRef.nativeElement, 'display', '-webkit-box');
-            this.renderer.setStyle(this.spanElementRef.nativeElement, '-webkit-box-orient', 'vertical');
-            this.renderer.setStyle(this.spanElementRef.nativeElement, 'overflow', 'hidden');
-            this.renderer.setStyle(this.spanElementRef.nativeElement, 'text-overflow', 'ellipsis');
-            this.renderer.setStyle(this.spanElementRef.nativeElement, '-webkit-line-clamp', maxLines);
-        }
-        if (element.opacity) {
-            const opacity = element.opacity;
-            this.renderer.setStyle(this.spanElementRef.nativeElement, 'opacity', opacity);
-        }
-        if (element.alignment) {
-            const alignment = element.alignment.alignment;
-            switch (alignment) {
-                case UIAlignmentType.START: {
-                    this.renderer.setStyle(this.spanElementRef.nativeElement, 'text-align', 'left');
-                    break;
-                }
-                case UIAlignmentType.CENTER: {
-                    this.renderer.setStyle(this.spanElementRef.nativeElement, 'text-align', 'center');
-                    break;
-                }
-                case UIAlignmentType.END: {
-                    this.renderer.setStyle(this.spanElementRef.nativeElement, 'text-align', 'right');
-                    break;
-                }
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LabelComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }, { token: FontSizeMappingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LabelComponent, selector: "edm-sdui-label", viewQueries: [{ propertyName: "spanElementRef", first: true, predicate: ["spanElement"], descendants: true }], ngImport: i0, template: "<span #spanElement [edmSduiView]=\"uiComponent.element\" *ngIf=\"uiComponent\">{{\n  uiComponent.element?.label ?? \"\"\n}}</span>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LabelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'edm-sdui-label', standalone: false, template: "<span #spanElement [edmSduiView]=\"uiComponent.element\" *ngIf=\"uiComponent\">{{\n  uiComponent.element?.label ?? \"\"\n}}</span>\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['uiComponent']
-                }] }, { type: i0.Renderer2 }, { type: FontSizeMappingService }], propDecorators: { spanElementRef: [{
-                type: ViewChild,
-                args: ['spanElement']
-            }] } });
-
-var label_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    LabelComponent: LabelComponent
-});
-
-class SpaceComponent {
-    constructor(uiComponent) {
-        this.uiComponent = uiComponent;
-    }
-    ngOnInit() {
-        // console.debug('space.uiComponent: ', this.uiComponent);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpaceComponent, deps: [{ token: 'uiComponent' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpaceComponent, selector: "edm-sdui-space", ngImport: i0, template: "<div class=\"space\"></div>\n", styles: [":host{display:contents}.space{flex-grow:1;flex-shrink:1;min-height:1px;min-width:1px}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpaceComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'edm-sdui-space', standalone: false, template: "<div class=\"space\"></div>\n", styles: [":host{display:contents}.space{flex-grow:1;flex-shrink:1;min-height:1px;min-width:1px}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['uiComponent']
-                }] }] });
-
-var space_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    SpaceComponent: SpaceComponent
-});
-
-class ZStackComponent {
-    constructor(uiComponent) {
-        this.uiComponent = uiComponent;
-    }
-    ngOnInit() {
-        // console.debug('zstack.uiComponent: ', this.uiComponent);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ZStackComponent, deps: [{ token: 'uiComponent' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ZStackComponent, selector: "edm-sdui-zstack", ngImport: i0, template: "<div #zstackElementRef class=\"zstack\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <ng-container *ngFor=\"let child of uiComponent.components\">\n    <div class=\"zstack-child\">\n      <edm-sdui-component [uiComponent]=\"child\"></edm-sdui-component>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:contents}.zstack{display:grid}.zstack-child{grid-area:1/1;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ZStackComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'edm-sdui-zstack', standalone: false, template: "<div #zstackElementRef class=\"zstack\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <ng-container *ngFor=\"let child of uiComponent.components\">\n    <div class=\"zstack-child\">\n      <edm-sdui-component [uiComponent]=\"child\"></edm-sdui-component>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:contents}.zstack{display:grid}.zstack-child{grid-area:1/1;display:flex;align-items:center}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['uiComponent']
-                }] }] });
-
-var zstack_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    ZStackComponent: ZStackComponent
-});
-
-class RowDivisorComponent {
-    constructor(uiComponent) {
-        this.uiComponent = uiComponent;
-    }
-    ngOnInit() {
-        // console.debug('rowDivisor.uiComponent: ', this.uiComponent);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RowDivisorComponent, deps: [{ token: 'uiComponent' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RowDivisorComponent, selector: "edm-sdui-row-divisor", ngImport: i0, template: "<div\n  class=\"row-divisor\"\n  *ngIf=\"uiComponent\"\n  [edmSduiView]=\"uiComponent.element\"\n></div>\n", styles: [":host{display:contents}.row-divisor{height:1px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RowDivisorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'edm-sdui-row-divisor', standalone: false, template: "<div\n  class=\"row-divisor\"\n  *ngIf=\"uiComponent\"\n  [edmSduiView]=\"uiComponent.element\"\n></div>\n", styles: [":host{display:contents}.row-divisor{height:1px}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['uiComponent']
-                }] }] });
-
-var rowDivisor_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    RowDivisorComponent: RowDivisorComponent
-});
+class UIActionService {
+    constructor(router, actionHandlers, modalService) {
+        this.router = router;
+        this.actionHandlers = actionHandlers;
+        this.modalService = modalService;
+    }
+    execute(action) {
+        if (!action || !action.type)
+            return;
+        console.log(action);
+        switch (action.type) {
+            case UIActionType.INTERNAL_URL:
+                if (action.url && isSduiUrl(action.url)) {
+                    const resolved = resolveSduiUrl(action.url);
+                    this.router.navigate([], {
+                        queryParams: { [SDUI_URL_PARAM]: resolved },
+                        queryParamsHandling: 'merge',
+                    });
+                }
+                else {
+                    this.handleCustomNavigation(action.url || '');
+                }
+                break;
+            case UIActionType.RELOAD_INTERNAL_URL:
+                if (action.url) {
+                    console.debug('[UIActionService] Navigating to:', action.url);
+                    if (isSduiUrl(action.url)) {
+                        const resolved = resolveSduiUrl(action.url);
+                        this.router.navigate([], {
+                            queryParams: { [SDUI_URL_PARAM]: resolved },
+                            queryParamsHandling: 'merge',
+                        });
+                    }
+                    else {
+                        this.router.navigateByUrl(action.url, { replaceUrl: false });
+                    }
+                }
+                break;
+            case UIActionType.EXTERNAL_URL:
+                if (action.url) {
+                    window.open(action.url, '_blank');
+                }
+                break;
+            case UIActionType.WEBVIEW_URL:
+                if (action.url) {
+                    const modal = this.modalService.open(action.url);
+                }
+                break;
+            // Outros tipos de ação podem ser adicionados aqui
+        }
+    }
+    handleCustomNavigation(url) {
+        if (url.includes('timeline/')) {
+            const broken = url.split('timeline/')[1];
+            this.router.navigate(['comunidade', 'postagem', broken], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('live/')) {
+            const broken = url.split('live/')[1];
+            this.router.navigate(['comunidade', 'postagem', 'live', broken], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('lesson/')) {
+            const lessonId = url.split('lesson/')[1];
+            const productId = url.includes('product/') ? url.split('product/')[1].split('/')[0] : null;
+            if (productId) {
+                this.router.navigate(['produtos', productId, 'aula', lessonId], { queryParams: { from: 'sdui' } });
+                return true;
+            }
+        }
+        if (url.includes('product/')) {
+            const productId = url.split('product/')[1];
+            this.router.navigate(['produtos', productId], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('posts/')) {
+            const postId = url.split('posts/')[1];
+            this.router.navigate(['comunidade', 'postagem', postId], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('my-purchases')) {
+            this.router.navigate(['perfil', 'compras'], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('my-annotations')) {
+            this.router.navigate(['perfil', 'meu-caderno'], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('my-list')) {
+            this.router.navigate(['perfil', 'minha-lista'], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('my-certificates')) {
+            this.router.navigate(['perfil', 'certificados'], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('my-subscriptions')) {
+            this.router.navigate(['perfil', 'assinaturas'], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('edit-profile')) {
+            this.router.navigate(['perfil', 'editar'], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('ranking')) {
+            this.router.navigate(['perfil', 'ranking'], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('ranking/rules')) {
+            this.router.navigate(['perfil', 'ranking', 'regras'], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        if (url.includes('logout')) {
+            this.router.navigate(['logout'], { queryParams: { from: 'sdui' } });
+            return true;
+        }
+        return false; // nenhum dos casos especiais foi tratado
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionService, deps: [{ token: i1$3.Router }, { token: UIActionHandlersService }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIActionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$3.Router }, { type: UIActionHandlersService }, { type: ModalService }] });
 
 var UIAsset;
 (function (UIAsset) {
@@ -2285,6 +1364,1033 @@ const assetMapping = {
     [UIAsset.IC_SUPPORT_PROFILE]: 'assets/images/ic-support-profile.svg',
 };
 
+var UISpacingLevel;
+(function (UISpacingLevel) {
+    UISpacingLevel["S1"] = "s1";
+    UISpacingLevel["S2"] = "s2";
+    UISpacingLevel["S3"] = "s3";
+    UISpacingLevel["S4"] = "s4";
+    UISpacingLevel["S5"] = "s5";
+    UISpacingLevel["S6"] = "s6";
+})(UISpacingLevel || (UISpacingLevel = {}));
+
+const spaceMapping = {
+    [UISpacingLevel.S1]: '4px',
+    [UISpacingLevel.S2]: '8px',
+    [UISpacingLevel.S3]: '16px',
+    [UISpacingLevel.S4]: '24px',
+    [UISpacingLevel.S5]: '32px',
+    [UISpacingLevel.S6]: '40px',
+};
+
+var UIColor;
+(function (UIColor) {
+    UIColor["ALERT"] = "alert";
+    UIColor["BG_TAG"] = "bg_tag";
+    UIColor["ACTINDCOLOR"] = "actindcolor";
+    UIColor["TEXT_WEB"] = "text_web";
+    UIColor["TEXT_RANKING_HIGHLIGHT"] = "text_ranking_highlight";
+    UIColor["RANKING_HIGHLIGHT"] = "ranking_highlight";
+    UIColor["TEXT_RANKING_MAIN"] = "text_ranking_main";
+    UIColor["TEXT_RANKING_AUX"] = "text_ranking_aux";
+    UIColor["BT_SELECT_ACTIVITY"] = "bt_select_activity";
+    UIColor["FONT_BT"] = "font_bt";
+    UIColor["FONT_BT_PRICE"] = "font_bt_price";
+    UIColor["FONT_TAG"] = "font_tag";
+    UIColor["FONT_LIVE"] = "font_live";
+    UIColor["QUIZ_SELECT"] = "quiz_select";
+    UIColor["MAIN1"] = "main_1";
+    UIColor["AUX"] = "aux";
+    UIColor["VOTE_OFF"] = "vote_off";
+    UIColor["BG_VOTE"] = "bg_vote";
+    UIColor["VOTE_ON"] = "vote_on";
+    UIColor["STORY_OFF"] = "story_off";
+    UIColor["STORY_ON"] = "story_on";
+    UIColor["FONT_ACTIONS"] = "font_actions";
+    UIColor["FONT_SEARCH_OFF"] = "font_search_off";
+    UIColor["FONT_SEARCH_ON"] = "font_search_on";
+    UIColor["SLIDER_OFF"] = "slider_off";
+    UIColor["SLIDER_ON"] = "slider_on";
+    UIColor["PROGRESS_VIEW_OFF"] = "progress_view_off";
+    UIColor["PROGRESS_VIEW_RANKING_OFF"] = "progress_view_ranking_off";
+    UIColor["PROGRESS_STORY_OFF"] = "progress_story_off";
+    UIColor["PROGRESS_STORY_ON"] = "progress_story_on";
+    UIColor["PROGRESS_VIEW_ON"] = "progress_view_on";
+    UIColor["FONT_DISABLED"] = "font_disabled";
+    UIColor["BT_TAB_OFF"] = "bt_tab_off";
+    UIColor["BG"] = "bg";
+    UIColor["FONT_BT_PROGRAM"] = "font_bt_program";
+    UIColor["BG_RANKING"] = "bg_ranking";
+    UIColor["BG_STORY"] = "bg_story";
+    UIColor["BG_NEW_COMMENT"] = "bg_new_comment";
+    UIColor["SHADOW"] = "shadow";
+    UIColor["BG_SURVEY"] = "bg_survey";
+    UIColor["BG_LIVE"] = "bg_live";
+    UIColor["BG_VIEW_LIVE"] = "bg_view_live";
+    UIColor["MAIN2"] = "main_2";
+    UIColor["BT_TAG_ON"] = "bt_tag_on";
+    UIColor["TEXT_COLOR"] = "text_color";
+    UIColor["TEXT_STORY"] = "text_story";
+    UIColor["BT_REGISTER"] = "bt_register";
+    UIColor["BT_SHADOW_PROFILE"] = "bt_shadow_profile";
+    UIColor["FONT_REGISTER"] = "font_register";
+    UIColor["FONT_BT_MAIN"] = "font_bt_main";
+    UIColor["FONT_BT_QUIZ"] = "font_bt_quiz";
+    UIColor["FONT_BT_VIEW"] = "font_bt_view";
+    UIColor["FONT_BT_TAG_OFF"] = "font_bt_tag_off";
+    UIColor["FONT_BT_TAG_ON"] = "font_bt_tag_on";
+    UIColor["ATTENTION_COLOR"] = "attention_color";
+    UIColor["QUIZ_ERROR"] = "quiz_error";
+    UIColor["BG_NAV"] = "bg_nav";
+    UIColor["BT_OPEN_E_CLOSE"] = "bt_open_e_close";
+    UIColor["IC_TYPE_CLASS"] = "ic_type_class";
+    UIColor["IC_TYPE_LIVE"] = "ic_type_live";
+    UIColor["IC_TYPE_DISABLED"] = "ic_type_disabled";
+    UIColor["BT_DOWNLOAD"] = "bt_download";
+    UIColor["BT_DISABLED"] = "bt_disabled";
+    UIColor["BT_DISABLED_HOME"] = "bt_disabled_home";
+    UIColor["BT_CHECK_OFF"] = "bt_check_off";
+    UIColor["ACTIONS_OFF"] = "actions_off";
+    UIColor["BT_PROGRAM"] = "bt_program";
+    UIColor["PLAYER_CONTROLS"] = "player_controls";
+    UIColor["RATING_OFF"] = "rating_off";
+    UIColor["RATING_ON"] = "rating_on";
+    UIColor["ACTIONS_ON"] = "actions_on";
+    UIColor["TAG_VIP_HIGHLIGHT"] = "tag_vip_highlight";
+    UIColor["BT_CHECK_ON"] = "bt_check_on";
+    UIColor["BT_TAB_ON"] = "bt_tab_on";
+    UIColor["BT_VIEW_DEG1"] = "bt_view_deg1";
+    UIColor["LINE_DIVISER"] = "line_diviser";
+    UIColor["BG_SEC"] = "bg_sec";
+    UIColor["BG_SEARCH"] = "bg_search";
+    UIColor["FONT_PRICE"] = "font_price";
+    UIColor["BT_LIKE_ON"] = "bt_like_on";
+    UIColor["BG_CARD"] = "bg_card";
+    UIColor["BT_TAG_OFF"] = "bt_tag_off";
+    UIColor["BT_TAG_VIP"] = "bt_tag_vip";
+    UIColor["BT_PROFILE"] = "bt_profile";
+    UIColor["BT_PRICE_DEG1"] = "bt_price_deg1";
+    UIColor["BT_PRICE_DEG2"] = "bt_price_deg2";
+    UIColor["BT_LIKE_OFF"] = "bt_like_off";
+    UIColor["BT_LOCK"] = "bt_lock";
+    UIColor["BT_TRASH"] = "bt_trash";
+    UIColor["BG_COMMENT"] = "bg_comment";
+    UIColor["BG_POST"] = "bg_post";
+    UIColor["BT_HIGHLIGHT"] = "bt_highlight";
+    UIColor["ATTENTION_BADGE"] = "attention_badge";
+    UIColor["BT_BORDER_PROFILE"] = "bt_border_profile";
+    UIColor["BT_MAIN_DEG1"] = "bt_main_deg1";
+    UIColor["BT_MAIN_DEG2"] = "bt_main_deg2";
+    UIColor["BT_VIEW_DEG2"] = "bt_view_deg2";
+    UIColor["BG_MODULO"] = "bg_modulo";
+    UIColor["BG_MODULO_RANKING"] = "bg_modulo_ranking";
+    UIColor["QUIZ_RIGHT"] = "quiz_right";
+    UIColor["BT_BANNER_MAIN"] = "bt_banner_main";
+    UIColor["FONT_BT_BANNER"] = "font_bt_banner";
+    UIColor["BT_BANNER"] = "bt_banner";
+    UIColor["FONT_BT_BANNER_MAIN"] = "font_bt_banner_main";
+    UIColor["BORDER_BANNER"] = "border_banner";
+    UIColor["INPUT_ERROR"] = "input_error";
+    UIColor["BT_BACK"] = "bt_back";
+    UIColor["TEXT_COMMENT_SEC"] = "text_comment_sec";
+    UIColor["BT_IA_DEG1"] = "bt_ia_deg1";
+    UIColor["BT_IA_DEG2"] = "bt_ia_deg2";
+    UIColor["NORMAL"] = "normal";
+    UIColor["BG_CLIPS"] = "bg_clips";
+    UIColor["FONT_CLIPS"] = "font_clips";
+    UIColor["BG_MASK_0"] = "bg_mask_0";
+    UIColor["BG_MASK_80"] = "bg_mask_80";
+    UIColor["BG_MASK_20"] = "bg_mask_20";
+    UIColor["TEXT_CHALLENGE_AUX"] = "text_challenge_aux";
+    UIColor["TEXT_CHALLENGE_HIGHLIGHT"] = "text_challenge_highlight";
+    UIColor["BG_CHALLENGE"] = "bg_challenge";
+    UIColor["BG_MODULO_CHALLENGE"] = "bg_modulo_challenge";
+    UIColor["CHALLENGE_HIGHLIGHT"] = "challenge_highlight";
+    UIColor["BT_CHALLENGE"] = "bt_challenge";
+    UIColor["FONT_BT_CHALLENGE"] = "font_bt_challenge";
+    UIColor["CHALLENGE_OFF"] = "challenge_off";
+    UIColor["TEXT_CHALLENGE_DISABLED"] = "text_challenge_disabled";
+    UIColor["TEXT_CHALLENGE_MAIN"] = "text_challenge_main";
+    UIColor["CHALLENGE_WAY"] = "challenge_way";
+})(UIColor || (UIColor = {}));
+
+const colorMapping = {
+    [UIColor.ALERT]: 'var(--alert)',
+    [UIColor.BG_TAG]: 'var(--bg-tag)',
+    [UIColor.ACTINDCOLOR]: 'var(--actindcolor)',
+    [UIColor.TEXT_WEB]: 'var(--text-web)',
+    [UIColor.TEXT_RANKING_HIGHLIGHT]: 'var(--text-ranking-highlight)',
+    [UIColor.RANKING_HIGHLIGHT]: 'var(--ranking-highlight)',
+    [UIColor.TEXT_RANKING_MAIN]: 'var(--text-ranking-main)',
+    [UIColor.TEXT_RANKING_AUX]: 'var(--text-ranking-aux)',
+    [UIColor.BT_SELECT_ACTIVITY]: 'var(--bt-select-activity)',
+    [UIColor.FONT_BT]: 'var(--font-bt)',
+    [UIColor.FONT_BT_PRICE]: 'var(--font-bt-price)',
+    [UIColor.FONT_TAG]: 'var(--font-tag)',
+    [UIColor.FONT_LIVE]: 'var(--font-live)',
+    [UIColor.QUIZ_SELECT]: 'var(--quiz-select)',
+    [UIColor.MAIN1]: 'var(--main-1)',
+    [UIColor.AUX]: 'var(--aux)',
+    [UIColor.VOTE_OFF]: 'var(--vote-off)',
+    [UIColor.BG_VOTE]: 'var(--bg-vote)',
+    [UIColor.VOTE_ON]: 'var(--vote-on)',
+    [UIColor.STORY_OFF]: 'var(--story-off)',
+    [UIColor.STORY_ON]: 'var(--story-on)',
+    [UIColor.FONT_ACTIONS]: 'var(--font-actions)',
+    [UIColor.FONT_SEARCH_OFF]: 'var(--font-search-off)',
+    [UIColor.FONT_SEARCH_ON]: 'var(--font-search-on)',
+    [UIColor.SLIDER_OFF]: 'var(--slider-off)',
+    [UIColor.SLIDER_ON]: 'var(--slider-on)',
+    [UIColor.PROGRESS_VIEW_OFF]: 'var(--progress-view-off)',
+    [UIColor.PROGRESS_VIEW_RANKING_OFF]: 'var(--progress-view-ranking-off)',
+    [UIColor.PROGRESS_STORY_OFF]: 'var(--progress-story-off)',
+    [UIColor.PROGRESS_STORY_ON]: 'var(--progress-story-on)',
+    [UIColor.PROGRESS_VIEW_ON]: 'var(--progress-view-on)',
+    [UIColor.FONT_DISABLED]: 'var(--font-disabled)',
+    [UIColor.BT_TAB_OFF]: 'var(--bt-tab-off)',
+    [UIColor.BG]: 'var(--bg)',
+    [UIColor.FONT_BT_PROGRAM]: 'var(--font-bt-program)',
+    [UIColor.BG_RANKING]: 'var(--bg-ranking)',
+    [UIColor.BG_STORY]: 'var(--bg-story)',
+    [UIColor.BG_NEW_COMMENT]: 'var(--bg-new-comment)',
+    [UIColor.SHADOW]: 'var(--shadow)',
+    [UIColor.BG_SURVEY]: 'var(--bg-survey)',
+    [UIColor.BG_LIVE]: 'var(--bg-live)',
+    [UIColor.BG_VIEW_LIVE]: 'var(--bg-view-live)',
+    [UIColor.MAIN2]: 'var(--main-2)',
+    [UIColor.BT_TAG_ON]: 'var(--bt-tag-on)',
+    [UIColor.TEXT_COLOR]: 'var(--text-color)',
+    [UIColor.TEXT_STORY]: 'var(--text-story)',
+    [UIColor.BT_REGISTER]: 'var(--bt-register)',
+    [UIColor.BT_SHADOW_PROFILE]: 'var(--bt-shadow-profile)',
+    [UIColor.FONT_REGISTER]: 'var(--font-register)',
+    [UIColor.FONT_BT_MAIN]: 'var(--font-bt-main)',
+    [UIColor.FONT_BT_QUIZ]: 'var(--font-bt-quiz)',
+    [UIColor.FONT_BT_VIEW]: 'var(--font-bt-view)',
+    [UIColor.FONT_BT_TAG_OFF]: 'var(--font-bt-tag-off)',
+    [UIColor.FONT_BT_TAG_ON]: 'var(--font-bt-tag-on)',
+    [UIColor.ATTENTION_COLOR]: 'var(--attention-color)',
+    [UIColor.QUIZ_ERROR]: 'var(--quiz-error)',
+    [UIColor.BG_NAV]: 'var(--bg-nav)',
+    [UIColor.BT_OPEN_E_CLOSE]: 'var(--bt-open-e-close)',
+    [UIColor.IC_TYPE_CLASS]: 'var(--ic-type-class)',
+    [UIColor.IC_TYPE_LIVE]: 'var(--ic-type-live)',
+    [UIColor.IC_TYPE_DISABLED]: 'var(--ic-type-disabled)',
+    [UIColor.BT_DOWNLOAD]: 'var(--bt-download)',
+    [UIColor.BT_DISABLED]: 'var(--bt-disabled)',
+    [UIColor.BT_DISABLED_HOME]: 'var(--bt-disabled-home)',
+    [UIColor.BT_CHECK_OFF]: 'var(--bt-check-off)',
+    [UIColor.ACTIONS_OFF]: 'var(--actions-off)',
+    [UIColor.BT_PROGRAM]: 'var(--bt-program)',
+    [UIColor.PLAYER_CONTROLS]: 'var(--player-controls)',
+    [UIColor.RATING_OFF]: 'var(--rating-off)',
+    [UIColor.RATING_ON]: 'var(--rating-on)',
+    [UIColor.ACTIONS_ON]: 'var(--actions-on)',
+    [UIColor.TAG_VIP_HIGHLIGHT]: 'var(--tag-vip-highlight)',
+    [UIColor.BT_CHECK_ON]: 'var(--bt-check-on)',
+    [UIColor.BT_TAB_ON]: 'var(--bt-tab-on)',
+    [UIColor.BT_VIEW_DEG1]: 'var(--bt-view-deg1)',
+    [UIColor.LINE_DIVISER]: 'var(--line-diviser)',
+    [UIColor.BG_SEC]: 'var(--bg-sec)',
+    [UIColor.BG_SEARCH]: 'var(--bg-search)',
+    [UIColor.FONT_PRICE]: 'var(--font-price)',
+    [UIColor.BT_LIKE_ON]: 'var(--bt-like-on)',
+    [UIColor.BG_CARD]: 'var(--bg-card)',
+    [UIColor.BT_TAG_OFF]: 'var(--bt-tag-off)',
+    [UIColor.BT_TAG_VIP]: 'var(--bt-tag-vip)',
+    [UIColor.BT_PROFILE]: 'var(--bt-profile)',
+    [UIColor.BT_PRICE_DEG1]: 'var(--bt-price-deg1)',
+    [UIColor.BT_PRICE_DEG2]: 'var(--bt-price-deg2)',
+    [UIColor.BT_LIKE_OFF]: 'var(--bt-like-off)',
+    [UIColor.BT_LOCK]: 'var(--bt-lock)',
+    [UIColor.BT_TRASH]: 'var(--bt-trash)',
+    [UIColor.BG_COMMENT]: 'var(--bg-comment)',
+    [UIColor.BG_POST]: 'var(--bg-post)',
+    [UIColor.BT_HIGHLIGHT]: 'var(--bt-highlight)',
+    [UIColor.ATTENTION_BADGE]: 'var(--attention-badge)',
+    [UIColor.BT_BORDER_PROFILE]: 'var(--bt-border-profile)',
+    [UIColor.BT_MAIN_DEG1]: 'var(--bt-main-deg1)',
+    [UIColor.BT_MAIN_DEG2]: 'var(--bt-main-deg2)',
+    [UIColor.BT_VIEW_DEG2]: 'var(--bt-view-deg2)',
+    [UIColor.BG_MODULO]: 'var(--bg-modulo)',
+    [UIColor.BG_MODULO_RANKING]: 'var(--bg-modulo-ranking)',
+    [UIColor.QUIZ_RIGHT]: 'var(--quiz-right)',
+    [UIColor.BT_BANNER_MAIN]: 'var(--bt-banner-main)',
+    [UIColor.FONT_BT_BANNER]: 'var(--font-bt-banner)',
+    [UIColor.BT_BANNER]: 'var(--bt-banner)',
+    [UIColor.FONT_BT_BANNER_MAIN]: 'var(--font-bt-banner-main)',
+    [UIColor.BORDER_BANNER]: 'var(--border-banner)',
+    [UIColor.INPUT_ERROR]: 'var(--input-error)',
+    [UIColor.BT_BACK]: 'var(--bt-back)',
+    [UIColor.TEXT_COMMENT_SEC]: 'var(--text-comment-sec)',
+    [UIColor.BT_IA_DEG1]: 'var(--bt-ia-deg-1)',
+    [UIColor.BT_IA_DEG2]: 'var(--bt-ia-deg-2)',
+    [UIColor.NORMAL]: 'var(--normal)',
+    [UIColor.BG_CLIPS]: 'var(--bg-clips)',
+    [UIColor.FONT_CLIPS]: 'var(--font-clips)',
+    [UIColor.BG_MASK_0]: 'var(--bg-mask-0)',
+    [UIColor.BG_MASK_80]: 'var(--bg-mask-80)',
+    [UIColor.BG_MASK_20]: 'var(--bg-mask-20)',
+    [UIColor.TEXT_CHALLENGE_AUX]: 'var(--text-challenge-aux)',
+    [UIColor.TEXT_CHALLENGE_HIGHLIGHT]: 'var(--text-challenge-highlight)',
+    [UIColor.BG_CHALLENGE]: 'var(--bg-challenge)',
+    [UIColor.BG_MODULO_CHALLENGE]: 'var(--bg-modulo-challenge)',
+    [UIColor.CHALLENGE_HIGHLIGHT]: 'var(--challenge-highlight)',
+    [UIColor.BT_CHALLENGE]: 'var(--bt-challenge)',
+    [UIColor.FONT_BT_CHALLENGE]: 'var(--font-bt-challenge)',
+    [UIColor.CHALLENGE_OFF]: 'var(--challenge-off)',
+    [UIColor.TEXT_CHALLENGE_DISABLED]: 'var(--text-challenge-disabled)',
+    [UIColor.TEXT_CHALLENGE_MAIN]: 'var(--text-challenge-main)',
+    [UIColor.CHALLENGE_WAY]: 'var(--challenge-way)',
+};
+
+var UIPaddingLevel;
+(function (UIPaddingLevel) {
+    UIPaddingLevel["P1"] = "p1";
+    UIPaddingLevel["P2"] = "p2";
+    UIPaddingLevel["P3"] = "p3";
+    UIPaddingLevel["P4"] = "p4";
+    UIPaddingLevel["P5"] = "p5";
+    UIPaddingLevel["P6"] = "p6";
+    UIPaddingLevel["P7"] = "p7";
+    UIPaddingLevel["P8"] = "p8";
+})(UIPaddingLevel || (UIPaddingLevel = {}));
+
+const padMapping = {
+    [UIPaddingLevel.P1]: '4px',
+    [UIPaddingLevel.P2]: '8px',
+    [UIPaddingLevel.P3]: '16px',
+    [UIPaddingLevel.P4]: '24px',
+    [UIPaddingLevel.P5]: '32px',
+    [UIPaddingLevel.P6]: '40px',
+    [UIPaddingLevel.P7]: '48px',
+    [UIPaddingLevel.P8]: '56px',
+};
+
+var UIRadiusLevel;
+(function (UIRadiusLevel) {
+    UIRadiusLevel["R1"] = "r1";
+    UIRadiusLevel["R2"] = "r2";
+    UIRadiusLevel["R3"] = "r3";
+    UIRadiusLevel["R4"] = "r4";
+    UIRadiusLevel["R5"] = "r5";
+    UIRadiusLevel["R50"] = "r50";
+})(UIRadiusLevel || (UIRadiusLevel = {}));
+
+const radiusMapping = {
+    [UIRadiusLevel.R1]: '3px',
+    [UIRadiusLevel.R2]: '5px',
+    [UIRadiusLevel.R3]: '8px',
+    [UIRadiusLevel.R4]: '10px',
+    [UIRadiusLevel.R5]: '12px',
+    [UIRadiusLevel.R50]: '50%',
+};
+
+var UIAlignmentType;
+(function (UIAlignmentType) {
+    UIAlignmentType["START"] = "start";
+    UIAlignmentType["CENTER"] = "center";
+    UIAlignmentType["END"] = "end";
+})(UIAlignmentType || (UIAlignmentType = {}));
+
+const alignmentMapping = {
+    [UIAlignmentType.CENTER]: 'center',
+    [UIAlignmentType.END]: 'end',
+    [UIAlignmentType.START]: 'start',
+};
+
+var UIDimension;
+(function (UIDimension) {
+    UIDimension["P100"] = "p100";
+    UIDimension["P90"] = "p90";
+    UIDimension["P80"] = "p80";
+    UIDimension["P70"] = "p70";
+    UIDimension["P60"] = "p60";
+    UIDimension["P50"] = "p50";
+    UIDimension["P40"] = "p40";
+    UIDimension["P30"] = "p30";
+    UIDimension["P20"] = "p20";
+    UIDimension["P10"] = "p10";
+    UIDimension["D180"] = "d180";
+    UIDimension["D150"] = "d150";
+    UIDimension["D120"] = "d120";
+    UIDimension["D110"] = "d110";
+    UIDimension["D100"] = "d100";
+    UIDimension["D90"] = "d90";
+    UIDimension["D80"] = "d80";
+    UIDimension["D72"] = "d72";
+    UIDimension["D64"] = "d64";
+    UIDimension["D60"] = "d60";
+    UIDimension["D56"] = "d56";
+    UIDimension["D48"] = "d48";
+    UIDimension["D42"] = "d42";
+    UIDimension["D40"] = "d40";
+    UIDimension["D36"] = "d36";
+    UIDimension["D32"] = "d32";
+    UIDimension["D30"] = "d30";
+    UIDimension["D28"] = "d28";
+    UIDimension["D26"] = "d26";
+    UIDimension["D24"] = "d24";
+    UIDimension["D22"] = "d22";
+    UIDimension["D20"] = "d20";
+    UIDimension["D18"] = "d18";
+    UIDimension["D16"] = "d16";
+    UIDimension["D14"] = "d14";
+    UIDimension["D12"] = "d12";
+    UIDimension["D10"] = "d10";
+    UIDimension["D8"] = "d8";
+    UIDimension["D5"] = "d5";
+    UIDimension["D4"] = "d4";
+    UIDimension["D3"] = "d3";
+    UIDimension["D2"] = "d2";
+    UIDimension["D1"] = "d1";
+})(UIDimension || (UIDimension = {}));
+
+const dimensionMapping = {
+    // Percentage values
+    [UIDimension.P100]: '100%',
+    [UIDimension.P90]: '90%',
+    [UIDimension.P80]: '80%',
+    [UIDimension.P70]: '70%',
+    [UIDimension.P60]: '60%',
+    [UIDimension.P50]: '50%',
+    [UIDimension.P40]: '40%',
+    [UIDimension.P30]: '30%',
+    [UIDimension.P20]: '20%',
+    [UIDimension.P10]: '10%',
+    // Pixel values
+    [UIDimension.D180]: '180px',
+    [UIDimension.D150]: '150px',
+    [UIDimension.D120]: '120px',
+    [UIDimension.D110]: '110px',
+    [UIDimension.D100]: '100px',
+    [UIDimension.D90]: '90px',
+    [UIDimension.D80]: '80px',
+    [UIDimension.D72]: '72px',
+    [UIDimension.D64]: '64px',
+    [UIDimension.D60]: '60px',
+    [UIDimension.D56]: '56px',
+    [UIDimension.D48]: '48px',
+    [UIDimension.D42]: '42px',
+    [UIDimension.D40]: '40px',
+    [UIDimension.D36]: '36px',
+    [UIDimension.D32]: '32px',
+    [UIDimension.D30]: '30px',
+    [UIDimension.D28]: '28px',
+    [UIDimension.D26]: '26px',
+    [UIDimension.D24]: '24px',
+    [UIDimension.D22]: '22px',
+    [UIDimension.D20]: '20px',
+    [UIDimension.D18]: '18px',
+    [UIDimension.D16]: '16px',
+    [UIDimension.D14]: '14px',
+    [UIDimension.D12]: '12px',
+    [UIDimension.D10]: '10px',
+    [UIDimension.D8]: '8px',
+    [UIDimension.D5]: '5px',
+    [UIDimension.D4]: '4px',
+    [UIDimension.D3]: '3px',
+    [UIDimension.D2]: '2px',
+    [UIDimension.D1]: '1px',
+};
+
+var UIShadowOffset;
+(function (UIShadowOffset) {
+    UIShadowOffset["S1"] = "s1";
+})(UIShadowOffset || (UIShadowOffset = {}));
+
+var UIShadowBlurRadius;
+(function (UIShadowBlurRadius) {
+    UIShadowBlurRadius["B1"] = "b1";
+})(UIShadowBlurRadius || (UIShadowBlurRadius = {}));
+
+const shadowOffsetMapping = {
+    [UIShadowOffset.S1]: '1px',
+};
+const shadowBlurRadiusMapping = {
+    [UIShadowBlurRadius.B1]: '3px',
+};
+
+var UIJustify;
+(function (UIJustify) {
+    UIJustify["START"] = "start";
+    UIJustify["CENTER"] = "center";
+    UIJustify["END"] = "end";
+    UIJustify["BETWEEN"] = "space-between";
+    UIJustify["EVENLY"] = "space-evenly";
+})(UIJustify || (UIJustify = {}));
+
+const justifyMapping = {
+    [UIJustify.START]: 'flex-start',
+    [UIJustify.CENTER]: 'center',
+    [UIJustify.END]: 'flex-end',
+    [UIJustify.BETWEEN]: 'space-between',
+    [UIJustify.EVENLY]: 'space-evenly',
+};
+
+class UIViewDirective {
+    constructor(elementRef, renderer, router, actionService, screenViewModel) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.router = router;
+        this.actionService = actionService;
+        this.screenViewModel = screenViewModel;
+        this.disableClick = false;
+    }
+    ngOnChanges(changes) {
+        if (this.edmSduiView) {
+            this.applyStyles(this.edmSduiView);
+        }
+    }
+    applyStyles(uiView) {
+        if (uiView.padding) {
+            this.applyPadding(uiView.padding);
+        }
+        if (uiView.background) {
+            this.applyBackground(uiView.background);
+        }
+        if (uiView.action) {
+            this.applyAction(uiView.action);
+        }
+        if (uiView.alignment) {
+            this.applyAlignment(uiView.alignment);
+        }
+        if (uiView.shadow) {
+            this.applyShadow(uiView.shadow);
+        }
+        if (uiView.radius) {
+            this.applyRadius(uiView.radius);
+        }
+        if (uiView.spacing) {
+            this.applySpacing(uiView.spacing);
+        }
+        if (uiView.height) {
+            this.applyHeight(uiView.height);
+        }
+        if (uiView.width) {
+            this.applyWidth(uiView.width);
+        }
+        if (uiView.borderWidth) {
+            this.applyBorderWidth(uiView.borderWidth);
+        }
+        if (uiView.borderColor) {
+            this.applyBorderColor(uiView.borderColor);
+        }
+        if (uiView.justify) {
+            this.applyJustify(uiView.justify);
+        }
+    }
+    applyPadding(uiPadding) {
+        if (uiPadding.top) {
+            const padValue = padMapping[uiPadding.top];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-top', padValue);
+        }
+        if (uiPadding.left) {
+            const padValue = padMapping[uiPadding.left];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-left', padValue);
+        }
+        if (uiPadding.right) {
+            const padValue = padMapping[uiPadding.right];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-right', padValue);
+        }
+        if (uiPadding.bottom) {
+            const padValue = padMapping[uiPadding.bottom];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-bottom', padValue);
+        }
+    }
+    applyBackground(uiBackground) {
+        if (uiBackground.backgroundColor) {
+            const backgroundColor = colorMapping[uiBackground.backgroundColor];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', backgroundColor);
+        }
+        if (uiBackground.gradientColor1 && uiBackground.gradientColor2) {
+            const gradientColor1 = colorMapping[uiBackground.gradientColor1];
+            const gradientColor2 = colorMapping[uiBackground.gradientColor2];
+            const gradientStyles = `linear-gradient(45deg, ${gradientColor1}, ${gradientColor2})`;
+            console.log(gradientColor1, gradientColor2, gradientStyles);
+            this.renderer.setStyle(this.elementRef.nativeElement, 'background', gradientStyles);
+        }
+    }
+    applyAction(uiAction) {
+        if (this.disableClick) {
+            return;
+        }
+        this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
+    }
+    applyAlignment(uiAlignment) {
+        if (uiAlignment.alignment) {
+            // console.debug('alignment:', uiAlignment.alignment);
+            const alignment = alignmentMapping[uiAlignment.alignment];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'align-items', alignment);
+        }
+    }
+    applyShadow(uiShadow) {
+        if (uiShadow.color && uiShadow.offsetX && uiShadow.offsetY && uiShadow.blurRadius) {
+            const color = colorMapping[uiShadow.color];
+            const offsetX = shadowOffsetMapping[uiShadow.offsetX];
+            const offsetY = shadowOffsetMapping[uiShadow.offsetY];
+            const blurRadius = shadowBlurRadiusMapping[uiShadow.blurRadius];
+            const opacity = uiShadow.opacity !== undefined ? uiShadow.opacity : 1;
+            // Format: box-shadow: offsetX offsetY blurRadius color
+            const shadowValue = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
+            this.renderer.setStyle(this.elementRef.nativeElement, 'box-shadow', shadowValue);
+            if (opacity !== 1) {
+                this.renderer.setStyle(this.elementRef.nativeElement, 'opacity', opacity.toString());
+            }
+        }
+    }
+    applyRadius(uiRadius) {
+        if (uiRadius.topLeft) {
+            const radius = radiusMapping[uiRadius.topLeft];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'border-top-left-radius', radius);
+        }
+        if (uiRadius.topRight) {
+            const radius = radiusMapping[uiRadius.topRight];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'border-top-right-radius', radius);
+        }
+        if (uiRadius.bottomLeft) {
+            const radius = radiusMapping[uiRadius.bottomLeft];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'border-bottom-left-radius', radius);
+        }
+        if (uiRadius.bottomRight) {
+            const radius = radiusMapping[uiRadius.bottomRight];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'border-bottom-right-radius', radius);
+        }
+    }
+    applySpacing(uiSpacing) {
+        if (uiSpacing.spacing) {
+            const spacingValue = spaceMapping[uiSpacing.spacing];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'gap', spacingValue);
+        }
+    }
+    applyHeight(height) {
+        if (height) {
+            const heightValue = dimensionMapping[height];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'height', heightValue);
+        }
+    }
+    applyWidth(width) {
+        if (width) {
+            const widthValue = dimensionMapping[width];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'width', widthValue);
+        }
+    }
+    applyBorderWidth(borderWidth) {
+        if (borderWidth !== null && borderWidth !== undefined) {
+            this.renderer.setStyle(this.elementRef.nativeElement, 'border-width', `${borderWidth}px`);
+            // Ensure border style is set, otherwise border-width won't be visible
+            this.renderer.setStyle(this.elementRef.nativeElement, 'border-style', 'solid');
+        }
+    }
+    applyBorderColor(borderColor) {
+        if (borderColor) {
+            const color = colorMapping[borderColor];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'border-color', color);
+        }
+    }
+    applyJustify(justify) {
+        if (justify) {
+            const justifyValue = justifyMapping[justify];
+            this.renderer.setStyle(this.elementRef.nativeElement, 'justify-content', justifyValue);
+        }
+    }
+    onClick(event) {
+        if (this.disableClick)
+            return;
+        if (this.edmSduiView?.action) {
+            event.stopPropagation();
+            this.actionService.execute(this.edmSduiView.action);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIViewDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$3.Router }, { token: UIActionService }, { token: UIScreenViewModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: UIViewDirective, selector: "[edmSduiView]", inputs: { edmSduiView: "edmSduiView", disableClick: "disableClick" }, host: { listeners: { "click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[edmSduiView]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$3.Router }, { type: UIActionService }, { type: UIScreenViewModel, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { edmSduiView: [{
+                type: Input
+            }], disableClick: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class FabComponent {
+    constructor(actionService, render2) {
+        this.actionService = actionService;
+        this.render2 = render2;
+    }
+    ngAfterViewInit() {
+        if (this.element) {
+            this.applyElement(this.element);
+        }
+    }
+    applyElement(element) {
+        if (element.asset) {
+            const asset = assetMapping[element.asset];
+            this.render2.setAttribute(this.imgElement.nativeElement, 'src', asset);
+        }
+    }
+    onClick() {
+        if (this.element?.action) {
+            this.actionService.execute(this.element.action);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FabComponent, deps: [{ token: UIActionService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FabComponent, selector: "sdui-fab", inputs: { element: "element" }, viewQueries: [{ propertyName: "imgElement", first: true, predicate: ["imgElement"], descendants: true }], ngImport: i0, template: "<button\n  class=\"edm-fab\"\n  (click)=\"onClick()\"\n  [edmSduiView]=\"element\"\n>\n  <img\n    #imgElement\n    *ngIf=\"element?.asset\"\n    class=\"fab-icon\"\n  />\n\n</button>\n", styles: [":host{display:contents}.edm-fab{width:64px;height:64px;min-width:64px;min-height:64px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 6px 20px #00000040;transition:all .2s ease-in-out;z-index:9999999;background:none}.edm-fab:hover{transform:scale(1.05);box-shadow:0 8px 24px #00000059}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sdui-fab', standalone: false, template: "<button\n  class=\"edm-fab\"\n  (click)=\"onClick()\"\n  [edmSduiView]=\"element\"\n>\n  <img\n    #imgElement\n    *ngIf=\"element?.asset\"\n    class=\"fab-icon\"\n  />\n\n</button>\n", styles: [":host{display:contents}.edm-fab{width:64px;height:64px;min-width:64px;min-height:64px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 6px 20px #00000040;transition:all .2s ease-in-out;z-index:9999999;background:none}.edm-fab:hover{transform:scale(1.05);box-shadow:0 8px 24px #00000059}\n"] }]
+        }], ctorParameters: () => [{ type: UIActionService }, { type: i0.Renderer2 }], propDecorators: { element: [{
+                type: Input,
+                args: [{ required: true }]
+            }], imgElement: [{
+                type: ViewChild,
+                args: ['imgElement']
+            }] } });
+
+class SingleColumnLayoutComponent {
+    ngOnChanges(changes) {
+        if (changes['uiLayout']) {
+            console.debug('[SingleColumnLayout] Novo layout recebido:', changes['uiLayout'].currentValue);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SingleColumnLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SingleColumnLayoutComponent, selector: "edm-sdui-single-column-layout", inputs: { uiLayout: "uiLayout" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"single-column-layout\" *ngIf=\"!!uiLayout\">\n  <!-- <pre>{{ uiLayout | json }}</pre> -->\n\n  <edm-sdui-navigation [uiNavigation]=\"uiLayout.nav\"></edm-sdui-navigation>\n\n  <div class=\"header\" *ngIf=\"!!uiLayout?.header\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.header\"></edm-sdui-component>\n  </div>\n\n  <div class=\"scrollview\" *ngIf=\"!!uiLayout?.main\">\n    <div class=\"main\">\n      <edm-sdui-component\n        *ngIf=\"!!uiLayout?.main\"\n        [uiComponent]=\"uiLayout.main\"\n      ></edm-sdui-component>\n    </div>\n  </div>\n  <div class=\"fab\" *ngIf=\"!!uiLayout?.fab\">\n    <sdui-fab [element]=\"uiLayout.fab\"></sdui-fab>\n  </div>\n  <div class=\"footer\" *ngIf=\"!!uiLayout?.footer\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.footer\"></edm-sdui-component>\n  </div>\n</div>\n", styles: [":host{display:contents}.single-column-layout{display:flex;flex-direction:column;width:100%;min-height:100vh;position:relative}.single-column-layout .header{width:100%;z-index:100}.single-column-layout .scrollview .main{flex:1;display:flex;align-items:center;justify-content:center}.single-column-layout .footer{position:fixed;bottom:0;left:0;width:100%;z-index:100}.single-column-layout .fab{position:fixed;bottom:16px;right:16px;width:64px;z-index:10000}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UINavigationComponent, selector: "edm-sdui-navigation", inputs: ["uiNavigation"] }, { kind: "component", type: FabComponent, selector: "sdui-fab", inputs: ["element"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SingleColumnLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-single-column-layout', standalone: false, template: "<div class=\"single-column-layout\" *ngIf=\"!!uiLayout\">\n  <!-- <pre>{{ uiLayout | json }}</pre> -->\n\n  <edm-sdui-navigation [uiNavigation]=\"uiLayout.nav\"></edm-sdui-navigation>\n\n  <div class=\"header\" *ngIf=\"!!uiLayout?.header\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.header\"></edm-sdui-component>\n  </div>\n\n  <div class=\"scrollview\" *ngIf=\"!!uiLayout?.main\">\n    <div class=\"main\">\n      <edm-sdui-component\n        *ngIf=\"!!uiLayout?.main\"\n        [uiComponent]=\"uiLayout.main\"\n      ></edm-sdui-component>\n    </div>\n  </div>\n  <div class=\"fab\" *ngIf=\"!!uiLayout?.fab\">\n    <sdui-fab [element]=\"uiLayout.fab\"></sdui-fab>\n  </div>\n  <div class=\"footer\" *ngIf=\"!!uiLayout?.footer\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.footer\"></edm-sdui-component>\n  </div>\n</div>\n", styles: [":host{display:contents}.single-column-layout{display:flex;flex-direction:column;width:100%;min-height:100vh;position:relative}.single-column-layout .header{width:100%;z-index:100}.single-column-layout .scrollview .main{flex:1;display:flex;align-items:center;justify-content:center}.single-column-layout .footer{position:fixed;bottom:0;left:0;width:100%;z-index:100}.single-column-layout .fab{position:fixed;bottom:16px;right:16px;width:64px;z-index:10000}\n"] }]
+        }], propDecorators: { uiLayout: [{
+                type: Input
+            }] } });
+
+class CenteredContentLayoutComponent {
+    ngOnInit() {
+        console.log(this.uiLayout);
+    }
+    ngOnChanges(changes) {
+        if (changes['uiLayout']) {
+            console.debug('[CenteredContentLayoutComponent] Novo layout recebido:', changes['uiLayout'].currentValue);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CenteredContentLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CenteredContentLayoutComponent, selector: "edm-sdui-centered-content-layout", inputs: { uiLayout: "uiLayout" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"centered-content-layout\" *ngIf=\"!!uiLayout\">\n  <!-- <pre>{{ uiLayout | json }}</pre> -->\n\n  <edm-sdui-navigation [uiNavigation]=\"uiLayout.nav\"></edm-sdui-navigation>\n\n  <div class=\"header\" *ngIf=\"uiLayout?.header\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.header\"></edm-sdui-component>\n  </div>\n\n  <div class=\"centered\">\n    <edm-sdui-component\n      *ngIf=\"!!uiLayout?.centered\"\n      [uiComponent]=\"uiLayout.centered\"\n    ></edm-sdui-component>\n  </div>\n\n  <div class=\"footer\" *ngIf=\"!!uiLayout?.footer\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.footer\"></edm-sdui-component>\n  </div>\n</div>\n", styles: [":host{display:contents}.centered-content-layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;position:relative}.centered-content-layout .header{width:100%;z-index:100}.centered-content-layout .centered{flex:1;display:flex;align-items:center;justify-content:center}.centered-content-layout .footer{position:fixed;bottom:0;left:0;width:100%;z-index:100}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UINavigationComponent, selector: "edm-sdui-navigation", inputs: ["uiNavigation"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CenteredContentLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-centered-content-layout', standalone: false, template: "<div class=\"centered-content-layout\" *ngIf=\"!!uiLayout\">\n  <!-- <pre>{{ uiLayout | json }}</pre> -->\n\n  <edm-sdui-navigation [uiNavigation]=\"uiLayout.nav\"></edm-sdui-navigation>\n\n  <div class=\"header\" *ngIf=\"uiLayout?.header\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.header\"></edm-sdui-component>\n  </div>\n\n  <div class=\"centered\">\n    <edm-sdui-component\n      *ngIf=\"!!uiLayout?.centered\"\n      [uiComponent]=\"uiLayout.centered\"\n    ></edm-sdui-component>\n  </div>\n\n  <div class=\"footer\" *ngIf=\"!!uiLayout?.footer\">\n    <edm-sdui-component [uiComponent]=\"uiLayout.footer\"></edm-sdui-component>\n  </div>\n</div>\n", styles: [":host{display:contents}.centered-content-layout{display:flex;flex-direction:column;width:100vw;min-height:100vh;position:relative}.centered-content-layout .header{width:100%;z-index:100}.centered-content-layout .centered{flex:1;display:flex;align-items:center;justify-content:center}.centered-content-layout .footer{position:fixed;bottom:0;left:0;width:100%;z-index:100}\n"] }]
+        }], propDecorators: { uiLayout: [{
+                type: Input
+            }] } });
+
+class NavigationControlsComponent {
+    constructor(viewModel) {
+        this.viewModel = viewModel;
+    }
+    ngOnInit() {
+        // Monitorar o estado do botão de voltar para debugging
+        this.viewModel.canGoBack$.subscribe((canGoBack) => {
+            console.debug('[NavigationControls] Estado do botão de voltar:', canGoBack);
+        });
+    }
+    goBack() {
+        console.debug('[NavigationControls] Botão de voltar clicado');
+        this.viewModel.goBack();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavigationControlsComponent, deps: [{ token: UIScreenViewModel }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavigationControlsComponent, selector: "edm-sdui-navigation-controls", ngImport: i0, template: "<div class=\"navigation-controls\" *ngIf=\"false\">\n  <button\n    class=\"back-button\"\n    [disabled]=\"!(viewModel.canGoBack$ | async)\"\n    (click)=\"goBack()\"\n  >\n    <img src=\"assets/images/bt-back.svg\" width=\"100%\" height=\"40px\"/>\n  </button>\n</div>\n", styles: [":host{display:contents}.navigation-controls{display:flex;gap:8px}.navigation-controls button{display:flex;align-items:center;justify-content:center;padding:0;border-radius:4px;cursor:pointer;transition:all .2s ease}.navigation-controls button:hover:not(:disabled){background-color:#e8e8e8}.navigation-controls button:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavigationControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-navigation-controls', standalone: false, template: "<div class=\"navigation-controls\" *ngIf=\"false\">\n  <button\n    class=\"back-button\"\n    [disabled]=\"!(viewModel.canGoBack$ | async)\"\n    (click)=\"goBack()\"\n  >\n    <img src=\"assets/images/bt-back.svg\" width=\"100%\" height=\"40px\"/>\n  </button>\n</div>\n", styles: [":host{display:contents}.navigation-controls{display:flex;gap:8px}.navigation-controls button{display:flex;align-items:center;justify-content:center;padding:0;border-radius:4px;cursor:pointer;transition:all .2s ease}.navigation-controls button:hover:not(:disabled){background-color:#e8e8e8}.navigation-controls button:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: UIScreenViewModel }] });
+
+class UIScreenComponent {
+    constructor(viewModel) {
+        this.viewModel = viewModel;
+        this.UIScreenIdentifier = UIScreenIdentifier;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIScreenComponent, deps: [{ token: UIScreenViewModel }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UIScreenComponent, selector: "edm-sdui-uiscreen", ngImport: i0, template: "<ng-container *ngIf=\"viewModel.isLoading$ | async; else loaded\">\n  <div class=\"loading-spinner\">\n    <div class=\"spinner\"></div>\n  </div>\n</ng-container>\n\n<ng-template #loaded>\n  <ng-container\n    *ngIf=\"viewModel.error$ | async as errorMessage; else renderScreen\"\n  >\n    <div class=\"error-label\">\n      Erro ao carregar a tela:\n      <pre>{{ errorMessage }}</pre>\n    </div>\n  </ng-container>\n\n  <ng-template #renderScreen>\n    <div\n      class=\"ui-screen\"\n      *ngIf=\"viewModel.uiScreen$ | async as uiScreen\"\n      [edmSduiView]=\"uiScreen\"\n    >\n      <edm-sdui-navigation-controls\n        [edmSduiView]=\"uiScreen\"\n      ></edm-sdui-navigation-controls>\n\n      <ng-container [ngSwitch]=\"uiScreen.identifier\">\n        <edm-sdui-single-column-layout\n          *ngSwitchCase=\"UIScreenIdentifier.SINGLE_COLUMN\"\n          [uiLayout]=\"uiScreen.content\"\n        ></edm-sdui-single-column-layout>\n\n        <edm-sdui-centered-content-layout\n          *ngSwitchCase=\"UIScreenIdentifier.CENTERED_CONTENT\"\n          [uiLayout]=\"uiScreen.content\"\n        ></edm-sdui-centered-content-layout>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [":host{display:contents}.ui-screen{width:100vw;min-height:100vh}.error-label{color:var(--input-error)}.loading-spinner{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;box-sizing:border-box;position:relative}.spinner{width:48px;height:48px;border:5px solid var(--actindcolor);border-top-color:#333;border-radius:50%;animation:spin 1s linear infinite;top:50%;left:50%}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SingleColumnLayoutComponent, selector: "edm-sdui-single-column-layout", inputs: ["uiLayout"] }, { kind: "component", type: CenteredContentLayoutComponent, selector: "edm-sdui-centered-content-layout", inputs: ["uiLayout"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }, { kind: "component", type: NavigationControlsComponent, selector: "edm-sdui-navigation-controls" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UIScreenComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-uiscreen', standalone: false, template: "<ng-container *ngIf=\"viewModel.isLoading$ | async; else loaded\">\n  <div class=\"loading-spinner\">\n    <div class=\"spinner\"></div>\n  </div>\n</ng-container>\n\n<ng-template #loaded>\n  <ng-container\n    *ngIf=\"viewModel.error$ | async as errorMessage; else renderScreen\"\n  >\n    <div class=\"error-label\">\n      Erro ao carregar a tela:\n      <pre>{{ errorMessage }}</pre>\n    </div>\n  </ng-container>\n\n  <ng-template #renderScreen>\n    <div\n      class=\"ui-screen\"\n      *ngIf=\"viewModel.uiScreen$ | async as uiScreen\"\n      [edmSduiView]=\"uiScreen\"\n    >\n      <edm-sdui-navigation-controls\n        [edmSduiView]=\"uiScreen\"\n      ></edm-sdui-navigation-controls>\n\n      <ng-container [ngSwitch]=\"uiScreen.identifier\">\n        <edm-sdui-single-column-layout\n          *ngSwitchCase=\"UIScreenIdentifier.SINGLE_COLUMN\"\n          [uiLayout]=\"uiScreen.content\"\n        ></edm-sdui-single-column-layout>\n\n        <edm-sdui-centered-content-layout\n          *ngSwitchCase=\"UIScreenIdentifier.CENTERED_CONTENT\"\n          [uiLayout]=\"uiScreen.content\"\n        ></edm-sdui-centered-content-layout>\n      </ng-container>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [":host{display:contents}.ui-screen{width:100vw;min-height:100vh}.error-label{color:var(--input-error)}.loading-spinner{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;box-sizing:border-box;position:relative}.spinner{width:48px;height:48px;border:5px solid var(--actindcolor);border-top-color:#333;border-radius:50%;animation:spin 1s linear infinite;top:50%;left:50%}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [{ type: UIScreenViewModel }] });
+
+class RowComponent {
+    constructor(uiComponent) {
+        this.uiComponent = uiComponent;
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RowComponent, deps: [{ token: 'uiComponent' }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RowComponent, selector: "edm-sdui-row", ngImport: i0, template: "<div class=\"row-1\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <edm-sdui-component\n    *ngFor=\"let component of uiComponent.components\"\n    [uiComponent]=\"component\"\n  >\n  </edm-sdui-component>\n</div>\n", styles: [":host{display:contents}.row-1{display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-row', standalone: false, template: "<div class=\"row-1\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <edm-sdui-component\n    *ngFor=\"let component of uiComponent.components\"\n    [uiComponent]=\"component\"\n  >\n  </edm-sdui-component>\n</div>\n", styles: [":host{display:contents}.row-1{display:flex;flex-direction:row;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['uiComponent']
+                }] }] });
+
+var row_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    RowComponent: RowComponent
+});
+
+class ColumnComponent {
+    constructor(uiComponent) {
+        this.uiComponent = uiComponent;
+    }
+    ngOnInit() {
+        // console.debug('column.uiComponent: ', this.uiComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnComponent, deps: [{ token: 'uiComponent' }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ColumnComponent, selector: "edm-sdui-column", ngImport: i0, template: "<div class=\"column\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <edm-sdui-component\n    *ngFor=\"let child of uiComponent.components\"\n    [uiComponent]=\"child\"\n  >\n  </edm-sdui-component>\n</div>\n", styles: [":host{display:contents}.column{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-column', standalone: false, template: "<div class=\"column\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <edm-sdui-component\n    *ngFor=\"let child of uiComponent.components\"\n    [uiComponent]=\"child\"\n  >\n  </edm-sdui-component>\n</div>\n", styles: [":host{display:contents}.column{display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['uiComponent']
+                }] }] });
+
+var column_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ColumnComponent: ColumnComponent
+});
+
+var UITextStyle;
+(function (UITextStyle) {
+    UITextStyle["LARGE_TITLE"] = "large_title";
+    UITextStyle["TITLE_1"] = "title_1";
+    UITextStyle["TITLE_2"] = "title_2";
+    UITextStyle["TITLE_3"] = "title_3";
+    UITextStyle["CALLOUT"] = "callout";
+    UITextStyle["HEADLINE"] = "headline";
+    UITextStyle["SUBHEADLINE"] = "subheadline";
+    UITextStyle["BODY"] = "body";
+    UITextStyle["CAPTION_1"] = "caption_1";
+    UITextStyle["CAPTION_2"] = "caption_2";
+    UITextStyle["FOOTNOTE"] = "footnote";
+})(UITextStyle || (UITextStyle = {}));
+
+class FontSizeMappingService {
+    constructor() {
+        this.baseFontSize = inject(SDUI_FONT_ADJUST, { optional: true }) ?? 0;
+        this.mapping = {
+            caption_2: `${13 + this.baseFontSize}px`,
+            caption_1: `${14 + this.baseFontSize}px`,
+            body: `${16 + this.baseFontSize}px`,
+            title_2: `${16 + this.baseFontSize}px`,
+            title_1: `${21 + this.baseFontSize}px`,
+            callout: `${19 + this.baseFontSize}px`,
+            headline: `${18 + this.baseFontSize}px`,
+            large_title: `${35 + this.baseFontSize}px`,
+            subheadline: `${16 + this.baseFontSize}px`,
+            footnote: `${12 + this.baseFontSize}px`,
+        };
+    }
+    getMapping() {
+        return this.mapping;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FontSizeMappingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FontSizeMappingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FontSizeMappingService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+function getTextStyleMappingFontSize() {
+    return inject(FontSizeMappingService).getMapping();
+}
+const textStyleMappingFontWeight = {
+    [UITextStyle.BODY]: 'regular',
+    [UITextStyle.LARGE_TITLE]: 'bold',
+    [UITextStyle.TITLE_1]: 'bold',
+    [UITextStyle.TITLE_2]: 'bold',
+    [UITextStyle.TITLE_3]: 'bold',
+    [UITextStyle.CALLOUT]: 'regular',
+    [UITextStyle.HEADLINE]: 'bold',
+    [UITextStyle.SUBHEADLINE]: 'bold',
+    [UITextStyle.CAPTION_1]: 'regular',
+    [UITextStyle.CAPTION_2]: 'regular',
+    [UITextStyle.FOOTNOTE]: 'regular',
+};
+const textStyleMappingLineHeight = {
+    [UITextStyle.BODY]: '18px',
+    [UITextStyle.LARGE_TITLE]: '37px',
+    [UITextStyle.TITLE_1]: '23px',
+    [UITextStyle.TITLE_2]: '23px',
+    [UITextStyle.TITLE_3]: '23px',
+    [UITextStyle.CALLOUT]: '21px',
+    [UITextStyle.HEADLINE]: '20px',
+    [UITextStyle.SUBHEADLINE]: '18px',
+    [UITextStyle.CAPTION_1]: '16px',
+    [UITextStyle.CAPTION_2]: '15px',
+    [UITextStyle.FOOTNOTE]: '14px',
+};
+
+class LabelComponent {
+    constructor(uiComponent, renderer, fontSizeMappingService) {
+        this.uiComponent = uiComponent;
+        this.renderer = renderer;
+        this.fontSizeMappingService = fontSizeMappingService;
+    }
+    ngOnInit() {
+        // console.debug('label.uiComponent: ', this.uiComponent);
+    }
+    ngAfterViewInit() {
+        if (this.uiComponent.element) {
+            this.applyElement(this.uiComponent.element);
+        }
+    }
+    applyElement(element) {
+        if (element.textColor) {
+            const color = colorMapping[element.textColor];
+            this.renderer.setStyle(this.spanElementRef.nativeElement, 'color', color);
+        }
+        if (element.textStyle) {
+            const textStyleMappingFontSize = this.fontSizeMappingService.getMapping();
+            const fontSize = textStyleMappingFontSize[element.textStyle];
+            const fontWeight = textStyleMappingFontWeight[element.textStyle];
+            const lineHeight = textStyleMappingLineHeight[element.textStyle];
+            //TODO: Substituir por classe no futuro.
+            this.renderer.setStyle(this.spanElementRef.nativeElement, 'font-weight', fontWeight);
+            this.renderer.setStyle(this.spanElementRef.nativeElement, 'font-size', fontSize);
+            this.renderer.setStyle(this.spanElementRef.nativeElement, 'line-height', lineHeight);
+        }
+        const maxLines = element.maxLines ?? 1;
+        if (element.maxLines) {
+            this.renderer.setStyle(this.spanElementRef.nativeElement, 'display', '-webkit-box');
+            this.renderer.setStyle(this.spanElementRef.nativeElement, '-webkit-box-orient', 'vertical');
+            this.renderer.setStyle(this.spanElementRef.nativeElement, 'overflow', 'hidden');
+            this.renderer.setStyle(this.spanElementRef.nativeElement, 'text-overflow', 'ellipsis');
+            this.renderer.setStyle(this.spanElementRef.nativeElement, '-webkit-line-clamp', maxLines);
+        }
+        if (element.opacity) {
+            const opacity = element.opacity;
+            this.renderer.setStyle(this.spanElementRef.nativeElement, 'opacity', opacity);
+        }
+        if (element.alignment) {
+            const alignment = element.alignment.alignment;
+            switch (alignment) {
+                case UIAlignmentType.START: {
+                    this.renderer.setStyle(this.spanElementRef.nativeElement, 'text-align', 'left');
+                    break;
+                }
+                case UIAlignmentType.CENTER: {
+                    this.renderer.setStyle(this.spanElementRef.nativeElement, 'text-align', 'center');
+                    break;
+                }
+                case UIAlignmentType.END: {
+                    this.renderer.setStyle(this.spanElementRef.nativeElement, 'text-align', 'right');
+                    break;
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LabelComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }, { token: FontSizeMappingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LabelComponent, selector: "edm-sdui-label", viewQueries: [{ propertyName: "spanElementRef", first: true, predicate: ["spanElement"], descendants: true }], ngImport: i0, template: "<span #spanElement [edmSduiView]=\"uiComponent.element\" *ngIf=\"uiComponent\">{{\n  uiComponent.element?.label ?? \"\"\n}}</span>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-label', standalone: false, template: "<span #spanElement [edmSduiView]=\"uiComponent.element\" *ngIf=\"uiComponent\">{{\n  uiComponent.element?.label ?? \"\"\n}}</span>\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['uiComponent']
+                }] }, { type: i0.Renderer2 }, { type: FontSizeMappingService }], propDecorators: { spanElementRef: [{
+                type: ViewChild,
+                args: ['spanElement']
+            }] } });
+
+var label_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LabelComponent: LabelComponent
+});
+
+class SpaceComponent {
+    constructor(uiComponent) {
+        this.uiComponent = uiComponent;
+    }
+    ngOnInit() {
+        // console.debug('space.uiComponent: ', this.uiComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpaceComponent, deps: [{ token: 'uiComponent' }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpaceComponent, selector: "edm-sdui-space", ngImport: i0, template: "<div class=\"space\"></div>\n", styles: [":host{display:contents}.space{flex-grow:1;flex-shrink:1;min-height:1px;min-width:1px}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpaceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-space', standalone: false, template: "<div class=\"space\"></div>\n", styles: [":host{display:contents}.space{flex-grow:1;flex-shrink:1;min-height:1px;min-width:1px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['uiComponent']
+                }] }] });
+
+var space_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SpaceComponent: SpaceComponent
+});
+
+class ZStackComponent {
+    constructor(uiComponent) {
+        this.uiComponent = uiComponent;
+    }
+    ngOnInit() {
+        // console.debug('zstack.uiComponent: ', this.uiComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ZStackComponent, deps: [{ token: 'uiComponent' }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ZStackComponent, selector: "edm-sdui-zstack", ngImport: i0, template: "<div #zstackElementRef class=\"zstack\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <ng-container *ngFor=\"let child of uiComponent.components\">\n    <div class=\"zstack-child\">\n      <edm-sdui-component [uiComponent]=\"child\"></edm-sdui-component>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:contents}.zstack{display:grid}.zstack-child{grid-area:1/1;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UIComponentComponent, selector: "edm-sdui-component", inputs: ["uiComponent", "translateLabel"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ZStackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-zstack', standalone: false, template: "<div #zstackElementRef class=\"zstack\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <ng-container *ngFor=\"let child of uiComponent.components\">\n    <div class=\"zstack-child\">\n      <edm-sdui-component [uiComponent]=\"child\"></edm-sdui-component>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:contents}.zstack{display:grid}.zstack-child{grid-area:1/1;display:flex;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['uiComponent']
+                }] }] });
+
+var zstack_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ZStackComponent: ZStackComponent
+});
+
+class RowDivisorComponent {
+    constructor(uiComponent) {
+        this.uiComponent = uiComponent;
+    }
+    ngOnInit() {
+        // console.debug('rowDivisor.uiComponent: ', this.uiComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RowDivisorComponent, deps: [{ token: 'uiComponent' }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RowDivisorComponent, selector: "edm-sdui-row-divisor", ngImport: i0, template: "<div\n  class=\"row-divisor\"\n  *ngIf=\"uiComponent\"\n  [edmSduiView]=\"uiComponent.element\"\n></div>\n", styles: [":host{display:contents}.row-divisor{height:1px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RowDivisorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-row-divisor', standalone: false, template: "<div\n  class=\"row-divisor\"\n  *ngIf=\"uiComponent\"\n  [edmSduiView]=\"uiComponent.element\"\n></div>\n", styles: [":host{display:contents}.row-divisor{height:1px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['uiComponent']
+                }] }] });
+
+var rowDivisor_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    RowDivisorComponent: RowDivisorComponent
+});
+
 class ButtonComponent {
     constructor(uiComponent, renderer, fontSizeMappingService) {
         this.uiComponent = uiComponent;
@@ -2466,13 +2572,13 @@ class SduiComponent {
     validateParam(paramValue) {
         return !!paramValue && paramValue.trim() !== '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SduiComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: UIScreenViewModel }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SduiComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: UIScreenViewModel }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SduiComponent, selector: "edm-sdui", inputs: { initialUrl: "initialUrl" }, ngImport: i0, template: "<div class=\"sdui-container\">\n  <edm-sdui-uiscreen *ngIf=\"currentSduiUrl\"></edm-sdui-uiscreen>\n</div>\n", styles: [":host{display:contents}.sdui-container{display:flex;flex-direction:column;min-height:100vh;width:100vw;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UIScreenComponent, selector: "edm-sdui-uiscreen" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SduiComponent, decorators: [{
             type: Component,
             args: [{ selector: 'edm-sdui', standalone: false, template: "<div class=\"sdui-container\">\n  <edm-sdui-uiscreen *ngIf=\"currentSduiUrl\"></edm-sdui-uiscreen>\n</div>\n", styles: [":host{display:contents}.sdui-container{display:flex;flex-direction:column;min-height:100vh;width:100vw;position:relative}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: UIScreenViewModel }], propDecorators: { initialUrl: [{
+        }], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: UIScreenViewModel }], propDecorators: { initialUrl: [{
                 type: Input
             }] } });
 
@@ -2488,7 +2594,7 @@ class SduiRoutingModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SduiRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SduiRoutingModule, imports: [i1$2.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SduiRoutingModule, imports: [i1$3.RouterModule], exports: [RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SduiRoutingModule, imports: [RouterModule.forChild(defaultRoutes), RouterModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SduiRoutingModule, decorators: [{
@@ -2765,7 +2871,7 @@ class SearchBarDismissComponent {
             this.router.navigate(['/']); // fallback
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBarDismissComponent, deps: [{ token: UIActionService }, { token: 'uiComponent' }, { token: i0.Renderer2 }, { token: i1$2.Router }, { token: FontSizeMappingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBarDismissComponent, deps: [{ token: UIActionService }, { token: 'uiComponent' }, { token: i0.Renderer2 }, { token: i1$3.Router }, { token: FontSizeMappingService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchBarDismissComponent, selector: "edm-sdui-search-bar-dismiss", viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"flex w-100\" (click)=\"clearInput()\">\n  <img\n  class=\"search-bar-icon\"\n  src=\"assets/images/ic-search.svg\"\n>\n<input\n  #inputElement\n  class=\"search-bar\"\n  [edmSduiView]=\"uiComponent.element\"\n  [disableClick]=\"true\"\n  *ngIf=\"uiComponent\"\n/>\n<img\n  class=\"search-bar-close-icon cursor-pointer\"\n  src=\"assets/images/bt-close-comment.svg\"\n>\n</div>\n\n", styles: [".search-bar{width:100%;line-height:1.5rem;background-color:var(--bg-search);cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBarDismissComponent, decorators: [{
@@ -2774,7 +2880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: UIActionService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['uiComponent']
-                }] }, { type: i0.Renderer2 }, { type: i1$2.Router }, { type: FontSizeMappingService }], propDecorators: { inputElementRef: [{
+                }] }, { type: i0.Renderer2 }, { type: i1$3.Router }, { type: FontSizeMappingService }], propDecorators: { inputElementRef: [{
                 type: ViewChild,
                 args: ['inputElement']
             }] } });
@@ -3209,6 +3315,7 @@ class SduiModule {
             // UIComposite
             UIScreenComponent,
             UINavigationComponent,
+            FabComponent,
             // Layout
             SingleColumnLayoutComponent,
             CenteredContentLayoutComponent,
@@ -3247,6 +3354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         // UIComposite
                         UIScreenComponent,
                         UINavigationComponent,
+                        FabComponent,
                         // Layout
                         SingleColumnLayoutComponent,
                         CenteredContentLayoutComponent,