@rededor/site-front-end-lib 1.3.21 → 1.3.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/filters/filter-generic/filter-generic.component.mjs +4 -3
- package/esm2022/lib/components/side-ctas/components/side-ctas-bottom/side-ctas-bottom.component.mjs +4 -3
- package/esm2022/lib/components/side-ctas/components/side-ctas-right-middle/side-ctas-right-middle.component.mjs +4 -3
- package/esm2022/lib/components/whatsapp/whatsapp.component.mjs +4 -3
- package/fesm2022/rededor-site-front-end-lib.mjs +12 -8
- package/fesm2022/rededor-site-front-end-lib.mjs.map +1 -1
- package/lib/components/filters/filter-generic/filter-generic.component.d.ts +1 -0
- package/lib/components/side-ctas/components/side-ctas-bottom/side-ctas-bottom.component.d.ts +1 -0
- package/lib/components/side-ctas/components/side-ctas-right-middle/side-ctas-right-middle.component.d.ts +1 -0
- package/lib/components/whatsapp/whatsapp.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3245,6 +3245,7 @@ class SideCtasBottomComponent {
|
|
|
3245
3245
|
this._ctas = [];
|
|
3246
3246
|
this.sideCtaBottomItemClick = new EventEmitter();
|
|
3247
3247
|
this.style = {
|
|
3248
|
+
'--font-family': this.curaService.getFontFamily(''),
|
|
3248
3249
|
'--font-color': this.curaService.getColor('neutral-black'),
|
|
3249
3250
|
'--bg-color': this.curaService.getColor('primary-dark'),
|
|
3250
3251
|
'--bg-cta-color': this.curaService.getColor('accent-base'),
|
|
@@ -3256,11 +3257,11 @@ class SideCtasBottomComponent {
|
|
|
3256
3257
|
this.sideCtaBottomItemClick.emit(event);
|
|
3257
3258
|
}
|
|
3258
3259
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SideCtasBottomComponent, deps: [{ token: CuraService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SideCtasBottomComponent, isStandalone: true, selector: "rdsite-side-ctas-bottom", inputs: { ctas: "ctas" }, outputs: { sideCtaBottomItemClick: "sideCtaBottomItemClick" }, host: { properties: { "style": "this.style" } }, ngImport: i0, template: "@if (ctas.length) {\r\n @for (cta of ctas; track cta.text) {\r\n <a [href]=\"cta.url\" rdsitelink (click)=\"sideCtaBottomItemClicked($event)\">\r\n <cura-icon [attr.name]=\"cta.icon\" size=\"20\" color=\"neutral-black\"></cura-icon>\r\n <span>{{ cta.text }}</span>\r\n </a>\r\n }\r\n}\r\n", styles: [":host{display:flex;width:100%;height:100%;gap:2px;background-color:var(--bg-color)}:host a{display:flex;align-items:center;justify-content:center;flex:1 1 0;gap:12px;padding:0 10px;background-color:var(--bg-cta-color);color:var(--font-color);transition:background-color .25s linear!important;text-decoration:none;font-weight:500}:host a span{color:var(--font-color)}:host a cura-icon{--color: var(--font-color) !important}:host a:hover{background-color:var(--bg-cta-hover-color);color:var(--font-color)!important}:host a:active{background-color:var(--bg-cta-active-color);color:var(--font-color)!important}@media only screen and (min-width: 1024px){:host{width:448px}:host a{gap:16px;padding:0 16px}}\n"], dependencies: [{ kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }] }); }
|
|
3260
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SideCtasBottomComponent, isStandalone: true, selector: "rdsite-side-ctas-bottom", inputs: { ctas: "ctas" }, outputs: { sideCtaBottomItemClick: "sideCtaBottomItemClick" }, host: { properties: { "style": "this.style" } }, ngImport: i0, template: "@if (ctas.length) {\r\n @for (cta of ctas; track cta.text) {\r\n <a [href]=\"cta.url\" rdsitelink (click)=\"sideCtaBottomItemClicked($event)\">\r\n <cura-icon [attr.name]=\"cta.icon\" size=\"20\" color=\"neutral-black\"></cura-icon>\r\n <span>{{ cta.text }}</span>\r\n </a>\r\n }\r\n}\r\n", styles: [":host{display:flex;width:100%;height:100%;gap:2px;background-color:var(--bg-color)}:host *{font-family:var(--font-family)}:host a{display:flex;align-items:center;justify-content:center;flex:1 1 0;gap:12px;padding:0 10px;background-color:var(--bg-cta-color);color:var(--font-color);transition:background-color .25s linear!important;text-decoration:none;font-weight:500}:host a span{color:var(--font-color)}:host a cura-icon{--color: var(--font-color) !important}:host a:hover{background-color:var(--bg-cta-hover-color);color:var(--font-color)!important}:host a:active{background-color:var(--bg-cta-active-color);color:var(--font-color)!important}@media only screen and (min-width: 1024px){:host{width:448px}:host a{gap:16px;padding:0 16px}}\n"], dependencies: [{ kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }] }); }
|
|
3260
3261
|
}
|
|
3261
3262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SideCtasBottomComponent, decorators: [{
|
|
3262
3263
|
type: Component,
|
|
3263
|
-
args: [{ selector: 'rdsite-side-ctas-bottom', standalone: true, imports: [RdsiteLinkDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (ctas.length) {\r\n @for (cta of ctas; track cta.text) {\r\n <a [href]=\"cta.url\" rdsitelink (click)=\"sideCtaBottomItemClicked($event)\">\r\n <cura-icon [attr.name]=\"cta.icon\" size=\"20\" color=\"neutral-black\"></cura-icon>\r\n <span>{{ cta.text }}</span>\r\n </a>\r\n }\r\n}\r\n", styles: [":host{display:flex;width:100%;height:100%;gap:2px;background-color:var(--bg-color)}:host a{display:flex;align-items:center;justify-content:center;flex:1 1 0;gap:12px;padding:0 10px;background-color:var(--bg-cta-color);color:var(--font-color);transition:background-color .25s linear!important;text-decoration:none;font-weight:500}:host a span{color:var(--font-color)}:host a cura-icon{--color: var(--font-color) !important}:host a:hover{background-color:var(--bg-cta-hover-color);color:var(--font-color)!important}:host a:active{background-color:var(--bg-cta-active-color);color:var(--font-color)!important}@media only screen and (min-width: 1024px){:host{width:448px}:host a{gap:16px;padding:0 16px}}\n"] }]
|
|
3264
|
+
args: [{ selector: 'rdsite-side-ctas-bottom', standalone: true, imports: [RdsiteLinkDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (ctas.length) {\r\n @for (cta of ctas; track cta.text) {\r\n <a [href]=\"cta.url\" rdsitelink (click)=\"sideCtaBottomItemClicked($event)\">\r\n <cura-icon [attr.name]=\"cta.icon\" size=\"20\" color=\"neutral-black\"></cura-icon>\r\n <span>{{ cta.text }}</span>\r\n </a>\r\n }\r\n}\r\n", styles: [":host{display:flex;width:100%;height:100%;gap:2px;background-color:var(--bg-color)}:host *{font-family:var(--font-family)}:host a{display:flex;align-items:center;justify-content:center;flex:1 1 0;gap:12px;padding:0 10px;background-color:var(--bg-cta-color);color:var(--font-color);transition:background-color .25s linear!important;text-decoration:none;font-weight:500}:host a span{color:var(--font-color)}:host a cura-icon{--color: var(--font-color) !important}:host a:hover{background-color:var(--bg-cta-hover-color);color:var(--font-color)!important}:host a:active{background-color:var(--bg-cta-active-color);color:var(--font-color)!important}@media only screen and (min-width: 1024px){:host{width:448px}:host a{gap:16px;padding:0 16px}}\n"] }]
|
|
3264
3265
|
}], ctorParameters: () => [{ type: CuraService }], propDecorators: { ctas: [{
|
|
3265
3266
|
type: Input
|
|
3266
3267
|
}], sideCtaBottomItemClick: [{
|
|
@@ -3282,6 +3283,7 @@ class WhatsappComponent {
|
|
|
3282
3283
|
this.whatsappClick = new EventEmitter();
|
|
3283
3284
|
this.active = false;
|
|
3284
3285
|
this.style = {
|
|
3286
|
+
'--font-family': this.curaService.getFontFamily(''),
|
|
3285
3287
|
'--border-top-color': this.curaService.getColor('primary-light'),
|
|
3286
3288
|
'--bg-color': this.curaService.getColor('primary-darker'),
|
|
3287
3289
|
'--bg-button': this.bgColor,
|
|
@@ -3294,11 +3296,11 @@ class WhatsappComponent {
|
|
|
3294
3296
|
this.whatsappClick.emit(event);
|
|
3295
3297
|
}
|
|
3296
3298
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WhatsappComponent, deps: [{ token: CuraService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3297
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: WhatsappComponent, isStandalone: true, selector: "rdsite-whatsapp", inputs: { link: "link", imgUrl: "imgUrl", text: "text", bgColor: "bgColor", bgHover: "bgHover", borderTop: "borderTop" }, outputs: { whatsappClick: "whatsappClick" }, host: { properties: { "style": "this.style" } }, ngImport: i0, template: "@if (link) {\r\n <a\r\n class=\"rdsite-whatsapp\"\r\n [ngClass]=\"{ 'border-top': borderTop }\"\r\n [href]=\"link\"\r\n rdsitelink\r\n (mouseenter)=\"active = true\"\r\n (mouseleave)=\"active = false\"\r\n (click)=\"whatsappClicked($event)\"\r\n >\r\n @if (imgUrl) {\r\n <div class=\"image\" [ngStyle]=\"{ 'background-image': imgUrl }\"></div>\r\n }\r\n <div class=\"icon\" [ngClass]=\"{ active: active }\">\r\n <cura-icon name=\"whatsapp\" size=\"16\" color=\"neutral-purewhite\"></cura-icon>\r\n </div>\r\n\r\n <div class=\"rdsite-whatsapp-animation\" [ngClass]=\"{ active: active }\">\r\n <cura-icon name=\"whatsapp\" size=\"16\" color=\"neutral-purewhite\"></cura-icon>\r\n <span>{{ text }}</span>\r\n </div>\r\n </a>\r\n}\r\n", styles: [":host{display:flex;justify-content:flex-end;width:536px;position:absolute;bottom:0;right:0;pointer-events:none}:host a.rdsite-whatsapp{box-sizing:content-box;display:block;position:relative;width:88px;height:88px;transition:background-color .25s linear!important;pointer-events:all;background-color:var(--bg-color)}:host a.rdsite-whatsapp .image{position:absolute;right:0;bottom:0;width:88px;height:88px;background-size:cover;background-position:50%}:host a.rdsite-whatsapp .icon{width:24px;height:24px;background-color:var(--bg-button);border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;bottom:8px;right:8px}:host a.rdsite-whatsapp .icon.active{display:none}:host .rdsite-whatsapp-animation{background-color:var(--bg-button);width:0px;height:88px;position:absolute;bottom:0;right:88px;transition:width .5s ease-out,background-color .25s linear;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:16px;color:var(--color-button)}:host .rdsite-whatsapp-animation cura-icon{--color: var(--color-button) !important}:host .rdsite-whatsapp-animation span{text-wrap:nowrap}:host .rdsite-whatsapp-animation.active{width:calc(100vw - 88px);pointer-events:all}:host .rdsite-whatsapp-animation:hover{background-color:var(--bg-button-hover);color:var(--color-button-hover)}:host .rdsite-whatsapp-animation:hover cura-icon{--color: var(--color-button-hover) !important}@media only screen and (min-width: 1024px){:host a.rdsite-whatsapp.border-top{border-top:4px solid var(--border-top-color)}:host a.rdsite-whatsapp .rdsite-whatsapp-animation.active{width:448px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }] }); }
|
|
3299
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: WhatsappComponent, isStandalone: true, selector: "rdsite-whatsapp", inputs: { link: "link", imgUrl: "imgUrl", text: "text", bgColor: "bgColor", bgHover: "bgHover", borderTop: "borderTop" }, outputs: { whatsappClick: "whatsappClick" }, host: { properties: { "style": "this.style" } }, ngImport: i0, template: "@if (link) {\r\n <a\r\n class=\"rdsite-whatsapp\"\r\n [ngClass]=\"{ 'border-top': borderTop }\"\r\n [href]=\"link\"\r\n rdsitelink\r\n (mouseenter)=\"active = true\"\r\n (mouseleave)=\"active = false\"\r\n (click)=\"whatsappClicked($event)\"\r\n >\r\n @if (imgUrl) {\r\n <div class=\"image\" [ngStyle]=\"{ 'background-image': imgUrl }\"></div>\r\n }\r\n <div class=\"icon\" [ngClass]=\"{ active: active }\">\r\n <cura-icon name=\"whatsapp\" size=\"16\" color=\"neutral-purewhite\"></cura-icon>\r\n </div>\r\n\r\n <div class=\"rdsite-whatsapp-animation\" [ngClass]=\"{ active: active }\">\r\n <cura-icon name=\"whatsapp\" size=\"16\" color=\"neutral-purewhite\"></cura-icon>\r\n <span>{{ text }}</span>\r\n </div>\r\n </a>\r\n}\r\n", styles: [":host{display:flex;justify-content:flex-end;width:536px;position:absolute;bottom:0;right:0;pointer-events:none}:host *{font-family:var(--font-family)}:host a.rdsite-whatsapp{box-sizing:content-box;display:block;position:relative;width:88px;height:88px;transition:background-color .25s linear!important;pointer-events:all;background-color:var(--bg-color)}:host a.rdsite-whatsapp .image{position:absolute;right:0;bottom:0;width:88px;height:88px;background-size:cover;background-position:50%}:host a.rdsite-whatsapp .icon{width:24px;height:24px;background-color:var(--bg-button);border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;bottom:8px;right:8px}:host a.rdsite-whatsapp .icon.active{display:none}:host .rdsite-whatsapp-animation{background-color:var(--bg-button);width:0px;height:88px;position:absolute;bottom:0;right:88px;transition:width .5s ease-out,background-color .25s linear;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:16px;color:var(--color-button)}:host .rdsite-whatsapp-animation cura-icon{--color: var(--color-button) !important}:host .rdsite-whatsapp-animation span{text-wrap:nowrap}:host .rdsite-whatsapp-animation.active{width:calc(100vw - 88px);pointer-events:all}:host .rdsite-whatsapp-animation:hover{background-color:var(--bg-button-hover);color:var(--color-button-hover)}:host .rdsite-whatsapp-animation:hover cura-icon{--color: var(--color-button-hover) !important}@media only screen and (min-width: 1024px){:host a.rdsite-whatsapp.border-top{border-top:4px solid var(--border-top-color)}:host a.rdsite-whatsapp .rdsite-whatsapp-animation.active{width:448px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }] }); }
|
|
3298
3300
|
}
|
|
3299
3301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WhatsappComponent, decorators: [{
|
|
3300
3302
|
type: Component,
|
|
3301
|
-
args: [{ selector: 'rdsite-whatsapp', standalone: true, imports: [CommonModule, RdsiteLinkDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (link) {\r\n <a\r\n class=\"rdsite-whatsapp\"\r\n [ngClass]=\"{ 'border-top': borderTop }\"\r\n [href]=\"link\"\r\n rdsitelink\r\n (mouseenter)=\"active = true\"\r\n (mouseleave)=\"active = false\"\r\n (click)=\"whatsappClicked($event)\"\r\n >\r\n @if (imgUrl) {\r\n <div class=\"image\" [ngStyle]=\"{ 'background-image': imgUrl }\"></div>\r\n }\r\n <div class=\"icon\" [ngClass]=\"{ active: active }\">\r\n <cura-icon name=\"whatsapp\" size=\"16\" color=\"neutral-purewhite\"></cura-icon>\r\n </div>\r\n\r\n <div class=\"rdsite-whatsapp-animation\" [ngClass]=\"{ active: active }\">\r\n <cura-icon name=\"whatsapp\" size=\"16\" color=\"neutral-purewhite\"></cura-icon>\r\n <span>{{ text }}</span>\r\n </div>\r\n </a>\r\n}\r\n", styles: [":host{display:flex;justify-content:flex-end;width:536px;position:absolute;bottom:0;right:0;pointer-events:none}:host a.rdsite-whatsapp{box-sizing:content-box;display:block;position:relative;width:88px;height:88px;transition:background-color .25s linear!important;pointer-events:all;background-color:var(--bg-color)}:host a.rdsite-whatsapp .image{position:absolute;right:0;bottom:0;width:88px;height:88px;background-size:cover;background-position:50%}:host a.rdsite-whatsapp .icon{width:24px;height:24px;background-color:var(--bg-button);border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;bottom:8px;right:8px}:host a.rdsite-whatsapp .icon.active{display:none}:host .rdsite-whatsapp-animation{background-color:var(--bg-button);width:0px;height:88px;position:absolute;bottom:0;right:88px;transition:width .5s ease-out,background-color .25s linear;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:16px;color:var(--color-button)}:host .rdsite-whatsapp-animation cura-icon{--color: var(--color-button) !important}:host .rdsite-whatsapp-animation span{text-wrap:nowrap}:host .rdsite-whatsapp-animation.active{width:calc(100vw - 88px);pointer-events:all}:host .rdsite-whatsapp-animation:hover{background-color:var(--bg-button-hover);color:var(--color-button-hover)}:host .rdsite-whatsapp-animation:hover cura-icon{--color: var(--color-button-hover) !important}@media only screen and (min-width: 1024px){:host a.rdsite-whatsapp.border-top{border-top:4px solid var(--border-top-color)}:host a.rdsite-whatsapp .rdsite-whatsapp-animation.active{width:448px}}\n"] }]
|
|
3303
|
+
args: [{ selector: 'rdsite-whatsapp', standalone: true, imports: [CommonModule, RdsiteLinkDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (link) {\r\n <a\r\n class=\"rdsite-whatsapp\"\r\n [ngClass]=\"{ 'border-top': borderTop }\"\r\n [href]=\"link\"\r\n rdsitelink\r\n (mouseenter)=\"active = true\"\r\n (mouseleave)=\"active = false\"\r\n (click)=\"whatsappClicked($event)\"\r\n >\r\n @if (imgUrl) {\r\n <div class=\"image\" [ngStyle]=\"{ 'background-image': imgUrl }\"></div>\r\n }\r\n <div class=\"icon\" [ngClass]=\"{ active: active }\">\r\n <cura-icon name=\"whatsapp\" size=\"16\" color=\"neutral-purewhite\"></cura-icon>\r\n </div>\r\n\r\n <div class=\"rdsite-whatsapp-animation\" [ngClass]=\"{ active: active }\">\r\n <cura-icon name=\"whatsapp\" size=\"16\" color=\"neutral-purewhite\"></cura-icon>\r\n <span>{{ text }}</span>\r\n </div>\r\n </a>\r\n}\r\n", styles: [":host{display:flex;justify-content:flex-end;width:536px;position:absolute;bottom:0;right:0;pointer-events:none}:host *{font-family:var(--font-family)}:host a.rdsite-whatsapp{box-sizing:content-box;display:block;position:relative;width:88px;height:88px;transition:background-color .25s linear!important;pointer-events:all;background-color:var(--bg-color)}:host a.rdsite-whatsapp .image{position:absolute;right:0;bottom:0;width:88px;height:88px;background-size:cover;background-position:50%}:host a.rdsite-whatsapp .icon{width:24px;height:24px;background-color:var(--bg-button);border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;bottom:8px;right:8px}:host a.rdsite-whatsapp .icon.active{display:none}:host .rdsite-whatsapp-animation{background-color:var(--bg-button);width:0px;height:88px;position:absolute;bottom:0;right:88px;transition:width .5s ease-out,background-color .25s linear;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:16px;color:var(--color-button)}:host .rdsite-whatsapp-animation cura-icon{--color: var(--color-button) !important}:host .rdsite-whatsapp-animation span{text-wrap:nowrap}:host .rdsite-whatsapp-animation.active{width:calc(100vw - 88px);pointer-events:all}:host .rdsite-whatsapp-animation:hover{background-color:var(--bg-button-hover);color:var(--color-button-hover)}:host .rdsite-whatsapp-animation:hover cura-icon{--color: var(--color-button-hover) !important}@media only screen and (min-width: 1024px){:host a.rdsite-whatsapp.border-top{border-top:4px solid var(--border-top-color)}:host a.rdsite-whatsapp .rdsite-whatsapp-animation.active{width:448px}}\n"] }]
|
|
3302
3304
|
}], ctorParameters: () => [{ type: CuraService }], propDecorators: { link: [{
|
|
3303
3305
|
type: Input
|
|
3304
3306
|
}], imgUrl: [{
|
|
@@ -3365,6 +3367,7 @@ class SideCtasRightMiddleComponent {
|
|
|
3365
3367
|
this._ctas = [];
|
|
3366
3368
|
this.sideCtaRightMiddleItemClick = new EventEmitter();
|
|
3367
3369
|
this.style = {
|
|
3370
|
+
'--font-family': this.curaService.getFontFamily(''),
|
|
3368
3371
|
'--icon-bg-color': this.curaService.getColor('primary-base'),
|
|
3369
3372
|
'--font-color': this.curaService.getColor('primary-lighter'),
|
|
3370
3373
|
'--font-hover': this.curaService.getColor('neutral-white'),
|
|
@@ -3375,11 +3378,11 @@ class SideCtasRightMiddleComponent {
|
|
|
3375
3378
|
this.sideCtaRightMiddleItemClick.emit(event);
|
|
3376
3379
|
}
|
|
3377
3380
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SideCtasRightMiddleComponent, deps: [{ token: CuraService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3378
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SideCtasRightMiddleComponent, isStandalone: true, selector: "rdsite-side-ctas-right-middle", inputs: { ctas: "ctas" }, outputs: { sideCtaRightMiddleItemClick: "sideCtaRightMiddleItemClick" }, host: { properties: { "style": "this.style" } }, ngImport: i0, template: "@if (ctas.length) {\r\n @for (cta of ctas; track cta.text) {\r\n <a class=\"right-middle-cta\" [href]=\"cta.url\" rdsitelink (click)=\"sideCtaRightMiddleItemClicked($event)\">\r\n <div class=\"right-middle-cta-icon\">\r\n <cura-icon [attr.name]=\"cta.icon\" size=\"24\" color=\"neutral-purewhite\"></cura-icon>\r\n </div>\r\n <span>{{ cta.text }}</span>\r\n </a>\r\n }\r\n}\r\n", styles: [":host{display:none;gap:16px;padding:0 8px}:host .right-middle-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:500}:host .right-middle-cta-icon{width:36px;height:36px;background-color:var(--icon-bg-color);border-radius:50%;display:flex;align-items:center;justify-content:center}:host .right-middle-cta span{text-align:center;color:var(--font-color);font-size:12px;line-height:135%;letter-spacing:.72px}:host .right-middle-cta:hover span{color:var(--font-hover)!important}:host .right-middle-cta:active span{color:var(--font-active)!important}@media only screen and (min-width: 1024px){:host{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }] }); }
|
|
3381
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SideCtasRightMiddleComponent, isStandalone: true, selector: "rdsite-side-ctas-right-middle", inputs: { ctas: "ctas" }, outputs: { sideCtaRightMiddleItemClick: "sideCtaRightMiddleItemClick" }, host: { properties: { "style": "this.style" } }, ngImport: i0, template: "@if (ctas.length) {\r\n @for (cta of ctas; track cta.text) {\r\n <a class=\"right-middle-cta\" [href]=\"cta.url\" rdsitelink (click)=\"sideCtaRightMiddleItemClicked($event)\">\r\n <div class=\"right-middle-cta-icon\">\r\n <cura-icon [attr.name]=\"cta.icon\" size=\"24\" color=\"neutral-purewhite\"></cura-icon>\r\n </div>\r\n <span>{{ cta.text }}</span>\r\n </a>\r\n }\r\n}\r\n", styles: [":host{display:none;gap:16px;padding:0 8px}:host *{font-family:var(--font-family)}:host .right-middle-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:500}:host .right-middle-cta-icon{width:36px;height:36px;background-color:var(--icon-bg-color);border-radius:50%;display:flex;align-items:center;justify-content:center}:host .right-middle-cta span{text-align:center;color:var(--font-color);font-size:12px;line-height:135%;letter-spacing:.72px}:host .right-middle-cta:hover span{color:var(--font-hover)!important}:host .right-middle-cta:active span{color:var(--font-active)!important}@media only screen and (min-width: 1024px){:host{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: RdsiteLinkDirective, selector: "[rdsitelink]", inputs: ["anchorAdjustment", "anchorExtraAdjustment", "phonemodal"] }] }); }
|
|
3379
3382
|
}
|
|
3380
3383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SideCtasRightMiddleComponent, decorators: [{
|
|
3381
3384
|
type: Component,
|
|
3382
|
-
args: [{ selector: 'rdsite-side-ctas-right-middle', standalone: true, imports: [RdsiteLinkDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (ctas.length) {\r\n @for (cta of ctas; track cta.text) {\r\n <a class=\"right-middle-cta\" [href]=\"cta.url\" rdsitelink (click)=\"sideCtaRightMiddleItemClicked($event)\">\r\n <div class=\"right-middle-cta-icon\">\r\n <cura-icon [attr.name]=\"cta.icon\" size=\"24\" color=\"neutral-purewhite\"></cura-icon>\r\n </div>\r\n <span>{{ cta.text }}</span>\r\n </a>\r\n }\r\n}\r\n", styles: [":host{display:none;gap:16px;padding:0 8px}:host .right-middle-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:500}:host .right-middle-cta-icon{width:36px;height:36px;background-color:var(--icon-bg-color);border-radius:50%;display:flex;align-items:center;justify-content:center}:host .right-middle-cta span{text-align:center;color:var(--font-color);font-size:12px;line-height:135%;letter-spacing:.72px}:host .right-middle-cta:hover span{color:var(--font-hover)!important}:host .right-middle-cta:active span{color:var(--font-active)!important}@media only screen and (min-width: 1024px){:host{display:flex;flex-direction:column}}\n"] }]
|
|
3385
|
+
args: [{ selector: 'rdsite-side-ctas-right-middle', standalone: true, imports: [RdsiteLinkDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (ctas.length) {\r\n @for (cta of ctas; track cta.text) {\r\n <a class=\"right-middle-cta\" [href]=\"cta.url\" rdsitelink (click)=\"sideCtaRightMiddleItemClicked($event)\">\r\n <div class=\"right-middle-cta-icon\">\r\n <cura-icon [attr.name]=\"cta.icon\" size=\"24\" color=\"neutral-purewhite\"></cura-icon>\r\n </div>\r\n <span>{{ cta.text }}</span>\r\n </a>\r\n }\r\n}\r\n", styles: [":host{display:none;gap:16px;padding:0 8px}:host *{font-family:var(--font-family)}:host .right-middle-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:500}:host .right-middle-cta-icon{width:36px;height:36px;background-color:var(--icon-bg-color);border-radius:50%;display:flex;align-items:center;justify-content:center}:host .right-middle-cta span{text-align:center;color:var(--font-color);font-size:12px;line-height:135%;letter-spacing:.72px}:host .right-middle-cta:hover span{color:var(--font-hover)!important}:host .right-middle-cta:active span{color:var(--font-active)!important}@media only screen and (min-width: 1024px){:host{display:flex;flex-direction:column}}\n"] }]
|
|
3383
3386
|
}], ctorParameters: () => [{ type: CuraService }], propDecorators: { ctas: [{
|
|
3384
3387
|
type: Input
|
|
3385
3388
|
}], sideCtaRightMiddleItemClick: [{
|
|
@@ -4083,6 +4086,7 @@ class FilterGenericComponent {
|
|
|
4083
4086
|
'--neutral-light': this.curaService.getColor('neutral-light'),
|
|
4084
4087
|
'--neutral-lighter': this.curaService.getColor('neutral-lighter'),
|
|
4085
4088
|
'--neutral-purewhite': this.curaService.getColor('neutral-purewhite'),
|
|
4089
|
+
'--primary-base': this.curaService.getColor('primary-base'),
|
|
4086
4090
|
'--primary-lighter': this.curaService.getColor('primary-lighter'),
|
|
4087
4091
|
};
|
|
4088
4092
|
}
|
|
@@ -4245,11 +4249,11 @@ class FilterGenericComponent {
|
|
|
4245
4249
|
return Object.values(filterData).every((val) => val === null || val === '' || (Array.isArray(val) && val.length === 0));
|
|
4246
4250
|
}
|
|
4247
4251
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterGenericComponent, deps: [{ token: CuraService }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4248
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FilterGenericComponent, isStandalone: true, selector: "rdsite-filter-generic", inputs: { withContainerStyle: "withContainerStyle", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", disableButtonsWithoutSelection: "disableButtonsWithoutSelection", showBadge: "showBadge", showToggleIcon: "showToggleIcon", isFilterOpen: "isFilterOpen", mobileBehavior: "mobileBehavior", forceCollapsed: "forceCollapsed", emitOnReset: "emitOnReset", textTitle: "textTitle", sections: "sections" }, outputs: { filterChange: "filterChange", closeModal: "closeModal", openMobileFilter: "openMobileFilter" }, host: { properties: { "style": "this.styleBinding" } }, ngImport: i0, template: "<div\r\n class=\"filter-generic\"\r\n [ngClass]=\"{ 'container-style': withContainerStyle, 'clickable-mobile': shouldHandleMobileClick() }\"\r\n aria-label=\"Filtros\"\r\n (click)=\"handleMobileClick()\"\r\n>\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-label size=\"medium\" level=\"4\" color=\"neutral-black\" weight=\"regular\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-label>\r\n\r\n @if (showBadge) {\r\n <cura-badge-counter\r\n [type]=\"'solid'\"\r\n [color]=\"hasSelection() ? 'primary' : 'neutral'\"\r\n [number]=\"selectedFiltersCount\"\r\n class=\"filter-badge\"\r\n ></cura-badge-counter>\r\n }\r\n </div>\r\n\r\n @if (showToggleIcon) {\r\n <cura-button-transparent size=\"small\" font-color=\"dark\" color=\"primary\" text-align=\"center\" (click)=\"toggleFilter()\" [attr.aria-expanded]=\"isFilterOpen\">\r\n <cura-icon [name]=\"isFilterOpen ? 'up' : 'down'\" size=\"16\" class=\"filter-icon\" color=\"primary-dark\"></cura-icon>\r\n </cura-button-transparent>\r\n }\r\n </div>\r\n\r\n <div class=\"filter-content\" [class.hidden]=\"!isFilterOpen || (forceCollapsed && isMobile())\">\r\n @for (section of sections; track section.type) {\r\n @if (section.visible !== false) {\r\n <div class=\"filter-section\">\r\n @switch (section.type) {\r\n @case ('input') {\r\n <cura-input-text\r\n [placeholder]=\"section.config.placeholder || ''\"\r\n [name]=\"section.config.name || ''\"\r\n [iconName]=\"section.config.iconName || ''\"\r\n [attr.value]=\"section.config.control.value\"\r\n (valueChange)=\"handleInputChange($event, section.config.control)\"\r\n ></cura-input-text>\r\n }\r\n @case ('select') {\r\n <cura-select\r\n [label]=\"section.config.label || ''\"\r\n [placeholder]=\"section.config.placeholder || ''\"\r\n [attr.value]=\"section.config.control.value\"\r\n (selected)=\"handleSelectChange($event, section.config.control)\"\r\n >\r\n @if (section.config.includeDefaultOption) {\r\n <cura-select-option [attr.value]=\"''\">{{ section.config.defaultOptionText || 'Fa\u00E7a a sua Sele\u00E7\u00E3o' }}</cura-select-option>\r\n }\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-select-option [attr.value]=\"option?.value\">{{ option?.label }}</cura-select-option>\r\n }\r\n </cura-select>\r\n }\r\n @case ('checkbox-group') {\r\n @if (section.config.title) {\r\n <div class=\"filter-header\">\r\n <cura-icon name=\"filter\" size=\"20\" color=\"info-dark\"></cura-icon>\r\n <cura-heading size=\"xsmall\" level=\"5\" weight=\"bold\" color=\"neutral-black\" margin-block=\"0\" line-height=\"16px\">\r\n {{ section.config.title }}\r\n </cura-heading>\r\n </div>\r\n }\r\n @if (section.config.subtitle) {\r\n <div class=\"filter-subtitle\">\r\n <cura-heading size=\"xsmall\" weight=\"bold\" color=\"neutral-black\" margin-block=\"0\">\r\n {{ section.config.subtitle }}\r\n </cura-heading>\r\n </div>\r\n }\r\n\r\n @if (section.config.description) {\r\n <div class=\"filter-description\">\r\n <cura-paragraph size=\"xsmall\" color=\"neutral-dark\" margin-block=\"0\">\r\n {{ section.config.description }}\r\n </cura-paragraph>\r\n </div>\r\n }\r\n\r\n <div class=\"filter-checkboxes\" [class.scrollable]=\"hasScroll(section)\">\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-checkbox\r\n color=\"primary\"\r\n size=\"small\"\r\n icon-color=\"light\"\r\n [attr.name]=\"option?.label\"\r\n [attr.label]=\"option?.label\"\r\n [attr.value]=\"option?.value\"\r\n [attr.checked]=\"option?.checked\"\r\n (onchange)=\"handleCheckboxChange($event, section.config.options)\"\r\n ></cura-checkbox>\r\n }\r\n </div>\r\n }\r\n @case ('radio-group') {\r\n <div class=\"filter-radios\" [class.scrollable]=\"hasScroll(section)\">\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-radio\r\n [name]=\"section.config.name || 'radio-group'\"\r\n [label]=\"option.label\"\r\n [value]=\"option.value\"\r\n [checked]=\"getRadioGroupValue(section.config.control) === option.value\"\r\n (onchange)=\"handleRadioChange($event, section.config.control)\"\r\n ></cura-radio>\r\n }\r\n </div>\r\n }\r\n @case ('custom') {\r\n <ng-container *ngTemplateOutlet=\"section.config.template\"></ng-container>\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"filter-actions\" [class.hidden]=\"!isFilterOpen || (forceCollapsed && isMobile())\">\r\n <div class=\"main-actions\">\r\n @if (showClearButton) {\r\n <cura-button-transparent\r\n size=\"small\"\r\n font-color=\"dark\"\r\n color=\"primary\"\r\n text-align=\"center\"\r\n [disabled]=\"disableButtonsWithoutSelection && !hasSelection()\"\r\n (click)=\"reset()\"\r\n >\r\n <span>Limpar todos os filtros</span>\r\n </cura-button-transparent>\r\n }\r\n\r\n @if (showApplyButton) {\r\n <cura-button\r\n size=\"medium\"\r\n font-color=\"light\"\r\n color=\"primary\"\r\n text-align=\"center\"\r\n (click)=\"filter()\"\r\n [disabled]=\"disableButtonsWithoutSelection && !hasSelection()\"\r\n class=\"filter-button\"\r\n >\r\n Filtrar\r\n </cura-button>\r\n }\r\n </div>\r\n\r\n @if (showCloseButton) {\r\n <div class=\"divider-strong\"></div>\r\n <div class=\"close-action-wrapper\">\r\n <div class=\"close-action\" (click)=\"close()\">\r\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\r\n <cura-button-transparent size=\"\" type=\"button\" color=\"error\" target=\"_self\"> Fechar </cura-button-transparent>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host *{font-family:Gotham,Roboto,sans-serif}.filter-generic{display:flex;flex-direction:column;gap:18px}.filter-generic.clickable-mobile{cursor:pointer}.filter-generic.clickable-mobile:hover{background-color:var(--primary-lighter)}.filter-generic.container-style{width:100%;padding:20px;border-radius:12px;border:2px solid var(--neutral-lighter);background-color:var(--neutral-purewhite)}.filter-generic cura-loader-circle{display:flex;justify-content:center;align-items:center;width:100%;min-height:100px}.filter-header-container{display:flex;padding-bottom:12px;align-items:center}.filter-header-container.no-padding{padding-bottom:0}.filter-header-container .filter-title-wrapper{display:flex;align-items:center;justify-content:space-between;flex:1 0 0}.filter-header-container .filter-badge{display:flex;height:20px;min-width:20px;justify-content:center;align-items:center;gap:4px}.filter-header-container .filter-icon{display:block}.filter-content,.filter-actions{transition:all .3s ease}.filter-content.hidden,.filter-actions.hidden{display:none;height:0;overflow:hidden;opacity:0;margin:0;padding:0}.filter-section{display:flex;flex-direction:column;gap:24px}.filter-section .filter-header{display:flex;align-items:center;gap:14px}.filter-section .filter-subtitle{font-weight:500}.filter-section .filter-description{display:flex;flex-direction:column;gap:8px}.filter-section .filter-description:after{content:\"\";display:block;width:100%;height:1px;background-color:var(--neutral-light);margin-top:12px;grid-column:1/-1}.filter-section .filter-checkboxes{display:grid;grid-template-columns:repeat(2,1fr);gap:11px 0px}.filter-section .filter-checkboxes.scrollable{max-height:100px;overflow-y:auto;grid-template-columns:1fr;padding-right:8px;gap:12px}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar{width:8px}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar-thumb{background:var(--neutral-medium)}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar-track{background:var(--neutral-opacity-black)}.filter-section .filter-checkboxes.scrollable:after{display:none}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios.scrollable{max-height:100px;overflow-y:auto;padding-right:8px;gap:8px}.filter-section .filter-radios.scrollable::-webkit-scrollbar{width:8px}.filter-section .filter-radios.scrollable::-webkit-scrollbar-thumb{background:var(--neutral-medium)}.filter-section .filter-radios.scrollable::-webkit-scrollbar-track{background:var(--neutral-opacity-black)}.filter-section .filter-radios.scrollable:after{display:none}@media screen and (max-width: 1024px){.filter-checkboxes.scrollable,.filter-radios.scrollable{max-height:100px}.filter-checkboxes:after{display:none;background-color:transparent}}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions:before{content:\"\";display:block;width:100%;height:1px;background:linear-gradient(90deg,var(--neutral-light) 75%,transparent 15%);background-size:10px 1px;background-repeat:repeat-x;margin-bottom:20px}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.filter-actions .divider-strong{height:1px;width:100%;margin-top:20px;margin-bottom:16px;background:linear-gradient(90deg,#e2e2e2 70%,transparent 70%);background-size:4px 1px;background-repeat:repeat-x}.filter-actions .close-action-wrapper{display:flex;justify-content:center;width:100%}.filter-actions .close-action{display:inline-flex;align-items:center;gap:8px}.filter-actions .close-action cura-button-transparent{padding:0;margin:0;background:transparent;border:none;color:inherit}.filter-actions cura-button-transparent{display:flex;justify-content:flex-start;text-align:left;flex:0 1 auto}.filter-actions cura-button{display:flex;justify-content:flex-start;text-align:left;flex:1 0 auto}@media screen and (max-width: 1024px){.filter-checkboxes:after{background-color:transparent}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
|
|
4252
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FilterGenericComponent, isStandalone: true, selector: "rdsite-filter-generic", inputs: { withContainerStyle: "withContainerStyle", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", disableButtonsWithoutSelection: "disableButtonsWithoutSelection", showBadge: "showBadge", showToggleIcon: "showToggleIcon", isFilterOpen: "isFilterOpen", mobileBehavior: "mobileBehavior", forceCollapsed: "forceCollapsed", emitOnReset: "emitOnReset", textTitle: "textTitle", sections: "sections" }, outputs: { filterChange: "filterChange", closeModal: "closeModal", openMobileFilter: "openMobileFilter" }, host: { properties: { "style": "this.styleBinding" } }, ngImport: i0, template: "<div\r\n class=\"filter-generic\"\r\n [ngClass]=\"{ 'container-style': withContainerStyle, 'clickable-mobile': shouldHandleMobileClick() }\"\r\n aria-label=\"Filtros\"\r\n (click)=\"handleMobileClick()\"\r\n>\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-label size=\"medium\" level=\"4\" color=\"neutral-black\" weight=\"regular\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-label>\r\n\r\n @if (showBadge) {\r\n <cura-badge-counter\r\n [type]=\"'solid'\"\r\n [color]=\"hasSelection() ? 'primary' : 'neutral'\"\r\n [number]=\"selectedFiltersCount\"\r\n class=\"filter-badge\"\r\n ></cura-badge-counter>\r\n }\r\n </div>\r\n\r\n @if (showToggleIcon) {\r\n <cura-button-transparent size=\"small\" font-color=\"dark\" color=\"primary\" text-align=\"center\" (click)=\"toggleFilter()\" [attr.aria-expanded]=\"isFilterOpen\">\r\n <cura-icon [name]=\"isFilterOpen ? 'up' : 'down'\" size=\"16\" class=\"filter-icon\" color=\"primary-dark\"></cura-icon>\r\n </cura-button-transparent>\r\n }\r\n </div>\r\n\r\n <div class=\"filter-content\" [class.hidden]=\"!isFilterOpen || (forceCollapsed && isMobile())\">\r\n @for (section of sections; track section.type) {\r\n @if (section.visible !== false) {\r\n <div class=\"filter-section\">\r\n @switch (section.type) {\r\n @case ('input') {\r\n <cura-input-text\r\n [placeholder]=\"section.config.placeholder || ''\"\r\n [name]=\"section.config.name || ''\"\r\n [iconName]=\"section.config.iconName || ''\"\r\n [attr.value]=\"section.config.control.value\"\r\n (valueChange)=\"handleInputChange($event, section.config.control)\"\r\n ></cura-input-text>\r\n }\r\n @case ('select') {\r\n <cura-select\r\n [label]=\"section.config.label || ''\"\r\n [placeholder]=\"section.config.placeholder || ''\"\r\n [attr.value]=\"section.config.control.value\"\r\n (selected)=\"handleSelectChange($event, section.config.control)\"\r\n >\r\n @if (section.config.includeDefaultOption) {\r\n <cura-select-option [attr.value]=\"''\">{{ section.config.defaultOptionText || 'Fa\u00E7a a sua Sele\u00E7\u00E3o' }}</cura-select-option>\r\n }\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-select-option [attr.value]=\"option?.value\">{{ option?.label }}</cura-select-option>\r\n }\r\n </cura-select>\r\n }\r\n @case ('checkbox-group') {\r\n @if (section.config.title) {\r\n <div class=\"filter-header\">\r\n <cura-icon name=\"filter\" size=\"20\" color=\"info-dark\"></cura-icon>\r\n <cura-heading size=\"xsmall\" level=\"5\" weight=\"bold\" color=\"neutral-black\" margin-block=\"0\" line-height=\"16px\">\r\n {{ section.config.title }}\r\n </cura-heading>\r\n </div>\r\n }\r\n @if (section.config.subtitle) {\r\n <div class=\"filter-subtitle\">\r\n <cura-heading size=\"xsmall\" weight=\"bold\" color=\"neutral-black\" margin-block=\"0\">\r\n {{ section.config.subtitle }}\r\n </cura-heading>\r\n </div>\r\n }\r\n\r\n @if (section.config.description) {\r\n <div class=\"filter-description\">\r\n <cura-paragraph size=\"xsmall\" color=\"neutral-dark\" margin-block=\"0\">\r\n {{ section.config.description }}\r\n </cura-paragraph>\r\n </div>\r\n }\r\n\r\n <div class=\"filter-checkboxes\" [class.scrollable]=\"hasScroll(section)\">\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-checkbox\r\n color=\"primary\"\r\n size=\"small\"\r\n icon-color=\"light\"\r\n [attr.name]=\"option?.label\"\r\n [attr.label]=\"option?.label\"\r\n [attr.value]=\"option?.value\"\r\n [attr.checked]=\"option?.checked\"\r\n (onchange)=\"handleCheckboxChange($event, section.config.options)\"\r\n ></cura-checkbox>\r\n }\r\n </div>\r\n }\r\n @case ('radio-group') {\r\n <div class=\"filter-radios\" [class.scrollable]=\"hasScroll(section)\">\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-radio\r\n [name]=\"section.config.name || 'radio-group'\"\r\n [label]=\"option.label\"\r\n [value]=\"option.value\"\r\n [checked]=\"getRadioGroupValue(section.config.control) === option.value\"\r\n (onchange)=\"handleRadioChange($event, section.config.control)\"\r\n ></cura-radio>\r\n }\r\n </div>\r\n }\r\n @case ('custom') {\r\n <ng-container *ngTemplateOutlet=\"section.config.template\"></ng-container>\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"filter-actions\" [class.hidden]=\"!isFilterOpen || (forceCollapsed && isMobile())\">\r\n <div class=\"main-actions\">\r\n @if (showClearButton) {\r\n <cura-button-transparent\r\n size=\"small\"\r\n font-color=\"dark\"\r\n color=\"primary\"\r\n text-align=\"center\"\r\n [disabled]=\"disableButtonsWithoutSelection && !hasSelection()\"\r\n (click)=\"reset()\"\r\n >\r\n <span>Limpar todos os filtros</span>\r\n </cura-button-transparent>\r\n }\r\n\r\n @if (showApplyButton) {\r\n <cura-button\r\n size=\"medium\"\r\n font-color=\"light\"\r\n color=\"primary\"\r\n text-align=\"center\"\r\n (click)=\"filter()\"\r\n [disabled]=\"disableButtonsWithoutSelection && !hasSelection()\"\r\n class=\"filter-button\"\r\n >\r\n Filtrar\r\n </cura-button>\r\n }\r\n </div>\r\n\r\n @if (showCloseButton) {\r\n <div class=\"divider-strong\"></div>\r\n <div class=\"close-action-wrapper\">\r\n <div class=\"close-action\" (click)=\"close()\">\r\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\r\n <cura-button-transparent size=\"\" type=\"button\" color=\"error\" target=\"_self\"> Fechar </cura-button-transparent>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host *{font-family:Gotham,Roboto,sans-serif}.filter-generic{display:flex;flex-direction:column;gap:18px}.filter-generic.clickable-mobile{cursor:pointer}.filter-generic.clickable-mobile:hover{background-color:var(--primary-lighter)}.filter-generic.container-style{width:100%;padding:20px;border-radius:12px;border:2px solid var(--neutral-lighter);background-color:var(--neutral-purewhite)}.filter-generic cura-loader-circle{display:flex;justify-content:center;align-items:center;width:100%;min-height:100px}.filter-header-container{display:flex;padding-bottom:12px;align-items:center}.filter-header-container.no-padding{padding-bottom:0}.filter-header-container .filter-title-wrapper{display:flex;align-items:center;justify-content:space-between;flex:1 0 0}.filter-header-container .filter-badge{display:flex;height:20px;min-width:20px;justify-content:center;align-items:center;gap:4px}.filter-header-container .filter-icon{display:block}.filter-content,.filter-actions{transition:all .3s ease}.filter-content.hidden,.filter-actions.hidden{display:none;height:0;overflow:hidden;opacity:0;margin:0;padding:0}.filter-section{display:flex;flex-direction:column;gap:24px}.filter-section .filter-header{display:flex;align-items:center;gap:14px}.filter-section .filter-subtitle{font-weight:500}.filter-section .filter-description{display:flex;flex-direction:column;gap:8px}.filter-section .filter-description:after{content:\"\";display:block;width:100%;height:1px;background-color:var(--neutral-light);margin-top:12px;grid-column:1/-1}.filter-section .filter-checkboxes{display:grid;grid-template-columns:repeat(2,1fr);gap:11px 0px}.filter-section .filter-checkboxes.scrollable{max-height:100px;overflow-y:auto;grid-template-columns:1fr;padding-right:8px;gap:12px}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar{width:8px}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar-thumb{background:var(--neutral-medium)}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar-track{background:var(--neutral-opacity-black)}.filter-section .filter-checkboxes.scrollable:after{display:none}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios.scrollable{max-height:100px;overflow-y:auto;padding-right:8px;gap:8px}.filter-section .filter-radios.scrollable::-webkit-scrollbar{width:8px}.filter-section .filter-radios.scrollable::-webkit-scrollbar-thumb{background:var(--neutral-medium)}.filter-section .filter-radios.scrollable::-webkit-scrollbar-thumb:hover{background:var(--primary-base)}.filter-section .filter-radios.scrollable::-webkit-scrollbar-track{background:var(--neutral-opacity-black)}.filter-section .filter-radios.scrollable:after{display:none}@media screen and (max-width: 1024px){.filter-checkboxes.scrollable,.filter-radios.scrollable{max-height:100px}.filter-checkboxes:after{display:none;background-color:transparent}}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions:before{content:\"\";display:block;width:100%;height:1px;background:linear-gradient(90deg,var(--neutral-light) 75%,transparent 15%);background-size:10px 1px;background-repeat:repeat-x;margin-bottom:20px}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.filter-actions .divider-strong{height:1px;width:100%;margin-top:20px;margin-bottom:16px;background:linear-gradient(90deg,#e2e2e2 70%,transparent 70%);background-size:4px 1px;background-repeat:repeat-x}.filter-actions .close-action-wrapper{display:flex;justify-content:center;width:100%}.filter-actions .close-action{display:inline-flex;align-items:center;gap:8px}.filter-actions .close-action cura-button-transparent{padding:0;margin:0;background:transparent;border:none;color:inherit}.filter-actions cura-button-transparent{display:flex;justify-content:flex-start;text-align:left;flex:0 1 auto}.filter-actions cura-button{display:flex;justify-content:flex-start;text-align:left;flex:1 0 auto}@media screen and (max-width: 1024px){.filter-checkboxes:after{background-color:transparent}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
|
|
4249
4253
|
}
|
|
4250
4254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterGenericComponent, decorators: [{
|
|
4251
4255
|
type: Component,
|
|
4252
|
-
args: [{ selector: 'rdsite-filter-generic', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div\r\n class=\"filter-generic\"\r\n [ngClass]=\"{ 'container-style': withContainerStyle, 'clickable-mobile': shouldHandleMobileClick() }\"\r\n aria-label=\"Filtros\"\r\n (click)=\"handleMobileClick()\"\r\n>\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-label size=\"medium\" level=\"4\" color=\"neutral-black\" weight=\"regular\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-label>\r\n\r\n @if (showBadge) {\r\n <cura-badge-counter\r\n [type]=\"'solid'\"\r\n [color]=\"hasSelection() ? 'primary' : 'neutral'\"\r\n [number]=\"selectedFiltersCount\"\r\n class=\"filter-badge\"\r\n ></cura-badge-counter>\r\n }\r\n </div>\r\n\r\n @if (showToggleIcon) {\r\n <cura-button-transparent size=\"small\" font-color=\"dark\" color=\"primary\" text-align=\"center\" (click)=\"toggleFilter()\" [attr.aria-expanded]=\"isFilterOpen\">\r\n <cura-icon [name]=\"isFilterOpen ? 'up' : 'down'\" size=\"16\" class=\"filter-icon\" color=\"primary-dark\"></cura-icon>\r\n </cura-button-transparent>\r\n }\r\n </div>\r\n\r\n <div class=\"filter-content\" [class.hidden]=\"!isFilterOpen || (forceCollapsed && isMobile())\">\r\n @for (section of sections; track section.type) {\r\n @if (section.visible !== false) {\r\n <div class=\"filter-section\">\r\n @switch (section.type) {\r\n @case ('input') {\r\n <cura-input-text\r\n [placeholder]=\"section.config.placeholder || ''\"\r\n [name]=\"section.config.name || ''\"\r\n [iconName]=\"section.config.iconName || ''\"\r\n [attr.value]=\"section.config.control.value\"\r\n (valueChange)=\"handleInputChange($event, section.config.control)\"\r\n ></cura-input-text>\r\n }\r\n @case ('select') {\r\n <cura-select\r\n [label]=\"section.config.label || ''\"\r\n [placeholder]=\"section.config.placeholder || ''\"\r\n [attr.value]=\"section.config.control.value\"\r\n (selected)=\"handleSelectChange($event, section.config.control)\"\r\n >\r\n @if (section.config.includeDefaultOption) {\r\n <cura-select-option [attr.value]=\"''\">{{ section.config.defaultOptionText || 'Fa\u00E7a a sua Sele\u00E7\u00E3o' }}</cura-select-option>\r\n }\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-select-option [attr.value]=\"option?.value\">{{ option?.label }}</cura-select-option>\r\n }\r\n </cura-select>\r\n }\r\n @case ('checkbox-group') {\r\n @if (section.config.title) {\r\n <div class=\"filter-header\">\r\n <cura-icon name=\"filter\" size=\"20\" color=\"info-dark\"></cura-icon>\r\n <cura-heading size=\"xsmall\" level=\"5\" weight=\"bold\" color=\"neutral-black\" margin-block=\"0\" line-height=\"16px\">\r\n {{ section.config.title }}\r\n </cura-heading>\r\n </div>\r\n }\r\n @if (section.config.subtitle) {\r\n <div class=\"filter-subtitle\">\r\n <cura-heading size=\"xsmall\" weight=\"bold\" color=\"neutral-black\" margin-block=\"0\">\r\n {{ section.config.subtitle }}\r\n </cura-heading>\r\n </div>\r\n }\r\n\r\n @if (section.config.description) {\r\n <div class=\"filter-description\">\r\n <cura-paragraph size=\"xsmall\" color=\"neutral-dark\" margin-block=\"0\">\r\n {{ section.config.description }}\r\n </cura-paragraph>\r\n </div>\r\n }\r\n\r\n <div class=\"filter-checkboxes\" [class.scrollable]=\"hasScroll(section)\">\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-checkbox\r\n color=\"primary\"\r\n size=\"small\"\r\n icon-color=\"light\"\r\n [attr.name]=\"option?.label\"\r\n [attr.label]=\"option?.label\"\r\n [attr.value]=\"option?.value\"\r\n [attr.checked]=\"option?.checked\"\r\n (onchange)=\"handleCheckboxChange($event, section.config.options)\"\r\n ></cura-checkbox>\r\n }\r\n </div>\r\n }\r\n @case ('radio-group') {\r\n <div class=\"filter-radios\" [class.scrollable]=\"hasScroll(section)\">\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-radio\r\n [name]=\"section.config.name || 'radio-group'\"\r\n [label]=\"option.label\"\r\n [value]=\"option.value\"\r\n [checked]=\"getRadioGroupValue(section.config.control) === option.value\"\r\n (onchange)=\"handleRadioChange($event, section.config.control)\"\r\n ></cura-radio>\r\n }\r\n </div>\r\n }\r\n @case ('custom') {\r\n <ng-container *ngTemplateOutlet=\"section.config.template\"></ng-container>\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"filter-actions\" [class.hidden]=\"!isFilterOpen || (forceCollapsed && isMobile())\">\r\n <div class=\"main-actions\">\r\n @if (showClearButton) {\r\n <cura-button-transparent\r\n size=\"small\"\r\n font-color=\"dark\"\r\n color=\"primary\"\r\n text-align=\"center\"\r\n [disabled]=\"disableButtonsWithoutSelection && !hasSelection()\"\r\n (click)=\"reset()\"\r\n >\r\n <span>Limpar todos os filtros</span>\r\n </cura-button-transparent>\r\n }\r\n\r\n @if (showApplyButton) {\r\n <cura-button\r\n size=\"medium\"\r\n font-color=\"light\"\r\n color=\"primary\"\r\n text-align=\"center\"\r\n (click)=\"filter()\"\r\n [disabled]=\"disableButtonsWithoutSelection && !hasSelection()\"\r\n class=\"filter-button\"\r\n >\r\n Filtrar\r\n </cura-button>\r\n }\r\n </div>\r\n\r\n @if (showCloseButton) {\r\n <div class=\"divider-strong\"></div>\r\n <div class=\"close-action-wrapper\">\r\n <div class=\"close-action\" (click)=\"close()\">\r\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\r\n <cura-button-transparent size=\"\" type=\"button\" color=\"error\" target=\"_self\"> Fechar </cura-button-transparent>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host *{font-family:Gotham,Roboto,sans-serif}.filter-generic{display:flex;flex-direction:column;gap:18px}.filter-generic.clickable-mobile{cursor:pointer}.filter-generic.clickable-mobile:hover{background-color:var(--primary-lighter)}.filter-generic.container-style{width:100%;padding:20px;border-radius:12px;border:2px solid var(--neutral-lighter);background-color:var(--neutral-purewhite)}.filter-generic cura-loader-circle{display:flex;justify-content:center;align-items:center;width:100%;min-height:100px}.filter-header-container{display:flex;padding-bottom:12px;align-items:center}.filter-header-container.no-padding{padding-bottom:0}.filter-header-container .filter-title-wrapper{display:flex;align-items:center;justify-content:space-between;flex:1 0 0}.filter-header-container .filter-badge{display:flex;height:20px;min-width:20px;justify-content:center;align-items:center;gap:4px}.filter-header-container .filter-icon{display:block}.filter-content,.filter-actions{transition:all .3s ease}.filter-content.hidden,.filter-actions.hidden{display:none;height:0;overflow:hidden;opacity:0;margin:0;padding:0}.filter-section{display:flex;flex-direction:column;gap:24px}.filter-section .filter-header{display:flex;align-items:center;gap:14px}.filter-section .filter-subtitle{font-weight:500}.filter-section .filter-description{display:flex;flex-direction:column;gap:8px}.filter-section .filter-description:after{content:\"\";display:block;width:100%;height:1px;background-color:var(--neutral-light);margin-top:12px;grid-column:1/-1}.filter-section .filter-checkboxes{display:grid;grid-template-columns:repeat(2,1fr);gap:11px 0px}.filter-section .filter-checkboxes.scrollable{max-height:100px;overflow-y:auto;grid-template-columns:1fr;padding-right:8px;gap:12px}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar{width:8px}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar-thumb{background:var(--neutral-medium)}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar-track{background:var(--neutral-opacity-black)}.filter-section .filter-checkboxes.scrollable:after{display:none}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios.scrollable{max-height:100px;overflow-y:auto;padding-right:8px;gap:8px}.filter-section .filter-radios.scrollable::-webkit-scrollbar{width:8px}.filter-section .filter-radios.scrollable::-webkit-scrollbar-thumb{background:var(--neutral-medium)}.filter-section .filter-radios.scrollable::-webkit-scrollbar-track{background:var(--neutral-opacity-black)}.filter-section .filter-radios.scrollable:after{display:none}@media screen and (max-width: 1024px){.filter-checkboxes.scrollable,.filter-radios.scrollable{max-height:100px}.filter-checkboxes:after{display:none;background-color:transparent}}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions:before{content:\"\";display:block;width:100%;height:1px;background:linear-gradient(90deg,var(--neutral-light) 75%,transparent 15%);background-size:10px 1px;background-repeat:repeat-x;margin-bottom:20px}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.filter-actions .divider-strong{height:1px;width:100%;margin-top:20px;margin-bottom:16px;background:linear-gradient(90deg,#e2e2e2 70%,transparent 70%);background-size:4px 1px;background-repeat:repeat-x}.filter-actions .close-action-wrapper{display:flex;justify-content:center;width:100%}.filter-actions .close-action{display:inline-flex;align-items:center;gap:8px}.filter-actions .close-action cura-button-transparent{padding:0;margin:0;background:transparent;border:none;color:inherit}.filter-actions cura-button-transparent{display:flex;justify-content:flex-start;text-align:left;flex:0 1 auto}.filter-actions cura-button{display:flex;justify-content:flex-start;text-align:left;flex:1 0 auto}@media screen and (max-width: 1024px){.filter-checkboxes:after{background-color:transparent}}\n"] }]
|
|
4256
|
+
args: [{ selector: 'rdsite-filter-generic', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div\r\n class=\"filter-generic\"\r\n [ngClass]=\"{ 'container-style': withContainerStyle, 'clickable-mobile': shouldHandleMobileClick() }\"\r\n aria-label=\"Filtros\"\r\n (click)=\"handleMobileClick()\"\r\n>\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-label size=\"medium\" level=\"4\" color=\"neutral-black\" weight=\"regular\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-label>\r\n\r\n @if (showBadge) {\r\n <cura-badge-counter\r\n [type]=\"'solid'\"\r\n [color]=\"hasSelection() ? 'primary' : 'neutral'\"\r\n [number]=\"selectedFiltersCount\"\r\n class=\"filter-badge\"\r\n ></cura-badge-counter>\r\n }\r\n </div>\r\n\r\n @if (showToggleIcon) {\r\n <cura-button-transparent size=\"small\" font-color=\"dark\" color=\"primary\" text-align=\"center\" (click)=\"toggleFilter()\" [attr.aria-expanded]=\"isFilterOpen\">\r\n <cura-icon [name]=\"isFilterOpen ? 'up' : 'down'\" size=\"16\" class=\"filter-icon\" color=\"primary-dark\"></cura-icon>\r\n </cura-button-transparent>\r\n }\r\n </div>\r\n\r\n <div class=\"filter-content\" [class.hidden]=\"!isFilterOpen || (forceCollapsed && isMobile())\">\r\n @for (section of sections; track section.type) {\r\n @if (section.visible !== false) {\r\n <div class=\"filter-section\">\r\n @switch (section.type) {\r\n @case ('input') {\r\n <cura-input-text\r\n [placeholder]=\"section.config.placeholder || ''\"\r\n [name]=\"section.config.name || ''\"\r\n [iconName]=\"section.config.iconName || ''\"\r\n [attr.value]=\"section.config.control.value\"\r\n (valueChange)=\"handleInputChange($event, section.config.control)\"\r\n ></cura-input-text>\r\n }\r\n @case ('select') {\r\n <cura-select\r\n [label]=\"section.config.label || ''\"\r\n [placeholder]=\"section.config.placeholder || ''\"\r\n [attr.value]=\"section.config.control.value\"\r\n (selected)=\"handleSelectChange($event, section.config.control)\"\r\n >\r\n @if (section.config.includeDefaultOption) {\r\n <cura-select-option [attr.value]=\"''\">{{ section.config.defaultOptionText || 'Fa\u00E7a a sua Sele\u00E7\u00E3o' }}</cura-select-option>\r\n }\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-select-option [attr.value]=\"option?.value\">{{ option?.label }}</cura-select-option>\r\n }\r\n </cura-select>\r\n }\r\n @case ('checkbox-group') {\r\n @if (section.config.title) {\r\n <div class=\"filter-header\">\r\n <cura-icon name=\"filter\" size=\"20\" color=\"info-dark\"></cura-icon>\r\n <cura-heading size=\"xsmall\" level=\"5\" weight=\"bold\" color=\"neutral-black\" margin-block=\"0\" line-height=\"16px\">\r\n {{ section.config.title }}\r\n </cura-heading>\r\n </div>\r\n }\r\n @if (section.config.subtitle) {\r\n <div class=\"filter-subtitle\">\r\n <cura-heading size=\"xsmall\" weight=\"bold\" color=\"neutral-black\" margin-block=\"0\">\r\n {{ section.config.subtitle }}\r\n </cura-heading>\r\n </div>\r\n }\r\n\r\n @if (section.config.description) {\r\n <div class=\"filter-description\">\r\n <cura-paragraph size=\"xsmall\" color=\"neutral-dark\" margin-block=\"0\">\r\n {{ section.config.description }}\r\n </cura-paragraph>\r\n </div>\r\n }\r\n\r\n <div class=\"filter-checkboxes\" [class.scrollable]=\"hasScroll(section)\">\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-checkbox\r\n color=\"primary\"\r\n size=\"small\"\r\n icon-color=\"light\"\r\n [attr.name]=\"option?.label\"\r\n [attr.label]=\"option?.label\"\r\n [attr.value]=\"option?.value\"\r\n [attr.checked]=\"option?.checked\"\r\n (onchange)=\"handleCheckboxChange($event, section.config.options)\"\r\n ></cura-checkbox>\r\n }\r\n </div>\r\n }\r\n @case ('radio-group') {\r\n <div class=\"filter-radios\" [class.scrollable]=\"hasScroll(section)\">\r\n @for (option of section.config.options || []; track option?.value) {\r\n <cura-radio\r\n [name]=\"section.config.name || 'radio-group'\"\r\n [label]=\"option.label\"\r\n [value]=\"option.value\"\r\n [checked]=\"getRadioGroupValue(section.config.control) === option.value\"\r\n (onchange)=\"handleRadioChange($event, section.config.control)\"\r\n ></cura-radio>\r\n }\r\n </div>\r\n }\r\n @case ('custom') {\r\n <ng-container *ngTemplateOutlet=\"section.config.template\"></ng-container>\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"filter-actions\" [class.hidden]=\"!isFilterOpen || (forceCollapsed && isMobile())\">\r\n <div class=\"main-actions\">\r\n @if (showClearButton) {\r\n <cura-button-transparent\r\n size=\"small\"\r\n font-color=\"dark\"\r\n color=\"primary\"\r\n text-align=\"center\"\r\n [disabled]=\"disableButtonsWithoutSelection && !hasSelection()\"\r\n (click)=\"reset()\"\r\n >\r\n <span>Limpar todos os filtros</span>\r\n </cura-button-transparent>\r\n }\r\n\r\n @if (showApplyButton) {\r\n <cura-button\r\n size=\"medium\"\r\n font-color=\"light\"\r\n color=\"primary\"\r\n text-align=\"center\"\r\n (click)=\"filter()\"\r\n [disabled]=\"disableButtonsWithoutSelection && !hasSelection()\"\r\n class=\"filter-button\"\r\n >\r\n Filtrar\r\n </cura-button>\r\n }\r\n </div>\r\n\r\n @if (showCloseButton) {\r\n <div class=\"divider-strong\"></div>\r\n <div class=\"close-action-wrapper\">\r\n <div class=\"close-action\" (click)=\"close()\">\r\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\r\n <cura-button-transparent size=\"\" type=\"button\" color=\"error\" target=\"_self\"> Fechar </cura-button-transparent>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host *{font-family:Gotham,Roboto,sans-serif}.filter-generic{display:flex;flex-direction:column;gap:18px}.filter-generic.clickable-mobile{cursor:pointer}.filter-generic.clickable-mobile:hover{background-color:var(--primary-lighter)}.filter-generic.container-style{width:100%;padding:20px;border-radius:12px;border:2px solid var(--neutral-lighter);background-color:var(--neutral-purewhite)}.filter-generic cura-loader-circle{display:flex;justify-content:center;align-items:center;width:100%;min-height:100px}.filter-header-container{display:flex;padding-bottom:12px;align-items:center}.filter-header-container.no-padding{padding-bottom:0}.filter-header-container .filter-title-wrapper{display:flex;align-items:center;justify-content:space-between;flex:1 0 0}.filter-header-container .filter-badge{display:flex;height:20px;min-width:20px;justify-content:center;align-items:center;gap:4px}.filter-header-container .filter-icon{display:block}.filter-content,.filter-actions{transition:all .3s ease}.filter-content.hidden,.filter-actions.hidden{display:none;height:0;overflow:hidden;opacity:0;margin:0;padding:0}.filter-section{display:flex;flex-direction:column;gap:24px}.filter-section .filter-header{display:flex;align-items:center;gap:14px}.filter-section .filter-subtitle{font-weight:500}.filter-section .filter-description{display:flex;flex-direction:column;gap:8px}.filter-section .filter-description:after{content:\"\";display:block;width:100%;height:1px;background-color:var(--neutral-light);margin-top:12px;grid-column:1/-1}.filter-section .filter-checkboxes{display:grid;grid-template-columns:repeat(2,1fr);gap:11px 0px}.filter-section .filter-checkboxes.scrollable{max-height:100px;overflow-y:auto;grid-template-columns:1fr;padding-right:8px;gap:12px}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar{width:8px}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar-thumb{background:var(--neutral-medium)}.filter-section .filter-checkboxes.scrollable::-webkit-scrollbar-track{background:var(--neutral-opacity-black)}.filter-section .filter-checkboxes.scrollable:after{display:none}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios.scrollable{max-height:100px;overflow-y:auto;padding-right:8px;gap:8px}.filter-section .filter-radios.scrollable::-webkit-scrollbar{width:8px}.filter-section .filter-radios.scrollable::-webkit-scrollbar-thumb{background:var(--neutral-medium)}.filter-section .filter-radios.scrollable::-webkit-scrollbar-thumb:hover{background:var(--primary-base)}.filter-section .filter-radios.scrollable::-webkit-scrollbar-track{background:var(--neutral-opacity-black)}.filter-section .filter-radios.scrollable:after{display:none}@media screen and (max-width: 1024px){.filter-checkboxes.scrollable,.filter-radios.scrollable{max-height:100px}.filter-checkboxes:after{display:none;background-color:transparent}}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions:before{content:\"\";display:block;width:100%;height:1px;background:linear-gradient(90deg,var(--neutral-light) 75%,transparent 15%);background-size:10px 1px;background-repeat:repeat-x;margin-bottom:20px}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.filter-actions .divider-strong{height:1px;width:100%;margin-top:20px;margin-bottom:16px;background:linear-gradient(90deg,#e2e2e2 70%,transparent 70%);background-size:4px 1px;background-repeat:repeat-x}.filter-actions .close-action-wrapper{display:flex;justify-content:center;width:100%}.filter-actions .close-action{display:inline-flex;align-items:center;gap:8px}.filter-actions .close-action cura-button-transparent{padding:0;margin:0;background:transparent;border:none;color:inherit}.filter-actions cura-button-transparent{display:flex;justify-content:flex-start;text-align:left;flex:0 1 auto}.filter-actions cura-button{display:flex;justify-content:flex-start;text-align:left;flex:1 0 auto}@media screen and (max-width: 1024px){.filter-checkboxes:after{background-color:transparent}}\n"] }]
|
|
4253
4257
|
}], ctorParameters: () => [{ type: CuraService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
4254
4258
|
type: Inject,
|
|
4255
4259
|
args: [PLATFORM_ID]
|