@rededor/site-front-end-lib 1.3.15 → 1.3.16
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.
|
@@ -173,11 +173,11 @@ export class FilterGenericComponent {
|
|
|
173
173
|
return Object.values(filterData).every((val) => val === null || val === '' || (Array.isArray(val) && val.length === 0));
|
|
174
174
|
}
|
|
175
175
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterGenericComponent, deps: [{ token: i1.CuraService }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
176
|
-
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 class=\"filter-generic\" [ngClass]=\"{ 'container-style': withContainerStyle }\" aria-label=\"Filtros\">\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-heading size=\"small\" level=\"4\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-heading>\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 <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 || 'Filtre por' }}\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\">\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\">\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.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:after{content:\"\";display:block;width:100%;height:1px;margin-top:12px;background-color:var(--neutral-light);grid-column:1/-1}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios:after{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-top:6px;grid-column:1/-1}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:16px;align-items:center}.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,.filter-actions cura-button-transparent{flex:1}@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 }] }); }
|
|
176
|
+
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 class=\"filter-generic\" [ngClass]=\"{ 'container-style': withContainerStyle }\" aria-label=\"Filtros\">\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-heading size=\"small\" level=\"4\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-heading>\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 <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 || 'Filtre por' }}\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\">\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\">\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.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:after{content:\"\";display:block;width:100%;height:1px;margin-top:12px;background-color:var(--neutral-light);grid-column:1/-1}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios:after{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-top:6px;grid-column:1/-1}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:24px;align-items:center}.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,.filter-actions cura-button-transparent{flex:1}@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 }] }); }
|
|
177
177
|
}
|
|
178
178
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterGenericComponent, decorators: [{
|
|
179
179
|
type: Component,
|
|
180
|
-
args: [{ selector: 'rdsite-filter-generic', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"filter-generic\" [ngClass]=\"{ 'container-style': withContainerStyle }\" aria-label=\"Filtros\">\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-heading size=\"small\" level=\"4\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-heading>\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 <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 || 'Filtre por' }}\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\">\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\">\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.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:after{content:\"\";display:block;width:100%;height:1px;margin-top:12px;background-color:var(--neutral-light);grid-column:1/-1}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios:after{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-top:6px;grid-column:1/-1}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:
|
|
180
|
+
args: [{ selector: 'rdsite-filter-generic', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"filter-generic\" [ngClass]=\"{ 'container-style': withContainerStyle }\" aria-label=\"Filtros\">\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-heading size=\"small\" level=\"4\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-heading>\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 <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 || 'Filtre por' }}\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\">\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\">\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.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:after{content:\"\";display:block;width:100%;height:1px;margin-top:12px;background-color:var(--neutral-light);grid-column:1/-1}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios:after{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-top:6px;grid-column:1/-1}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:24px;align-items:center}.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,.filter-actions cura-button-transparent{flex:1}@media screen and (max-width: 1024px){.filter-checkboxes:after{background-color:transparent}}\n"] }]
|
|
181
181
|
}], ctorParameters: () => [{ type: i1.CuraService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
182
182
|
type: Inject,
|
|
183
183
|
args: [PLATFORM_ID]
|
|
@@ -4212,11 +4212,11 @@ class FilterGenericComponent {
|
|
|
4212
4212
|
return Object.values(filterData).every((val) => val === null || val === '' || (Array.isArray(val) && val.length === 0));
|
|
4213
4213
|
}
|
|
4214
4214
|
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 }); }
|
|
4215
|
-
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 class=\"filter-generic\" [ngClass]=\"{ 'container-style': withContainerStyle }\" aria-label=\"Filtros\">\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-heading size=\"small\" level=\"4\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-heading>\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 <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 || 'Filtre por' }}\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\">\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\">\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.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:after{content:\"\";display:block;width:100%;height:1px;margin-top:12px;background-color:var(--neutral-light);grid-column:1/-1}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios:after{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-top:6px;grid-column:1/-1}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:16px;align-items:center}.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,.filter-actions cura-button-transparent{flex:1}@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 }] }); }
|
|
4215
|
+
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 class=\"filter-generic\" [ngClass]=\"{ 'container-style': withContainerStyle }\" aria-label=\"Filtros\">\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-heading size=\"small\" level=\"4\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-heading>\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 <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 || 'Filtre por' }}\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\">\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\">\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.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:after{content:\"\";display:block;width:100%;height:1px;margin-top:12px;background-color:var(--neutral-light);grid-column:1/-1}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios:after{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-top:6px;grid-column:1/-1}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:24px;align-items:center}.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,.filter-actions cura-button-transparent{flex:1}@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 }] }); }
|
|
4216
4216
|
}
|
|
4217
4217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterGenericComponent, decorators: [{
|
|
4218
4218
|
type: Component,
|
|
4219
|
-
args: [{ selector: 'rdsite-filter-generic', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"filter-generic\" [ngClass]=\"{ 'container-style': withContainerStyle }\" aria-label=\"Filtros\">\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-heading size=\"small\" level=\"4\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-heading>\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 <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 || 'Filtre por' }}\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\">\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\">\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.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:after{content:\"\";display:block;width:100%;height:1px;margin-top:12px;background-color:var(--neutral-light);grid-column:1/-1}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios:after{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-top:6px;grid-column:1/-1}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:
|
|
4219
|
+
args: [{ selector: 'rdsite-filter-generic', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"filter-generic\" [ngClass]=\"{ 'container-style': withContainerStyle }\" aria-label=\"Filtros\">\r\n <div class=\"filter-header-container\" [ngClass]=\"{ 'no-padding': !isFilterOpen, hidden: !isFilterOpen }\">\r\n <div class=\"filter-title-wrapper\">\r\n <cura-heading size=\"small\" level=\"4\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\" line-height=\"16px\">\r\n {{ textTitle }}\r\n </cura-heading>\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 <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 || 'Filtre por' }}\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\">\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\">\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.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:after{content:\"\";display:block;width:100%;height:1px;margin-top:12px;background-color:var(--neutral-light);grid-column:1/-1}.filter-section .filter-radios{display:flex;flex-direction:column;gap:12px}.filter-section .filter-radios:after{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-top:6px;grid-column:1/-1}.filter-actions{display:flex;flex-direction:column;gap:0}.filter-actions .main-actions{display:flex;justify-content:space-between;gap:24px;align-items:center}.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,.filter-actions cura-button-transparent{flex:1}@media screen and (max-width: 1024px){.filter-checkboxes:after{background-color:transparent}}\n"] }]
|
|
4220
4220
|
}], ctorParameters: () => [{ type: CuraService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
4221
4221
|
type: Inject,
|
|
4222
4222
|
args: [PLATFORM_ID]
|