@edm-sdui/sdui 1.0.13 → 1.0.14

package/fesm2022/edm-sdui-sdui.mjs

@@ -21,6 +21,8 @@ var UIComponentType;
     UIComponentType["ROW_DIVISOR"] = "ROW_DIVISOR";
     UIComponentType["COLUMN"] = "COLUMN";
     UIComponentType["Z_STACK"] = "Z_STACK";
+    UIComponentType["SCROLLABLE_ROW"] = "SCROLLABLE_ROW";
+    UIComponentType["SCROLLABLE_COLUMN"] = "SCROLLABLE_COLUMN";
     // elements
     UIComponentType["BUTTON"] = "BUTTON";
     UIComponentType["LABEL"] = "LABEL";
@@ -40,6 +42,10 @@ var UIComponentType;
     UIComponentType["PICKER_ITEM"] = "PICKER_ITEM";
     // tag
     UIComponentType["TAG"] = "TAG";
+    // profile
+    UIComponentType["PROFILE_BUTTON"] = "PROFILE_BUTTON";
+    // progress bar
+    UIComponentType["PROGRESS_BAR"] = "PROGRESS_BAR";
 })(UIComponentType || (UIComponentType = {}));
 
 const SDUI_BASE_URL = new InjectionToken('SDUI_BASE_URL');
@@ -157,6 +163,9 @@ class UIScreenService {
             placeholder: json.placeholder ?? null,
             placeholderTextColor: json.placeholder_text_color ?? null,
             placeholderTextStyle: json.placeholder_text_style ?? null,
+            aspectRatio: json.aspect_ratio ?? null,
+            progress: json.progress ?? null,
+            progressColor: json.progress_color ? json.progress_color : null,
             ...this.mapToUIView(json),
         };
     }
@@ -173,6 +182,11 @@ class UIScreenService {
             spacing: json.spacing
                 ? { spacing: json.spacing }
                 : null,
+            height: json.height ? json.height : null,
+            width: json.width ? json.width : null,
+            borderWidth: json.border_width ?? null,
+            borderColor: json.border_color ? json.border_color : null,
+            justify: json.justify ? json.justify : null,
         };
     }
     mapBackground(json) {
@@ -316,6 +330,8 @@ const componentMapping = {
     [UIComponentType.ROW_DIVISOR]: () => Promise.resolve().then(function () { return rowDivisor_component; }).then((m) => m.RowDivisorComponent),
     [UIComponentType.COLUMN]: () => Promise.resolve().then(function () { return column_component; }).then((m) => m.ColumnComponent),
     [UIComponentType.Z_STACK]: () => Promise.resolve().then(function () { return zstack_component; }).then((m) => m.ZStackComponent),
+    [UIComponentType.SCROLLABLE_ROW]: () => Promise.resolve().then(function () { return scrollableRow_component; }).then((m) => m.ScrollableRowComponent),
+    [UIComponentType.SCROLLABLE_COLUMN]: () => Promise.resolve().then(function () { return scrollableColumn_component; }).then((m) => m.ScrollableColumnComponent),
     // elementos
     [UIComponentType.BUTTON]: () => Promise.resolve().then(function () { return button_component; }).then((m) => m.ButtonComponent),
     [UIComponentType.IMAGE]: () => Promise.resolve().then(function () { return image_component; }).then((m) => m.ImageComponent),
@@ -335,6 +351,10 @@ const componentMapping = {
     [UIComponentType.PICKER_ITEM]: () => Promise.resolve().then(function () { return pickerItem_component; }).then((m) => m.PickerItemComponent),
     // tag
     [UIComponentType.TAG]: () => Promise.resolve().then(function () { return tag_component; }).then((m) => m.TagComponent),
+    // profile
+    [UIComponentType.PROFILE_BUTTON]: () => Promise.resolve().then(function () { return profileButton_component; }).then((m) => m.ProfileButtonComponent),
+    // progress bar
+    [UIComponentType.PROGRESS_BAR]: () => Promise.resolve().then(function () { return progressBar_component; }).then((m) => m.ProgressBarComponent),
 };
 
 class UIComponentComponent {
@@ -431,6 +451,8 @@ var UISpacingLevel;
     UISpacingLevel["S2"] = "s2";
     UISpacingLevel["S3"] = "s3";
     UISpacingLevel["S4"] = "s4";
+    UISpacingLevel["S5"] = "s5";
+    UISpacingLevel["S6"] = "s6";
 })(UISpacingLevel || (UISpacingLevel = {}));
 
 const spaceMapping = {
@@ -438,6 +460,8 @@ const spaceMapping = {
     [UISpacingLevel.S2]: '8px',
     [UISpacingLevel.S3]: '16px',
     [UISpacingLevel.S4]: '24px',
+    [UISpacingLevel.S5]: '32px',
+    [UISpacingLevel.S6]: '40px',
 };
 
 var UIColor;
@@ -756,12 +780,142 @@ const alignmentMapping = {
     [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";
     // paywall
     UIActionType["PAYWALL"] = "PAYWALL";
     UIActionType["REGISTER"] = "REGISTER";
@@ -806,6 +960,11 @@ class UIActionService {
                     }
                 }
                 break;
+            case UIActionType.EXTERNAL_URL:
+                if (action.url) {
+                    console.debug('[UIActionService] Navigating to:', action.url);
+                    window.open(action.url, '_blank');
+                }
             // Outros tipos de ação podem ser adicionados aqui
         }
     }
@@ -838,6 +997,30 @@ class UIActionService {
             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;
+        }
         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 }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -884,23 +1067,38 @@ class UIViewDirective {
         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, 'margin-top', padValue);
