lib-common-angular 0.0.14 → 0.0.15
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.
|
@@ -7652,11 +7652,11 @@ class SectionFiltersCategoriesProductos {
|
|
|
7652
7652
|
this.categorySelected.emit(category);
|
|
7653
7653
|
}
|
|
7654
7654
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SectionFiltersCategoriesProductos, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7655
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SectionFiltersCategoriesProductos, isStandalone: true, selector: "lib-section-filters-categories-productos", inputs: { categorias: "categorias", titleComponent: "titleComponent" }, outputs: { categorySelected: "categorySelected" }, ngImport: i0, template: "<div class=\"grid align-items-center justify-content-center filters-bar animate-scroll\">\n <h2 class=\"filters-title font-bold
|
|
7655
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SectionFiltersCategoriesProductos, isStandalone: true, selector: "lib-section-filters-categories-productos", inputs: { categorias: "categorias", titleComponent: "titleComponent" }, outputs: { categorySelected: "categorySelected" }, ngImport: i0, template: "<div class=\"grid align-items-center justify-content-center filters-bar animate-scroll\">\n <h2 class=\"filters-title font-bold \">{{ titleComponent }}</h2>\n <div class=\"filters-list\">\n <button pButton type=\"button\" class=\"filter-btn\" [ngClass]=\"{ 'active': selectedCategory === 'all' }\" (click)=\"selectCategory('all')\">Todos</button>\n @for (categoria of categorias; track $index) {\n <button pButton type=\"button\" class=\"filter-btn\" (click)=\"selectCategory(categoria.nombreCategoria)\" [ngClass]=\"{ 'active': selectedCategory === categoria.nombreCategoria }\">{{ categoria.nombreCategoria }}</button>\n }\n </div>\n</div>", styles: ["@charset \"UTF-8\";.filters-bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin:2rem}.filters-title{font-size:1.75rem;font-weight:700;margin:0;color:#111827}.filters-list{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}.filter-btn{border-radius:999px;padding:.5rem .9rem;border:1px solid transparent;background:transparent;white-space:nowrap}.filter-btn:hover{opacity:.9}.filter-btn.active{background:#fbc30d;color:#111827;border-color:transparent}@media (max-width: 600px){.filters-bar{flex-direction:column;align-items:flex-start}.filters-list{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1rem;width:100%;overflow:visible;padding-bottom:0}.filter-btn{min-width:0;width:100%;margin-bottom:0}}@media screen and (max-width: 400px){.filters-title{font-size:1.5rem}.filters-bar{gap:1rem;margin:1rem}}@media screen and (max-width: 768px){.filters-list{gap:.5rem .75rem}}@media screen and (min-width: 1024px){.filters-list{gap:1rem 1.25rem}}.animate-scroll{opacity:0;transform:translateY(50px);transition:opacity 1.5s ease-out,transform 1.5s ease-out}.animate-scroll.is-visible{opacity:1;transform:translateY(0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7656
7656
|
}
|
|
7657
7657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SectionFiltersCategoriesProductos, decorators: [{
|
|
7658
7658
|
type: Component,
|
|
7659
|
-
args: [{ selector: 'lib-section-filters-categories-productos', imports: [CommonModule], template: "<div class=\"grid align-items-center justify-content-center filters-bar animate-scroll\">\n <h2 class=\"filters-title font-bold
|
|
7659
|
+
args: [{ selector: 'lib-section-filters-categories-productos', imports: [CommonModule], template: "<div class=\"grid align-items-center justify-content-center filters-bar animate-scroll\">\n <h2 class=\"filters-title font-bold \">{{ titleComponent }}</h2>\n <div class=\"filters-list\">\n <button pButton type=\"button\" class=\"filter-btn\" [ngClass]=\"{ 'active': selectedCategory === 'all' }\" (click)=\"selectCategory('all')\">Todos</button>\n @for (categoria of categorias; track $index) {\n <button pButton type=\"button\" class=\"filter-btn\" (click)=\"selectCategory(categoria.nombreCategoria)\" [ngClass]=\"{ 'active': selectedCategory === categoria.nombreCategoria }\">{{ categoria.nombreCategoria }}</button>\n }\n </div>\n</div>", styles: ["@charset \"UTF-8\";.filters-bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin:2rem}.filters-title{font-size:1.75rem;font-weight:700;margin:0;color:#111827}.filters-list{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}.filter-btn{border-radius:999px;padding:.5rem .9rem;border:1px solid transparent;background:transparent;white-space:nowrap}.filter-btn:hover{opacity:.9}.filter-btn.active{background:#fbc30d;color:#111827;border-color:transparent}@media (max-width: 600px){.filters-bar{flex-direction:column;align-items:flex-start}.filters-list{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1rem;width:100%;overflow:visible;padding-bottom:0}.filter-btn{min-width:0;width:100%;margin-bottom:0}}@media screen and (max-width: 400px){.filters-title{font-size:1.5rem}.filters-bar{gap:1rem;margin:1rem}}@media screen and (max-width: 768px){.filters-list{gap:.5rem .75rem}}@media screen and (min-width: 1024px){.filters-list{gap:1rem 1.25rem}}.animate-scroll{opacity:0;transform:translateY(50px);transition:opacity 1.5s ease-out,transform 1.5s ease-out}.animate-scroll.is-visible{opacity:1;transform:translateY(0)}\n"] }]
|
|
7660
7660
|
}], propDecorators: { categorias: [{
|
|
7661
7661
|
type: Input
|
|
7662
7662
|
}], titleComponent: [{
|