{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Prerequisitos","type":"text","marks":[{"type":"textColor","attrs":{"color":"#403294"}}]}]},{"type":"rule"},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"node.js 12.18.0+","type":"text","marks":[{"type":"link","attrs":{"href":"https://nodejs.org/en/download/"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Angular 11","type":"text","marks":[{"type":"link","attrs":{"href":"https://angular.io/guide/setup-local"}}]},{"text":" (instalar mediante ","type":"text"},{"text":"npm install -g @angular/cli@^11.0.0","type":"text","marks":[{"type":"code"}]},{"text":", o bien ","type":"text"},{"text":"npm install -g @angular/cli@^11.0.0","type":"text","marks":[{"type":"code"}]},{"text":" para instalar globalmente) ","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Dependencias","type":"text","marks":[{"type":"textColor","attrs":{"color":"#403294"}}]}]},{"type":"rule"},{"type":"paragraph","content":[{"text":"Para utilizar ","type":"text"},{"text":"desy-angular","type":"text","marks":[{"type":"strong"}]},{"text":" es necesario instalar previamente las siguientes librerías:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://www.npmjs.com/package/desy-frontend"}},{"text":" ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Al instalar desy-frontend estamos añadiendo la dependencia de ","type":"text"},{"text":"tailwindcss 2.2.7","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.npmjs.com/package/tailwindcss"}}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://www.npmjs.com/package/@angular/cdk"}},{"text":" ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Puedes instalarlas mediante el comando ","type":"text"},{"text":"npm install desy-frontend@4.1.1 @angular/cdk@^11.0.0","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Instalación","type":"text","marks":[{"type":"textColor","attrs":{"color":"#403294"}}]}]},{"type":"rule"},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Si vas a crear un proyecto desde 0, puedes tomar el proyecto ","type":"text"},{"text":"desy-angular-starter","type":"text","marks":[{"type":"strong"}]},{"text":" como punto de partida. Este proyecto viene con desy-angular configurado y listo para utilizarse. Puedes encontrarlo aquí: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://bitbucket.org/sdaragon/desy-angular-starter/"}},{"text":" ","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Después de instalar las dependencias anteriores, instale desy-angular través de:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"shell"},"content":[{"text":"npm install desy-angular","type":"text"}]},{"type":"paragraph","content":[{"text":"Una vez instalado, se debe importar el módulo principal ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#333333"}}]},{"text":"DesyAngularModule ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#333333"}},{"type":"strong"}]},{"text":"en su módulo de aplicación:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#333333"}}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"app.module.ts","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"import { DesyAngularModule } from 'desy-angular';\n \n@NgModule({\n declarations: [AppComponent, ...],\n imports: [DesyAngularModule, ...],\n bootstrap: [AppComponent]\n})\nexport class AppModule {\n}","type":"text"}]},{"type":"paragraph"},{"type":"expand","attrs":{"title":"Instalación de un modulo específico"},"content":[{"type":"paragraph","content":[{"text":"Si no se va a usar todos módulos de desy-angular, se puede instalar solo lo necesario de esta forma:","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"app.module.ts","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"import { DesyButtonsModule, DesyFormsModule, DesyNavModule, DesyTablesModule, DesyViewsModule, DesyModalsModule } from 'desy-angular';\n \n@NgModule({\n declarations: [AppComponent, ...],\n imports: [DesyButtonsModule, DesyFormsModule, DesyNavModule, DesyTablesModule, DesyViewsModule, DesyModalsModule, ...],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }","type":"text"}]},{"type":"paragraph"}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}]},{"type":"heading","attrs":{"level":2},"marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"Configuración de router","type":"text","marks":[{"type":"textColor","attrs":{"color":"#6554c0"}}]}]},{"type":"paragraph","content":[{"text":"Para que funcionen correctamente los componentes de navegación (","type":"text"},{"text":"DesyNavModule","type":"text","marks":[{"type":"em"}]},{"text":") es necesario activar ","type":"text"},{"text":"anchorScrolling ","type":"text","marks":[{"type":"em"}]},{"text":"en la configuración de router. ","type":"text"}]},{"type":"expand","attrs":{"title":"app-routing.module.ts"},"content":[{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"import { Routes, RouterModule, ExtraOptions } from '@angular/router';\n\nconst routes: Routes = [ ... ];\n\nconst routerOptions: ExtraOptions = {\n useHash: false,\n anchorScrolling: 'enabled',\n // ...any other options you'd like to use\n};\n\n@NgModule({\n imports: [RouterModule.forRoot(routes, routerOptions)],\n exports: [RouterModule]\n})\nexport class AppRoutingModule { }","type":"text"}]},{"type":"paragraph","content":[{"text":"(ver ","type":"text"},{"text":"https://angular.io/api/router/ExtraOptions#anchorScrolling","type":"text","marks":[{"type":"link","attrs":{"href":"https://angular.io/api/router/ExtraOptions#anchorScrolling"}}]},{"text":")","type":"text"}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"Configuración de tailwindcss","type":"text","marks":[{"type":"textColor","attrs":{"color":"#6554c0"}}]}]},{"type":"paragraph","content":[{"text":"Desy-angular","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}},{"type":"strong"}]},{"text":" usa las clases css que nos aporta ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}}]},{"text":"desy-frontend","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}},{"type":"strong"}]},{"text":", haciendo uso de la librería ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}}]},{"text":"tailwindcss","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}},{"type":"strong"}]},{"text":". Para su correcto funcionamiento y visualización es recomendable la siguiente configuración. ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#000000"}}]}]},{"type":"expand","attrs":{"title":"Pasos de la configuración para versiones de angular compatibles con la versión 11.2.0"},"content":[{"type":"paragraph","content":[{"text":"Creamos el fichero ","type":"text"},{"text":"tailwind.config.js","type":"text","marks":[{"type":"strong"}]},{"text":" mediante ","type":"text"},{"text":"npx tailwindcss init","type":"text","marks":[{"type":"code"}]},{"text":" y lo modificamos para utilizar la configuración de ","type":"text"},{"text":"desy-frontend. ","type":"text","marks":[{"type":"strong"}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"tailwind.config.js","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"/* Load Desy tailwindcss config */\nconst defaultConfig = require('./node_modules/desy-frontend/config/tailwind.config.js');\n\nmodule.exports = {\n /* Use the Desy default config */\n ...defaultConfig,\n /* Change PurgeCSS files to add DESY AND this project's files */\n purge: {\n enabled: true,\n mode: 'layers',\n layers: [ 'base', 'components', 'utilities' ],\n content:[\n './node_modules/desy-angular/**/*.js',\n './src/**/*.html',\n './src/**/*.ts'\n ],\n options: {\n safelist: [\n 'dev'\n ],\n }\n }\n};","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"tarea purge","type":"text"}]},{"type":"paragraph","content":[{"text":"Es muy interesante ejecutar la tarea purge, sobre todo para entorno de producción, ya que minimiza el css dejando solo las clases css que usa el proyecto.","type":"text"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Configuración de postcss","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Instalamos como dependencia de desarrollo postcss-loader","type":"text"}]},{"type":"codeBlock","attrs":{"language":"shell"},"content":[{"text":"npm install postcss-loader --save-dev","type":"text"}]},{"type":"paragraph","content":[{"text":"Creamos el fichero postcss.config.js en la carpeta raíz del proyecto:","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"postcss.config.js","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"module.exports = {\n plugins: [\n require('postcss-import'),\n require('tailwindcss/nesting'),\n require('tailwindcss'),\n require('autoprefixer'),\n ]\n}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Por ultimo, importaremos en nuestro styles.css los estilos de tippy y desy-frontend e importamos la fuente Open Sans en nuestro index.html","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"styles.css","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"text":"@import 'tippy.js/dist/tippy.css';\n@import 'desy-frontend/src/css/styles.css';","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"index.html","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n\n \n ...\n \n \n \n ...\n \n","type":"text"}]}]},{"type":"expand","attrs":{"title":"Pasos de la configuración para versiones de angular anteriores a la 11.2.0"},"content":[{"type":"paragraph","content":[{"text":"Creamos el fichero ","type":"text"},{"text":"tailwind.config.js","type":"text","marks":[{"type":"strong"}]},{"text":" mediante ","type":"text"},{"text":"npx tailwindcss init","type":"text","marks":[{"type":"code"}]},{"text":" y lo modificamos para utilizar la configuración de ","type":"text"},{"text":"desy-frontend. ","type":"text","marks":[{"type":"strong"}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"tailwind.config.js","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"/* Load Desy tailwindcss config */\nconst defaultConfig = require('./node_modules/desy-frontend/config/tailwind.config.js');\n\nmodule.exports = {\n /* Use the Desy default config */\n ...defaultConfig,\n /* Change PurgeCSS files to add DESY AND this project's files */\n purge: {\n enabled: true,\n mode: 'layers',\n layers: [ 'base', 'components', 'utilities' ],\n content:[\n './node_modules/desy-angular/**/*.js',\n './src/**/*.html',\n './src/**/*.ts'\n ],\n options: {\n safelist: [\n 'dev'\n ],\n }\n }\n};","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"tarea purge","type":"text"}]},{"type":"paragraph","content":[{"text":"Es muy interesante ejecutar la tarea purge, sobre todo para entorno de producción, ya que minimiza el css dejando solo las clases css que usa el proyecto.","type":"text"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Instalamos como dependencia de desarrollo @angular-builders/custom-webpack y postcss-loader","type":"text"}]},{"type":"codeBlock","attrs":{"language":"shell"},"content":[{"text":"npm install @angular-builders/custom-webpack postcss-loader --save-dev","type":"text"}]},{"type":"paragraph","content":[{"text":"Configuramos el custom-webpack, creando el fichero webpack.config.js en la carpeta raíz del proyecto:","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"webpack.config.js","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"module.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n {\n loader: 'postcss-loader',\n options: {\n postcssOptions: {\n ident: 'postcss',\n plugins: [\n require('postcss-import'),\n require('tailwindcss'),\n require('tailwindcss/nesting'),\n require('autoprefixer'),\n ],\n },\n }\n },\n ],\n }\n ],\n }\n};\n","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"En el atributo ","type":"text"},{"text":"test: /\\.css$/,","type":"text","marks":[{"type":"code"}]},{"text":" se debe especificar la extensión del fichero ","type":"text"},{"text":"styles ","type":"text","marks":[{"type":"em"}]},{"text":"en ","type":"text"},{"text":"tailwind.","type":"text","marks":[{"type":"em"}]}]}]},{"type":"paragraph","content":[{"text":"En nuestro angular.json modificamos el builder y agregamos la configuración.","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"angular.json","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"{\n ...\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-builders/custom-webpack:browser\",\n \"options\": {\n \"customWebpackConfig\": {\n \"path\": \"webpack.config.js\"\n },\n ...\n }\n ...\n },\n \"serve\": {\n \"builder\": \"@angular-builders/custom-webpack:dev-server\",\n \"options\": {\n \"customWebpackConfig\": {\n \"path\": \"webpack.config.js\"\n },\n ...\n }\n ...\n }\n \"test\": {\n \"builder\": \"@angular-builders/custom-webpack:karma\",\n \"options\": {\n \"customWebpackConfig\": {\n \"path\": \"webpack.config.js\"\n },\n ...\n }\n ...\n }\n }\n ...\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Por ultimo, importaremos en nuestro styles.css los estilos de tippy y desy-frontend e importamos la fuente Open Sans en nuestro index.html","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"styles.css","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"text":"@import 'tippy.js/dist/tippy.css';\n@import 'desy-frontend/src/css/styles.css';","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"index.html","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n\n \n ...\n \n \n \n ...\n \n","type":"text"}]}]}],"version":1}

Browser not supported