+            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-top', padValue);
         }
         if (uiPadding.left) {
             const padValue = padMapping[uiPadding.left];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'margin-left', padValue);
+            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-left', padValue);
         }
         if (uiPadding.right) {
             const padValue = padMapping[uiPadding.right];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'margin-right', padValue);
+            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-right', padValue);
         }
         if (uiPadding.bottom) {
             const padValue = padMapping[uiPadding.bottom];
-            this.renderer.setStyle(this.elementRef.nativeElement, 'margin-bottom', padValue);
+            this.renderer.setStyle(this.elementRef.nativeElement, 'padding-bottom', padValue);
         }
     }
     applyBackground(uiBackground) {
@@ -922,7 +1120,21 @@ class UIViewDirective {
             this.renderer.setStyle(this.elementRef.nativeElement, 'align-items', alignment);
         }
     }
-    applyShadow(uiShadow) { }
+    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];
@@ -947,6 +1159,37 @@ class UIViewDirective {
             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;
@@ -1168,6 +1411,23 @@ class LabelComponent {
             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"] }] }); }
@@ -1610,6 +1870,19 @@ var UIAsset;
     UIAsset["WAY_TASK_ON"] = "way_task_on";
     UIAsset["WAY_TWO_OFF"] = "way_two_off";
     UIAsset["WAY_TWO_ON"] = "way_two_on";
+    UIAsset["BT_SUPPORT_IA"] = "bt_support_ia";
+    UIAsset["IC_CHECK_PROFILE"] = "ic_check_profile";
+    UIAsset["IC_DAYS_PROFILE"] = "ic_days_profile";
+    UIAsset["IC_DOWNLOAD_PROFILE"] = "ic_download_profile";
+    UIAsset["IC_HOUR_PROFILE"] = "ic_hour_profile";
+    UIAsset["IC_LINK_GENERIC_PROFILE"] = "ic_link_generic_profile";
+    UIAsset["IC_NOTIFICATION_PROFILE_OFF"] = "ic_notification_profile_off";
+    UIAsset["IC_NOTIFICATION_PROFILE_ON"] = "ic_notification_profile_on";
+    UIAsset["IC_POST_SAVE_MY_APP"] = "ic_post_save_my_app";
+    UIAsset["IC_RANKING_PTS"] = "ic_ranking_pts";
+    UIAsset["IC_RANKING_RANKING"] = "ic_ranking_ranking";
+    UIAsset["BT_NEXT_PROFILE"] = "bt_next_profile";
+    UIAsset["IC_SUPPORT_PROFILE"] = "ic_support_profile";
 })(UIAsset || (UIAsset = {}));
 
 const assetMapping = {
@@ -1964,6 +2237,19 @@ const assetMapping = {
     [UIAsset.IC_LIKE_SEARCH_LIST]: 'assets/images/ic-like-search-list.svg',
     [UIAsset.IC_SHARE_SEARCH_LIST]: 'assets/images/ic-share-search-list.svg',
     [UIAsset.IC_LAST_SEARCH]: 'assets/images/ic-last-search.svg',
+    [UIAsset.BT_SUPPORT_IA]: 'assets/images/bt-support-ia.svg',
+    [UIAsset.IC_CHECK_PROFILE]: 'assets/images/ic-check-profile.svg',
+    [UIAsset.IC_DAYS_PROFILE]: 'assets/images/ic-days-profile.svg',
+    [UIAsset.IC_DOWNLOAD_PROFILE]: 'assets/images/ic-download-profile.svg',
+    [UIAsset.IC_HOUR_PROFILE]: 'assets/images/ic-hour-profile.svg',
+    [UIAsset.IC_LINK_GENERIC_PROFILE]: 'assets/images/ic-link-generic-profile.svg',
+    [UIAsset.IC_NOTIFICATION_PROFILE_OFF]: 'assets/images/ic-notification-profile-off.svg',
+    [UIAsset.IC_NOTIFICATION_PROFILE_ON]: 'assets/images/ic-notification-profile-on.svg',
+    [UIAsset.IC_POST_SAVE_MY_APP]: 'assets/images/ic-post-save-my-app.svg',
+    [UIAsset.IC_RANKING_PTS]: 'assets/images/ic-ranking-pts.svg',
+    [UIAsset.IC_RANKING_RANKING]: 'assets/images/ic-ranking-ranking.svg',
+    [UIAsset.BT_NEXT_PROFILE]: 'assets/images/bt-next-profile.svg',
+    [UIAsset.IC_SUPPORT_PROFILE]: 'assets/images/ic-support-profile.svg',
 };
 
 class ButtonComponent {
@@ -2016,6 +2302,7 @@ var button_component = /*#__PURE__*/Object.freeze({
 var UISize;
 (function (UISize) {
     UISize["THUMB_1"] = "thumb_1";
+    UISize["THUMB_2"] = "thumb_2";
     UISize["ASSET_1"] = "asset_1";
     UISize["ASSET_2"] = "asset_2";
     UISize["ASSET_3"] = "asset_3";
@@ -2027,10 +2314,11 @@ var UISize;
 })(UISize || (UISize = {}));
 
 const sizeMappingHeight = {
+    [UISize.THUMB_1]: '56px',
+    [UISize.THUMB_2]: '40px',
     [UISize.ASSET_1]: '26px',
     [UISize.ASSET_2]: '16px',
     [UISize.ASSET_3]: '80px',
-    [UISize.THUMB_1]: '56px',
     [UISize.ASSET_4]: '60px',
     [UISize.ASSET_5]: '18px',
     [UISize.ASSET_6]: '20px',
@@ -2038,10 +2326,11 @@ const sizeMappingHeight = {
     [UISize.ASSET_8]: '24px',
 };
 const sizeMappingWidth = {
+    [UISize.THUMB_1]: '100px',
+    [UISize.THUMB_2]: '105px',
     [UISize.ASSET_1]: '26px',
     [UISize.ASSET_2]: '16px',
     [UISize.ASSET_3]: '80px',
-    [UISize.THUMB_1]: '100px',
     [UISize.ASSET_4]: '60px',
     [UISize.ASSET_5]: '18px',
     [UISize.ASSET_6]: '20px',
@@ -2073,6 +2362,9 @@ class ImageComponent {
             const width = sizeMappingWidth[element.size];
             this.renderer.setStyle(this.imgElementRef.nativeElement, 'height', height);
             this.renderer.setStyle(this.imgElementRef.nativeElement, 'width', width);
+            if (element.size === UISize.THUMB_2) {
+                this.renderer.setStyle(this.imgElementRef.nativeElement, 'object-fit', 'contain');
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -2655,6 +2947,197 @@ var picker_component = /*#__PURE__*/Object.freeze({
     PickerComponent: PickerComponent
 });
 
+class ScrollableRowComponent {
+    constructor(uiComponent, renderer) {
+        this.uiComponent = uiComponent;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        if (this.uiComponent.element) {
+            this.applyElement(this.uiComponent.element);
+        }
+        this.scroll();
+    }
+    applyElement(element) {
+    }
+    scroll() {
+        const scrollContainer = this.scrollableRowElementRef.nativeElement;
+        let isDown = false;
+        let startX = 0;
+        let scrollLeft = 0;
+        this.renderer.listen(scrollContainer, 'mousedown', (e) => {
+            isDown = true;
+            scrollContainer.classList.add('scrolling');
+            startX = e.pageX - scrollContainer.offsetLeft;
+            scrollLeft = scrollContainer.scrollLeft;
+        });
+        this.renderer.listen(scrollContainer, 'mouseleave', () => {
+            isDown = false;
+            scrollContainer.classList.remove('scrolling');
+        });
+        this.renderer.listen(scrollContainer, 'mouseup', () => {
+            isDown = false;
+            scrollContainer.classList.remove('scrolling');
+        });
+        this.renderer.listen(scrollContainer, 'mousemove', (e) => {
+            if (!isDown)
+                return;
+            e.preventDefault();
+            const x = e.pageX - scrollContainer.offsetLeft;
+            const walk = (x - startX) * 1.5;
+            scrollContainer.scrollLeft = scrollLeft - walk;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrollableRowComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ScrollableRowComponent, selector: "edm-sdui-scrollable-row", viewQueries: [{ propertyName: "scrollableRowElementRef", first: true, predicate: ["scrollableRowElement"], descendants: true }], ngImport: i0, template: "<div\n  #scrollableRowElement\n  [edmSduiView]=\"uiComponent.element\"\n  class=\"scrollable-row\"\n  *ngIf=\"uiComponent\"\n>\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}.scrollable-row{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:pointer}.scrollable-row::-webkit-scrollbar{display:none}.scrollable-row>*{flex-shrink:0}\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: ScrollableRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-scrollable-row', standalone: false, template: "<div\n  #scrollableRowElement\n  [edmSduiView]=\"uiComponent.element\"\n  class=\"scrollable-row\"\n  *ngIf=\"uiComponent\"\n>\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}.scrollable-row{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:pointer}.scrollable-row::-webkit-scrollbar{display:none}.scrollable-row>*{flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['uiComponent']
+                }] }, { type: i0.Renderer2 }], propDecorators: { scrollableRowElementRef: [{
+                type: ViewChild,
+                args: ['scrollableRowElement']
+            }] } });
+
+var scrollableRow_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ScrollableRowComponent: ScrollableRowComponent
+});
+
+class ScrollableColumnComponent {
+    constructor(uiComponent, renderer) {
+        this.uiComponent = uiComponent;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        if (this.uiComponent.element) {
+            this.applyElement(this.uiComponent.element);
+        }
+    }
+    applyElement(element) {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrollableColumnComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ScrollableColumnComponent, selector: "edm-sdui-scrollable-column", viewQueries: [{ propertyName: "scrollableColumnElementRef", first: true, predicate: ["scrollableColumnElement"], descendants: true }], ngImport: i0, template: "<div\n  #scrollableColumnElement\n  [edmSduiView]=\"uiComponent.element\"\n  class=\"scrollable-column\"\n  *ngIf=\"uiComponent\"\n>\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}.scrollable-column{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:100%;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.scrollable-column::-webkit-scrollbar{display:none}.scrollable-column>*{flex-shrink:0}\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: ScrollableColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-scrollable-column', standalone: false, template: "<div\n  #scrollableColumnElement\n  [edmSduiView]=\"uiComponent.element\"\n  class=\"scrollable-column\"\n  *ngIf=\"uiComponent\"\n>\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}.scrollable-column{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:100%;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.scrollable-column::-webkit-scrollbar{display:none}.scrollable-column>*{flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['uiComponent']
+                }] }, { type: i0.Renderer2 }], propDecorators: { scrollableColumnElementRef: [{
+                type: ViewChild,
+                args: ['scrollableColumnElement']
+            }] } });
+
+var scrollableColumn_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ScrollableColumnComponent: ScrollableColumnComponent
+});
+
+class ProfileButtonComponent {
+    constructor(uiComponent, renderer, fontSizeMappingService) {
+        this.uiComponent = uiComponent;
+        this.renderer = renderer;
+        this.fontSizeMappingService = fontSizeMappingService;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        if (this.uiComponent.element) {
+            this.applyElement(this.uiComponent.element);
+        }
+    }
+    applyElement(element) {
+        if (element.textColor) {
+            const color = colorMapping[element.textColor];
+            this.renderer.setStyle(this.profileButtonElementRef.nativeElement, 'color', color);
+        }
+        if (element.textStyle) {
+            const textStyleMappingFontSize = this.fontSizeMappingService.getMapping();
+            const fontSize = textStyleMappingFontSize[element.textStyle];
+            this.renderer.setStyle(this.profileButtonElementRef.nativeElement, 'font-size', fontSize);
+        }
+        this.renderer.setStyle(this.profileButtonLabelElementRef.nativeElement, 'font-size', this.fontSizeMappingService.getMapping()[UITextStyle.CAPTION_2]);
+        this.renderer.setStyle(this.profileButtonLabelElementRef.nativeElement, 'color', colorMapping[UIColor.MAIN1]);
+    }
+    getAssetPath(asset) {
+        return assetMapping[asset];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProfileButtonComponent, 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: ProfileButtonComponent, selector: "edm-sdui-profile-button", viewQueries: [{ propertyName: "profileButtonElementRef", first: true, predicate: ["profileButtonElement"], descendants: true }, { propertyName: "profileButtonLabelElementRef", first: true, predicate: ["profileButtonLabelElement"], descendants: true }, { propertyName: "profileButtonImageElementRef", first: true, predicate: ["profileButtonImageElement"], descendants: true }], ngImport: i0, template: "<button #profileButtonElement [edmSduiView]=\"uiComponent.element\" class=\"profile-button\" *ngIf=\"uiComponent\">\n  <img #profileButtonImageElement *ngIf=\"uiComponent.element.asset\" [src]=\"getAssetPath(uiComponent.element.asset)\" alt=\"Profile\" class=\"profile-image\">\n  <span #profileButtonLabelElement class=\"profile-label\">{{ uiComponent.element.label }}</span>\n</button>\n", styles: [":host{display:contents}.profile-button{display:flex;padding:16px 16px 0;border-radius:20px;background-color:var(--bt-profile);border:none;cursor:pointer;flex-direction:column;height:108px;width:108px;align-items:start;justify-content:start;gap:24px;margin-bottom:8px}.profile-button:hover{background-color:#0000000d;cursor:pointer}.profile-button .profile-image{width:24px;height:24px}.profile-button .profile-label{white-space:normal;word-break:break-word;overflow-wrap:break-word;max-width:100%;display:block;text-align:left}\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: ProfileButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-profile-button', standalone: false, template: "<button #profileButtonElement [edmSduiView]=\"uiComponent.element\" class=\"profile-button\" *ngIf=\"uiComponent\">\n  <img #profileButtonImageElement *ngIf=\"uiComponent.element.asset\" [src]=\"getAssetPath(uiComponent.element.asset)\" alt=\"Profile\" class=\"profile-image\">\n  <span #profileButtonLabelElement class=\"profile-label\">{{ uiComponent.element.label }}</span>\n</button>\n", styles: [":host{display:contents}.profile-button{display:flex;padding:16px 16px 0;border-radius:20px;background-color:var(--bt-profile);border:none;cursor:pointer;flex-direction:column;height:108px;width:108px;align-items:start;justify-content:start;gap:24px;margin-bottom:8px}.profile-button:hover{background-color:#0000000d;cursor:pointer}.profile-button .profile-image{width:24px;height:24px}.profile-button .profile-label{white-space:normal;word-break:break-word;overflow-wrap:break-word;max-width:100%;display:block;text-align:left}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['uiComponent']
+                }] }, { type: i0.Renderer2 }, { type: FontSizeMappingService }], propDecorators: { profileButtonElementRef: [{
+                type: ViewChild,
+                args: ['profileButtonElement']
+            }], profileButtonLabelElementRef: [{
+                type: ViewChild,
+                args: ['profileButtonLabelElement']
+            }], profileButtonImageElementRef: [{
+                type: ViewChild,
+                args: ['profileButtonImageElement']
+            }] } });
+
+var profileButton_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ProfileButtonComponent: ProfileButtonComponent
+});
+
+class ProgressBarComponent {
+    constructor(uiComponent, renderer) {
+        this.uiComponent = uiComponent;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        if (this.uiComponent.element) {
+            this.applyElement(this.uiComponent.element);
+        }
+    }
+    applyElement(element) {
+        // Set progress value if available
+        if (element.progress) {
+            const progressValue = Math.min(Math.max(element.progress, 0), 1) * 100;
+            this.renderer.setStyle(this.progressFillElementRef.nativeElement, 'width', `${progressValue}%`);
+        }
+        if (element.progressColor) {
+            const color = colorMapping[element.progressColor];
+            this.renderer.setStyle(this.progressFillElementRef.nativeElement, 'background-color', color);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProgressBarComponent, selector: "edm-sdui-progress-bar", viewQueries: [{ propertyName: "progressFillElementRef", first: true, predicate: ["progressFillElement"], descendants: true }], ngImport: i0, template: "<div [edmSduiView]=\"uiComponent.element\" class=\"progress-bar-container\" *ngIf=\"uiComponent\">\n  <div #progressFillElement class=\"progress-bar-fill\"></div>\n</div>\n", styles: [":host{display:contents}.progress-bar-container{position:relative;width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin:8px 0}.progress-bar-container .progress-bar-fill{height:100%;width:0;background-color:#2196f3;transition:width .3s ease}.progress-bar-container .progress-bar-label{position:absolute;top:100%;left:0;width:100%;text-align:center;font-size:12px;margin-top:4px}\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: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-progress-bar', standalone: false, template: "<div [edmSduiView]=\"uiComponent.element\" class=\"progress-bar-container\" *ngIf=\"uiComponent\">\n  <div #progressFillElement class=\"progress-bar-fill\"></div>\n</div>\n", styles: [":host{display:contents}.progress-bar-container{position:relative;width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin:8px 0}.progress-bar-container .progress-bar-fill{height:100%;width:0;background-color:#2196f3;transition:width .3s ease}.progress-bar-container .progress-bar-label{position:absolute;top:100%;left:0;width:100%;text-align:center;font-size:12px;margin-top:4px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['uiComponent']
+                }] }, { type: i0.Renderer2 }], propDecorators: { progressFillElementRef: [{
+                type: ViewChild,
+                args: ['progressFillElement']
+            }] } });
+
+var progressBar_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ProgressBarComponent: ProgressBarComponent
+});
+
 class SduiModule {
     static forRoot(config) {
         return {
@@ -2698,6 +3181,10 @@ class SduiModule {
             MediaTypeComponent,
             PickerComponent,
             PickerItemComponent,
+            ScrollableRowComponent,
+            ScrollableColumnComponent,
+            ProfileButtonComponent,
+            ProgressBarComponent,
             // diretivas
             UIViewDirective,
             // navegação
@@ -2732,6 +3219,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MediaTypeComponent,
                         PickerComponent,
                         PickerItemComponent,
+                        ScrollableRowComponent,
+                        ScrollableColumnComponent,
+                        ProfileButtonComponent,
+                        ProgressBarComponent,
                         // diretivas
                         UIViewDirective,
                         // navegação