[ { "path": ".editorconfig", "content": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.ts]\nquote_type = single\nij_typescript_use_double_quotes = false\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n" }, { "path": ".gitignore", "content": "# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.\n\n# Compiled output\n/dist\n/tmp\n/out-tsc\n/bazel-out\n\n# Node\n/node_modules\nnpm-debug.log\nyarn-error.log\n\n# IDEs and editors\n.idea/\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# Visual Studio Code\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history/*\n\n# Miscellaneous\n/.angular/cache\n.sass-cache/\n/connect.lock\n/coverage\n/libpeerconnection.log\ntestem.log\n/typings\n\n# System files\n.DS_Store\nThumbs.db\n" }, { "path": ".vscode/extensions.json", "content": "{\n // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846\n \"recommendations\": [\"angular.ng-template\"]\n}\n" }, { "path": ".vscode/launch.json", "content": "{\n // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"name\": \"ng serve\",\n \"type\": \"chrome\",\n \"request\": \"launch\",\n \"preLaunchTask\": \"npm: start\",\n \"url\": \"http://localhost:4200/\"\n },\n {\n \"name\": \"ng test\",\n \"type\": \"chrome\",\n \"request\": \"launch\",\n \"preLaunchTask\": \"npm: test\",\n \"url\": \"http://localhost:9876/debug.html\"\n }\n ]\n}\n" }, { "path": ".vscode/tasks.json", "content": "{\n // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558\n \"version\": \"2.0.0\",\n \"tasks\": [\n {\n \"type\": \"npm\",\n \"script\": \"start\",\n \"isBackground\": true,\n \"problemMatcher\": {\n \"owner\": \"typescript\",\n \"pattern\": \"$tsc\",\n \"background\": {\n \"activeOnStart\": true,\n \"beginsPattern\": {\n \"regexp\": \"(.*?)\"\n },\n \"endsPattern\": {\n \"regexp\": \"bundle generation complete\"\n }\n }\n }\n },\n {\n \"type\": \"npm\",\n \"script\": \"test\",\n \"isBackground\": true,\n \"problemMatcher\": {\n \"owner\": \"typescript\",\n \"pattern\": \"$tsc\",\n \"background\": {\n \"activeOnStart\": true,\n \"beginsPattern\": {\n \"regexp\": \"(.*?)\"\n },\n \"endsPattern\": {\n \"regexp\": \"bundle generation complete\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "README.md", "content": "## ✨ Características\n\n- Ordenar productos por nombre, precio (ascendente y descendente).\n- Búsqueda instantánea por nombre del producto.\n- Filtrar productos por categorías, rango de precios, disponibilidad y más filtros personalizados.\n- Agregar productos al carrito de compras.\n- Ver detalles y administrar el carrito de compras.\n- Cargar tus propios datos a través de la aplicación:\n - Verás un botón rojo con un ícono de **enlace**, haz clic en él y pega la URL.\n - El archivo **JSON** debe seguir un formato específico ([ejemplo aquí](http://carlosroso.com/angular2-shop-json/)).\n - ⚠️ **Importante:** asegúrate de configurar correctamente el encabezado `Access-Control-Allow-Methods` en tu respuesta HTTP JSON.\n- **UI atractiva** con animaciones que mejoran la experiencia de usuario (UX).\n\n---\n\n## 🚀 Instalación\n\nClona el repositorio:\n\n```bash\ngit clone https://github.com/jlozoya/angular-shop\n```\n\nInstala las dependencias dentro de la carpeta del proyecto:\n\n```bash\ncd angular-shop\nnpm install\n```\n\nAsegúrate de tener instalada la última versión de Angular CLI:\n\n```bash\nnpm install -g @angular/cli\n```\n\nInicia la aplicación en modo desarrollo:\n\n```bash\nng serve\n```\n\nAbre tu navegador en [http://localhost:4200](http://localhost:4200).\n\n---\n\n### 🧪 Pruebas unitarias\n\n```bash\nng test\n```\n\nEjecuta las pruebas unitarias con [Karma](https://karma-runner.github.io).\n\n---\n\n## 📌 Notas\n\n- Este proyecto es ideal como **proyecto de aprendizaje** y permite explorar conceptos clave de Angular como:\n - Componentes\n - Data binding\n - Formularios\n - Servicios\n - Rutas\n - Pipes personalizados\n" }, { "path": "angular.json", "content": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"cli\": {\n \"packageManager\": \"npm\"\n },\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"angular-shop2\": {\n \"projectType\": \"application\",\n \"schematics\": {\n \"@schematics/angular:component\": {\n \"style\": \"scss\"\n }\n },\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular/build:application\",\n \"options\": {\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.app.json\",\n \"inlineStyleLanguage\": \"scss\",\n \"assets\": [\n {\n \"glob\": \"**/*\",\n \"input\": \"public\"\n }\n ],\n \"styles\": [\n \"src/styles.scss\"\n ]\n },\n \"configurations\": {\n \"production\": {\n \"budgets\": [\n {\n \"type\": \"initial\",\n \"maximumWarning\": \"500kB\",\n \"maximumError\": \"1MB\"\n },\n {\n \"type\": \"anyComponentStyle\",\n \"maximumWarning\": \"4kB\",\n \"maximumError\": \"8kB\"\n }\n ],\n \"outputHashing\": \"all\"\n },\n \"development\": {\n \"optimization\": false,\n \"extractLicenses\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"production\"\n },\n \"serve\": {\n \"builder\": \"@angular/build:dev-server\",\n \"configurations\": {\n \"production\": {\n \"buildTarget\": \"angular-shop2:build:production\"\n },\n \"development\": {\n \"buildTarget\": \"angular-shop2:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"extract-i18n\": {\n \"builder\": \"@angular/build:extract-i18n\"\n },\n \"test\": {\n \"builder\": \"@angular/build:karma\",\n \"options\": {\n \"polyfills\": [\n \"zone.js\",\n \"zone.js/testing\"\n ],\n \"tsConfig\": \"tsconfig.spec.json\",\n \"inlineStyleLanguage\": \"scss\",\n \"assets\": [\n {\n \"glob\": \"**/*\",\n \"input\": \"public\"\n }\n ],\n \"styles\": [\n \"src/styles.scss\"\n ]\n }\n }\n }\n }\n }\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"angular-shop2\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\",\n \"watch\": \"ng build --watch --configuration development\",\n \"test\": \"ng test\"\n },\n \"prettier\": {\n \"printWidth\": 100,\n \"singleQuote\": true,\n \"overrides\": [\n {\n \"files\": \"*.html\",\n \"options\": {\n \"parser\": \"angular\"\n }\n }\n ]\n },\n \"private\": true,\n \"dependencies\": {\n \"@angular/common\": \"^20.3.0\",\n \"@angular/compiler\": \"^20.3.0\",\n \"@angular/core\": \"^20.3.0\",\n \"@angular/forms\": \"^20.3.0\",\n \"@angular/platform-browser\": \"^20.3.0\",\n \"@angular/router\": \"^20.3.0\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\"\n },\n \"devDependencies\": {\n \"@angular/build\": \"^20.3.2\",\n \"@angular/cli\": \"^20.3.2\",\n \"@angular/compiler-cli\": \"^20.3.0\",\n \"@types/jasmine\": \"~5.1.0\",\n \"jasmine-core\": \"~5.9.0\",\n \"karma\": \"~6.4.0\",\n \"karma-chrome-launcher\": \"~3.2.0\",\n \"karma-coverage\": \"~2.2.0\",\n \"karma-jasmine\": \"~5.1.0\",\n \"karma-jasmine-html-reporter\": \"~2.1.0\",\n \"typescript\": \"~5.9.2\"\n }\n}" }, { "path": "public/assets/.gitkeep", "content": "" }, { "path": "public/assets/.npmignore", "content": "" }, { "path": "public/assets/data.json", "content": "{\n \"categories\": [\n {\n \"categori_id\": 1,\n \"name\": \"drinks\"\n },\n {\n \"categori_id\": 2,\n \"name\": \"lunch\"\n },\n {\n \"categori_id\": 3,\n \"name\": \"food\"\n },\n {\n \"categori_id\": 4,\n \"name\": \"sea\"\n }\n ],\n \"products\": [\n {\n \"id\": 1,\n \"name\": \"Lorem\",\n \"price\": \"60.000\",\n \"available\": true,\n \"best_seller\": true,\n \"categories\": [\n 1,\n 4\n ],\n \"img\": \"https://placehold.co/200x100\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.\"\n },\n {\n \"id\": 2,\n \"name\": \"ipsum\",\n \"price\": \"20.000\",\n \"available\": false,\n \"best_seller\": false,\n \"categories\": [\n 4\n ],\n \"img\": \"https://placehold.co/200x100\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.\"\n },\n {\n \"id\": 3,\n \"name\": \"dolor\",\n \"price\": \"10.000\",\n \"available\": true,\n \"best_seller\": true,\n \"categories\": [\n 4\n ],\n \"img\": \"https://placehold.co/200x100\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.\"\n },\n {\n \"id\": 4,\n \"name\": \"sit\",\n \"price\": \"35.000\",\n \"available\": false,\n \"best_seller\": false,\n \"categories\": [\n 1,\n 2\n ],\n \"img\": \"https://placehold.co/200x100\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.\"\n },\n {\n \"id\": 5,\n \"name\": \"amet\",\n \"price\": \"12.000\",\n \"available\": true,\n \"best_seller\": true,\n \"categories\": [\n 1,\n 4\n ],\n \"img\": \"https://placehold.co/200x100\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.\"\n },\n {\n \"id\": 6,\n \"name\": \"consectetur\",\n \"price\": \"120.000\",\n \"available\": true,\n \"best_seller\": false,\n \"categories\": [\n 1,\n 4\n ],\n \"img\": \"https://placehold.co/200x100\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.\"\n },\n {\n \"id\": 7,\n \"name\": \"adipiscing\",\n \"price\": \"50.000\",\n \"available\": false,\n \"best_seller\": false,\n \"categories\": [\n 1,\n 3\n ],\n \"img\": \"https://placehold.co/200x100\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.\"\n },\n {\n \"id\": 8,\n \"name\": \"elit\",\n \"price\": \"2000\",\n \"available\": true,\n \"best_seller\": false,\n \"categories\": [\n 1,\n 3\n ],\n \"img\": \"https://placehold.co/200x100\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.\"\n },\n {\n \"id\": 9,\n \"name\": \"Maecenas\",\n \"price\": \"150.000\",\n \"available\": true,\n \"best_seller\": true,\n \"categories\": [\n 2,\n 4\n ],\n \"img\": \"https://placehold.co/200x100\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.\"\n },\n {\n \"id\": 10,\n \"name\": \"eu\",\n \"price\": \"200.000\",\n \"available\": false,\n \"best_seller\": true,\n \"categories\": [\n 2,\n 3\n ],\n \"img\": \"https://placehold.co/200x100\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.\"\n }\n ]\n}\n" }, { "path": "src/app/app.component.html", "content": "
\n
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n" }, { "path": "src/app/app.component.scss", "content": "@use \"./shared/colors\" as *;\n@use \"./shared/mixins\" as *;\n\n.main-container{\n padding-top: 100px;\n}\n\n.filters-wrapper{\n position: relative;\n z-index: 90000;\n}\n\nsort-filters{\n position: relative;\n z-index: 20;\n}\n\ncart{\n position: absolute;\n top: -23px;\n right: -57px;\n z-index: 99999999;\n}\n\nsearch-bar{\n position: relative;\n top: -8px;\n}\n\nshowcase{\n position: relative;\n top: -39px;\n z-index: 10\n}\n\n.sort-filters-wrapper{\n position: relative;\n}\n\nurl-form{\n position: absolute;\n top: -55px;\n}\n\n/** Media queries **/\n@media only screen\n and (min-device-width: 320px)\n and (max-device-width: 480px) {\n url-form{\n position: fixed;\n bottom: 20px;\n left: 10px;\n }\n\n filters{\n position: fixed;\n top: 44px;\n right: -100%;\n width: 100%;\n height: 100%;\n }\n .sort-filters-wrapper{\n position: fixed;\n top: 44px;\n left: 0;\n width: 100%;\n box-shadow: 0px 3px 16px rgba(0,0,0,0.3);\n padding-top: 10px;\n background: $primary-color;\n z-index: 200;\n }\n\n .main-container{\n padding-top: 34px;\n }\n search-bar{\n position: fixed;\n top: 0;\n width: 100%;\n left: 0;\n z-index: 9000;\n }\n\n }\n" }, { "path": "src/app/app.component.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { Product } from './shared/product.model';\nimport { DataService } from './data.service';\nimport { CartService } from './cart.service';\nimport { ViewChild } from '@angular/core';\n\nimport { FiltersComponent } from './filters/filters.component';\nimport { SearchBarComponent } from './search-bar/search-bar.component';\nimport { ShowcaseComponent } from './showcase/showcase.component';\nimport { CartComponent } from './cart/cart.component';\nimport { SortFiltersComponent } from './sort-filters/sort-filters.component';\nimport { UrlFormComponent } from './url-form/url-form.component';\n\n\n@Component({\n selector: 'app-root',\n standalone: true,\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss'],\n imports: [\n SearchBarComponent,\n FiltersComponent,\n ShowcaseComponent,\n CartComponent,\n SortFiltersComponent,\n UrlFormComponent,\n ],\n providers: [DataService, CartService]\n})\nexport class AppComponent implements OnInit {\n\n products: Product[] = [];\n\n mainFilter: any;\n\n currentSorting: string = '';\n\n @ViewChild('filtersComponent')\n filtersComponent!: FiltersComponent;\n\n @ViewChild('searchComponent')\n searchComponent!: SearchBarComponent;\n\n sortFilters: any[] = [\n { name: 'Nombre (A to Z)', value: 'name' },\n { name: 'Precio (low to high)', value: 'priceAsc' },\n { name: 'Precio (high to low)', value: 'priceDes' }\n ];\n\n customFilters: any[] = [\n { name: 'Todo', value: 'all', checked: true },\n { name: 'Disponible', value: 'available', checked: false },\n { name: 'No disponible', value: 'unavailable', checked: false },\n { name: 'Mejor vendido', value: 'bestseller', checked: false }\n ];\n\n priceFilters: any[] = [\n { name: 'Todo', value: 'all', checked: true },\n { name: 'Precio > 30.000', value: 'more_30000', checked: false },\n { name: 'Precio < 10.000', value: 'less_10000', checked: false }\n ];\n\n originalData: any = [];\n\n constructor(private dataService: DataService, private cartService: CartService) { }\n\n ngOnInit() {\n\n\n this.dataService.getData().then(data => {\n this.originalData = data;\n this.mainFilter = {\n search: '',\n categories: this.originalData.categories.slice(0),\n customFilter: this.customFilters[0],\n priceFilter: this.priceFilters[0]\n };\n\n // Make a deep copy of the original data to keep it immutable\n this.products = this.originalData.products.slice(0);\n this.sortProducts('name');\n });\n }\n\n onURLChange(url: string) {\n this.dataService.getRemoteData(url).subscribe((data: any) => {\n this.originalData = data;\n this.mainFilter = {\n search: '',\n categories: this.originalData.categories.slice(0),\n customFilter: this.customFilters[0],\n priceFilter: this.priceFilters[0]\n };\n\n // Make a deep copy of the original data to keep it immutable\n this.products = this.originalData.products.slice(0);\n this.sortProducts('name');\n this.filtersComponent.reset(this.customFilters, this.priceFilters);\n this.searchComponent.reset();\n this.cartService.flushCart();\n });\n }\n\n\n\n onSearchChange(search: any) {\n this.mainFilter.search = search.search;\n this.updateProducts({\n type: 'search',\n change: search.change\n });\n }\n\n onFilterChange(data: any) {\n if (data.type === 'category') {\n if (data.isChecked) {\n this.mainFilter.categories.push(data.filter);\n } else {\n this.mainFilter.categories = this.mainFilter.categories.filter(\n (category: any) => {\n return category.categori_id !== data.filter.categori_id;\n });\n }\n } else if (data.type === 'custom') {\n this.mainFilter.customFilter = data.filter;\n } else if (data.type === 'price') {\n this.mainFilter.priceFilter = data.filter;\n }\n this.updateProducts({\n type: data.type,\n change: data.change\n });\n }\n\n updateProducts(filter: any) {\n let productsSource = this.originalData.products;\n const prevProducts = this.products;\n let filterAllData = true;\n if ((filter.type === 'search' && filter.change === 1) || (filter.type === 'category' && filter.change === -1)) {\n productsSource = this.products;\n filterAllData = false;\n }\n // console.log('filtering ' + productsSource.length + ' products')\n\n this.products = productsSource.filter((product: any) => {\n // Filter by search\n if (filterAllData || filter.type === 'search') {\n if (!product.name.match(new RegExp(this.mainFilter.search, 'i'))) {\n return false;\n }\n }\n\n // Filter by categories\n if (filterAllData || filter.type === 'category') {\n let passCategoryFilter = false;\n product.categories.forEach((product_category: any) => {\n if (!passCategoryFilter) {\n passCategoryFilter = this.mainFilter.categories.reduce((found: any, category: any) => {\n return found || product_category === category.categori_id;\n }, false);\n }\n });\n if (!passCategoryFilter) {\n return false;\n }\n }\n\n // Filter by custom filters\n if (filterAllData || filter.type === 'custom') {\n let passCustomFilter = false;\n const customFilter = this.mainFilter.customFilter.value;\n if (customFilter === 'all') {\n passCustomFilter = true;\n } else if (customFilter === 'available' && product.available) {\n passCustomFilter = true;\n } else if (customFilter === 'unavailable' && !product.available) {\n passCustomFilter = true;\n } else if (customFilter === 'bestseller' && product.best_seller) {\n passCustomFilter = true;\n }\n if (!passCustomFilter) {\n return false;\n }\n }\n\n // Filter by price filters\n if (filterAllData || filter.type === 'price') {\n let passPriceFilter = false;\n const customFilter = this.mainFilter.priceFilter.value;\n const productPrice = parseFloat(product.price.replace(/\\./g, '').replace(',', '.'));\n if (customFilter === 'all') {\n passPriceFilter = true;\n } else if (customFilter === 'more_30000' && productPrice > 30000) {\n passPriceFilter = true;\n } else if (customFilter === 'less_10000' && productPrice < 10000) {\n passPriceFilter = true;\n }\n if (!passPriceFilter) {\n return false;\n }\n }\n\n return true;\n });\n\n // If the number of products increased after the filter has been applied then sort again\n // If the number of products remained equal, there's a high chance that the items have been reordered.\n if (prevProducts.length <= this.products.length && this.products.length > 1) {\n this.sortProducts(this.currentSorting);\n }\n\n // These two types of filters usually add new data to the products showcase so a sort is necessary\n if (filter.type === 'custom' || filter.type === 'price') {\n this.sortProducts(this.currentSorting);\n }\n }\n\n sortProducts(criteria: any) {\n // console.log('sorting ' + this.products.length + ' products')\n this.products.sort((a, b) => {\n const priceComparison = parseFloat(a.price.replace(/\\./g, '')\n .replace(',', '.')) - parseFloat(b.price.replace(/\\./g, '').replace(',', '.'));\n if (criteria === 'priceDes') {\n return -priceComparison;\n } else if (criteria === 'priceAsc') {\n return priceComparison;\n } else if (criteria === 'name') {\n const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n return 0;\n } else {\n // Keep the same order in case of any unexpected sort criteria\n return -1;\n }\n });\n this.currentSorting = criteria;\n }\n}\n" }, { "path": "src/app/app.config.ts", "content": "import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';\nimport { provideRouter } from '@angular/router';\n\nimport { routes } from './app.routes';\nimport { provideHttpClient } from '@angular/common/http';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideHttpClient(),\n provideBrowserGlobalErrorListeners(),\n provideZoneChangeDetection({ eventCoalescing: true }),\n provideRouter(routes)\n ]\n};\n" }, { "path": "src/app/app.html", "content": "\n\n\n\n\n\n\n\n\n\n\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Hello, {{ title() }}

\n

Congratulations! Your app is running. 🎉

\n
\n
\n
\n
\n @for (item of [\n { title: 'Explore the Docs', link: 'https://angular.dev' },\n { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },\n { title: 'Prompt and best practices for AI', link: 'https://angular.dev/ai/develop-with-ai'},\n { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },\n { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },\n { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },\n ]; track item.title) {\n \n {{ item.title }}\n \n \n \n \n }\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n\n\n\n\n\n\n\n\n\n\n\n" }, { "path": "src/app/app.module.ts", "content": "\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { SearchBarComponent } from './search-bar/search-bar.component';\nimport { FiltersComponent } from './filters/filters.component';\nimport { ShowcaseComponent } from './showcase/showcase.component';\nimport { CartComponent } from './cart/cart.component';\nimport { ProductThumbnailComponent } from './product-thumbnail/product-thumbnail.component';\nimport { SortFiltersComponent } from './sort-filters/sort-filters.component';\n\nimport { DataService } from './data.service';\nimport { CartService } from './cart.service';\nimport { UrlFormComponent } from './url-form/url-form.component';\n\n@NgModule({\n providers: [\n CartService\n ],\n})\nexport class AppModule { }\n" }, { "path": "src/app/app.routes.ts", "content": "import { Routes } from '@angular/router';\n\nexport const routes: Routes = [];\n" }, { "path": "src/app/app.spec.ts", "content": "import { TestBed } from '@angular/core/testing';\nimport { App } from './app';\n\ndescribe('App', () => {\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n imports: [App],\n }).compileComponents();\n });\n\n it('should create the app', () => {\n const fixture = TestBed.createComponent(App);\n const app = fixture.componentInstance;\n expect(app).toBeTruthy();\n });\n\n it('should render title', () => {\n const fixture = TestBed.createComponent(App);\n fixture.detectChanges();\n const compiled = fixture.nativeElement as HTMLElement;\n expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-shop2');\n });\n});\n" }, { "path": "src/app/app.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { Product } from './shared/product.model';\nimport { DataService } from './data.service';\nimport { CartService } from './cart.service';\nimport { ViewChild } from '@angular/core';\n\nimport { FiltersComponent } from './filters/filters.component';\nimport { SearchBarComponent } from './search-bar/search-bar.component';\nimport { ShowcaseComponent } from './showcase/showcase.component';\nimport { CartComponent } from './cart/cart.component';\nimport { SortFiltersComponent } from './sort-filters/sort-filters.component';\nimport { UrlFormComponent } from './url-form/url-form.component';\n\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss'],\n imports: [\n SearchBarComponent,\n FiltersComponent,\n ShowcaseComponent,\n CartComponent,\n SortFiltersComponent,\n UrlFormComponent,\n ],\n providers: [DataService, CartService]\n})\nexport class App implements OnInit {\n\n products: Product[] = [];\n\n mainFilter: any;\n\n currentSorting: string = '';\n\n @ViewChild('filtersComponent')\n filtersComponent!: FiltersComponent;\n\n @ViewChild('searchComponent')\n searchComponent!: SearchBarComponent;\n\n sortFilters: any[] = [\n { name: 'Nombre (A to Z)', value: 'name' },\n { name: 'Precio (low to high)', value: 'priceAsc' },\n { name: 'Precio (high to low)', value: 'priceDes' }\n ];\n\n customFilters: any[] = [\n { name: 'Todo', value: 'all', checked: true },\n { name: 'Disponible', value: 'available', checked: false },\n { name: 'No disponible', value: 'unavailable', checked: false },\n { name: 'Mejor vendido', value: 'bestseller', checked: false }\n ];\n\n priceFilters: any[] = [\n { name: 'Todo', value: 'all', checked: true },\n { name: 'Precio > 30.000', value: 'more_30000', checked: false },\n { name: 'Precio < 10.000', value: 'less_10000', checked: false }\n ];\n\n originalData: any = [];\n\n constructor(private dataService: DataService, private cartService: CartService) { }\n\n ngOnInit() {\n\n\n this.dataService.getData().then(data => {\n this.originalData = data;\n this.mainFilter = {\n search: '',\n categories: this.originalData.categories.slice(0),\n customFilter: this.customFilters[0],\n priceFilter: this.priceFilters[0]\n };\n\n // Make a deep copy of the original data to keep it immutable\n this.products = this.originalData.products.slice(0);\n this.sortProducts('name');\n });\n }\n\n onURLChange(url: string) {\n this.dataService.getRemoteData(url).subscribe((data: any) => {\n this.originalData = data;\n this.mainFilter = {\n search: '',\n categories: this.originalData.categories.slice(0),\n customFilter: this.customFilters[0],\n priceFilter: this.priceFilters[0]\n };\n\n // Make a deep copy of the original data to keep it immutable\n this.products = this.originalData.products.slice(0);\n this.sortProducts('name');\n this.filtersComponent.reset(this.customFilters, this.priceFilters);\n this.searchComponent.reset();\n this.cartService.flushCart();\n });\n }\n\n\n\n onSearchChange(search: any) {\n this.mainFilter.search = search.search;\n this.updateProducts({\n type: 'search',\n change: search.change\n });\n }\n\n onFilterChange(data: any) {\n if (data.type === 'category') {\n if (data.isChecked) {\n this.mainFilter.categories.push(data.filter);\n } else {\n this.mainFilter.categories = this.mainFilter.categories.filter(\n (category: any) => {\n return category.categori_id !== data.filter.categori_id;\n });\n }\n } else if (data.type === 'custom') {\n this.mainFilter.customFilter = data.filter;\n } else if (data.type === 'price') {\n this.mainFilter.priceFilter = data.filter;\n }\n this.updateProducts({\n type: data.type,\n change: data.change\n });\n }\n\n updateProducts(filter: any) {\n let productsSource = this.originalData.products;\n const prevProducts = this.products;\n let filterAllData = true;\n if ((filter.type === 'search' && filter.change === 1) || (filter.type === 'category' && filter.change === -1)) {\n productsSource = this.products;\n filterAllData = false;\n }\n // console.log('filtering ' + productsSource.length + ' products')\n\n this.products = productsSource.filter((product: any) => {\n // Filter by search\n if (filterAllData || filter.type === 'search') {\n if (!product.name.match(new RegExp(this.mainFilter.search, 'i'))) {\n return false;\n }\n }\n\n // Filter by categories\n if (filterAllData || filter.type === 'category') {\n let passCategoryFilter = false;\n product.categories.forEach((product_category: any) => {\n if (!passCategoryFilter) {\n passCategoryFilter = this.mainFilter.categories.reduce((found: any, category: any) => {\n return found || product_category === category.categori_id;\n }, false);\n }\n });\n if (!passCategoryFilter) {\n return false;\n }\n }\n\n // Filter by custom filters\n if (filterAllData || filter.type === 'custom') {\n let passCustomFilter = false;\n const customFilter = this.mainFilter.customFilter.value;\n if (customFilter === 'all') {\n passCustomFilter = true;\n } else if (customFilter === 'available' && product.available) {\n passCustomFilter = true;\n } else if (customFilter === 'unavailable' && !product.available) {\n passCustomFilter = true;\n } else if (customFilter === 'bestseller' && product.best_seller) {\n passCustomFilter = true;\n }\n if (!passCustomFilter) {\n return false;\n }\n }\n\n // Filter by price filters\n if (filterAllData || filter.type === 'price') {\n let passPriceFilter = false;\n const customFilter = this.mainFilter.priceFilter.value;\n const productPrice = parseFloat(product.price.replace(/\\./g, '').replace(',', '.'));\n if (customFilter === 'all') {\n passPriceFilter = true;\n } else if (customFilter === 'more_30000' && productPrice > 30000) {\n passPriceFilter = true;\n } else if (customFilter === 'less_10000' && productPrice < 10000) {\n passPriceFilter = true;\n }\n if (!passPriceFilter) {\n return false;\n }\n }\n\n return true;\n });\n\n // If the number of products increased after the filter has been applied then sort again\n // If the number of products remained equal, there's a high chance that the items have been reordered.\n if (prevProducts.length <= this.products.length && this.products.length > 1) {\n this.sortProducts(this.currentSorting);\n }\n\n // These two types of filters usually add new data to the products showcase so a sort is necessary\n if (filter.type === 'custom' || filter.type === 'price') {\n this.sortProducts(this.currentSorting);\n }\n }\n\n sortProducts(criteria: any) {\n // console.log('sorting ' + this.products.length + ' products')\n this.products.sort((a, b) => {\n const priceComparison = parseFloat(a.price.replace(/\\./g, '')\n .replace(',', '.')) - parseFloat(b.price.replace(/\\./g, '').replace(',', '.'));\n if (criteria === 'priceDes') {\n return -priceComparison;\n } else if (criteria === 'priceAsc') {\n return priceComparison;\n } else if (criteria === 'name') {\n const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n return 0;\n } else {\n // Keep the same order in case of any unexpected sort criteria\n return -1;\n }\n });\n this.currentSorting = criteria;\n }\n}\n" }, { "path": "src/app/cart/cart.component.html", "content": "
\n \n
\n
\n

Esta es tu lista de compras:

\n @for (item of products; track item.id) {\n
\n
\n
\n

{{item.quantity}} x {{item.product.name}}

\n
\n
\n

{{item.quantity * item.product.parsedPrice}}

\n
\n
\n \n
\n }\n \n
\n @if (expanded) {\n \n }\n
\n
\n
\n\n
\n" }, { "path": "src/app/cart/cart.component.scss", "content": "@use \"../shared/colors\" as *;\n@use \"../shared/mixins\" as *;\n\n.preview {\n position: relative;\n .fill {\n position: absolute;\n top: 0;\n left: 0;\n }\n}\n\n.close-btn {\n position: absolute;\n top: 6px;\n right: 5px;\n background: none;\n border: none;\n color: white;\n font-size: 0.7em;\n font-weight: 600;\n text-decoration: underline;\n opacity: 0.8;\n &:hover {\n opacity: 1;\n }\n}\n\n.pay-btn {\n display: block;\n margin-left: auto;\n margin-right: auto;\n border-radius: 44px;\n height: 44px;\n padding: 0 25px;\n border: none;\n background-color: #EF364C;\n box-shadow: 0 2px 19px rgba(0, 0, 0, 0.32);\n color: white;\n font-weight: 600;\n margin-top: 20px;\n}\n\n.expanded-info {\n opacity: 0;\n z-index: -1;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n color: white;\n width: 80%;\n margin: 0 auto;\n .product, h3, .pay-btn{\n opacity: 0;\n transform: translateY(10px);\n -webkit-transform: translateY(10px);\n @include transition-fade(0.5s);\n }\n .price {\n text-align: right;\n }\n &.shown {\n opacity: 1;\n z-index: 3;\n .product, h3, .pay-btn {\n transform: translateY(0);\n -webkit-transform: translateY(0);\n }\n h3 {\n -webkit-transition-delay: 0.2s;\n transition-delay: 0.2s;\n opacity: 0.43;\n }\n\n .product {\n -webkit-transition-delay: 0.4s;\n transition-delay: 0.4s;\n opacity: 1;\n }\n\n .pay-btn {\n -webkit-transition-delay: 0.6s;\n transition-delay: 0.6s;\n opacity: 1;\n }\n }\n h3 {\n font-weight: 400;\n font-size: 16px;\n margin-top: 30px;\n }\n .product {\n position: relative;\n width: 95%;\n p {\n margin: 0;\n }\n &:not(:last-child) {\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n }\n .delete-btn {\n position: absolute;\n right: -28px;\n top: 14px;\n background: none;\n border: none;\n opacity: 0.6;\n color: white;\n font-weight: 600;\n font-size: 0.8em;\n &:hover {\n opacity: 0.8;\n }\n }\n }\n}\n\n.preview.expanded {\n .fill {\n width: 460px;\n border-radius: 3px;\n box-shadow: 0 6px 25px rgba(0, 0, 0, 0.49);\n &.animate-plop {\n -webkit-transform: scale(1.02);\n transform: scale(1.02);\n }\n }\n}\n\n\n.preview:not(.expanded) .fill:hover {\n box-shadow: 0 2px 13px rgba(49, 46, 82, 0.65);\n}\n\n\n.preview {\n .fill {\n height: 40px;\n width: 40px;\n box-shadow: 0 2px 13px rgba(93, 78, 240, 0.55);\n background: $primary-color;\n border-radius: 50px;\n z-index: 4;\n @include transition-fade-circ(0.35s);\n\n &.not-shown {\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n &.shown {\n -webkit-transform: scale(1.3);\n transform: scale(1.3);\n }\n &.animate-plop {\n -webkit-transform: scale(1.35);\n transform: scale(1.35);\n }\n }\n .circle {\n height: 40px;\n width: 40px;\n border: none;\n padding: 0;\n border-radius: 50px;\n position: relative;\n z-index: 5;\n background: none;\n @include transition-fade-circ(0.2s);\n img {\n position: relative;\n top: 3px;\n left: -1px;\n }\n &.not-shown {\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n }\n .indicator {\n background-color: #EF364C;\n height: 14px;\n width: 14px;\n border-radius: 50%;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);\n color: white;\n position: absolute;\n top: -3px;\n font-size: 0.6em;\n right: 0;\n font-weight: 700;\n text-align: center;\n span {\n position: relative;\n top: 1px;\n }\n }\n}\n\n.overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 0;\n opacity: 0;\n @include transition-fade-circ(0.4s);\n background-color: rgba(0, 0, 0, 0.7);\n}\n\n/** Media queries **/\n@media only screen\n and (min-device-width: 320px)\n and (max-device-width: 480px) {\n\n .overlay.shown {\n height: 100%;\n opacity: 1;\n z-index: 9;\n }\n\n .pay-btn {\n margin-top: 35px;\n }\n .close-btn {\n z-index: 90;\n }\n .description, .price {\n p {\n font-size: 1em;\n }\n }\n .expanded-info {\n width: 90%;\n h3 {\n font-size: 0.9em;\n }\n .product .delete-btn {\n right: -21px;\n top: 10px;\n }\n }\n .preview {\n position: fixed;\n bottom: 3%;\n right: 5%;\n width: 13%;\n @include transition-fade-circ(0.3s);\n .fill {\n box-shadow: 0 2px 13px rgba(93, 78, 240, 0.75);\n }\n &.expanded {\n width: 90%;\n margin: 0 auto;\n bottom: 75%;\n z-index: 800;\n .fill {\n width: 100%;\n }\n }\n }\n }\n" }, { "path": "src/app/cart/cart.component.ts", "content": "import { Component, OnInit, ChangeDetectorRef } from '@angular/core';\nimport { CartService } from '../cart.service';\nimport { CommonModule } from '@angular/common';\n\nconst OFFSET_HEIGHT = 170;\nconst PRODUCT_HEIGHT = 48;\n\n@Component({\n selector: 'app-cart',\n templateUrl: './cart.component.html',\n styleUrls: ['./cart.component.scss'],\n imports: [CommonModule]\n})\nexport class CartComponent implements OnInit {\n\n products: any[] = [];\n numProducts = 0;\n animatePlop = false;\n animatePopout = false;\n expanded = false;\n expandedHeight: string = '';\n cartTotal = 0;\n inherit: string = '';\n\n changeDetectorRef: ChangeDetectorRef;\n\n\n constructor(private cartService: CartService, changeDetectorRef: ChangeDetectorRef) {\n this.changeDetectorRef = changeDetectorRef;\n }\n\n ngOnInit() {\n this.expandedHeight = '0';\n this.cartService.productAdded$.subscribe((data: any) => {\n this.products = data.products;\n this.cartTotal = data.cartTotal;\n this.numProducts = data.products.reduce((acc: any, product: any) => {\n acc += product.quantity;\n return acc;\n }, 0);\n\n // Make a plop animation\n if (this.numProducts > 1) {\n this.animatePlop = true;\n setTimeout(() => {\n this.animatePlop = false;\n }, 160);\n } else if (this.numProducts === 1) {\n this.animatePopout = true;\n setTimeout(() => {\n this.animatePopout = false;\n }, 300);\n }\n this.expandedHeight = (this.products.length * PRODUCT_HEIGHT + OFFSET_HEIGHT) + 'px';\n if (!this.products.length) {\n this.expanded = false;\n }\n this.changeDetectorRef.detectChanges();\n });\n }\n\n deleteProduct(product: any) {\n this.cartService.deleteProductFromCart(product);\n }\n\n onCartClick() {\n this.expanded = !this.expanded;\n }\n\n}\n" }, { "path": "src/app/cart.service.ts", "content": "import { Injectable } from '@angular/core';\nimport { Product } from './shared/product.model';\nimport { Subject } from 'rxjs';\n\n\n@Injectable()\nexport class CartService {\n\n products: any[] = [];\n cartTotal = 0;\n\n private productAddedSource = new Subject();\n\n\n productAdded$ = this.productAddedSource.asObservable();\n\n constructor() { }\n\n addProductToCart(product: any) {\n let exists = false;\n const parsedPrice = parseFloat(product.price.replace(/\\./g, '').replace(',', '.'));\n this.cartTotal += parsedPrice;\n // Search this product on the cart and increment the quantity\n this.products = this.products.map(_product => {\n if (_product.product.id === product.id) {\n _product.quantity++;\n exists = true;\n }\n return _product;\n });\n // Add a new product to the cart if it's a new product\n if (!exists) {\n product.parsedPrice = parsedPrice;\n this.products.push({\n product: product,\n quantity: 1\n });\n }\n\n this.productAddedSource.next({ products: this.products, cartTotal: this.cartTotal });\n }\n\n deleteProductFromCart(product: any) {\n this.products = this.products.filter(_product => {\n if (_product.product.id === product.id) {\n this.cartTotal -= _product.product.parsedPrice * _product.quantity;\n return false;\n }\n return true;\n });\n this.productAddedSource.next({ products: this.products, cartTotal: this.cartTotal });\n }\n\n\n flushCart() {\n this.products = [];\n this.cartTotal = 0;\n this.productAddedSource.next({ products: this.products, cartTotal: this.cartTotal });\n }\n}\n" }, { "path": "src/app/data.service.ts", "content": "import { Injectable } from '@angular/core';\nimport { HttpClient, HttpErrorResponse } from '@angular/common/http';\nimport { Observable, of, throwError } from 'rxjs';\nimport { catchError } from 'rxjs/operators';\n\nimport { DATA } from './mock-data';\n\n@Injectable({ providedIn: 'root' })\nexport class DataService {\n constructor(private http: HttpClient) {}\n\n /** Local mock data — use Observable for consistency */\n getData(): Promise {\n return Promise.resolve(DATA);\n }\n\n /** Remote data — HttpClient already parses JSON */\n getRemoteData(url: string): Observable {\n return this.http.get(url).pipe(\n catchError(this.handleError)\n );\n }\n\n private handleError(error: HttpErrorResponse) {\n const message =\n error.error?.message ||\n (typeof error.error === 'string' && error.error) ||\n `${error.status} - ${error.statusText || 'Server error'}`;\n console.error('HTTP error:', error);\n return throwError(() => new Error(message));\n }\n}\n" }, { "path": "src/app/filters/filters.component.html", "content": "\n
\n \n
Filtrar por categoría
\n @if (showFilters) {\n
\n @for (filter of categories; track $index) {\n
\n \n
\n }\n
\n }\n
Filtrar por precio
\n\n @if (showFilters) {\n
\n @for (filter of priceFilters; track $index) {\n
\n \n
\n }\n
\n }\n
Filtros personalizados
\n @if (showFilters) {\n
\n @for (filter of customFilters; track $index) {\n
\n \n
\n }\n
\n }\n
\n" }, { "path": "src/app/filters/filters.component.scss", "content": "@use \"../shared/colors\" as *;\n@use \"../shared/mixins\" as *;\n\n.filters{\n border: 1px solid #333333;\n padding: 20px;\n width: 100%;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n background-color: white;\n border: none;\n border-radius: 4px;\n padding-top: 1px;\n position: relative;\n}\n\n.filter{\n width: 100%;\n background: #999999;\n border-radius: 3px;\n margin-bottom: 10px;\n height: 35px;\n}\n\n.fake-checkbox{\n position: relative;\n}\n\n.filter-wrapper{\n margin-bottom: 8px;\n label{\n cursor: pointer;\n &:hover .label{\n\n }\n }\n input[type=checkbox], input[type=radio]{\n display: none;\n &:checked + .square, &:checked + .circle{\n opacity: 1;\n }\n &:checked + .square .fill, &:checked + .circle .fill{\n opacity: 1;\n }\n &:checked ~ .label{\n opacity: 1;\n }\n }\n .square, .circle, .fill{\n display: inline-block;\n }\n .square, .circle{\n height: 16px;\n width: 16px;\n border: 1px solid $primary-color;\n position: relative;\n opacity: 0.4;\n .fill{\n height: 10px;\n width: 10px;\n background-color: $primary-color;\n @include transition-fade-circ(0.25s);\n position: absolute;\n opacity: 0;\n }\n }\n .square{\n border-radius: 3px;\n .fill{\n border-radius: 2px;\n }\n }\n .circle{\n border-radius: 50%;\n .fill{\n border-radius: 50%;\n }\n }\n .fill{\n top: 3px;\n left: 3px;\n }\n .label{\n text-transform: capitalize;\n position: relative;\n top: -4px;\n margin-left: 7px;\n opacity: 0.6;\n @include transition-fade(0.4s);\n }\n}\n\nh5{\n text-transform: uppercase;\n color: #bababa;\n font-size: 0.8em;\n font-weight: 600;\n &:after{\n content: \"\";\n display: block;\n width: 100%;\n height: 1px;\n margin-top: 3px;\n background-color: #e8e8e8;\n }\n}\n\n.toggle-btn{\n display: none;\n}\n\n.close-side-btn{\n display: none;\n background: none;\n border: none;\n}\n\n/** Media queries **/\n@media only screen\n and (min-device-width: 320px)\n and (max-device-width: 480px) {\n .close-side-btn{\n display: block;\n position: absolute;\n color: #aaaaaa;\n font-size: 1.2em;\n font-weight: 300;\n right: 18px;\n top: 6px;\n opacity: 0.7;\n }\n .toggle-btn{\n display: inline-block;\n position: absolute;\n left: -69px;\n top: 11px;\n background: white;\n border-radius: 3px;\n color: #5D4EF0;\n padding: 4px 11px;\n border: none;\n font-size: 0.8em;\n font-weight: 600;\n box-shadow: 0 2px 15px rgba(0,0,0,0.4);\n }\n .filters{\n width: initial;\n position: relative;\n box-shadow: none;\n border-radius: 0;\n height: 100%;\n @include transition-fade-circ(0.35s);\n &.side-shown{\n -webkit-transform: translateX(-100%);\n transform: translateX(-100%);\n }\n }\n }\n" }, { "path": "src/app/filters/filters.component.ts", "content": "import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\nimport { Category } from '../shared/category.model';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n selector: 'app-filters',\n templateUrl: './filters.component.html',\n styleUrls: ['./filters.component.scss'],\n imports: [CommonModule]\n})\nexport class FiltersComponent implements OnInit {\n\n @Input()\n categories: Category[] = [];\n\n @Input()\n customFilters: any[] = [];\n\n @Input()\n priceFilters: any[] = [];\n\n @Input()\n filter: any = {};\n\n @Output()\n filterChange = new EventEmitter();\n\n\n showFilters = true;\n\n sideShown = false;\n\n constructor() { }\n\n ngOnInit() {\n }\n\n reset(customFilters: any, priceFilters: any) {\n this.customFilters = customFilters;\n this.priceFilters = priceFilters;\n this.showFilters = false;\n setTimeout(() => {\n this.showFilters = true;\n });\n }\n\n onInputChange($event: any, filter: any, type: any) {\n const change = $event.target.checked ? 1 : -1;\n this.filterChange.emit({\n type: type,\n filter: filter,\n isChecked: $event.target.checked,\n change: change\n });\n }\n}\n" }, { "path": "src/app/index.ts", "content": "export * from './app.component';\nexport * from './app.module';\n" }, { "path": "src/app/mock-data.ts", "content": "export const DATA: any = {\n 'categories': [\n {\n 'categori_id': 1,\n 'name': 'bebidas'\n },\n {\n 'categori_id': 2,\n 'name': 'almuerzo'\n },\n {\n 'categori_id': 3,\n 'name': 'comida'\n },\n {\n 'categori_id': 4,\n 'name': 'mar'\n }\n ],\n 'products': [\n {\n 'id': 1,\n 'name': 'Lorem',\n 'price': '60.000',\n 'available': true,\n 'best_seller': true,\n 'categories': [\n 1,\n 4\n ],\n 'img': 'https://placehold.co/200x100',\n 'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.'\n },\n {\n 'id': 2,\n 'name': 'ipsum',\n 'price': '20.000',\n 'available': false,\n 'best_seller': false,\n 'categories': [\n 4\n ],\n 'img': 'https://placehold.co/200x100',\n 'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.'\n },\n {\n 'id': 3,\n 'name': 'dolor',\n 'price': '10.000',\n 'available': true,\n 'best_seller': true,\n 'categories': [\n 4\n ],\n 'img': 'https://placehold.co/200x100',\n 'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.'\n },\n {\n 'id': 4,\n 'name': 'sit',\n 'price': '35.000',\n 'available': false,\n 'best_seller': false,\n 'categories': [\n 1,\n 2\n ],\n 'img': 'https://placehold.co/200x100',\n 'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.'\n },\n {\n 'id': 5,\n 'name': 'amet',\n 'price': '12.000',\n 'available': true,\n 'best_seller': true,\n 'categories': [\n 1,\n 4\n ],\n 'img': 'https://placehold.co/200x100',\n 'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.'\n },\n {\n 'id': 6,\n 'name': 'consectetur',\n 'price': '120.000',\n 'available': true,\n 'best_seller': false,\n 'categories': [\n 1,\n 4\n ],\n 'img': 'https://placehold.co/200x100',\n 'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.'\n },\n {\n 'id': 7,\n 'name': 'adipiscing',\n 'price': '50.000',\n 'available': false,\n 'best_seller': false,\n 'categories': [\n 1,\n 3\n ],\n 'img': 'https://placehold.co/200x100',\n 'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.'\n },\n {\n 'id': 8,\n 'name': 'elit',\n 'price': '2000',\n 'available': true,\n 'best_seller': false,\n 'categories': [\n 1,\n 3\n ],\n 'img': 'https://placehold.co/200x100',\n 'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.'\n },\n {\n 'id': 9,\n 'name': 'Maecenas',\n 'price': '150.000',\n 'available': true,\n 'best_seller': true,\n 'categories': [\n 2,\n 4\n ],\n 'img': 'https://placehold.co/200x100',\n 'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.'\n },\n {\n 'id': 10,\n 'name': 'eu',\n 'price': '200.000',\n 'available': false,\n 'best_seller': true,\n 'categories': [\n 2,\n 3\n ],\n 'img': 'https://placehold.co/200x100',\n 'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.'\n }\n ]\n};\n" }, { "path": "src/app/product-thumbnail/product-thumbnail.component.html", "content": "
\n
\n
\n \n
\n
\n
{{product.name}}
\n

${{product.price}}

\n
\n @if (product.available) {\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n }\n @if (!product.available) {\n
\n
\n

No disponible

\n
\n }\n
\n
\n
\n
\n

{{product.name}}

\n

$ {{product.price}}

\n

{{product.description}}

\n
\n \n
\n
\n @if (product.best_seller) {\n
\n  \n Bestseller\n  \n
\n }\n
\n" }, { "path": "src/app/product-thumbnail/product-thumbnail.component.scss", "content": "@use \"../shared/colors\" as *;\n@use \"../shared/mixins\" as *;\n\n:host {\n display: block;\n height: 210px;\n}\n\n.wrapper{\n border-radius: 5px;\n box-shadow: 0 5px 5px;\n position: relative;\n text-align: center;\n display: block;\n background-color: white;\n box-shadow: 0 6px 17px rgba(0,0,0,0.07);\n}\n\n.add-cart-wrapper, .view-details-wrapper{\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.view-details-wrapper{\n position: relative;\n &:after{\n content: \"\";\n width: 1px;\n display: block;\n position: absolute;\n height: 28px;\n background-color: #5D4EF0;\n right: -3px;\n top: -4px;\n opacity: 0.2;\n }\n}\n\n.hide-detail-btn{\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n text-align: center;\n width: 100%;\n z-index: 20;\n background: none;\n border: none;\n color: white;\n opacity: 0.6;\n font-size: 0.7em;\n font-weight: 600;\n cursor: pointer;\n background: rgba(255, 255, 255, 0.1);\n @include transition-fade-circ(0.5s);\n -webkit-transform: translateY(15px);\n transform: translateY(15px);\n -webkit-transition-delay: 1.2s;\n transition-delay: 1.2s;\n &:hover{\n background: rgba(255, 255, 255, 0.2);\n }\n}\n\n.img-wrapper{\n height: 85px;\n position: relative;\n overflow: hidden;\n\n}\n\n::-webkit-scrollbar {\n display: none;\n}\n\n.details{\n padding-bottom: 7px;\n hr{\n width: 90%;\n height: 0;\n border-top: 1px solid $primary-color;\n }\n button{\n background: none;\n border: none;\n cursor: pointer;\n }\n .view:hover, .cart:hover{\n opacity: 0.8;\n }\n .view{\n text-transform: uppercase;\n color: $primary-color;\n font-size: 0.85em;\n font-weight: 500;\n position: relative;\n top: -1px;\n left: -2px;\n }\n .cart{\n position: relative;\n top: 2px;\n }\n .not-available{\n hr{\n border-top: 1px solid #999999;\n }\n p{\n margin: 0;\n margin-top: -7px;\n position: relative;\n top: 2px;\n text-transform: uppercase;\n font-size: 0.85em;\n font-weight: 500;\n padding-top: 5px;\n padding-bottom: 3px;\n }\n }\n}\n\n.img-placeholder, .img{\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n border-radius: 5px 5px 0 0;\n}\n\n.img-placeholder{\n z-index: 3;\n height: 100%;\n background: #dddddd;\n}\n\n.detail-view{\n position: absolute;\n z-index: 30;\n border-radius: 5px;\n overflow: hidden;\n top: 0;\n height: 100%;\n width: 100%;\n pointer-events: none;\n\n &.active{\n pointer-events: all;\n .hide-detail-btn{\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n .info-wrapper{\n opacity: 1;\n }\n .bg{\n -webkit-transform: scale(232);\n transform: scale(232);\n }\n .d-holder{\n opacity: 1;\n -webkit-transform: translate(0);\n transform: translate(0);\n @include transition-fade(0.5s);\n }\n .d-title{\n -webkit-transition-delay: 0.8;\n transition-delay: 0.4s;\n }\n .d-price{\n -webkit-transition-delay: 0.8;\n transition-delay: 0.5s;\n }\n .d-description{\n -webkit-transition-delay: 0.8;\n transition-delay: 0.6s;\n }\n\n }\n .d-holder{\n opacity: 0;\n -webkit-transform: translateY(10px);\n transform: translateY(10px);\n @include transition-fade(0.1s);\n }\n .d-title{\n font-size: 1.3em;\n font-weight: 600;\n margin-bottom: 0;\n margin-top: 5px;\n }\n .d-price{\n margin-top: -7px;\n font-size: 0.9em;\n }\n .d-description{\n font-size: 0.9em;\n line-height: 1.4em;\n }\n .info-wrapper{\n position: relative;\n z-index: 30;\n color: white;\n text-align: left;\n padding-left: 14px;\n padding-right: 14px;\n height: 90%;\n overflow: scroll;\n }\n .bg{\n position: absolute;\n bottom: -9px;\n left: 43px;\n height: 3px;\n width: 3px;\n border-radius: 50%;\n z-index: 20;\n background: $primary-color;\n @include transition-fade-circ(0.4s);\n }\n}\n\n.info{\n position: relative;\n}\n\n.unavailable{\n opacity: 0.3;\n}\n\n.img{\n z-index: 5;\n height: auto;\n background-color: #eeeeee;\n}\n\n.title{\n font-size: 1em;\n margin-top: 18px;\n font-weight: 600;\n margin-bottom: 3px;\n}\n\n.price{\n margin-bottom: 10px;\n color: #999999;\n font-size: 18px;\n font-weight: 300;\n margin-top: 0;\n}\n\n.bestseller-badge{\n position: absolute;\n top: -10px;\n border-radius: 10px;\n background-color: #EF364C;\n color: white;\n font-size: 0.7em;\n left: 0;\n right: 0;\n margin: 0 auto;\n width: 70%;\n z-index: 40;\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 0.1em;\n overflow: hidden;\n height: 20px;\n @include transition-fade-circ(0.35s);\n box-shadow: 0 2px 7px rgba(0, 0, 0, 0.48);\n .txt, .star{\n @include transition-fade(0.35s);\n }\n .txt{\n position: relative;\n top: 4px;\n }\n .star{\n position: absolute;\n top: 2px;\n &.left{\n left: 8px;\n }\n &.right{\n right: 14px;\n }\n }\n &.in-detailed{\n box-shadow: 0 2px 7px rgba(0, 0, 0, 0);\n width: 20px;\n height: 20px;\n padding: 0;\n top: 9px;\n right: -80%;\n background-color: $primary-color;\n .right, .txt{\n opacity: 0;\n }\n .left{\n left: 5px;\n top: 2px;\n }\n }\n}\n\n.sad-face{\n border-radius: 50%;\n background-color: #aaaaaa;\n height: 90px;\n width: 90px;\n}\n\n.category-name{\n display: inline-block;\n margin-right: 10px;\n}\n\n.star{\n &:before{\n content: \"\\2605\";\n position: absolute;\n color: white;\n }\n}\n\n\n/** Media queries **/\n@media only screen\n and (min-device-width: 320px)\n and (max-device-width: 480px) {\n .detail-view.active .bg{\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n .hide-detail-btn{\n height: 32px;\n -webkit-transform: translateY(32px);\n transform: translateY(32px);\n }\n .wrapper{\n margin-bottom: -22px;\n }\n .img-wrapper{\n height: 123px;\n }\n\n .detail-view{\n .bg{\n width: 100%;\n height: 100%;\n border-radius: 0;\n left: 0;\n bottom: 0;\n -webkit-transform: translateY(100%);\n transform: translateY(100%);\n }\n .info-wrapper{\n padding: 10px 25px;\n height: 78%;\n }\n }\n}\n" }, { "path": "src/app/product-thumbnail/product-thumbnail.component.ts", "content": "import { Component, OnInit, Input } from '@angular/core';\nimport { Product } from '../shared/product.model';\nimport { CartService } from '../cart.service';\n\n@Component({\n selector: 'app-product-thumbnail',\n templateUrl: './product-thumbnail.component.html',\n styleUrls: ['./product-thumbnail.component.scss']\n})\nexport class ProductThumbnailComponent implements OnInit {\n\n @Input() product: Product = {\n id: 0,\n name: '',\n price: '',\n available: false,\n best_seller: false,\n categories: [0],\n img: '',\n description: '',\n };\n\n detailViewActive: boolean = false;\n\n constructor(private cartService: CartService) {\n\n }\n\n ngOnInit() {\n this.detailViewActive = false;\n }\n\n onProductClick() {\n this.detailViewActive = !this.detailViewActive;\n }\n\n onAddToCart() {\n this.cartService.addProductToCart(this.product);\n }\n\n}\n" }, { "path": "src/app/search-bar/search-bar.component.html", "content": "
\n @if (showSearch) {\n \n }\n \n \n \n \n \n \n \n
\n" }, { "path": "src/app/search-bar/search-bar.component.scss", "content": "@use \"../shared/colors\" as *;\n@use \"../shared/mixins\" as *;\n\n@-webkit-keyframes plop-glass{\n 50%{\n -webkit-transform: scale(1.35);\n transform: scale(1.35);\n }\n 100%{\n -webkit-transform: scale(1.2);\n transform: scale(1.2);\n }\n}\n\n@keyframes plop-glass{\n 50%{\n -webkit-transform: scale(1.35);\n transform: scale(1.35);\n }\n 100%{\n -webkit-transform: scale(1.2);\n transform: scale(1.2);\n }\n}\n\n.wrapper{\n position: relative;\n display: block;\n margin-left: auto;\n}\n\n.search-bar{\n width: 100%;\n display: block;\n margin: 0 auto;\n height: 35px;\n border-radius: 20px;\n border: none;\n padding-left: 20px;\n box-shadow: 0 3px 14px rgba(25, 25, 25, 0.05);\n font-weight: 500;\n position: relative;\n left: -33px;\n color: #999999;\n @include transition-fade-circ(0.4s);\n &:focus{\n box-shadow: 0 4px 11px rgba(93, 78, 240, 0.09);\n font-weight: 500;\n color: $primary-color;\n width: 120%;\n -webkit-transform: translateX(-15%);\n transform: translateX(-15%);\n & + svg path{\n fill: $primary-color;\n }\n & + svg{\n -webkit-transform: scale(1.2);\n transform: scale(1.2);\n }\n }\n}\n\nsvg.animate-plop{\n -webkit-animation: plop-glass 0.1s ease forwards;\n animation: plop-glass 0.1s ease forwards;\n}\n\n::-webkit-input-placeholder {\n color: #cccccc;\n}\n\n:-moz-placeholder { /* Firefox 18- */\n color: #cccccc;\n}\n\n::-moz-placeholder { /* Firefox 19+ */\n color: #cccccc\n}\n:-ms-input-placeholder {\n color: #cccccc;\n}\n\nsvg{\n position: absolute;\n right: 24px;\n top: 3px;\n height: 31px;\n width: 15px;\n @include transition-fade(0.3s);\n path{\n fill: #333333;\n }\n}\n\n/** Media queries **/\n@media only screen\n and (min-device-width: 320px)\n and (max-device-width: 480px) {\n .search-bar{\n left: 0;\n border-radius: 0;\n height: 43px;\n &:focus{\n width: 100%;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n }\n svg{\n top: 8px;\n }\n }\n" }, { "path": "src/app/search-bar/search-bar.component.ts", "content": "import { Component, OnInit, EventEmitter, Output } from '@angular/core';\n\n@Component({\n selector: 'app-search-bar',\n standalone: true,\n templateUrl: './search-bar.component.html',\n styleUrls: ['./search-bar.component.scss']\n})\nexport class SearchBarComponent implements OnInit {\n\n previousSearch: string = '';\n\n animatePlop = false;\n\n showSearch = true;\n\n @Output()\n searchChange = new EventEmitter();\n\n constructor() { }\n\n ngOnInit() {\n this.previousSearch = '';\n }\n\n /*\n This event will emit an object indicating the new search term, and:\n -1 if the search term length has descreased\n 1 if the search term length has increased\n 0 if the search term remained equal\n */\n onSearchKeyup(search: string) {\n let change = 0;\n if (search.length > this.previousSearch.length) {\n change = 1;\n } else if (search.length < this.previousSearch.length) {\n change = -1;\n }\n this.previousSearch = search;\n if (change !== 0) {\n this.searchChange.emit({search, change});\n }\n }\n\n // Perform a plop animation on the search icon. This animation is executed on keydown just for visual reasons\n plop() {\n this.animatePlop = true;\n setTimeout(() => {\n this.animatePlop = false;\n }, 110);\n }\n\n reset() {\n this.showSearch = false;\n setTimeout(() => {\n this.showSearch = true;\n });\n }\n}\n" }, { "path": "src/app/shared/_colors.scss", "content": "$primary-color: #5D4EF0;\n$text-color: #444444;\n$secondary-color: #EF364C;\n" }, { "path": "src/app/shared/_grid.scss", "content": "// SIMPLE GRID - SASS/SCSS (deprecation-safe)\n\n// 1) Load Sass math for division\n@use \"sass:math\";\n\n// 2) (Recommended) Load Google Fonts in HTML instead of Sass:\n// \n\n// colors\n$dark-grey: #333447;\n$dark-gray: #333447; // alias\n\n// universal\nhtml,\nbody {\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n left: 0;\n top: 0;\n}\n\n// typography\nh1 { font-size: 2.5rem; }\nh2 { font-size: 2rem; }\nh3 { font-size: 1.375rem; }\nh4 { font-size: 1.125rem; }\nh5 { font-size: 1rem; }\nh6 { font-size: 0.875rem; }\np { font-size: 1.125rem; line-height: 1.8; }\n\n// utility\n.left { text-align: left; }\n.right { text-align: right; }\n.center { text-align: center; margin-left: auto; margin-right: auto; }\n.justify{ text-align: justify; }\n.hidden-sm { display: none; }\n\n// grid\n$width: 96%;\n$gutter: 4%;\n$breakpoint-small: 33.75em; // 540px\n$breakpoint-med: 45em; // 720px\n$breakpoint-large: 60em; // 960px\n\n.container {\n width: 90%;\n margin-left: auto;\n margin-right: auto;\n\n @media only screen and (min-width: $breakpoint-small) {\n width: 80%;\n }\n\n @media only screen and (min-width: $breakpoint-large) {\n width: 75%;\n max-width: 60rem;\n }\n}\n\n.row {\n position: relative;\n width: 100%;\n}\n\n.row [class^=\"col\"] {\n float: left;\n margin: 0.5rem 2%;\n min-height: 0.125rem;\n}\n\n.row::after {\n content: \"\";\n display: table;\n clear: both;\n}\n\n.col-1,\n.col-2,\n.col-3,\n.col-4,\n.col-5,\n.col-6,\n.col-7,\n.col-8,\n.col-9,\n.col-10,\n.col-11,\n.col-12 {\n width: $width;\n}\n\n// Helper to compute column width without deprecated `/`\n@function col-width($n) {\n // (($width / (12 / $n)) - ($gutter * (12 - $n) / 12))\n @return math.div($width, math.div(12, $n)) - math.div($gutter * (12 - $n), 12);\n}\n\n/* Small (default) cols */\n.col-1-sm { width: col-width(1); }\n.col-2-sm { width: col-width(2); }\n.col-3-sm { width: col-width(3); }\n.col-4-sm { width: col-width(4); }\n.col-5-sm { width: col-width(5); }\n.col-6-sm { width: col-width(6); }\n.col-7-sm { width: col-width(7); }\n.col-8-sm { width: col-width(8); }\n.col-9-sm { width: col-width(9); }\n.col-10-sm { width: col-width(10); }\n.col-11-sm { width: col-width(11); }\n.col-12-sm { width: $width; }\n\n/* Medium+ cols */\n@media only screen and (min-width: $breakpoint-med) {\n .col-1 { width: col-width(1); }\n .col-2 { width: col-width(2); }\n .col-3 { width: col-width(3); }\n .col-4 { width: col-width(4); }\n .col-5 { width: col-width(5); }\n .col-6 { width: col-width(6); }\n .col-7 { width: col-width(7); }\n .col-8 { width: col-width(8); }\n .col-9 { width: col-width(9); }\n .col-10 { width: col-width(10); }\n .col-11 { width: col-width(11); }\n .col-12 { width: $width; }\n\n .hidden-sm { display: block; }\n}\n" }, { "path": "src/app/shared/_mixins.scss", "content": "@mixin transition-fade($time) {\n -webkit-transition: all $time ease;\n transition: all $time ease;\n}\n\n@mixin transition-fade-circ($time) {\n -webkit-transition: all $time cubic-bezier(0.785, 0.135, 0.15, 0.86);\n transition: all $time cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n" }, { "path": "src/app/shared/category.model.ts", "content": "export class Category {\n categori_id: number = 0;\n name: string = '';\n}\n" }, { "path": "src/app/shared/index.ts", "content": "" }, { "path": "src/app/shared/product.model.ts", "content": "export class Product {\n id: number = 0;\n name: string = '';\n price: string = '';\n available: boolean = false;\n best_seller: boolean = false;\n categories: number[] = [0];\n img: string = '';\n description: string = '';\n}\n" }, { "path": "src/app/showcase/showcase.component.html", "content": "
\n @for (product of products; track product.id) {\n \n \n }\n
\n" }, { "path": "src/app/showcase/showcase.component.scss", "content": ".row .product-thumbnail{\n margin-bottom: 2rem;\n}\n" }, { "path": "src/app/showcase/showcase.component.ts", "content": "import { Component, OnInit, Input } from '@angular/core';\nimport { Product } from '../shared/product.model';\nimport { CartService } from '../cart.service';\nimport { ProductThumbnailComponent } from '../product-thumbnail/product-thumbnail.component';\n\n@Component({\n selector: 'app-showcase',\n templateUrl: './showcase.component.html',\n styleUrls: ['./showcase.component.scss'],\n imports: [\n ProductThumbnailComponent,\n ]\n})\nexport class ShowcaseComponent implements OnInit {\n\n @Input() products: Product[] = [];\n\n constructor(private cartService: CartService) {\n\n }\n\n ngOnInit() {\n }\n}\n" }, { "path": "src/app/sort-filters/sort-filters.component.html", "content": "
\n \n \n
\n
\n" }, { "path": "src/app/sort-filters/sort-filters.component.scss", "content": "@use \"../shared/colors\" as *;\n@use \"../shared/mixins\" as *;\n\n.wrapper{\n display: block;\n height: 35px;\n background: none;\n font-size: 14px;\n padding-left: 11px;\n position: relative;\n top: 4px;\n label{\n opacity: 0.8;\n }\n select{\n color: $primary-color;\n background: none;\n border: none;\n font-size: 13px;\n margin-left: 2px;\n font-weight: 500;\n cursor: pointer;\n width: 130px;\n }\n .triangle{\n height: 0;\n width: 0;\n border-top: 4px solid $primary-color;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n display: inline-block;\n position: relative;\n top: -2px;\n right: 14px;\n pointer-events: none;\n opacity: 0.3;\n }\n}\n\n/** Media queries **/\n@media only screen\n and (min-device-width: 320px)\n and (max-device-width: 480px) {\n .wrapper{\n label{\n color: white;\n }\n select{\n color: white;\n }\n .triangle{\n border-top: 4px solid white;\n }\n }\n\n }\n" }, { "path": "src/app/sort-filters/sort-filters.component.ts", "content": "import { CommonModule } from '@angular/common';\nimport { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n selector: 'app-sort-filters',\n templateUrl: './sort-filters.component.html',\n styleUrls: ['./sort-filters.component.scss'],\n imports: [\n CommonModule\n ],\n})\nexport class SortFiltersComponent implements OnInit {\n\n @Input()\n filter: any = {};\n\n @Input()\n filters: any[] = [];\n\n @Output()\n sortChange = new EventEmitter();\n\n constructor() { }\n\n ngOnInit() {\n }\n\n onSelectChange($event: any) {\n this.sortChange.emit($event.target.value);\n }\n\n}\n" }, { "path": "src/app/url-form/url-form.component.html", "content": "
\n
\n \n \n \n
\n
\n" }, { "path": "src/app/url-form/url-form.component.scss", "content": "@use \"../shared/colors\" as *;\n@use \"../shared/mixins\" as *;\n\n.wrapper{\n margin-bottom: 20px;\n position: relative;\n}\n.url-btn{\n background: $secondary-color;\n border: none;\n padding: 0;\n height: 36px;\n width: 36px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 100;\n svg{\n height: 9px;\n }\n}\n\n.fill{\n width: 0px;\n height: 36px;\n width: 36px;\n border-radius: 3px;\n background-color: $secondary-color;\n box-shadow: 0 2px 13px rgba(0, 0, 0, 0.3);\n position: relative;\n overflow: hidden;\n @include transition-fade-circ(0.2s);\n &.expanded{\n width: 400px;\n .url-input{\n width: 80%;\n color: white;\n margin-left: 34px;\n }\n }\n}\n\n.url-input{\n width: 0px;\n position: absolute;\n background: none;\n border: none;\n border-radius: 0;\n margin-left: 0;\n margin-left: 44px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.27);\n background: rgba(255,255,255,0.1);\n position: relative;\n top: 7px;\n padding-left: 4px;\n @include transition-fade(0.5s);\n &:focus{\n border-bottom: 1px solid rgba(255, 255, 255, 1);\n }\n}\n\n.send-btn{\n width: 0;\n position: absolute;\n height: 36px;\n width: 36px;\n z-index: 50;\n top:0;\n border: none;\n background: none;\n svg{\n height: 14px;\n position: relative;\n top: 3px;\n }\n}\n\n\n::-webkit-input-placeholder {\n color: rgba(255,255,255,0.4);\n}\n\n:-moz-placeholder { /* Firefox 18- */\n color: rgba(255,255,255,0.4);\n}\n\n::-moz-placeholder { /* Firefox 19+ */\n color: rgba(255,255,255,0.4)\n}\n:-ms-input-placeholder {\n color: rgba(255,255,255,0.4);\n}\n\n/** Media queries **/\n@media only screen\n and (min-device-width: 320px)\n and (max-device-width: 480px) {\n .wrapper{\n margin-bottom: 20px;\n position: absolute;\n top: 152px;\n }\n .fill{\n &.expanded{\n width: 250px;\n .url-input{\n width: 168px;\n top: 2px;\n }\n .send-btn{\n padding: 0;\n }\n }\n }\n}\n" }, { "path": "src/app/url-form/url-form.component.ts", "content": "import { Component, OnInit, EventEmitter, Output } from '@angular/core';\n\n@Component({\n selector: 'app-url-form',\n templateUrl: './url-form.component.html',\n styleUrls: ['./url-form.component.scss']\n})\nexport class UrlFormComponent implements OnInit {\n\n @Output()\n urlChange = new EventEmitter();\n\n expanded = false;\n\n constructor() { }\n\n ngOnInit() {\n }\n\n onSend(url: string) {\n this.expanded = false;\n this.urlChange.emit(url);\n }\n\n}\n" }, { "path": "src/index.html", "content": "\n\n\n \n AngularShop2\n \n \n \n\n\n \n\n\n" }, { "path": "src/main.ts", "content": "import { bootstrapApplication } from '@angular/platform-browser';\nimport { appConfig } from './app/app.config';\nimport { App } from './app/app';\n\nbootstrapApplication(App, appConfig)\n .catch((err) => console.error(err));\n" }, { "path": "src/styles.scss", "content": "/* You can add global styles to this file, and also import other style files */\n/* You can add global styles to this file, and also import other style files */\n@use \"./app/shared/grid\" as *;\n@use \"./app/shared/colors\" as *;\n\n$font-family: 'Roboto', Helvetica, sans-serif;\n\nhtml, body {\n font-family: $font-family;\n color: #444444;\n -webkit-font-smoothing: antialiased;\n -webkit-overflow-scrolling: touch;\n height: 100%;\n margin: 0;\n font-size: 16px;\n font-weight: 400;\n background-color: #f2f2f2;\n}\n\ninput, textarea, button {\n font-family: inherit;\n font-size: 1em;\n}\n\ninput:not([type=checkbox]):not([type=radio]), textarea {\n -webkit-appearance: none !important;\n}\n\n* {\n outline: none;\n}\n\nselect::-ms-expand {\n display: none;\n}\n\nselect {\n -webkit-appearance: none;\n -moz-appearance: none;\n text-indent: -1px;\n text-overflow: '';\n}\n\nbutton {\n cursor: pointer;\n}\n" }, { "path": "tsconfig.app.json", "content": "/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */\n/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */\n{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"include\": [\n \"src/**/*.ts\"\n ],\n \"exclude\": [\n \"src/**/*.spec.ts\"\n ]\n}\n" }, { "path": "tsconfig.json", "content": "/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */\n/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */\n{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"isolatedModules\": true,\n \"experimentalDecorators\": true,\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"preserve\"\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"typeCheckHostBindings\": true,\n \"strictTemplates\": true\n },\n \"files\": [],\n \"references\": [\n {\n \"path\": \"./tsconfig.app.json\"\n },\n {\n \"path\": \"./tsconfig.spec.json\"\n }\n ]\n}\n" }, { "path": "tsconfig.spec.json", "content": "/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */\n/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */\n{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/spec\",\n \"types\": [\n \"jasmine\"\n ]\n },\n \"include\": [\n \"src/**/*.ts\"\n ]\n}\n" } ]