@rededor/site-front-end-lib 0.0.52 → 0.0.54

package/fesm2022/rededor-site-front-end-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, PLATFORM_ID, Optional, makeStateKey, signal, EventEmitter, Component, Input, Output, Directive, HostListener, CUSTOM_ELEMENTS_SCHEMA, ViewChild, HostBinding, effect, Pipe } from '@angular/core';
+import { InjectionToken, Injectable, Inject, PLATFORM_ID, Optional, makeStateKey, signal, EventEmitter, Component, Input, Output, Directive, HostListener, CUSTOM_ELEMENTS_SCHEMA, ViewChild, HostBinding, effect, inject, Pipe } from '@angular/core';
 import algoliasearch from 'algoliasearch';
 import { from, fromEvent, startWith, timeout, catchError, of, Observable, debounceTime, BehaviorSubject } from 'rxjs';
 import * as i2 from '@angular/common';
@@ -18330,11 +18330,11 @@ class SideCtasComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SideCtasComponent, deps: [{ token: CuraService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SideCtasComponent, isStandalone: true, selector: "rdsite-side-ctas", host: { properties: { "style": "this.style" } }, ngImport: i0, template: "<div\n  class=\"rdsite-side-ctas-right\"\n  [ngStyle]=\"{\n    display: rightTop?.children?.length || rightMiddle?.children?.length || rightBottom?.children?.length ? 'flex' : 'none',\n  }\"\n>\n  <div #rightTop class=\"rdsite-side-ctas-right-top\">\n    <ng-content select=\"rdsite-side-ctas-right-top\"></ng-content>\n  </div>\n  <div #rightMiddle class=\"rdsite-side-ctas-right-middle\">\n    <ng-content select=\"rdsite-side-ctas-right-middle\"></ng-content>\n  </div>\n  <div #rightBottom class=\"rdsite-side-ctas-right-bottom\">\n    <ng-content select=\"rdsite-side-ctas-right-bottom\"></ng-content>\n  </div>\n</div>\n\n<div\n  class=\"rdsite-side-ctas-bottom\"\n  [ngStyle]=\"{\n    display: bottom?.children?.length ? 'flex' : 'none',\n    paddingRight: rightTop?.children?.length || rightMiddle?.children?.length || rightBottom?.children?.length ? '88px' : '0px',\n  }\"\n>\n  <div #bottom class=\"rdsite-side-ctas-bottom-container\">\n    <ng-content select=\"rdsite-side-ctas-bottom\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:sticky;bottom:0;right:0;display:block;z-index:3003;pointer-events:none}.rdsite-side-ctas-right{position:absolute;bottom:0;right:0;height:min-content;width:88px;background-color:var(--color-right);display:flex;flex-direction:column;justify-content:space-between;align-items:center;pointer-events:auto}.rdsite-side-ctas-right-middle{display:flex;flex-grow:1;align-items:center}.rdsite-side-ctas-bottom{display:flex;justify-content:flex-end;padding-right:88px;background-color:transparent;height:88px}.rdsite-side-ctas-bottom-container{pointer-events:auto;width:100%}@media only screen and (min-width: 1024px){.rdsite-side-ctas-right{height:calc(100vh - 80px)}.rdsite-side-ctas-bottom-container{width:fit-content;gap:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SideCtasComponent, isStandalone: true, selector: "rdsite-side-ctas", host: { properties: { "style": "this.style" } }, ngImport: i0, template: "<div\n  class=\"rdsite-side-ctas-right\"\n  [ngStyle]=\"{\n    display: rightTop?.children?.length || rightMiddle?.children?.length || rightBottom?.children?.length ? 'flex' : 'none',\n  }\"\n>\n  <div #rightTop class=\"rdsite-side-ctas-right-top\">\n    <ng-content select=\"rdsite-side-ctas-right-top\"></ng-content>\n  </div>\n  <div #rightMiddle class=\"rdsite-side-ctas-right-middle\">\n    <ng-content select=\"rdsite-side-ctas-right-middle\"></ng-content>\n  </div>\n  <div #rightBottom class=\"rdsite-side-ctas-right-bottom\">\n    <ng-content select=\"rdsite-side-ctas-right-bottom\"></ng-content>\n  </div>\n</div>\n\n<div\n  class=\"rdsite-side-ctas-bottom\"\n  [ngStyle]=\"{\n    display: bottom?.children?.length ? 'flex' : 'none',\n    paddingRight: rightTop?.children?.length || rightMiddle?.children?.length || rightBottom?.children?.length ? '88px' : '0px',\n  }\"\n>\n  <div #bottom class=\"rdsite-side-ctas-bottom-container\">\n    <ng-content select=\"rdsite-side-ctas-bottom\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:sticky;bottom:0;right:0;display:block;z-index:3003;pointer-events:none}@media only screen and (min-width: 1024px){:host{margin-top:-88px}}.rdsite-side-ctas-right{position:absolute;bottom:0;right:0;height:min-content;width:88px;background-color:var(--color-right);display:flex;flex-direction:column;justify-content:space-between;align-items:center;pointer-events:auto}.rdsite-side-ctas-right-middle{display:flex;flex-grow:1;align-items:center}.rdsite-side-ctas-bottom{display:flex;justify-content:flex-end;padding-right:88px;background-color:transparent;height:88px}.rdsite-side-ctas-bottom-container{pointer-events:auto;width:100%}@media only screen and (min-width: 1024px){.rdsite-side-ctas-right{height:calc(100vh - 80px)}.rdsite-side-ctas-bottom-container{width:fit-content;gap:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SideCtasComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rdsite-side-ctas', standalone: true, imports: [CommonModule], template: "<div\n  class=\"rdsite-side-ctas-right\"\n  [ngStyle]=\"{\n    display: rightTop?.children?.length || rightMiddle?.children?.length || rightBottom?.children?.length ? 'flex' : 'none',\n  }\"\n>\n  <div #rightTop class=\"rdsite-side-ctas-right-top\">\n    <ng-content select=\"rdsite-side-ctas-right-top\"></ng-content>\n  </div>\n  <div #rightMiddle class=\"rdsite-side-ctas-right-middle\">\n    <ng-content select=\"rdsite-side-ctas-right-middle\"></ng-content>\n  </div>\n  <div #rightBottom class=\"rdsite-side-ctas-right-bottom\">\n    <ng-content select=\"rdsite-side-ctas-right-bottom\"></ng-content>\n  </div>\n</div>\n\n<div\n  class=\"rdsite-side-ctas-bottom\"\n  [ngStyle]=\"{\n    display: bottom?.children?.length ? 'flex' : 'none',\n    paddingRight: rightTop?.children?.length || rightMiddle?.children?.length || rightBottom?.children?.length ? '88px' : '0px',\n  }\"\n>\n  <div #bottom class=\"rdsite-side-ctas-bottom-container\">\n    <ng-content select=\"rdsite-side-ctas-bottom\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:sticky;bottom:0;right:0;display:block;z-index:3003;pointer-events:none}.rdsite-side-ctas-right{position:absolute;bottom:0;right:0;height:min-content;width:88px;background-color:var(--color-right);display:flex;flex-direction:column;justify-content:space-between;align-items:center;pointer-events:auto}.rdsite-side-ctas-right-middle{display:flex;flex-grow:1;align-items:center}.rdsite-side-ctas-bottom{display:flex;justify-content:flex-end;padding-right:88px;background-color:transparent;height:88px}.rdsite-side-ctas-bottom-container{pointer-events:auto;width:100%}@media only screen and (min-width: 1024px){.rdsite-side-ctas-right{height:calc(100vh - 80px)}.rdsite-side-ctas-bottom-container{width:fit-content;gap:10px}}\n"] }]
+            args: [{ selector: 'rdsite-side-ctas', standalone: true, imports: [CommonModule], template: "<div\n  class=\"rdsite-side-ctas-right\"\n  [ngStyle]=\"{\n    display: rightTop?.children?.length || rightMiddle?.children?.length || rightBottom?.children?.length ? 'flex' : 'none',\n  }\"\n>\n  <div #rightTop class=\"rdsite-side-ctas-right-top\">\n    <ng-content select=\"rdsite-side-ctas-right-top\"></ng-content>\n  </div>\n  <div #rightMiddle class=\"rdsite-side-ctas-right-middle\">\n    <ng-content select=\"rdsite-side-ctas-right-middle\"></ng-content>\n  </div>\n  <div #rightBottom class=\"rdsite-side-ctas-right-bottom\">\n    <ng-content select=\"rdsite-side-ctas-right-bottom\"></ng-content>\n  </div>\n</div>\n\n<div\n  class=\"rdsite-side-ctas-bottom\"\n  [ngStyle]=\"{\n    display: bottom?.children?.length ? 'flex' : 'none',\n    paddingRight: rightTop?.children?.length || rightMiddle?.children?.length || rightBottom?.children?.length ? '88px' : '0px',\n  }\"\n>\n  <div #bottom class=\"rdsite-side-ctas-bottom-container\">\n    <ng-content select=\"rdsite-side-ctas-bottom\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:sticky;bottom:0;right:0;display:block;z-index:3003;pointer-events:none}@media only screen and (min-width: 1024px){:host{margin-top:-88px}}.rdsite-side-ctas-right{position:absolute;bottom:0;right:0;height:min-content;width:88px;background-color:var(--color-right);display:flex;flex-direction:column;justify-content:space-between;align-items:center;pointer-events:auto}.rdsite-side-ctas-right-middle{display:flex;flex-grow:1;align-items:center}.rdsite-side-ctas-bottom{display:flex;justify-content:flex-end;padding-right:88px;background-color:transparent;height:88px}.rdsite-side-ctas-bottom-container{pointer-events:auto;width:100%}@media only screen and (min-width: 1024px){.rdsite-side-ctas-right{height:calc(100vh - 80px)}.rdsite-side-ctas-bottom-container{width:fit-content;gap:10px}}\n"] }]
         }], ctorParameters: () => [{ type: CuraService }], propDecorators: { style: [{
                 type: HostBinding,
                 args: ['style']
@@ -18353,7 +18353,7 @@ class SideCtasBottomComponent {
         this.sideCtaBottomItemClick = new EventEmitter();
         this.style = {
             '--font-color': this.curaService.getColor('neutral-black'),
-            '--bg-color': this.curaService.getColor('neutral-purewhite'),
+            '--bg-color': this.curaService.getColor('primary-dark'),
             '--bg-cta-color': this.curaService.getColor('accent-base'),
             '--bg-cta-hover-color': this.curaService.getColor('accent-dark'),
             '--bg-cta-active-color': this.curaService.getColor('accent-darker'),
@@ -18545,6 +18545,8 @@ class AlgoliaComponent {
         this.scrollY = null;
         this.resetItem = new EventEmitter();
         this.algoliaResults = new EventEmitter();
+        this.focusEmit = new EventEmitter();
+        this.blurEmit = new EventEmitter();
     }
     ngOnInit() {
         if (isPlatformBrowser(this.platformId)) {
@@ -18553,15 +18555,10 @@ class AlgoliaComponent {
         }
     }
     manageFocus() {
-        if (isPlatformBrowser(this.platformId) && this.isMobile) {
-            this.scrollY = window.scrollY;
-            window.scrollTo(0, 0);
-        }
+        this.focusEmit.emit();
     }
-    manageScrollPosition() {
-        if (isPlatformBrowser(this.platformId) && this.isMobile && this.scrollY) {
-            window.scrollTo({ top: this.scrollY });
-        }
+    manageBlur() {
+        this.blurEmit.emit();
     }
     resetValues() {
         this.resetItem.emit();
@@ -18611,11 +18608,11 @@ class AlgoliaComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlgoliaComponent, deps: [{ token: AlgoliaSearchApiService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AlgoliaComponent, isStandalone: true, selector: "rdsite-algolia", inputs: { algoliaConfig: "algoliaConfig", label: "label", name: "name", required: "required", selected: "selected", value: "value", placeholder: "placeholder", deleteButton: "deleteButton", iconName: "iconName", status: "status", startSearchAtCharLen: "startSearchAtCharLen", hintTitle: "hintTitle", hints: "hints", searchParams: "searchParams" }, outputs: { resetItem: "resetItem", algoliaResults: "algoliaResults" }, ngImport: i0, template: "<cura-dropdown-search\n  [value]=\"value\"\n  [status]=\"status\"\n  [name]=\"name\"\n  [required]=\"required\"\n  [selected]=\"selected\"\n  [label]=\"label\"\n  [iconName]=\"iconName\"\n  [placeholder]=\"placeholder\"\n  (valueChange)=\"resetValues()\"\n  (input)=\"termChange($event)\"\n  (focus)=\"manageFocus()\"\n  (blur)=\"manageScrollPosition()\"\n>\n  @if (status === 'error') {\n    <cura-dropdown-search-option name=\"error\">\n      <div class=\"head\">\n        <cura-icon size=\"24\" name=\"alertCircle\" color=\"error-700\"></cura-icon>\n        <cura-paragraph size=\"small\" color=\"error-700\" weight=\"bold\"> N\u00E3o h\u00E1 nenhum resultado para \"{{ searchTerm.toUpperCase() }}\".</cura-paragraph>\n      </div>\n    </cura-dropdown-search-option>\n  }\n  <ng-content></ng-content>\n</cura-dropdown-search>\n", styles: ["cura-dropdown-search-option[name=error]{pointer-events:none;cursor:default}cura-dropdown-search-option[name=error] .head{display:flex;flex-direction:row;justify-content:center;align-items:center;justify-content:flex-start;gap:8px;width:100%}cura-dropdown-search-option[name=error]::ng-deep cura-label{background-color:transparent!important}cura-dropdown-search-option[name=error]:hover{background-color:inherit;color:inherit;pointer-events:none}@media only screen and (min-width: 769px){cura-dropdown-search{position:relative;z-index:1}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AlgoliaComponent, isStandalone: true, selector: "rdsite-algolia", inputs: { algoliaConfig: "algoliaConfig", label: "label", name: "name", required: "required", selected: "selected", value: "value", placeholder: "placeholder", deleteButton: "deleteButton", iconName: "iconName", status: "status", startSearchAtCharLen: "startSearchAtCharLen", hintTitle: "hintTitle", hints: "hints", searchParams: "searchParams" }, outputs: { resetItem: "resetItem", algoliaResults: "algoliaResults", focusEmit: "focusEmit", blurEmit: "blurEmit" }, ngImport: i0, template: "<cura-dropdown-search\n  [value]=\"value\"\n  [status]=\"status\"\n  [name]=\"name\"\n  [required]=\"required\"\n  [selected]=\"selected\"\n  [label]=\"label\"\n  [iconName]=\"iconName\"\n  [placeholder]=\"placeholder\"\n  (valueChange)=\"resetValues()\"\n  (input)=\"termChange($event)\"\n  (focus)=\"manageFocus()\"\n  (blur)=\"manageBlur()\"\n>\n  @if (status === 'error') {\n    <cura-dropdown-search-option name=\"error\">\n      <div class=\"head\">\n        <cura-icon size=\"24\" name=\"alertCircle\" color=\"error-700\"></cura-icon>\n        <cura-paragraph size=\"small\" color=\"error-700\" weight=\"bold\"> N\u00E3o h\u00E1 nenhum resultado para \"{{ searchTerm.toUpperCase() }}\".</cura-paragraph>\n      </div>\n    </cura-dropdown-search-option>\n  }\n  <ng-content></ng-content>\n</cura-dropdown-search>\n<ng-content select=\"app-planos-e-convenios-tooltip\"></ng-content>\n", styles: ["cura-dropdown-search-option[name=error]{pointer-events:none;cursor:default}cura-dropdown-search-option[name=error] .head{display:flex;flex-direction:row;justify-content:center;align-items:center;justify-content:flex-start;gap:8px;width:100%}cura-dropdown-search-option[name=error]::ng-deep cura-label{background-color:transparent!important}cura-dropdown-search-option[name=error]:hover{background-color:inherit;color:inherit;pointer-events:none}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlgoliaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rdsite-algolia', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<cura-dropdown-search\n  [value]=\"value\"\n  [status]=\"status\"\n  [name]=\"name\"\n  [required]=\"required\"\n  [selected]=\"selected\"\n  [label]=\"label\"\n  [iconName]=\"iconName\"\n  [placeholder]=\"placeholder\"\n  (valueChange)=\"resetValues()\"\n  (input)=\"termChange($event)\"\n  (focus)=\"manageFocus()\"\n  (blur)=\"manageScrollPosition()\"\n>\n  @if (status === 'error') {\n    <cura-dropdown-search-option name=\"error\">\n      <div class=\"head\">\n        <cura-icon size=\"24\" name=\"alertCircle\" color=\"error-700\"></cura-icon>\n        <cura-paragraph size=\"small\" color=\"error-700\" weight=\"bold\"> N\u00E3o h\u00E1 nenhum resultado para \"{{ searchTerm.toUpperCase() }}\".</cura-paragraph>\n      </div>\n    </cura-dropdown-search-option>\n  }\n  <ng-content></ng-content>\n</cura-dropdown-search>\n", styles: ["cura-dropdown-search-option[name=error]{pointer-events:none;cursor:default}cura-dropdown-search-option[name=error] .head{display:flex;flex-direction:row;justify-content:center;align-items:center;justify-content:flex-start;gap:8px;width:100%}cura-dropdown-search-option[name=error]::ng-deep cura-label{background-color:transparent!important}cura-dropdown-search-option[name=error]:hover{background-color:inherit;color:inherit;pointer-events:none}@media only screen and (min-width: 769px){cura-dropdown-search{position:relative;z-index:1}}\n"] }]
+            args: [{ selector: 'rdsite-algolia', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<cura-dropdown-search\n  [value]=\"value\"\n  [status]=\"status\"\n  [name]=\"name\"\n  [required]=\"required\"\n  [selected]=\"selected\"\n  [label]=\"label\"\n  [iconName]=\"iconName\"\n  [placeholder]=\"placeholder\"\n  (valueChange)=\"resetValues()\"\n  (input)=\"termChange($event)\"\n  (focus)=\"manageFocus()\"\n  (blur)=\"manageBlur()\"\n>\n  @if (status === 'error') {\n    <cura-dropdown-search-option name=\"error\">\n      <div class=\"head\">\n        <cura-icon size=\"24\" name=\"alertCircle\" color=\"error-700\"></cura-icon>\n        <cura-paragraph size=\"small\" color=\"error-700\" weight=\"bold\"> N\u00E3o h\u00E1 nenhum resultado para \"{{ searchTerm.toUpperCase() }}\".</cura-paragraph>\n      </div>\n    </cura-dropdown-search-option>\n  }\n  <ng-content></ng-content>\n</cura-dropdown-search>\n<ng-content select=\"app-planos-e-convenios-tooltip\"></ng-content>\n", styles: ["cura-dropdown-search-option[name=error]{pointer-events:none;cursor:default}cura-dropdown-search-option[name=error] .head{display:flex;flex-direction:row;justify-content:center;align-items:center;justify-content:flex-start;gap:8px;width:100%}cura-dropdown-search-option[name=error]::ng-deep cura-label{background-color:transparent!important}cura-dropdown-search-option[name=error]:hover{background-color:inherit;color:inherit;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: AlgoliaSearchApiService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -18652,6 +18649,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }], algoliaResults: [{
                 type: Output
+            }], focusEmit: [{
+                type: Output
+            }], blurEmit: [{
+                type: Output
             }] } });
 
 const xSmallBreakpoint = 361;
@@ -18675,15 +18676,14 @@ class CtaWrapperComponent {
         this.curaService = curaService;
         this.nguService = nguService;
         this.platformId = platformId;
-        this.colors = {
-            border: 'primary-darker',
-            icon: 'primary-darker',
-        };
+        this.colors = {};
         this.seeMoreControl = false;
         this.styleBinding = {
             '--more-options-color': this.curaService.getColor(this.colors.icon),
             '--border-color': this.curaService.getColor(this.colors.border),
             '--label-color': this.curaService.getColor(this.colors.icon),
+            '--title-color': this.curaService.getColor(this.colors?.title),
+            '--text-color': this.curaService.getColor(this.colors?.text),
         };
         this.class = true;
     }
@@ -18704,15 +18704,19 @@ class CtaWrapperComponent {
         this.seeMoreControl = !this.seeMoreControl;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CtaWrapperComponent, deps: [{ token: CuraService }, { token: NguCarouselService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CtaWrapperComponent, isStandalone: true, selector: "rdsite-cta-wrapper", inputs: { ctas: "ctas", colors: "colors" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "style": "this.styleBinding", "class.wp-content-wrapper": "this.class" } }, viewQueries: [{ propertyName: "nguCarouselCtas", first: true, predicate: ["nguCarouselCtas"], descendants: true }], ngImport: i0, template: "@if (!seeMoreControl) {\n  @if (!bannerControl) {\n    <ngu-carousel #nguCarouselCtas [inputs]=\"carouselCtasConfig\" [dataSource]=\"ctas\">\n      <ngu-item *nguCarouselDef=\"let cta; let i = index\">\n        <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n          @if (cta?.icon) {\n            <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n          }\n          <p>{{ cta?.label }}</p>\n        </a>\n      </ngu-item>\n    </ngu-carousel>\n    @if (ctas.length > 3) {\n      <div class=\"show-more\">\n        <button type=\"button\" (click)=\"moreOptions()\">Mais op\u00E7\u00F5es</button>\n      </div>\n    }\n  } @else {\n    @for (cta of ctas; track cta) {\n      <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n        @if (cta?.icon) {\n          <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n        }\n        <p>{{ cta?.label }}</p>\n      </a>\n    }\n  }\n}\n@if (seeMoreControl) {\n  <div class=\"more-options\">\n    @for (cta of ctas; track cta) {\n      <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n        @if (cta?.icon) {\n          <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n        }\n        <p>{{ cta?.label }}</p>\n      </a>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;gap:16px}:host ngu-carousel{max-width:100vw}:host ngu-item a{margin-right:16px}:host .show-more{display:flex;justify-content:flex-end;width:100%;height:auto}:host .show-more button{color:var(--more-options-color);background-color:transparent;font-size:16px;font-weight:500;line-height:145%;letter-spacing:.32px;text-decoration-line:underline;text-align:center}.more-options{display:flex;flex-wrap:wrap;gap:16px}.more-options .cta{height:auto}.cta{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-width:150px;height:100%;min-height:150px;padding:24px 16px;border-radius:4px;border:1px solid var(--border-color);text-decoration:none}.cta p{color:var(--label-color);font-size:12px;font-weight:700;line-height:145%;letter-spacing:.32px;padding:0;margin:0;text-align:center}\n"], dependencies: [{ kind: "component", type: NguCarousel, selector: "ngu-carousel", inputs: ["inputs", "dataSource", "trackBy"], outputs: ["carouselLoad", "onMove"] }, { kind: "component", type: NguItemComponent, selector: "ngu-item" }, { kind: "directive", type: NguCarouselDefDirective, selector: "[nguCarouselDef]" }, { kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CtaWrapperComponent, isStandalone: true, selector: "rdsite-cta-wrapper", inputs: { title: "title", text: "text", ctas: "ctas", colors: "colors" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "style": "this.styleBinding", "class.wp-content-wrapper": "this.class" } }, viewQueries: [{ propertyName: "nguCarouselCtas", first: true, predicate: ["nguCarouselCtas"], descendants: true }], ngImport: i0, template: "@if (title) {\n  <h3 class=\"ctas-title\">{{ title }}</h3>\n}\n\n@if (text) {\n  <p class=\"ctas-text\" [innerHTML]=\"text\"></p>\n}\n\n@if (!seeMoreControl) {\n  <div class=\"ctas-wrapper\">\n    @if (!bannerControl) {\n      <ngu-carousel #nguCarouselCtas [inputs]=\"carouselCtasConfig\" [dataSource]=\"ctas\">\n        <ngu-item *nguCarouselDef=\"let cta; let i = index\">\n          <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n            @if (cta?.icon) {\n              <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n            }\n            <p>{{ cta?.label }}</p>\n          </a>\n        </ngu-item>\n      </ngu-carousel>\n      @if (ctas.length > 3) {\n        <div class=\"show-more\">\n          <button type=\"button\" (click)=\"moreOptions()\">Mais op\u00E7\u00F5es</button>\n        </div>\n      }\n    } @else {\n      @for (cta of ctas; track cta) {\n        <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n          @if (cta?.icon) {\n            <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n          }\n          <p>{{ cta?.label }}</p>\n        </a>\n      }\n    }\n  </div>\n}\n@if (seeMoreControl) {\n  <div class=\"more-options\">\n    @for (cta of ctas; track cta) {\n      <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n        @if (cta?.icon) {\n          <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n        }\n        <p>{{ cta?.label }}</p>\n      </a>\n    }\n  </div>\n}\n", styles: [":host{display:block}:host .ctas-title,:host .ctas-text{padding:0;margin:0}:host .ctas-title:not(:last-child),:host .ctas-text:not(:last-child){padding-bottom:0}:host .ctas-title{color:var(--title-color);font-size:29px;font-weight:500;line-height:38px;letter-spacing:-.58px;padding:0 24px;margin-bottom:24px}@media only screen and (min-width: 769px){:host .ctas-title{font-size:33px;line-height:43px;letter-spacing:-.66px;padding:0}}:host .ctas-text{color:rgb(var(--text-color));font-size:17px;font-weight:400;line-height:25px;padding:0 24px}@media only screen and (min-width: 769px){:host .ctas-text{font-size:19px;line-height:28px;padding:0}}:host .ctas-wrapper{display:flex;flex-wrap:wrap;gap:16px}@media only screen and (min-width: 769px){:host .ctas-wrapper{margin-top:80px}}:host .ctas-wrapper ngu-carousel{max-width:100vw}:host .ctas-wrapper ngu-item a{margin-right:16px}:host .ctas-wrapper .show-more{display:flex;justify-content:flex-end;width:100%;height:auto}:host .ctas-wrapper .show-more button{color:var(--more-options-color);background-color:transparent;font-size:16px;font-weight:500;line-height:145%;letter-spacing:.32px;text-decoration-line:underline;text-align:center}:host .more-options{display:flex;flex-wrap:wrap;gap:16px}:host .more-options .cta{height:auto}:host .cta{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-width:150px;height:100%;min-height:150px;padding:24px 16px;border-radius:4px;border:1px solid var(--border-color);text-decoration:none}:host .cta p{color:var(--label-color);font-size:12px;font-weight:700;line-height:145%;letter-spacing:.32px;padding:0;margin:0;text-align:center}\n"], dependencies: [{ kind: "component", type: NguCarousel, selector: "ngu-carousel", inputs: ["inputs", "dataSource", "trackBy"], outputs: ["carouselLoad", "onMove"] }, { kind: "component", type: NguItemComponent, selector: "ngu-item" }, { kind: "directive", type: NguCarouselDefDirective, selector: "[nguCarouselDef]" }, { kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CtaWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rdsite-cta-wrapper', standalone: true, imports: [NguCarousel, NguItemComponent, NguCarouselDefDirective, RdsiteLinkDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (!seeMoreControl) {\n  @if (!bannerControl) {\n    <ngu-carousel #nguCarouselCtas [inputs]=\"carouselCtasConfig\" [dataSource]=\"ctas\">\n      <ngu-item *nguCarouselDef=\"let cta; let i = index\">\n        <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n          @if (cta?.icon) {\n            <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n          }\n          <p>{{ cta?.label }}</p>\n        </a>\n      </ngu-item>\n    </ngu-carousel>\n    @if (ctas.length > 3) {\n      <div class=\"show-more\">\n        <button type=\"button\" (click)=\"moreOptions()\">Mais op\u00E7\u00F5es</button>\n      </div>\n    }\n  } @else {\n    @for (cta of ctas; track cta) {\n      <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n        @if (cta?.icon) {\n          <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n        }\n        <p>{{ cta?.label }}</p>\n      </a>\n    }\n  }\n}\n@if (seeMoreControl) {\n  <div class=\"more-options\">\n    @for (cta of ctas; track cta) {\n      <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n        @if (cta?.icon) {\n          <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n        }\n        <p>{{ cta?.label }}</p>\n      </a>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;gap:16px}:host ngu-carousel{max-width:100vw}:host ngu-item a{margin-right:16px}:host .show-more{display:flex;justify-content:flex-end;width:100%;height:auto}:host .show-more button{color:var(--more-options-color);background-color:transparent;font-size:16px;font-weight:500;line-height:145%;letter-spacing:.32px;text-decoration-line:underline;text-align:center}.more-options{display:flex;flex-wrap:wrap;gap:16px}.more-options .cta{height:auto}.cta{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-width:150px;height:100%;min-height:150px;padding:24px 16px;border-radius:4px;border:1px solid var(--border-color);text-decoration:none}.cta p{color:var(--label-color);font-size:12px;font-weight:700;line-height:145%;letter-spacing:.32px;padding:0;margin:0;text-align:center}\n"] }]
+            args: [{ selector: 'rdsite-cta-wrapper', standalone: true, imports: [NguCarousel, NguItemComponent, NguCarouselDefDirective, RdsiteLinkDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (title) {\n  <h3 class=\"ctas-title\">{{ title }}</h3>\n}\n\n@if (text) {\n  <p class=\"ctas-text\" [innerHTML]=\"text\"></p>\n}\n\n@if (!seeMoreControl) {\n  <div class=\"ctas-wrapper\">\n    @if (!bannerControl) {\n      <ngu-carousel #nguCarouselCtas [inputs]=\"carouselCtasConfig\" [dataSource]=\"ctas\">\n        <ngu-item *nguCarouselDef=\"let cta; let i = index\">\n          <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n            @if (cta?.icon) {\n              <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n            }\n            <p>{{ cta?.label }}</p>\n          </a>\n        </ngu-item>\n      </ngu-carousel>\n      @if (ctas.length > 3) {\n        <div class=\"show-more\">\n          <button type=\"button\" (click)=\"moreOptions()\">Mais op\u00E7\u00F5es</button>\n        </div>\n      }\n    } @else {\n      @for (cta of ctas; track cta) {\n        <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n          @if (cta?.icon) {\n            <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n          }\n          <p>{{ cta?.label }}</p>\n        </a>\n      }\n    }\n  </div>\n}\n@if (seeMoreControl) {\n  <div class=\"more-options\">\n    @for (cta of ctas; track cta) {\n      <a rdsitelink class=\"cta\" [href]=\"cta?.link\">\n        @if (cta?.icon) {\n          <cura-icon [attr.name]=\"cta?.icon\" size=\"24\" [color]=\"colors.icon\"></cura-icon>\n        }\n        <p>{{ cta?.label }}</p>\n      </a>\n    }\n  </div>\n}\n", styles: [":host{display:block}:host .ctas-title,:host .ctas-text{padding:0;margin:0}:host .ctas-title:not(:last-child),:host .ctas-text:not(:last-child){padding-bottom:0}:host .ctas-title{color:var(--title-color);font-size:29px;font-weight:500;line-height:38px;letter-spacing:-.58px;padding:0 24px;margin-bottom:24px}@media only screen and (min-width: 769px){:host .ctas-title{font-size:33px;line-height:43px;letter-spacing:-.66px;padding:0}}:host .ctas-text{color:rgb(var(--text-color));font-size:17px;font-weight:400;line-height:25px;padding:0 24px}@media only screen and (min-width: 769px){:host .ctas-text{font-size:19px;line-height:28px;padding:0}}:host .ctas-wrapper{display:flex;flex-wrap:wrap;gap:16px}@media only screen and (min-width: 769px){:host .ctas-wrapper{margin-top:80px}}:host .ctas-wrapper ngu-carousel{max-width:100vw}:host .ctas-wrapper ngu-item a{margin-right:16px}:host .ctas-wrapper .show-more{display:flex;justify-content:flex-end;width:100%;height:auto}:host .ctas-wrapper .show-more button{color:var(--more-options-color);background-color:transparent;font-size:16px;font-weight:500;line-height:145%;letter-spacing:.32px;text-decoration-line:underline;text-align:center}:host .more-options{display:flex;flex-wrap:wrap;gap:16px}:host .more-options .cta{height:auto}:host .cta{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-width:150px;height:100%;min-height:150px;padding:24px 16px;border-radius:4px;border:1px solid var(--border-color);text-decoration:none}:host .cta p{color:var(--label-color);font-size:12px;font-weight:700;line-height:145%;letter-spacing:.32px;padding:0;margin:0;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: CuraService }, { type: NguCarouselService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }], propDecorators: { ctas: [{
+                }] }], propDecorators: { title: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], ctas: [{
                 type: Input
             }], colors: [{
                 type: Input
@@ -18740,18 +18744,31 @@ class BreadcrumbsComponent {
     get breadcrumbs() {
         return this._breadcrumbs;
     }
-    constructor(curaService, libConfig, document) {
+    onWindowResize() {
+        this.setIsDesktop();
+    }
+    constructor(curaService, libConfig, document, platformId) {
         this.curaService = curaService;
         this.libConfig = libConfig;
         this.document = document;
-        this.fontColor = this.curaService.getColor('primary');
+        this.platformId = platformId;
+        this.labelIconColor = 'neutral-purewhite';
         this._breadcrumbs = [];
         this.breadcrumbsJsonTagId = 'breadcrumbsJSON';
-        this.style = {
-            '--font-size': this.curaService.getFontSize(),
-            '--font-color': this.fontColor,
-            '--symbol-color': this.curaService.getColor('neutral-dark'),
-        };
+    }
+    ngAfterViewInit() {
+        this.getColors(this.labelIconColor);
+        this.setIsDesktop();
+    }
+    setIsDesktop() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.isDesktop = window.innerWidth > MediaQueries.smallBreakpoint;
+        }
+    }
+    getColors(color) {
+        this.breadCrumbsElement.nativeElement.style.setProperty('--label-icon-color', this.curaService.getColor(color));
+        this.breadCrumbsElement.nativeElement.style.setProperty('--divider-color', this.curaService.getColor('neutral-light'));
+        this.breadCrumbsElement.nativeElement.style.setProperty('--disabled-color', this.curaService.getColor('neutral-dark'));
     }
     getUrl(urls = []) {
         return urls.join('');
@@ -18798,25 +18815,31 @@ class BreadcrumbsComponent {
             return jsonItem;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BreadcrumbsComponent, deps: [{ token: CuraService }, { token: LIB_CONFIG }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BreadcrumbsComponent, isStandalone: true, selector: "rdsite-breadcrumbs", inputs: { fontColor: "fontColor", breadcrumbs: "breadcrumbs" }, host: { properties: { "style": "this.style" } }, ngImport: i0, template: "@if (breadcrumbs.length) {\n  <nav class=\"breadcrumbs\" aria-label=\"breadcrumbs\">\n    <ul>\n      @for (item of breadcrumbs; track item.label; let i = $index; let last = $last; let first = $first) {\n        <li>\n          @if (item.url) {\n            <a [href]=\"item.url\" rdsitelink [class.last]=\"last\">\n              @if (first && item.icon) {\n                <cura-icon [name]=\"item.icon\" [color]=\"item.iconColor\" [size]=\"item.iconSize\" [disabled]=\"item.iconDisabled\"> </cura-icon>\n              }\n              {{ item.label }}\n            </a>\n          } @else {\n            @if (first && item.icon) {\n              <cura-icon [name]=\"item.icon\" [color]=\"item.iconColor\" [size]=\"item.iconSize\" [disabled]=\"item.iconDisabled\"> </cura-icon>\n            }\n            <p [class.last]=\"last\">{{ item.label }}</p>\n          }\n          @if (!last && breadcrumbs.length > 1) {\n            <span>/</span>\n          }\n        </li>\n      }\n    </ul>\n  </nav>\n}\n", styles: [".breadcrumbs{padding-block:16px;margin:0}ul{display:flex;justify-content:start;align-items:center;gap:8px;margin:0;padding:0}li{display:flex;justify-content:center;align-items:center;margin:0;padding:0;font-size:var(--font-size);font-weight:500;color:var(--font-color)}.last{color:var(--symbol-color);text-decoration:none}li span{margin-left:8px;color:var(--symbol-color)}a{display:flex;justify-content:space-between;align-items:flex-end;gap:4px;text-align:center;padding:0;text-decoration:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:1px;text-underline-offset:auto;text-decoration-color:var(--font-color);font-size:12px;color:var(--font-color)}a:hover{text-decoration:none;transition:text-decoration .5s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BreadcrumbsComponent, deps: [{ token: CuraService }, { token: LIB_CONFIG }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BreadcrumbsComponent, isStandalone: true, selector: "rdsite-breadcrumbs", inputs: { labelIconColor: "labelIconColor", breadcrumbs: "breadcrumbs" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "breadCrumbsElement", first: true, predicate: ["breadCrumbsElement"], descendants: true }], ngImport: i0, template: "@if (breadcrumbs.length) {\n  <nav class=\"breadcrumb\" #breadCrumbsElement>\n    <ol>\n      @if (isDesktop || breadcrumbs.length < 3) {\n        <ng-container *ngTemplateOutlet=\"Desktop\"></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"Mobile\"></ng-container>\n      }\n    </ol>\n  </nav>\n}\n\n<ng-template #Desktop>\n  @for (breadcrumb of breadcrumbs; track breadcrumb.label; let first = $first; let last = $last; let index = $index) {\n    <li>\n      @if (!last) {\n        <a rdsitelink [href]=\"getUrl(breadcrumb.url)\">\n          @if (first) {\n            <cura-icon name=\"home\" [attr.color]=\"labelIconColor\" size=\"16\"> </cura-icon>\n          }\n          <span>\n            {{ breadcrumb.label }}\n          </span>\n        </a>\n        <span class=\"divider\">/</span>\n      } @else {\n        <span [class.last-item]=\"last && !first\">\n          {{ breadcrumb.label }}\n        </span>\n      }\n    </li>\n  }\n</ng-template>\n\n<ng-template #Mobile>\n  @for (breadcrumb of breadcrumbs; track breadcrumb.label; let first = $first; let last = $last; let index = $index) {\n    <li>\n      @if (first) {\n        <a rdsitelink [href]=\"getUrl(breadcrumb.url)\">\n          <cura-icon name=\"home\" [attr.color]=\"labelIconColor\" size=\"16\"> </cura-icon>\n          <span>\n            {{ breadcrumb.label }}\n          </span>\n        </a>\n        <span class=\"divider\">/</span>\n      } @else if (index === breadcrumbs.length - 2) {\n        <span class=\"back\"><</span>\n        <a rdsitelink [href]=\"getUrl(breadcrumb.url)\">\n          <span>\n            {{ breadcrumb.label }}\n          </span>\n        </a>\n      }\n    </li>\n  }\n</ng-template>\n", styles: [".breadcrumb ol{display:flex}.breadcrumb ol li{display:flex;gap:8px}.breadcrumb ol li a{color:var(--label-icon-color);display:flex;gap:4px;text-decoration:none}.breadcrumb ol li a span{text-decoration:underline;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.72px}.breadcrumb ol li span.last-item{color:var(--disabled-color);text-decoration:none;pointer-events:none;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.72px}.breadcrumb ol li span.divider,.breadcrumb ol li span.back{color:var(--divider-color);padding-right:8px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.72px}.breadcrumb ol li span.back{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rdsite-breadcrumbs', standalone: true, imports: [CommonModule, RdsiteLinkDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (breadcrumbs.length) {\n  <nav class=\"breadcrumbs\" aria-label=\"breadcrumbs\">\n    <ul>\n      @for (item of breadcrumbs; track item.label; let i = $index; let last = $last; let first = $first) {\n        <li>\n          @if (item.url) {\n            <a [href]=\"item.url\" rdsitelink [class.last]=\"last\">\n              @if (first && item.icon) {\n                <cura-icon [name]=\"item.icon\" [color]=\"item.iconColor\" [size]=\"item.iconSize\" [disabled]=\"item.iconDisabled\"> </cura-icon>\n              }\n              {{ item.label }}\n            </a>\n          } @else {\n            @if (first && item.icon) {\n              <cura-icon [name]=\"item.icon\" [color]=\"item.iconColor\" [size]=\"item.iconSize\" [disabled]=\"item.iconDisabled\"> </cura-icon>\n            }\n            <p [class.last]=\"last\">{{ item.label }}</p>\n          }\n          @if (!last && breadcrumbs.length > 1) {\n            <span>/</span>\n          }\n        </li>\n      }\n    </ul>\n  </nav>\n}\n", styles: [".breadcrumbs{padding-block:16px;margin:0}ul{display:flex;justify-content:start;align-items:center;gap:8px;margin:0;padding:0}li{display:flex;justify-content:center;align-items:center;margin:0;padding:0;font-size:var(--font-size);font-weight:500;color:var(--font-color)}.last{color:var(--symbol-color);text-decoration:none}li span{margin-left:8px;color:var(--symbol-color)}a{display:flex;justify-content:space-between;align-items:flex-end;gap:4px;text-align:center;padding:0;text-decoration:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:1px;text-underline-offset:auto;text-decoration-color:var(--font-color);font-size:12px;color:var(--font-color)}a:hover{text-decoration:none;transition:text-decoration .5s ease-in-out}\n"] }]
+            args: [{ selector: 'rdsite-breadcrumbs', standalone: true, imports: [CommonModule, RdsiteLinkDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (breadcrumbs.length) {\n  <nav class=\"breadcrumb\" #breadCrumbsElement>\n    <ol>\n      @if (isDesktop || breadcrumbs.length < 3) {\n        <ng-container *ngTemplateOutlet=\"Desktop\"></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"Mobile\"></ng-container>\n      }\n    </ol>\n  </nav>\n}\n\n<ng-template #Desktop>\n  @for (breadcrumb of breadcrumbs; track breadcrumb.label; let first = $first; let last = $last; let index = $index) {\n    <li>\n      @if (!last) {\n        <a rdsitelink [href]=\"getUrl(breadcrumb.url)\">\n          @if (first) {\n            <cura-icon name=\"home\" [attr.color]=\"labelIconColor\" size=\"16\"> </cura-icon>\n          }\n          <span>\n            {{ breadcrumb.label }}\n          </span>\n        </a>\n        <span class=\"divider\">/</span>\n      } @else {\n        <span [class.last-item]=\"last && !first\">\n          {{ breadcrumb.label }}\n        </span>\n      }\n    </li>\n  }\n</ng-template>\n\n<ng-template #Mobile>\n  @for (breadcrumb of breadcrumbs; track breadcrumb.label; let first = $first; let last = $last; let index = $index) {\n    <li>\n      @if (first) {\n        <a rdsitelink [href]=\"getUrl(breadcrumb.url)\">\n          <cura-icon name=\"home\" [attr.color]=\"labelIconColor\" size=\"16\"> </cura-icon>\n          <span>\n            {{ breadcrumb.label }}\n          </span>\n        </a>\n        <span class=\"divider\">/</span>\n      } @else if (index === breadcrumbs.length - 2) {\n        <span class=\"back\"><</span>\n        <a rdsitelink [href]=\"getUrl(breadcrumb.url)\">\n          <span>\n            {{ breadcrumb.label }}\n          </span>\n        </a>\n      }\n    </li>\n  }\n</ng-template>\n", styles: [".breadcrumb ol{display:flex}.breadcrumb ol li{display:flex;gap:8px}.breadcrumb ol li a{color:var(--label-icon-color);display:flex;gap:4px;text-decoration:none}.breadcrumb ol li a span{text-decoration:underline;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.72px}.breadcrumb ol li span.last-item{color:var(--disabled-color);text-decoration:none;pointer-events:none;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.72px}.breadcrumb ol li span.divider,.breadcrumb ol li span.back{color:var(--divider-color);padding-right:8px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.72px}.breadcrumb ol li span.back{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: CuraService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIB_CONFIG]
                 }] }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }], propDecorators: { fontColor: [{
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { labelIconColor: [{
                 type: Input
             }], breadcrumbs: [{
                 type: Input
-            }], style: [{
-                type: HostBinding,
-                args: ['style']
+            }], breadCrumbsElement: [{
+                type: ViewChild,
+                args: ['breadCrumbsElement']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 var Estados;
@@ -18985,11 +19008,11 @@ class ErrorComponent {
         this.ctasSubscription?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorComponent, deps: [{ token: ErrorService }, { token: CuraService }, { token: LogService }, { token: SeoService }, { token: ServerResponseService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ErrorComponent, isStandalone: true, selector: "rdsite-error", inputs: { theme: "theme", type: "type", returnRoute: "returnRoute", returnLabel: "returnLabel", pageTitle: "pageTitle", component: "component", breadcrumbsItems: "breadcrumbsItems" }, viewQueries: [{ propertyName: "errorElement", first: true, predicate: ["errorElement"], descendants: true }], ngImport: i0, template: "<div class=\"rdsite-error\" #errorElement>\n  <rdsite-breadcrumbs [breadcrumbs]=\"breadcrumbsItems\" [fontColor]=\"ctasBorderColor\"></rdsite-breadcrumbs>\n  <div class=\"rdsite-error-container\">\n    <cura-label [color]=\"labelTextColor\">\n      {{ type === 'server-response' ? '500' : '404' }}\n    </cura-label>\n\n    <cura-heading color=\"neutral-black\" size=\"medium\" weight=\"bold\"> Algo deu errado :( </cura-heading>\n\n    <cura-paragraph color=\"neutral-black\" size=\"large\">\n      {{ responseText }}\n    </cura-paragraph>\n\n    @if (type === error.NOT_FOUND && returnRoute && returnLabel) {\n      <cura-button\n        rdsitelink\n        [href]=\"returnRoute\"\n        size=\"medium\"\n        type=\"button\"\n        [color]=\"curaButtonColor\"\n        font-color=\"light\"\n        icon-name=\"arrowLeft\"\n        target=\"_self\"\n      >\n        Voltar para {{ returnLabel }}\n      </cura-button>\n    }\n\n    @if (type === error.SERVER_RESPONSE) {\n      @if (curaButtonColor) {\n        <cura-button size=\"medium\" type=\"button\" (click)=\"reloadPage()\" [attr.color]=\"curaButtonColor\" font-color=\"light\" icon-name=\"arrowLeft\" target=\"_self\">\n          Atualizar p\u00E1gina novamente\n        </cura-button>\n      }\n\n      @if (returnLabel && returnRoute) {\n        <cura-paragraph color=\"neutral-black\" size=\"large\">ou</cura-paragraph>\n        @if (curaButtonOutlineColor) {\n          <cura-button-outline\n            rdsitelink\n            [href]=\"returnRoute\"\n            size=\"medium\"\n            type=\"button\"\n            [color]=\"curaButtonOutlineColor\"\n            icon-name=\"arrowLeft\"\n            target=\"_self\"\n          >\n            Voltar para {{ returnLabel }}\n          </cura-button-outline>\n        }\n      }\n    }\n\n    <cura-paragraph class=\"wrapper-text\" color=\"neutral-black\" size=\"large\"> Voc\u00EA pode tamb\u00E9m: </cura-paragraph>\n\n    @if (ctas.length > 0) {\n      <rdsite-cta-wrapper [ctas]=\"ctas\" [colors]=\"{ border: ctasBorderColor, icon: ctasIconColor }\"></rdsite-cta-wrapper>\n    }\n  </div>\n</div>\n", styles: [".richet-container,.rdsite-error-container,.rdsite-error rdsite-breadcrumbs{display:block;box-sizing:border-box;width:90%;position:relative;max-width:1366px;margin-left:auto;margin-right:auto}.rdsite-error{width:100%;background-color:var(--backgroundColor)}.rdsite-error-container{padding:48px 0 40px}.rdsite-error-container cura-label{width:fit-content;padding:var(--sizes-space-tiny, 4px);border-radius:var(--sizes-cornerRadius-nano, 2px);background:var(--labelColor)}.rdsite-error-container cura-heading{--margin-block: 40px}.rdsite-error-container cura-paragraph.wrapper-text{margin-top:80px}\n"], dependencies: [{ kind: "component", type: CtaWrapperComponent, selector: "rdsite-cta-wrapper", inputs: ["ctas", "colors"] }, { kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }, { kind: "component", type: BreadcrumbsComponent, selector: "rdsite-breadcrumbs", inputs: ["fontColor", "breadcrumbs"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ErrorComponent, isStandalone: true, selector: "rdsite-error", inputs: { theme: "theme", type: "type", returnRoute: "returnRoute", returnLabel: "returnLabel", pageTitle: "pageTitle", component: "component", breadcrumbsItems: "breadcrumbsItems" }, viewQueries: [{ propertyName: "errorElement", first: true, predicate: ["errorElement"], descendants: true }], ngImport: i0, template: "<div class=\"rdsite-error\" #errorElement>\n  <rdsite-breadcrumbs [breadcrumbs]=\"breadcrumbsItems\" [labelIconColor]=\"ctasIconColor\"></rdsite-breadcrumbs>\n  <div class=\"rdsite-error-container\">\n    <cura-label [color]=\"labelTextColor\">\n      {{ type === 'server-response' ? '500' : '404' }}\n    </cura-label>\n\n    <cura-heading color=\"neutral-black\" size=\"medium\" weight=\"bold\"> Algo deu errado :( </cura-heading>\n\n    <cura-paragraph color=\"neutral-black\" size=\"large\">\n      {{ responseText }}\n    </cura-paragraph>\n\n    @if (type === error.NOT_FOUND && returnRoute && returnLabel) {\n      <cura-button\n        rdsitelink\n        [href]=\"returnRoute\"\n        size=\"medium\"\n        type=\"button\"\n        [color]=\"curaButtonColor\"\n        font-color=\"light\"\n        icon-name=\"arrowLeft\"\n        target=\"_self\"\n      >\n        Voltar para {{ returnLabel }}\n      </cura-button>\n    }\n\n    @if (type === error.SERVER_RESPONSE) {\n      @if (curaButtonColor) {\n        <cura-button size=\"medium\" type=\"button\" (click)=\"reloadPage()\" [attr.color]=\"curaButtonColor\" font-color=\"light\" icon-name=\"arrowLeft\" target=\"_self\">\n          Atualizar p\u00E1gina novamente\n        </cura-button>\n      }\n\n      @if (returnLabel && returnRoute) {\n        <cura-paragraph color=\"neutral-black\" size=\"large\">ou</cura-paragraph>\n        @if (curaButtonOutlineColor) {\n          <cura-button-outline\n            rdsitelink\n            [href]=\"returnRoute\"\n            size=\"medium\"\n            type=\"button\"\n            [color]=\"curaButtonOutlineColor\"\n            icon-name=\"arrowLeft\"\n            target=\"_self\"\n          >\n            Voltar para {{ returnLabel }}\n          </cura-button-outline>\n        }\n      }\n    }\n\n    <cura-paragraph class=\"wrapper-text\" color=\"neutral-black\" size=\"large\"> Voc\u00EA pode tamb\u00E9m: </cura-paragraph>\n\n    @if (ctas.length > 0) {\n      <rdsite-cta-wrapper [ctas]=\"ctas\" [colors]=\"{ border: ctasBorderColor, icon: ctasIconColor }\"></rdsite-cta-wrapper>\n    }\n  </div>\n</div>\n", styles: [".rdsite-error{width:100%;background-color:var(--backgroundColor)}.rdsite-error rdsite-breadcrumbs{display:block;box-sizing:border-box;width:90%;position:relative;max-width:1366px;margin-left:auto;margin-right:auto}.rdsite-error rdsite-breadcrumbs.full-container{width:100%;max-width:100%}.rdsite-error-container{display:block;box-sizing:border-box;width:90%;position:relative;max-width:1366px;margin-left:auto;margin-right:auto;padding:48px 0 40px}.rdsite-error-container.full-container{width:100%;max-width:100%}.rdsite-error-container cura-label{width:fit-content;padding:var(--sizes-space-tiny, 4px);border-radius:var(--sizes-cornerRadius-nano, 2px);background:var(--labelColor)}.rdsite-error-container cura-heading{--margin-block: 40px}.rdsite-error-container cura-paragraph.wrapper-text{margin-top:80px}\n"], dependencies: [{ kind: "component", type: CtaWrapperComponent, selector: "rdsite-cta-wrapper", inputs: ["title", "text", "ctas", "colors"] }, { kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }, { kind: "component", type: BreadcrumbsComponent, selector: "rdsite-breadcrumbs", inputs: ["labelIconColor", "breadcrumbs"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rdsite-error', standalone: true, imports: [CtaWrapperComponent, RdsiteLinkDirective, BreadcrumbsComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"rdsite-error\" #errorElement>\n  <rdsite-breadcrumbs [breadcrumbs]=\"breadcrumbsItems\" [fontColor]=\"ctasBorderColor\"></rdsite-breadcrumbs>\n  <div class=\"rdsite-error-container\">\n    <cura-label [color]=\"labelTextColor\">\n      {{ type === 'server-response' ? '500' : '404' }}\n    </cura-label>\n\n    <cura-heading color=\"neutral-black\" size=\"medium\" weight=\"bold\"> Algo deu errado :( </cura-heading>\n\n    <cura-paragraph color=\"neutral-black\" size=\"large\">\n      {{ responseText }}\n    </cura-paragraph>\n\n    @if (type === error.NOT_FOUND && returnRoute && returnLabel) {\n      <cura-button\n        rdsitelink\n        [href]=\"returnRoute\"\n        size=\"medium\"\n        type=\"button\"\n        [color]=\"curaButtonColor\"\n        font-color=\"light\"\n        icon-name=\"arrowLeft\"\n        target=\"_self\"\n      >\n        Voltar para {{ returnLabel }}\n      </cura-button>\n    }\n\n    @if (type === error.SERVER_RESPONSE) {\n      @if (curaButtonColor) {\n        <cura-button size=\"medium\" type=\"button\" (click)=\"reloadPage()\" [attr.color]=\"curaButtonColor\" font-color=\"light\" icon-name=\"arrowLeft\" target=\"_self\">\n          Atualizar p\u00E1gina novamente\n        </cura-button>\n      }\n\n      @if (returnLabel && returnRoute) {\n        <cura-paragraph color=\"neutral-black\" size=\"large\">ou</cura-paragraph>\n        @if (curaButtonOutlineColor) {\n          <cura-button-outline\n            rdsitelink\n            [href]=\"returnRoute\"\n            size=\"medium\"\n            type=\"button\"\n            [color]=\"curaButtonOutlineColor\"\n            icon-name=\"arrowLeft\"\n            target=\"_self\"\n          >\n            Voltar para {{ returnLabel }}\n          </cura-button-outline>\n        }\n      }\n    }\n\n    <cura-paragraph class=\"wrapper-text\" color=\"neutral-black\" size=\"large\"> Voc\u00EA pode tamb\u00E9m: </cura-paragraph>\n\n    @if (ctas.length > 0) {\n      <rdsite-cta-wrapper [ctas]=\"ctas\" [colors]=\"{ border: ctasBorderColor, icon: ctasIconColor }\"></rdsite-cta-wrapper>\n    }\n  </div>\n</div>\n", styles: [".richet-container,.rdsite-error-container,.rdsite-error rdsite-breadcrumbs{display:block;box-sizing:border-box;width:90%;position:relative;max-width:1366px;margin-left:auto;margin-right:auto}.rdsite-error{width:100%;background-color:var(--backgroundColor)}.rdsite-error-container{padding:48px 0 40px}.rdsite-error-container cura-label{width:fit-content;padding:var(--sizes-space-tiny, 4px);border-radius:var(--sizes-cornerRadius-nano, 2px);background:var(--labelColor)}.rdsite-error-container cura-heading{--margin-block: 40px}.rdsite-error-container cura-paragraph.wrapper-text{margin-top:80px}\n"] }]
+            args: [{ selector: 'rdsite-error', standalone: true, imports: [CtaWrapperComponent, RdsiteLinkDirective, BreadcrumbsComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"rdsite-error\" #errorElement>\n  <rdsite-breadcrumbs [breadcrumbs]=\"breadcrumbsItems\" [labelIconColor]=\"ctasIconColor\"></rdsite-breadcrumbs>\n  <div class=\"rdsite-error-container\">\n    <cura-label [color]=\"labelTextColor\">\n      {{ type === 'server-response' ? '500' : '404' }}\n    </cura-label>\n\n    <cura-heading color=\"neutral-black\" size=\"medium\" weight=\"bold\"> Algo deu errado :( </cura-heading>\n\n    <cura-paragraph color=\"neutral-black\" size=\"large\">\n      {{ responseText }}\n    </cura-paragraph>\n\n    @if (type === error.NOT_FOUND && returnRoute && returnLabel) {\n      <cura-button\n        rdsitelink\n        [href]=\"returnRoute\"\n        size=\"medium\"\n        type=\"button\"\n        [color]=\"curaButtonColor\"\n        font-color=\"light\"\n        icon-name=\"arrowLeft\"\n        target=\"_self\"\n      >\n        Voltar para {{ returnLabel }}\n      </cura-button>\n    }\n\n    @if (type === error.SERVER_RESPONSE) {\n      @if (curaButtonColor) {\n        <cura-button size=\"medium\" type=\"button\" (click)=\"reloadPage()\" [attr.color]=\"curaButtonColor\" font-color=\"light\" icon-name=\"arrowLeft\" target=\"_self\">\n          Atualizar p\u00E1gina novamente\n        </cura-button>\n      }\n\n      @if (returnLabel && returnRoute) {\n        <cura-paragraph color=\"neutral-black\" size=\"large\">ou</cura-paragraph>\n        @if (curaButtonOutlineColor) {\n          <cura-button-outline\n            rdsitelink\n            [href]=\"returnRoute\"\n            size=\"medium\"\n            type=\"button\"\n            [color]=\"curaButtonOutlineColor\"\n            icon-name=\"arrowLeft\"\n            target=\"_self\"\n          >\n            Voltar para {{ returnLabel }}\n          </cura-button-outline>\n        }\n      }\n    }\n\n    <cura-paragraph class=\"wrapper-text\" color=\"neutral-black\" size=\"large\"> Voc\u00EA pode tamb\u00E9m: </cura-paragraph>\n\n    @if (ctas.length > 0) {\n      <rdsite-cta-wrapper [ctas]=\"ctas\" [colors]=\"{ border: ctasBorderColor, icon: ctasIconColor }\"></rdsite-cta-wrapper>\n    }\n  </div>\n</div>\n", styles: [".rdsite-error{width:100%;background-color:var(--backgroundColor)}.rdsite-error rdsite-breadcrumbs{display:block;box-sizing:border-box;width:90%;position:relative;max-width:1366px;margin-left:auto;margin-right:auto}.rdsite-error rdsite-breadcrumbs.full-container{width:100%;max-width:100%}.rdsite-error-container{display:block;box-sizing:border-box;width:90%;position:relative;max-width:1366px;margin-left:auto;margin-right:auto;padding:48px 0 40px}.rdsite-error-container.full-container{width:100%;max-width:100%}.rdsite-error-container cura-label{width:fit-content;padding:var(--sizes-space-tiny, 4px);border-radius:var(--sizes-cornerRadius-nano, 2px);background:var(--labelColor)}.rdsite-error-container cura-heading{--margin-block: 40px}.rdsite-error-container cura-paragraph.wrapper-text{margin-top:80px}\n"] }]
         }], ctorParameters: () => [{ type: ErrorService }, { type: CuraService }, { type: LogService }, { type: SeoService }, { type: ServerResponseService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -19013,75 +19036,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class PageHeaderComponent {
-    get headerClasses() {
-        return [this.layoutStyle === 'aligned' ? 'aligned-content' : '', this.useBackgroundImage ? 'with-bg-image' : ''].filter(Boolean).join(' ');
-    }
-    get shouldShowHeaderImage() {
-        return this.useBackgroundImage && !!this.headerImageUrl;
-    }
-    get shouldShowBreadcrumbs() {
-        return this.showBreadcrumbs && !!this.breadcrumbsItems?.length;
-    }
-    get hostStyles() {
-        return {
-            '--header-bg-color': this.curaService.getColor('primary-dark'),
-            '--header-title-color': this.curaService.getColor('neutral-purewhite'),
-            '--font-color': this.curaService.getColor('neutral-purewhite'),
-        };
-    }
     constructor(curaService) {
         this.curaService = curaService;
-        this.layoutStyle = 'aligned';
         this.pageTitle = '';
-        this.pageSubtitle = '';
-        this.useBackgroundImage = false;
-        this.showBreadcrumbs = true;
-        this.breadcrumbsItems = [];
+        this.pageHeaderText = '';
+        this.hasPadding = false;
+        this.breadcrumbs = [];
+        this.style = {
+            '--spacing': this.curaService.getSpacing(),
+            '--color': this.curaService.getColor('neutral-purewhite'),
+            '--bg-color': this.curaService.getColor('primary-base'),
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageHeaderComponent, deps: [{ token: CuraService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PageHeaderComponent, isStandalone: true, selector: "rdsite-page-header", inputs: { layoutStyle: "layoutStyle", pageTitle: "pageTitle", pageSubtitle: "pageSubtitle", headerImageUrl: "headerImageUrl", useBackgroundImage: "useBackgroundImage", showBreadcrumbs: "showBreadcrumbs", breadcrumbsItems: "breadcrumbsItems" }, host: { properties: { "style": "this.hostStyles" } }, ngImport: i0, template: "<header class=\"page-header\" [ngClass]=\"headerClasses\">\n  <!-- Imagem de fundo do cabe\u00E7alho (opcional) -->\n  @if (shouldShowHeaderImage) {\n    <div class=\"header-background\">\n      <img [src]=\"headerImageUrl\" [alt]=\"pageTitle\" />\n    </div>\n  }\n\n  <!-- Conte\u00FAdo do cabe\u00E7alho -->\n  <div class=\"header-content\">\n    <!-- Breadcrumbs -->\n    @if (shouldShowBreadcrumbs) {\n      <rdsite-breadcrumbs [items]=\"breadcrumbsItems\"></rdsite-breadcrumbs>\n    }\n\n    <!-- T\u00EDtulo e subt\u00EDtulo -->\n    @if (pageTitle) {\n      <cura-display color=\"neutral-purewhite\" margin-block=\"12\">\n        {{ pageTitle }}\n      </cura-display>\n    }\n\n    @if (pageSubtitle) {\n      <cura-paragraph color=\"neutral-purewhite\" [innerHTML]=\"pageSubtitle\"></cura-paragraph>\n    }\n\n    <!-- Conte\u00FAdo customizado -->\n    <ng-content></ng-content>\n  </div>\n</header>\n", styles: [".page-header{position:relative;width:100%;min-height:272px;display:flex;flex-direction:column;justify-content:center;background-color:var(--header-bg-color);padding:50px 140px 50px 142px}.page-header::ng-deep *{font-family:Gotham,Arial,Helvetica,sans-serif}.page-header.with-bg-image{background-color:transparent}.page-header.with-bg-image .header-background img{position:absolute;top:0;right:0;height:100%;max-width:100%;object-fit:cover;opacity:.7}.page-header .header-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-color:var(--header-bg-color)}.page-header .header-background img{width:100%;height:100%;object-fit:cover;opacity:.3}.page-header .header-content{position:relative;z-index:1;width:100%;max-width:688px!important;text-align:left}@media (max-width: 361px){.page-header{padding:20px 15px;min-height:148px}}@media (min-width: 361px) and (max-width: 769px){.page-header{padding:30px 40px}}@media (min-width: 769px) and (max-width: 1024px){.page-header{padding:40px 90px}}@media (min-width: 1024px) and (max-width: 1366px){.page-header{padding:45px 52px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BreadcrumbsComponent, selector: "rdsite-breadcrumbs", inputs: ["fontColor", "breadcrumbs"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PageHeaderComponent, isStandalone: true, selector: "rdsite-page-header", inputs: { pageTitle: "pageTitle", pageHeaderText: "pageHeaderText", hasPadding: "hasPadding", breadcrumbs: "breadcrumbs" }, host: { properties: { "style": "this.style" } }, ngImport: i0, template: "<header class=\"page-header\" [ngClass]=\"{ 'more-padding': hasPadding }\">\n  <div class=\"page-header-content container\">\n    @if (breadcrumbs.length) {\n      <rdsite-breadcrumbs [breadcrumbs]=\"breadcrumbs\"></rdsite-breadcrumbs>\n    }\n    @if (pageTitle) {\n      <cura-display level=\"1\" color=\"neutral-purewhite\" margin-block=\"0\">{{ pageTitle }}</cura-display>\n    }\n    @if (pageHeaderText) {\n      <cura-paragraph color=\"neutral-purewhite\" margin-block=\"0\">{{ pageHeaderText }}</cura-paragraph>\n    }\n    <ng-content></ng-content>\n  </div>\n</header>\n", styles: [".page-header{background-color:var(--bg-color)}.page-header-content{display:flex;flex-direction:column;gap:16px;padding:30px 0;display:block;box-sizing:border-box;width:90%;position:relative;max-width:1366px;margin-left:auto;margin-right:auto}.page-header-content.full-container{width:100%;max-width:100%}@media screen and (min-width: 769px){.page-header-content{gap:12px;padding:50px 0}}@media screen and (min-width: 769px){.page-header.more-padding{padding-inline:102px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BreadcrumbsComponent, selector: "rdsite-breadcrumbs", inputs: ["labelIconColor", "breadcrumbs"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rdsite-page-header', standalone: true, imports: [CommonModule, BreadcrumbsComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<header class=\"page-header\" [ngClass]=\"headerClasses\">\n  <!-- Imagem de fundo do cabe\u00E7alho (opcional) -->\n  @if (shouldShowHeaderImage) {\n    <div class=\"header-background\">\n      <img [src]=\"headerImageUrl\" [alt]=\"pageTitle\" />\n    </div>\n  }\n\n  <!-- Conte\u00FAdo do cabe\u00E7alho -->\n  <div class=\"header-content\">\n    <!-- Breadcrumbs -->\n    @if (shouldShowBreadcrumbs) {\n      <rdsite-breadcrumbs [items]=\"breadcrumbsItems\"></rdsite-breadcrumbs>\n    }\n\n    <!-- T\u00EDtulo e subt\u00EDtulo -->\n    @if (pageTitle) {\n      <cura-display color=\"neutral-purewhite\" margin-block=\"12\">\n        {{ pageTitle }}\n      </cura-display>\n    }\n\n    @if (pageSubtitle) {\n      <cura-paragraph color=\"neutral-purewhite\" [innerHTML]=\"pageSubtitle\"></cura-paragraph>\n    }\n\n    <!-- Conte\u00FAdo customizado -->\n    <ng-content></ng-content>\n  </div>\n</header>\n", styles: [".page-header{position:relative;width:100%;min-height:272px;display:flex;flex-direction:column;justify-content:center;background-color:var(--header-bg-color);padding:50px 140px 50px 142px}.page-header::ng-deep *{font-family:Gotham,Arial,Helvetica,sans-serif}.page-header.with-bg-image{background-color:transparent}.page-header.with-bg-image .header-background img{position:absolute;top:0;right:0;height:100%;max-width:100%;object-fit:cover;opacity:.7}.page-header .header-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-color:var(--header-bg-color)}.page-header .header-background img{width:100%;height:100%;object-fit:cover;opacity:.3}.page-header .header-content{position:relative;z-index:1;width:100%;max-width:688px!important;text-align:left}@media (max-width: 361px){.page-header{padding:20px 15px;min-height:148px}}@media (min-width: 361px) and (max-width: 769px){.page-header{padding:30px 40px}}@media (min-width: 769px) and (max-width: 1024px){.page-header{padding:40px 90px}}@media (min-width: 1024px) and (max-width: 1366px){.page-header{padding:45px 52px}}\n"] }]
-        }], ctorParameters: () => [{ type: CuraService }], propDecorators: { layoutStyle: [{
-                type: Input
-            }], pageTitle: [{
-                type: Input
-            }], pageSubtitle: [{
+            args: [{ selector: 'rdsite-page-header', standalone: true, imports: [CommonModule, BreadcrumbsComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<header class=\"page-header\" [ngClass]=\"{ 'more-padding': hasPadding }\">\n  <div class=\"page-header-content container\">\n    @if (breadcrumbs.length) {\n      <rdsite-breadcrumbs [breadcrumbs]=\"breadcrumbs\"></rdsite-breadcrumbs>\n    }\n    @if (pageTitle) {\n      <cura-display level=\"1\" color=\"neutral-purewhite\" margin-block=\"0\">{{ pageTitle }}</cura-display>\n    }\n    @if (pageHeaderText) {\n      <cura-paragraph color=\"neutral-purewhite\" margin-block=\"0\">{{ pageHeaderText }}</cura-paragraph>\n    }\n    <ng-content></ng-content>\n  </div>\n</header>\n", styles: [".page-header{background-color:var(--bg-color)}.page-header-content{display:flex;flex-direction:column;gap:16px;padding:30px 0;display:block;box-sizing:border-box;width:90%;position:relative;max-width:1366px;margin-left:auto;margin-right:auto}.page-header-content.full-container{width:100%;max-width:100%}@media screen and (min-width: 769px){.page-header-content{gap:12px;padding:50px 0}}@media screen and (min-width: 769px){.page-header.more-padding{padding-inline:102px}}\n"] }]
+        }], ctorParameters: () => [{ type: CuraService }], propDecorators: { pageTitle: [{
                 type: Input
-            }], headerImageUrl: [{
+            }], pageHeaderText: [{
                 type: Input
-            }], useBackgroundImage: [{
+            }], hasPadding: [{
                 type: Input
-            }], showBreadcrumbs: [{
-                type: Input
-            }], breadcrumbsItems: [{
+            }], breadcrumbs: [{
                 type: Input
-            }], hostStyles: [{
+            }], style: [{
                 type: HostBinding,
                 args: ['style']
             }] } });
 
 class PageTemplateSidebarComponent {
+    constructor() {
+        this.header = null;
+        this.beforeContent = null;
+        this.content = null;
+        this.afterContent = null;
+        this.sidebarContent = null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageTemplateSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PageTemplateSidebarComponent, isStandalone: true, selector: "rdsite-page-template-sidebar", inputs: { headerContent: "headerContent", beforeContent: "beforeContent", mainContent: "mainContent", mainSidebar: "mainSidebar", sidebarContent: "sidebarContent", afterContent: "afterContent" }, ngImport: i0, template: "<div class=\"page-template-sidebar\">\n  <!-- Header Section -->\n  <div class=\"header-content\">\n    @if (headerContent) {\n      <ng-container [ngTemplateOutlet]=\"headerContent\"></ng-container>\n    }\n  </div>\n\n  <!-- Before Content Section -->\n  <div class=\"before-content\">\n    @if (beforeContent) {\n      <ng-container [ngTemplateOutlet]=\"beforeContent\"></ng-container>\n    }\n  </div>\n\n  <!-- Main Content -->\n  <div class=\"main-content\">\n    @if (mainContent) {\n      <ng-container [ngTemplateOutlet]=\"mainContent\"></ng-container>\n    }\n  </div>\n\n  <!-- Sidebars -->\n  <div class=\"main-sidebar\">\n    @if (mainSidebar) {\n      <ng-container [ngTemplateOutlet]=\"mainSidebar\"></ng-container>\n    }\n  </div>\n  <div class=\"secondary-sidebar\">\n    @if (sidebarContent) {\n      <ng-container [ngTemplateOutlet]=\"sidebarContent\"></ng-container>\n    }\n  </div>\n\n  <!-- After Content -->\n  <div class=\"after-content\">\n    @if (afterContent) {\n      <ng-container [ngTemplateOutlet]=\"afterContent\"></ng-container>\n    }\n  </div>\n</div>\n", styles: [".page-template-sidebar{display:grid;grid-template-columns:733px 292px;grid-template-rows:auto auto;grid-auto-rows:auto;gap:0px 53px;grid-auto-flow:row dense;padding:0 146px 0 142px;box-sizing:border-box}.page-template-sidebar .header-content{grid-area:1/1/2/4;margin:0 -146px 0 -142px;width:calc(100% + 288px)}.page-template-sidebar .main-sidebar{grid-area:1/3/3/4}.page-template-sidebar .secondary-sidebar{grid-area:3/3/5/4}.page-template-sidebar .before-content{grid-area:2/1/3/3}.page-template-sidebar .main-content{grid-area:3/1/5/3}.page-template-sidebar .after-content{grid-area:5/1/6/4}@media (max-width: 361px){.page-template-sidebar{padding:0 15px;min-height:148px}}@media (min-width: 361px) and (max-width: 769px){.page-template-sidebar{padding:0 40px}}@media (min-width: 769px) and (max-width: 1024px){.page-template-sidebar{padding:0 90px}}@media (min-width: 1024px) and (max-width: 1366px){.page-template-sidebar{padding:0 52px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PageTemplateSidebarComponent, isStandalone: true, selector: "rdsite-page-template-sidebar", inputs: { header: "header", beforeContent: "beforeContent", content: "content", afterContent: "afterContent", sidebarContent: "sidebarContent" }, ngImport: i0, template: "<div class=\"rdsite-template-header\">\n  @if (header) {\n    <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n  }\n</div>\n\n<div class=\"rdsite-template-before-content\">\n  @if (beforeContent) {\n    <ng-container *ngTemplateOutlet=\"beforeContent\"></ng-container>\n  }\n</div>\n\n<div class=\"rdsite-template-container\">\n  @if (content) {\n    <section class=\"rdsite-content-container\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </section>\n  }\n\n  @if (sidebarContent) {\n    <aside class=\"rdsite-sidebar-content-container\">\n      <ng-container *ngTemplateOutlet=\"sidebarContent\"></ng-container>\n    </aside>\n  }\n</div>\n\n<div class=\"rdsite-template-after-content\">\n  @if (afterContent) {\n    <ng-container *ngTemplateOutlet=\"afterContent\"></ng-container>\n  }\n</div>\n", styles: [":host{display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:minmax(5%,1fr) minmax(auto,90%) minmax(5%,1fr);grid-template-areas:\"header header header\" \"beforecontent beforecontent beforecontent\" \". pagecontent .\" \"aftercontent aftercontent aftercontent\"}@media screen and (min-width: 992px){:host{grid-template-columns:minmax(5%,1fr) minmax(auto,1366px) minmax(5%,1fr)}}:host .rdsite-template-header{grid-area:header}:host .rdsite-template-before-content{grid-area:beforecontent}:host .rdsite-template-container{grid-area:pagecontent}:host .rdsite-template-after-content{grid-area:aftercontent}:host .rdsite-template-container{display:grid;position:relative;width:100%;grid-template-rows:1fr;grid-template-columns:3fr 20px 1fr;grid-template-areas:\"content . sidebarcontent\"}@media screen and (max-width: 992px){:host .rdsite-template-container{grid-template-rows:auto;grid-template-columns:1fr;grid-template-areas:\"content\" \"sidebarcontent\"}}:host .rdsite-template-container .rdsite-content-container{grid-area:content;position:relative;max-width:100%}:host .rdsite-template-container .rdsite-sidebar-content-container{grid-area:sidebarcontent;position:relative;z-index:3001}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageTemplateSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rdsite-page-template-sidebar', standalone: true, imports: [CommonModule], template: "<div class=\"page-template-sidebar\">\n  <!-- Header Section -->\n  <div class=\"header-content\">\n    @if (headerContent) {\n      <ng-container [ngTemplateOutlet]=\"headerContent\"></ng-container>\n    }\n  </div>\n\n  <!-- Before Content Section -->\n  <div class=\"before-content\">\n    @if (beforeContent) {\n      <ng-container [ngTemplateOutlet]=\"beforeContent\"></ng-container>\n    }\n  </div>\n\n  <!-- Main Content -->\n  <div class=\"main-content\">\n    @if (mainContent) {\n      <ng-container [ngTemplateOutlet]=\"mainContent\"></ng-container>\n    }\n  </div>\n\n  <!-- Sidebars -->\n  <div class=\"main-sidebar\">\n    @if (mainSidebar) {\n      <ng-container [ngTemplateOutlet]=\"mainSidebar\"></ng-container>\n    }\n  </div>\n  <div class=\"secondary-sidebar\">\n    @if (sidebarContent) {\n      <ng-container [ngTemplateOutlet]=\"sidebarContent\"></ng-container>\n    }\n  </div>\n\n  <!-- After Content -->\n  <div class=\"after-content\">\n    @if (afterContent) {\n      <ng-container [ngTemplateOutlet]=\"afterContent\"></ng-container>\n    }\n  </div>\n</div>\n", styles: [".page-template-sidebar{display:grid;grid-template-columns:733px 292px;grid-template-rows:auto auto;grid-auto-rows:auto;gap:0px 53px;grid-auto-flow:row dense;padding:0 146px 0 142px;box-sizing:border-box}.page-template-sidebar .header-content{grid-area:1/1/2/4;margin:0 -146px 0 -142px;width:calc(100% + 288px)}.page-template-sidebar .main-sidebar{grid-area:1/3/3/4}.page-template-sidebar .secondary-sidebar{grid-area:3/3/5/4}.page-template-sidebar .before-content{grid-area:2/1/3/3}.page-template-sidebar .main-content{grid-area:3/1/5/3}.page-template-sidebar .after-content{grid-area:5/1/6/4}@media (max-width: 361px){.page-template-sidebar{padding:0 15px;min-height:148px}}@media (min-width: 361px) and (max-width: 769px){.page-template-sidebar{padding:0 40px}}@media (min-width: 769px) and (max-width: 1024px){.page-template-sidebar{padding:0 90px}}@media (min-width: 1024px) and (max-width: 1366px){.page-template-sidebar{padding:0 52px}}\n"] }]
-        }], propDecorators: { headerContent: [{
+            args: [{ selector: 'rdsite-page-template-sidebar', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"rdsite-template-header\">\n  @if (header) {\n    <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n  }\n</div>\n\n<div class=\"rdsite-template-before-content\">\n  @if (beforeContent) {\n    <ng-container *ngTemplateOutlet=\"beforeContent\"></ng-container>\n  }\n</div>\n\n<div class=\"rdsite-template-container\">\n  @if (content) {\n    <section class=\"rdsite-content-container\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </section>\n  }\n\n  @if (sidebarContent) {\n    <aside class=\"rdsite-sidebar-content-container\">\n      <ng-container *ngTemplateOutlet=\"sidebarContent\"></ng-container>\n    </aside>\n  }\n</div>\n\n<div class=\"rdsite-template-after-content\">\n  @if (afterContent) {\n    <ng-container *ngTemplateOutlet=\"afterContent\"></ng-container>\n  }\n</div>\n", styles: [":host{display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:minmax(5%,1fr) minmax(auto,90%) minmax(5%,1fr);grid-template-areas:\"header header header\" \"beforecontent beforecontent beforecontent\" \". pagecontent .\" \"aftercontent aftercontent aftercontent\"}@media screen and (min-width: 992px){:host{grid-template-columns:minmax(5%,1fr) minmax(auto,1366px) minmax(5%,1fr)}}:host .rdsite-template-header{grid-area:header}:host .rdsite-template-before-content{grid-area:beforecontent}:host .rdsite-template-container{grid-area:pagecontent}:host .rdsite-template-after-content{grid-area:aftercontent}:host .rdsite-template-container{display:grid;position:relative;width:100%;grid-template-rows:1fr;grid-template-columns:3fr 20px 1fr;grid-template-areas:\"content . sidebarcontent\"}@media screen and (max-width: 992px){:host .rdsite-template-container{grid-template-rows:auto;grid-template-columns:1fr;grid-template-areas:\"content\" \"sidebarcontent\"}}:host .rdsite-template-container .rdsite-content-container{grid-area:content;position:relative;max-width:100%}:host .rdsite-template-container .rdsite-sidebar-content-container{grid-area:sidebarcontent;position:relative;z-index:3001}\n"] }]
+        }], propDecorators: { header: [{
                 type: Input
             }], beforeContent: [{
                 type: Input
-            }], mainContent: [{
+            }], content: [{
                 type: Input
-            }], mainSidebar: [{
+            }], afterContent: [{
                 type: Input
             }], sidebarContent: [{
                 type: Input
-            }], afterContent: [{
-                type: Input
             }] } });
 
 class FilterLetterAndTermsComponent {
@@ -19108,6 +19117,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+class ScrollService {
+    constructor() {
+        this.document = inject(DOCUMENT);
+    }
+    scrollToElement(elementId, offset = 0, smooth = true) {
+        const element = this.document.getElementById(elementId);
+        if (!element) {
+            console.warn(`Elemento com id "${elementId}" não encontrado`);
+            return false;
+        }
+        try {
+            const titleElement = element.querySelector('h1, h2, h3, h4, h5, h6') || element;
+            const titlePosition = titleElement.getBoundingClientRect().top + window.scrollY;
+            const stickyHeaderHeight = document.querySelector('.nav-container')?.clientHeight || 0;
+            const offsetPosition = titlePosition - offset - stickyHeaderHeight - 16;
+            window.scrollTo({
+                top: offsetPosition,
+                behavior: smooth ? 'smooth' : 'auto',
+            });
+            return true;
+        }
+        catch (error) {
+            console.error('Erro ao fazer scroll para o elemento:', error);
+            return false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScrollService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScrollService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SectionNavigationComponent {
+    set navigationSections(value) {
+        if (!value?.length) {
+            throw new Error('O SectionNavigationComponent requer pelo menos uma seção.');
+        }
+        this.sections.set(value);
+        if (!this.activeSection()) {
+            this.activeSection.set(value[0].id);
+        }
+    }
+    set navigationConfig(value) {
+        this.config.set(value);
+    }
+    constructor() {
+        this.scrollService = inject(ScrollService);
+        this.curaService = inject(CuraService);
+        this.sections = signal([]);
+        this.config = signal(undefined);
+        this.activeSection = signal('');
+        this.ariaLabel = 'Page Navigation';
+        this.sectionChange = new EventEmitter();
+        effect(() => {
+            const sections = this.sections();
+            if (sections.length && !this.activeSection()) {
+                this.activeSection.set(sections[0].id);
+            }
+        });
+    }
+    ngOnInit() {
+        const sections = this.sections();
+        if (!sections.length) {
+            throw new Error('O SectionNavigationComponent requer pelo menos uma seção.');
+        }
+        if (!this.activeSection()) {
+            this.activeSection.set(sections[0].id);
+        }
+    }
+    onSectionClick(section) {
+        const config = this.config();
+        const success = this.scrollService.scrollToElement(section.id, config?.offsetTop ?? 56, config?.smoothScroll ?? true);
+        if (success) {
+            this.activeSection.set(section.id);
+            this.sectionChange.emit(section);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SectionNavigationComponent, isStandalone: true, selector: "rdsite-section-navigation", inputs: { navigationSections: "navigationSections", navigationConfig: "navigationConfig", ariaLabel: "ariaLabel" }, outputs: { sectionChange: "sectionChange" }, ngImport: i0, template: "<nav [class]=\"config()?.containerClass || 'nav-container'\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"nav-inner\">\n    <ul class=\"nav-menu\" role=\"menubar\">\n      @for (section of sections(); track section.id) {\n        <li role=\"none\">\n          @if (activeSection() === section.id) {\n            <cura-button\n              size=\"small\"\n              type=\"button\"\n              color=\"primary\"\n              font-color=\"light\"\n              target=\"_self\"\n              role=\"menuitem\"\n              [id]=\"'nav-' + section.id\"\n              [attr.aria-current]=\"'page'\"\n              (click)=\"onSectionClick(section)\"\n              [attr.aria-label]=\"'Navigate to ' + section.title\"\n            >\n              {{ section.title }}\n            </cura-button>\n          } @else {\n            <cura-button-transparent\n              size=\"small\"\n              type=\"button\"\n              color=\"neutral\"\n              font-color=\"dark\"\n              target=\"_self\"\n              text-align=\"center\"\n              role=\"menuitem\"\n              [id]=\"'nav-' + section.id\"\n              [attr.aria-current]=\"null\"\n              (click)=\"onSectionClick(section)\"\n              [attr.aria-label]=\"'Navigate to ' + section.title\"\n            >\n              {{ section.title }}\n            </cura-button-transparent>\n          }\n        </li>\n      }\n    </ul>\n  </div>\n</nav>\n", styles: [":host{display:block}.nav-container{width:100%;position:sticky;top:0;left:0;z-index:50;background-color:#fff;border-bottom:1px solid #b7b7b7;box-shadow:0 4px 8px #26262629;padding-top:26px}.nav-inner{max-width:1152px;margin-left:auto;margin-right:auto}.nav-menu{display:flex;list-style:none;padding:0;margin:0}cura-button{position:relative;--border-radius: 4px 4px 0 0 !important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdsite-section-navigation', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<nav [class]=\"config()?.containerClass || 'nav-container'\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"nav-inner\">\n    <ul class=\"nav-menu\" role=\"menubar\">\n      @for (section of sections(); track section.id) {\n        <li role=\"none\">\n          @if (activeSection() === section.id) {\n            <cura-button\n              size=\"small\"\n              type=\"button\"\n              color=\"primary\"\n              font-color=\"light\"\n              target=\"_self\"\n              role=\"menuitem\"\n              [id]=\"'nav-' + section.id\"\n              [attr.aria-current]=\"'page'\"\n              (click)=\"onSectionClick(section)\"\n              [attr.aria-label]=\"'Navigate to ' + section.title\"\n            >\n              {{ section.title }}\n            </cura-button>\n          } @else {\n            <cura-button-transparent\n              size=\"small\"\n              type=\"button\"\n              color=\"neutral\"\n              font-color=\"dark\"\n              target=\"_self\"\n              text-align=\"center\"\n              role=\"menuitem\"\n              [id]=\"'nav-' + section.id\"\n              [attr.aria-current]=\"null\"\n              (click)=\"onSectionClick(section)\"\n              [attr.aria-label]=\"'Navigate to ' + section.title\"\n            >\n              {{ section.title }}\n            </cura-button-transparent>\n          }\n        </li>\n      }\n    </ul>\n  </div>\n</nav>\n", styles: [":host{display:block}.nav-container{width:100%;position:sticky;top:0;left:0;z-index:50;background-color:#fff;border-bottom:1px solid #b7b7b7;box-shadow:0 4px 8px #26262629;padding-top:26px}.nav-inner{max-width:1152px;margin-left:auto;margin-right:auto}.nav-menu{display:flex;list-style:none;padding:0;margin:0}cura-button{position:relative;--border-radius: 4px 4px 0 0 !important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { navigationSections: [{
+                type: Input,
+                args: [{ required: true }]
+            }], navigationConfig: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], sectionChange: [{
+                type: Output
+            }] } });
+
 // Components
 
 class PhonePipe {
@@ -19134,5 +19241,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractModalComponent, AbstractModalDrawerComponent, AlgoliaComponent, AlgoliaSearchApiService, AlgoliaService, BreadcrumbsComponent, CtaWrapperComponent, CuraService, EnumDoencaTaxonomy, EnumDoencaTaxonomyCat, ErrorComponent, ErrorService, Errors, Estados, FilterLetterAndTermsComponent, FooterComponent, FooterDisclaimerComponent, FooterMenuComponent, FooterMenuItemComponent, FooterSocialMediasComponent, HeaderActionMenuComponent, HeaderAuxMenuComponent, HeaderAuxMenuContainerComponent, HeaderAuxMenuItemComponent, HeaderAuxMenuItemDropdownComponent, HeaderComponent, HeaderLogoComponent, HeaderMainMenuComponent, HeaderMainMenuItemComponent, HeaderMainMenuItemDropdownComponent, HeaderService, HeaderSideMenuComponent, HeaderSideMenuItemComponent, HttpClientService, IconCuraDefaultType, LIB_CONFIG, LoadScreenComponent, LogService, ModalDrawerService, ModalService, NguCarouselService, OverlayComponent, PageHeaderComponent, PageTemplateSidebarComponent, PhonePipe, PhoneService, PrivacyToolsService, REQUEST, RESPONSE, RdsiteClickOutsideDirective, RdsiteLinkDirective, RdsiteModalComponentStyle, RdsiteModalDrawerComponentStyle, RdsitePhoneModalDirective, SSR_CURA_API, SearchComponent, SeoService, ServerResponseService, SideCtasBottomComponent, SideCtasComponent, SideCtasRightBottomComponent, SideCtasRightMiddleComponent, SideCtasRightTopComponent, SiteBackendService, SsrLoadingService, Themes, TransferStateService, WhatsappComponent, formatPhone, getSiteUrl, removeDuplicateObjectsFromArray, removeDuplicateValuesFromArray, removeHtmlTags, toQueryParams };
+export { AbstractModalComponent, AbstractModalDrawerComponent, AlgoliaComponent, AlgoliaSearchApiService, AlgoliaService, BreadcrumbsComponent, CtaWrapperComponent, CuraService, EnumDoencaTaxonomy, EnumDoencaTaxonomyCat, ErrorComponent, ErrorService, Errors, Estados, FilterLetterAndTermsComponent, FooterComponent, FooterDisclaimerComponent, FooterMenuComponent, FooterMenuItemComponent, FooterSocialMediasComponent, HeaderActionMenuComponent, HeaderAuxMenuComponent, HeaderAuxMenuContainerComponent, HeaderAuxMenuItemComponent, HeaderAuxMenuItemDropdownComponent, HeaderComponent, HeaderLogoComponent, HeaderMainMenuComponent, HeaderMainMenuItemComponent, HeaderMainMenuItemDropdownComponent, HeaderService, HeaderSideMenuComponent, HeaderSideMenuItemComponent, HttpClientService, IconCuraDefaultType, LIB_CONFIG, LoadScreenComponent, LogService, ModalDrawerService, ModalService, NguCarouselService, OverlayComponent, PageHeaderComponent, PageTemplateSidebarComponent, PhonePipe, PhoneService, PrivacyToolsService, REQUEST, RESPONSE, RdsiteClickOutsideDirective, RdsiteLinkDirective, RdsiteModalComponentStyle, RdsiteModalDrawerComponentStyle, RdsitePhoneModalDirective, SSR_CURA_API, SearchComponent, SectionNavigationComponent, SeoService, ServerResponseService, SideCtasBottomComponent, SideCtasComponent, SideCtasRightBottomComponent, SideCtasRightMiddleComponent, SideCtasRightTopComponent, SiteBackendService, SsrLoadingService, Themes, TransferStateService, WhatsappComponent, formatPhone, getSiteUrl, removeDuplicateObjectsFromArray, removeDuplicateValuesFromArray, removeHtmlTags, toQueryParams };
 //# sourceMappingURL=rededor-site-front-end-lib.mjs.map