@edm-sdui/sdui 1.0.27 → 1.0.29

package/fesm2022/edm-sdui-sdui.mjs

@@ -90,14 +90,19 @@ class UIScreenService {
             .pipe(map((json) => this.mapToUIScreen(json)));
     }
     mapToUIScreen(json) {
-        const { identifier, content } = json;
+        const { identifier, content, config } = json;
         if (!identifier) {
             throw new Error(`Identificador da tela ausente no JSON recebido.`);
         }
         const layout = this.getLayout(identifier, content);
+        const normalizedConfig = config ??
+            (json.container
+                ? { container: json.container }
+                : null);
         return {
             identifier: identifier,
             content: layout,
+            config: this.mapToUIScreenConfig(normalizedConfig),
             ...this.mapToUIView(json),
         };
     }
@@ -173,6 +178,7 @@ class UIScreenService {
     }
     mapToUIView(json) {
         return {
+            id: json.id ?? null,
             padding: json.padding,
             background: json.background ? this.mapBackground(json.background) : null,
             action: json.action ? this.mapAction(json.action) : null,
@@ -191,6 +197,19 @@ class UIScreenService {
             justify: json.justify ? json.justify : null,
         };
     }
+    mapToUIScreenConfig(config) {
+        if (!config) {
+            return null;
+        }
+        const containerValue = config.container;
+        const containerNormalized = containerValue
+            ? String(containerValue).toLowerCase()
+            : null;
+        return {
+            alwaysReload: config.always_reload ?? config.alwaysReload ?? null,
+            container: containerNormalized,
+        };
+    }
     mapBackground(json) {
         return {
             backgroundColor: json.background_color ? json.background_color : null,
@@ -203,6 +222,7 @@ class UIScreenService {
             canAccess: json.can_acces ?? null,
             type: json.type ? json.type : null,
             url: json.url ?? null,
+            param: json.param ?? null,
         };
     }
     mapRadius(json) {
@@ -422,6 +442,7 @@ var UIActionType;
     UIActionType["DISMISS_TO_SCENE"] = "DISMISS_TO_SCENE";
     UIActionType["EXTERNAL_URL"] = "EXTERNAL_URL";
     UIActionType["WEBVIEW_URL"] = "WEBVIEW_URL";
+    UIActionType["ANCHOR"] = "ANCHOR";
     // paywall
     UIActionType["PAYWALL"] = "PAYWALL";
     UIActionType["REGISTER"] = "REGISTER";
@@ -547,9 +568,37 @@ class UIActionService {
                     const modal = this.modalService.open(action.url);
                 }
                 break;
+            case UIActionType.ANCHOR:
+                this.scrollToAnchor(action);
+                break;
             // Outros tipos de ação podem ser adicionados aqui
         }
     }
+    scrollToAnchor(action) {
+        // Confluence: param = string para uso geral; aqui priorizamos param como id do elemento
+        const raw = action.param || action.url || '';
+        const targetId = String(raw).replace(/^#/, '').trim();
+        if (!targetId) {
+            console.warn('[UIActionService] ANCHOR sem destino informado');
+            return;
+        }
+        const el = document.getElementById(targetId);
+        if (!el) {
+            console.warn('[UIActionService] ANCHOR não encontrou elemento com id:', targetId);
+            return;
+        }
+        try {
+            el.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+        }
+        catch {
+            el.scrollIntoView();
+        }
+        // guarda o último anchor acessado (usado pelo app host para restaurar)
+        try {
+            sessionStorage.setItem('exploreLastAnchor', targetId);
+        }
+        catch { }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UIActionService, deps: [{ token: i1$3.Router }, { token: ModalService }, { token: UIActionHandlersService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UIActionService, providedIn: 'root' }); }
 }
@@ -751,6 +800,9 @@ var UIAsset;
     UIAsset["IC_LINK_LIST"] = "ic_link_list";
     UIAsset["IC_LINK_LIST_DISABLED"] = "ic_link_list_disabled";
     UIAsset["IC_LIVE_WAITING"] = "ic_live_waiting";
+    UIAsset["IC_PLAY_VIEW_EXPLORER"] = "ic_play_view_explorer";
+    UIAsset["IC_RATING_EXPLORER"] = "ic_rating_explorer";
+    UIAsset["IC_CHECK_EXPLORER"] = "ic_check_explorer";
     UIAsset["IC_LOCK"] = "ic_lock";
     UIAsset["IC_LOCK_CHECK"] = "ic_lock_check";
     UIAsset["IC_LOCK_LESSON"] = "ic_lock_lesson";
@@ -927,6 +979,7 @@ var UIAsset;
     UIAsset["BT_NEXT_PROFILE"] = "bt_next_profile";
     UIAsset["IC_SUPPORT_PROFILE"] = "ic_support_profile";
     UIAsset["BT_BACK_SEC"] = "bt_back_sec";
+    UIAsset["IC_EXPLORER_EMPTY"] = "ic_explorer_empty";
 })(UIAsset || (UIAsset = {}));
 
 const assetMapping = {
@@ -1118,6 +1171,9 @@ const assetMapping = {
     [UIAsset.IC_LINK_LIST]: 'assets/images/ic-link-list.svg',
     [UIAsset.IC_LINK_LIST_DISABLED]: 'assets/images/ic-link-list-disabled.svg',
     [UIAsset.IC_LIVE_WAITING]: 'assets/images/ic-live-waiting.svg',
+    [UIAsset.IC_PLAY_VIEW_EXPLORER]: 'assets/images/ic-play-view-explorer.svg',
+    [UIAsset.IC_RATING_EXPLORER]: 'assets/images/ic-rating-explorer.svg',
+    [UIAsset.IC_CHECK_EXPLORER]: 'assets/images/ic-check-explorer.svg',
     [UIAsset.IC_LOCK]: 'assets/images/ic-lock.svg',
     [UIAsset.IC_LOCK_CHECK]: 'assets/images/ic-lock-check.svg',
     [UIAsset.IC_LOCK_LESSON]: 'assets/images/ic-lock-lesson.svg',
@@ -1297,6 +1353,7 @@ const assetMapping = {
     [UIAsset.BT_NEXT_PROFILE]: 'assets/images/bt-next-profile.svg',
     [UIAsset.IC_SUPPORT_PROFILE]: 'assets/images/ic-support-profile.svg',
     [UIAsset.BT_BACK_SEC]: 'assets/images/bt-back-sec.svg',
+    [UIAsset.IC_EXPLORER_EMPTY]: 'assets/images/ic-explorer-empty.svg'
 };
 
 var UISpacingLevel;
@@ -1618,7 +1675,7 @@ const radiusMapping = {
     [UIRadiusLevel.R3]: '8px',
     [UIRadiusLevel.R4]: '10px',
     [UIRadiusLevel.R5]: '12px',
-    [UIRadiusLevel.R50]: '50%',
+    [UIRadiusLevel.R50]: '16px',
 };
 
 var UIAlignmentType;
@@ -1646,6 +1703,8 @@ var UIDimension;
     UIDimension["P30"] = "p30";
     UIDimension["P20"] = "p20";
     UIDimension["P10"] = "p10";
+    UIDimension["D310"] = "d310";
+    UIDimension["D240"] = "d240";
     UIDimension["D180"] = "d180";
     UIDimension["D150"] = "d150";
     UIDimension["D120"] = "d120";
@@ -1694,6 +1753,8 @@ const dimensionMapping = {
     [UIDimension.P20]: '20%',
     [UIDimension.P10]: '10%',
     // Pixel values
+    [UIDimension.D310]: '310px',
+    [UIDimension.D240]: '240px',
     [UIDimension.D180]: '180px',
     [UIDimension.D150]: '150px',
     [UIDimension.D120]: '120px',
@@ -1778,6 +1839,9 @@ class UIViewDirective {
         }
     }
     applyStyles(uiView) {
+        if (uiView.id) {
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'id', String(uiView.id));
+        }
         if (uiView.padding) {
             this.applyPadding(uiView.padding);
         }
@@ -2054,12 +2118,18 @@ class UIScreenComponent {
         this.viewModel = viewModel;
         this.UIScreenIdentifier = UIScreenIdentifier;
     }
+    containerClass(config) {
+        const container = (config?.container || 'fluid').toString().toLowerCase();
+        return container === 'contained'
+            ? 'ui-screen--contained'
+            : 'ui-screen--fluid';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UIScreenComponent, deps: [{ token: UIScreenViewModel }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UIScreenComponent, isStandalone: false, 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UIScreenComponent, isStandalone: false, 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      [ngClass]=\"containerClass(uiScreen.config)\"\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:100%;min-height:100vh}.ui-screen--fluid{width:100vw}.ui-screen--contained{width:100%;max-width:1200px;margin:0 auto;padding:16px;box-sizing:border-box}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "19.2.14", 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"] }]
+            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      [ngClass]=\"containerClass(uiScreen.config)\"\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:100%;min-height:100vh}.ui-screen--fluid{width:100vw}.ui-screen--contained{width:100%;max-width:1200px;margin:0 auto;padding:16px;box-sizing:border-box}.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 {
@@ -2377,6 +2447,8 @@ var UISize;
 (function (UISize) {
     UISize["THUMB_1"] = "thumb_1";
     UISize["THUMB_2"] = "thumb_2";
+    UISize["THUMB_3"] = "thumb_3";
+    UISize["THUMB_4"] = "thumb_4";
     UISize["ASSET_1"] = "asset_1";
     UISize["ASSET_2"] = "asset_2";
     UISize["ASSET_3"] = "asset_3";
@@ -2390,6 +2462,8 @@ var UISize;
 const sizeMappingHeight = {
     [UISize.THUMB_1]: '56px',
     [UISize.THUMB_2]: '40px',
+    [UISize.THUMB_3]: '180px',
+    [UISize.THUMB_4]: '380px',
     [UISize.ASSET_1]: '26px',
     [UISize.ASSET_2]: '16px',
     [UISize.ASSET_3]: '80px',
@@ -2402,6 +2476,8 @@ const sizeMappingHeight = {
 const sizeMappingWidth = {
     [UISize.THUMB_1]: '100px',
     [UISize.THUMB_2]: '105px',
+    [UISize.THUMB_3]: '320px',
+    [UISize.THUMB_4]: '262px',
     [UISize.ASSET_1]: '26px',
     [UISize.ASSET_2]: '16px',
     [UISize.ASSET_3]: '80px',
@@ -2576,11 +2652,11 @@ class TagComponent {
         this.renderer.setStyle(this.tagElementRef.nativeElement, 'height', sizeMappingHeight[UISize.ASSET_8]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TagComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }, { token: FontSizeMappingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TagComponent, isStandalone: false, selector: "edm-sdui-tag", viewQueries: [{ propertyName: "tagElementRef", first: true, predicate: ["tagElement"], descendants: true }, { propertyName: "tagNameElementRef", first: true, predicate: ["tagNameElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>", styles: [":host{display:contents}.tag{padding:4px 8px;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TagComponent, isStandalone: false, selector: "edm-sdui-tag", viewQueries: [{ propertyName: "tagElementRef", first: true, predicate: ["tagElement"], descendants: true }, { propertyName: "tagNameElementRef", first: true, predicate: ["tagNameElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>", styles: [":host{display:contents}.tag{padding:4px 8px;display:flex;align-items:center}:host-context(.rounded) .tag{border-radius:15px}:host-context(.square) .tag{border-radius: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: "19.2.14", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'edm-sdui-tag', template: "<div class=\"tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>", styles: [":host{display:contents}.tag{padding:4px 8px;display:flex;align-items:center}\n"] }]
+            args: [{ standalone: false, selector: 'edm-sdui-tag', template: "<div class=\"tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>", styles: [":host{display:contents}.tag{padding:4px 8px;display:flex;align-items:center}:host-context(.rounded) .tag{border-radius:15px}:host-context(.square) .tag{border-radius:4px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['uiComponent']