Diálogos emergentes usadas para informar al usuario advertencias, errores, confirmar cambios, notificaciones de un proceso, entre otros. GOV.CO implementa este complemento utilizando la estructura\\n definida por Bootstrap. Sin embargo, para que el elemento cuente con los estilos personalizados se deben incluir las siguientes clases:\\n
\\n
\\n
Modal: clase alert-govco
\\n
Alerta informativa: clase modal-content-info
\\n
Alerta de éxito: clase modal-content-success
\\n
Alerta de error: clase modal-content-error
\\n
Alerta de mantenimiento: clase modal-content-maintenance
\\n
Alerta de advertencia: clase modal-content-warning
\\n
Alerta de salida del portal: clase modal-content-exit
Dentro de las funcionalidades brindadas por este componente se cuenta con la posibilidad de aumentar y disminuir el tamaño de los textos de los sitios web donde se implementa. La funcionalidad de contraste, sirve como herramienta en la visualización de contenidos para los usuarios que presentan dificultades visuales.
\\n
Adicional el componente implementa un hipervínculo a la plataforma centro revelo, un proyecto entre el Ministerio de Tecnologías de la Información y las Comunicaciones- MINTIC y la Federación Nacional de Sordos de Colombia.
Los botones se pueden implementar haciendo uso de las etiquetas a y button. Sin embargo si hace uso de la etiqueta a, para activar una funcionalidad dentro de la página (como imprimir, colapsar, ampliar), ésta debe tener el atributo role=\\\"button\\\" para transmitir el propósito del elemento a usuarios que utilizan tecnología de asistencia, como lectores de pantalla.
\\n
Para botones simbólicos sin texto, es necesario incluir los atributos aria-label y title, esto garantiza que usuarios que usan tecnología de asistencia conozcan el propósito del botón. Igualmente sucede, para los usuarios que ubiquen el cursor del mouse o el foco del teclado sobre el elemento.
\\n
\\n \\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
{{ infoComponent.subtitulo }}
\\n
Buenas prácticas
\\n
\\n
Se recomienda agregar significado semántico al elemento nav que compone el breadcrumb, a través de el atributo aria-label=\\\"Miga de pan, usted está en:\\\", permitiendo que usuarios que usan tecnología de asistencia como lectores de pantalla puedan comprender el propósito del breadcrumb.
\\n
\\n \\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
GOV.CO utiliza la librería Datepicker Bootstrap para incluir el widget de calendario al componente input. Lo anterior permite al usuario ingresar los datos de tipo fecha, por medio del teclado o usando el calendario.
\\n
Dependencias
\\n
Incluya en la etiqueta head de su proyecto:
\\n
{{ codeHtml }}
\\n \\n
Buenas prácticas:
\\n
\\n
Indicar si un campo es obligatorio haciendo uso del atributo required o mediante un asterisco en el label del elemento, explicando su significado al comienzo del formulario.
\\n
Asociar correctamente el label con el campo del formulario, asignando el mismo valor del atributo for del label con el del id del campo. Esto permite al usuario establecer el enfoque sobre el campo al hacer clic en la etiqueta. Adicionalmente aquellos usuarios que utilizan tecnología de asistencia para navegar el sitio, como lectores de pantalla, podrán identificar el valor del campo.
\\n
Utilizar el atributo aria-label para indicar al usuario la manera correcta de ingresar la fecha. En el siguiente ejemplo el atributo aria-label indica: Incluir fecha en números en el formato día / mes / año. Ejemplo 01/06/2020
\\n
El atributo placeholder simplemente es un corto ejemplo o una pista que describe el valor esperado. En ningún caso reemplaza el label del campo.
\\n
\\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
Las cards son superficies que muestran contenido y acciones sobre un tema.\\n
\\n \\n
Principios
\\n
\\n
\\n Independiente: una card puede estar sola, sin depender de los elementos circundantes para el\\n contexto.\\n
\\n
\\n Contenida: una card es identificable como una sola unidad contenida.\\n\\n
\\n
\\n Individual: una card no puede fusionarse con otra card o dividirse en varias cards.\\n
\\n
\\n\\n \\n
Card simple
\\n
\\n
\\n
Este card contiene un único elemento class=\\\"card-body\\\"
\\n
\\n
\\n
\\n
\\n
Un ejemplo de un card simple.
\\n
\\n
\\n
\\n
\\n \\n html:\\n
{{ cardSimple }}
\\n \\n
Card con header, body and footer
\\n
\\n
\\n
Este card contiene 3 secciones:
\\n
\\n
\\n
card-header: .card-header .govco-card-header
\\n
\\n
\\n
card-body: .card-body
\\n
\\n
\\n
card-footer: .card-footer .govco-card-footer
\\n
\\n
\\n
\\n
\\n
\\n
\\n \\n ¿Tienes dudas?\\n
\\n
\\n
Este card es un ejemplo con 3 secciones header, body y footer.
\\n ¿Sabes qué son los datos abiertos y cómo usarlos?\\n
\\n
\\n
La información que producen las entidades públicas de su\\n trabajo, todo a tu alcance
\\n
\\n
\\n
\\n
\\n
\\n
\\n html:\\n
{{ cardImageLeft }}
\\n\"","export default \"\\n\\n\\n
{{ infoComponent.titulo }}
\\n
{{ infoComponent.descripcion }}
\\n \\n \\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
\\n El elemento input teniendo el valor checkbox en su atributo type,\\n representa una opción de selección múltiple. Este elemento puede o no pertenecer a un conjunto de opciones\\n
\\n \\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
{{ infoComponent.subtitulo }}
\\n \\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
El manejo del color es muy importante ya que éste indica y comunica acciones importantes así como atrae la atención de los usuarios en su recorrido visual por la interfaz, por lo tanto se necesita ser muy estrictos en su uso.
\\n Son elementos que no poseen acción al interactuar con ellos \\n y cuyo propósito es solamente informar o hacer énfasis, \\n generando un impacto más contundente en el usuario. Deben ir \\n acompañados en el código con un texto alternativo alt=''\\n
\\n \\n
\\n \\n
\\n\\n
\\n
\\n \\n
{{icon}}
\\n \\n
\\n
\\n\\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
{{ infoComponent.descripcion }}
\\n
Implementación ver contraseña
\\n
\\n Por favor incluya, en su implementación para contar con la funcionalidad de visualización de contraseña\\n
\\n
{{jsCodeImplement}}
\\n \\n\\n\"","export default \"\\n
¿ CÓMO COMENZAR ?
\\n
Para utilizar el cdn importe desde su index.html
\\n
{{codeList.CDNcss}}
\\n
{{codeList.utilsImport}}
\\n \\n
¿ Dependencias?
\\n
El CDN de gov.co utiliza algúnas dependencias para su funcionamiento.
\\n
Bootstrap
\\n
\\n versión \\n bootstrap v4.3.1\\n por favor incluya en su archivo\\n index.html\\n
\\n
{{codeList.bootstrapCss}}
\\n
{{codeList.bootstrapJs}}
\\n \\n
Jquery
\\n
\\n versión \\n jquery v3.4.1\\n por favor incluya en su archivo\\n index.html\\n
\\n
{{codeList.jqueryJs}}
\\n\\n \\n
Implementación
\\n
Puede descargar o abrir el ejemplo de implementación aquí.
\\n Son creados para el ingreso de uno o varios archivos, En esta sección se especifica los elementos input de tipo type=\\\"file\\\" \\n
Buenas prácticas:
\\n
\\n
Para que los archivos seleccionados sean correctamente enviados al servidor el valor \\\"multipart/form-data\\\" debe estar presente en el atributo enctype del formulario form o en el atributo formenctype del botón usado para enviar el formulario.
\\n
Indicar si un campo es obligatorio haciendo uso de atributo required o mediante un asterisco en el label del elemento, explicando su significado al comienzo del formulario.
\\n
Asociar correctamente el label con el campo del formulario, asignando el mismo valor del atributo for del label con el del id del campo. Esto permite al usuario establecer el enfoque sobre el campo al hacer clic en la etiqueta. Adicionalmente aquellos usuarios que utilizan tecnología de asistencia para navegar el sitio, como lectores de pantalla, podrán identificar el valor del campo.
\\n
Utilizar el atributo title o aria-label para identificar los controles del formulario cuando el elemento label no puede ser usado.
\\n
\\n \\n\\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
Son creados para el ingreso de texto de los usuarios dentro de un elemento form y su valor varía dependiendo del atributo type. En esta sección se especifica los elementos input de tipo text, number, email y password. Los campos de texto podrán tener un contador de caracteres y dependiendo de la complejidad del campo tendrá una descripción de ejemplo con el própósito de guiar al usuario en la manera que debe ingresar los datos.
\\n
Buenas prácticas:
\\n
\\n
Indicar si un campo es obligatorio haciendo uso de atributo required o mediante un asterisco en el label del elemento, explicando su significado al comienzo del formulario.
\\n
Asociar correctamente el label con el campo del formulario, asignando el mismo valor del atributo for del label con el del id del campo. Esto permite al usuario establecer el enfoque sobre el campo al hacer clic en la etiqueta. Adicionalmente aquellos usuarios que utilizan tecnología de asistencia para navegar el sitio, como lectores de pantalla, podrán identificar el valor del campo.
\\n
Utilizar el atributo title o aria-label para identificar los controles del formulario cuando el elemento label no puede ser usado.
\\n
El atributo placeholder simplemente es un corto ejemplo o una pista que describe el valor esperado. En ningún caso reemplaza el label del campo.
\\n
\\n \\n\\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n \\n
Implementación Modal Corto
\\n \\n
{{ codeHtmlModalCorto }}
\\n \\n
Implementación Modal Largo
\\n \\n
{{ codeHtmlModalLargo }}
\\n\\n\"","export default \"\\n\\n\\n\\n
\\n
\\n
\\n
\\n \\n
\\n
\\n \\n
\\n Modal Corto\\n
\\n
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident voluptate minima quae. Error,\\n odio, dicta nam id aspernatur modi fugiat natus laboriosam placeat, voluptas a accusantium quos\\n reprehenderit voluptates eos
\\n
\\n
\\n
\\n
\\n\\n\\n
\\n
\\n
\\n
\\n \\n
\\n
\\n \\n
\\n Modal Largo\\n
\\n
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident voluptate minima quae. Error,\\n odio, dicta nam id aspernatur modi fugiat natus laboriosam placeat, voluptas a accusantium quos\\n reprehenderit voluptates eos
\\n
\\n
\\n
\\n
\\n\\n\\n
\\n
\\n
\\n
\\n \\n
\\n
\\n \\n
\\n Título de la Alerta\\n
\\n
Texto de ejemplo:Muchas gracias por participar, recibirás una notificación al correo con tu\\n participación.
\\n
\\n
\\n
\\n
\\n\\n\\n
\\n
\\n
\\n
\\n \\n
Título de la Alerta
\\n
Información de detalle al cierre de la acción.
\\n
\\n \\n
\\n
\\n
\\n\\n\\n
\\n
\\n
\\n
\\n \\n
Título de la alerta
\\n
Tu visualización no cumple con los criterios necesarios para su publicación ¿Quieres echarle un\\n vistazo de nuevo a la postulación?
\\n
\\n \\n
\\n
\\n
\\n\\n\\n
\\n
\\n
\\n
\\n \\n
\\n
\\n \\n
En mantenimiento
\\n
Esta página esta en mantenimiento en breve estaremos de vuelta.
\\n
Puedes escribirnos a soporteccc@mintic.gov.co. Llámanos gratis: 01 8000 910742 y en Bogotá: 3 90 79\\n 51
\\n
\\n
\\n
\\n
\\n\\n\\n\\n
\\n
\\n
\\n
\\n \\n
Ha ocurrido un error
\\n
Texto predeterminado.
\\n
Puedes escribirnos a soporteccc@mintic.gov.co. Llámanos gratis: 01 8000 910742 y en Bogotá: 3 90 79\\n 51
\\n
\\n \\n
\\n
\\n
\\n\\n\\n
\\n
\\n
\\n
\\n \\n
Estas saliendo de GOV.CO
\\n
Con esta acción abrirás una nueva pestaña. ¡Te esperamos pronto!
\\n
\\n \\n
\\n
\\n
\\n\\n\\n
\\n
\\n
\\n
\\n
{{ modalContent.name}}
\\n \\n
\\n
\\n \\n
\\n
\\n
\\n
\\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
{{ infoComponent.subtitulo }}
\\n \\n Alerta: caso de éxito\\n
\\n \\n
\\n \\n Tu cita ha sido agendada\\n
\\n
\\n Alerta: aviso de relevancia baja\\n
\\n \\n
\\n \\n Importante\\n
\\n
Trámite virtual está disponible si el certificado académico fue expedido después del año 2010. Para estudios anteriores dirígete personalmente a tu centro de formación.
\\n
\\n Alerta: aviso de relevancia alta\\n
\\n \\n
\\n \\n Importante\\n
\\n
Trámite virtual está disponible si el certificado académico fue expedido después del año 2010. Para estudios anteriores dirígete personalmente a tu centro de formación.
\\n
\\n Alerta: caso de error\\n
\\n \\n
\\n \\n Lo sentimos\\n
\\n
\\n
El servicio no se encuentra disponible en este momento, te recomendamos:
\\n \\n
Intentarlo más tarde.
\\n
Recargar la página.
\\n \\n
\\n
\\n
{{ codeHtml }}
\\n\\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
{{ infoComponent.subtitulo }}
\\n \\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
\\n El elemento input teniendo el valor radio en su atributo type,\\n representa una opción que pertenece a un grupo en el que no más\\n de una opción puede ser seleccionada al mismo tiempo. Estos grupos\\n están normalmente conformados por un conjunto de opción,\\n todos compartiendo el mismo valor en el atributo name.\\n
\\n
{{infoComponent.descripcion}}
\\n \\n\"","export default \"
{{ infoComponent.titulo }}
\\n
{{ infoComponent.descripcion }}
\\n
\\n
\\n
\\n
Scroll Contrast Light (#fff)
\\n
Uso específico para fondo claro.
\\n
\\n
\\n Lorem, ipsum dolor sit amet consectetur adipisicing elit.\\n Reprehenderit voluptas quia dolorem sit totam soluta culpa eius,\\n aspernatur magni consequuntur magnam accusamus fugiat!\\n Quibusdam accusantium labore facere id perferendis!\\n
\\n Lorem, ipsum dolor sit amet consectetur adipisicing elit.\\n Reprehenderit voluptas quia dolorem sit totam soluta culpa eius,\\n aspernatur magni consequuntur magnam accusamus fugiat!\\n Quibusdam accusantium labore facere id perferendis!\\n
\\n
\\n
HTML
\\n
{{ codeLight }}
\\n
\\n
Scroll Contrast Dark (#e6effd)
\\n
Uso específico para fondo oscuro.
\\n
\\n
\\n Lorem, ipsum dolor sit amet consectetur adipisicing elit.\\n Reprehenderit voluptas quia dolorem sit totam soluta culpa eius,\\n aspernatur magni consequuntur magnam accusamus fugiat!\\n Quibusdam accusantium labore facere id perferendis!\\n
\\n Lorem, ipsum dolor sit amet consectetur adipisicing elit.\\n Reprehenderit voluptas quia dolorem sit totam soluta culpa eius,\\n aspernatur magni consequuntur magnam accusamus fugiat!\\n Quibusdam accusantium labore facere id perferendis!\\n
El elemento Tabs, permite estructurar contenido bajo la misma página separándolo en secciones o categorías, representadas visualmente en pestañas. Esto permite al usuario adquirir mayor cantidad de información en un único elemento donde su navegación es simple y consistente.
\\n
Este componente de navegación, utiliza la estructura nav de Bootstrap. Sin embargo para generar la estructura por pestañas, se debe agregar a la etiqueta ul la clase .nav-tabs.
\\n
Adicionalmente, para tomar el estilo definido en GOV.CO es importante contener el elemento en un div con la clase tabs-govco
\\n
Accesibilidad
\\n
Este elemento requiere los atributos ARIA role=\\\"tab-list\\\", role=\\\"tab\\\", role=\\\"tabpanel\\\" y demás atributos aria- que permitan a los usuarios que utilizan tecnología de asistencia, como lectores de pantalla, conocer la estructura, funcionalidad y estados del elemento.
\\n
Por ejemplo, en la implementación del componente además de usar los atributos ARIA, ya mencionados, se agregó aria-controls el cual asocia la pestaña con el panel correspondiente a través del id; aria-selected el cual toma valor true o false e indica la usuario la pestaña actualmente activa; \\n y aria-labelledby el cual referencia el nombre de cada panel de acuerdo con la pestaña que le corresponde.
Pestaña Descripción, contenido HTML puede ser incluído aquí ...
\\n
Pestaña Documentos, contenido HTML puede ser incluído aquí ...
\\n
Pestaña Medios de Pago, contenido HTML puede ser incluído aquí ...
\\n
Pestaña Puntos de Pago, contenido HTML puede ser incluído aquí ...
\\n
\\n
\\n
Implementación HTML
\\n
{{ codeHtml }}
\\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
\\n
{{ infoComponent.subtitulo }}
\\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 \\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
Modo de uso
\\n
Javascript
\\n
{{ codejs }}
\\n
html
\\n
{{ codehtml }}
\\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
Control para la entrada de texto multilínea. En el siguiente ejemplo se limita el número de caracteres permitidos a través del atributo maxlenght.
\\n
\\n \\n \\n
\\n
HTML
\\n
{{ codeHtml }}
\\n
Javascript
\\n
{{ codeJs }}
\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
Puede utilizar la siguiente estructura de textos en el diseño de su sitio, para la presentación de contenido claro, comprensible y que cumpla con el propósito semántico del elemento.
\\n
Fuentes Tipográficas
\\n
GOV.CO usa dos tipografías, Montserrat para títulos y descripciones de sección y Work Sans para textos corridos y captions. Estas fuentes pueden ser descargadas directamente en GoogleFonts
\\n
Montserrat - Títulos y subtítulos
\\n
\\n
\\n Aa\\n Bold\\n
\\n
\\n Aa\\n SemiBold\\n
\\n
\\n Aa\\n Medium\\n
\\n
\\n Aa\\n Medium Italic\\n
\\n
\\n
Work Sans: Párrafos y captions
\\n
\\n
\\n Aa\\n Bold\\n
\\n
\\n Aa\\n SemiBold\\n
\\n
\\n Aa\\n Medium\\n
\\n
\\n Aa\\n Regular\\n
\\n
\\n \\n\"","export default \"\\n
{{ infoComponent.titulo }}
\\n
El Tooltip es un breve mensaje informativo y comprensible que aparece cuando el usuario interactua con el elemento, ubicando el cursor mouseover o el foco del teclado focus sobre el elemento. La última opción se da cuando un usuario navega la página a través de la tecla tab del teclado.
\\n
Debido que el Tooltip es inicializado por una acción hover, estos solamente pueden ser usados en dispositivos con mouse o teclado.
\\n
Buenas Prácticas
\\n
\\n
Utilice el Tooltip solamente para elementos enfocables por teclado o interactivos con el ratón como enlaces, botones o campos de formulario.
\\n
No utilice Tooltips para proporcionar información vital para completar una tarea. Su función es proporcionar información adicional.
\\n
Debe contener ser textos cortos, comprensibles y que no generen redundancia con el elemento a interactuar.
\\n
Proporcine soporte para la interacción a través del mouse y el teclado, esto hace el elemento más usable y accesible.
\\n
Utilice Tooltips para describir la acción de iconos que no estén etiquetados.
\\n
Asegure el contraste entre el fondo y el color del Tooltip.
\\n
\\n
Dependencias
\\n
Para su funcionamiento debe incluir en el head de su sitio, popper.min.js antes que bootstrap.js.
\\n
{{ codeHtml }}
\\n \\n\"","export default \"
\\n \\n
\"","export default \"\\n
\\n\\n\\n \\n
Quick start
\\n
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, tempore praesentium necessitatibus\\n ducimus\\n exercitationem, dolorem explicabo debitis velit repellat obcaecati, atque dolore. Dicta amet tempore\\n itaque\\n dolorem. Minima, eveniet totam!
\\n
CSS
\\n
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores corrupti iusto quidem, tenetur optio\\n cumque\\n nulla hic aperiam omnis enim porro vitae natus numquam accusamus officia, consequatur iure perspiciatis\\n perferendis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Pharetra diam sit amet nisl suscipit adipiscing bibendum est. In hac habitasse platea dictumst. Sit amet nisl purus in. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Adipiscing bibendum est ultricies integer quis auctor elit. Velit laoreet id donec ultrices tincidunt arcu non sodales. Semper auctor neque vitae tempus quam pellentesque. Sit amet consectetur adipiscing elit pellentesque. Enim nunc faucibus a pellentesque sit amet porttitor. In ante metus dictum at tempor commodo. Scelerisque purus semper eget duis at tellus at urna condimentum. Mi ipsum faucibus vitae aliquet.\\n\\n A iaculis at erat pellentesque adipiscing. Vitae congue mauris rhoncus aenean vel. Auctor eu augue ut lectus arcu bibendum. Pulvinar mattis nunc sed blandit libero. Aliquet nibh praesent tristique magna. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Aliquam purus sit amet luctus venenatis. At varius vel pharetra vel turpis nunc eget. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. Odio ut enim blandit volutpat maecenas volutpat blandit. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Quis hendrerit dolor magna eget est. Nisl vel pretium lectus quam id leo. Diam vel quam elementum pulvinar etiam non quam lacus suspendisse. Hac habitasse platea dictumst vestibulum. Quis hendrerit dolor magna eget. Convallis convallis tellus id interdum velit laoreet.\\n \\n Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Eget nulla facilisi etiam dignissim diam quis. Elit eget gravida cum sociis natoque penatibus et. Eu sem integer vitae justo eget magna fermentum iaculis eu. Purus in mollis nunc sed. Porta lorem mollis aliquam ut. Eros donec ac odio tempor orci dapibus. Interdum velit laoreet id donec ultrices tincidunt arcu non sodales. Vulputate odio ut enim blandit volutpat maecenas. Ac felis donec et odio pellentesque diam volutpat commodo. Rutrum quisque non tellus orci ac auctor. Sit amet facilisis magna etiam tempor orci eu lobortis. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Cras semper auctor neque vitae tempus quam pellentesque nec. Accumsan lacus vel facilisis volutpat. Pulvinar proin gravida hendrerit lectus a. Aenean euismod elementum nisi quis. Habitant morbi tristique senectus et netus et malesuada fames. Scelerisque felis imperdiet proin fermentum. Nisl purus in mollis nunc sed id semper risus.\\n \\n Tincidunt augue interdum velit euismod in. Magna ac placerat vestibulum lectus mauris. Vehicula ipsum a arcu cursus. Diam ut venenatis tellus in metus vulputate eu scelerisque. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique senectus et netus et malesuada. Id consectetur purus ut faucibus pulvinar elementum integer enim. Facilisi cras fermentum odio eu feugiat pretium nibh. Magnis dis parturient montes nascetur ridiculus mus mauris vitae. Fusce ut placerat orci nulla pellentesque dignissim enim sit. Amet cursus sit amet dictum. Arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales. Vel facilisis volutpat est velit egestas dui. Congue nisi vitae suscipit tellus mauris a diam maecenas sed. Dui id ornare arcu odio ut sem nulla pharetra diam. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Vitae nunc sed velit dignissim sodales ut eu sem. Magna sit amet purus gravida quis blandit turpis cursus.\\n \\n Cras pulvinar mattis nunc sed blandit. Sociis natoque penatibus et magnis dis parturient. Nullam non nisi est sit amet facilisis magna etiam. Mi sit amet mauris commodo quis imperdiet massa tincidunt nunc. Aliquet nec ullamcorper sit amet risus nullam. Bibendum neque egestas congue quisque egestas diam. Eget arcu dictum varius duis at consectetur lorem donec. Nibh ipsum consequat nisl vel pretium lectus quam id. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Aliquam sem fringilla ut morbi tincidunt augue interdum. Amet venenatis urna cursus eget nunc scelerisque viverra. At tellus at urna condimentum mattis pellentesque id nibh. Volutpat lacus laoreet non curabitur.\\n \\n Rhoncus mattis rhoncus urna neque viverra. Consequat ac felis donec et odio pellentesque diam volutpat. Rhoncus mattis rhoncus urna neque. Pellentesque id nibh tortor id aliquet lectus proin nibh. Nibh praesent tristique magna sit. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Enim sed faucibus turpis in. Mi proin sed libero enim sed faucibus turpis in eu. Id diam maecenas ultricies mi eget. Lacus viverra vitae congue eu consequat ac. Pellentesque diam volutpat commodo sed egestas egestas. A condimentum vitae sapien pellentesque habitant. Pellentesque pulvinar pellentesque habitant morbi tristique. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Phasellus vestibulum lorem sed risus ultricies. Ut tellus elementum sagittis vitae et. Quis vel eros donec ac. Duis ut diam quam nulla porttitor. Habitant morbi tristique senectus et.\\n \\n Volutpat diam ut venenatis tellus. Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim. Ultricies mi quis hendrerit dolor. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Elit scelerisque mauris pellentesque pulvinar pellentesque. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Urna condimentum mattis pellentesque id nibh tortor id aliquet. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Cursus vitae congue mauris rhoncus aenean vel elit. Lorem ipsum dolor sit amet. Tortor posuere ac ut consequat semper. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Accumsan tortor posuere ac ut consequat. Non arcu risus quis varius quam quisque id diam. Odio eu feugiat pretium nibh ipsum consequat nisl vel pretium. Dignissim convallis aenean et tortor at risus.\\n \\n Velit egestas dui id ornare arcu. Volutpat commodo sed egestas egestas fringilla. Gravida arcu ac tortor dignissim. Iaculis urna id volutpat lacus laoreet non curabitur. Eu turpis egestas pretium aenean pharetra. At elementum eu facilisis sed odio morbi quis commodo. Proin libero nunc consequat interdum varius sit amet mattis vulputate. Ac tincidunt vitae semper quis lectus nulla. Eu volutpat odio facilisis mauris sit amet massa vitae. Amet massa vitae tortor condimentum lacinia quis vel eros. Libero enim sed faucibus turpis in eu.\\n \\n Volutpat sed cras ornare arcu dui vivamus. Dignissim enim sit amet venenatis urna cursus eget nunc. A scelerisque purus semper eget duis. Vitae et leo duis ut diam quam nulla porttitor massa. Aliquet lectus proin nibh nisl condimentum id venenatis a condimentum. Egestas erat imperdiet sed euismod nisi porta. Tincidunt ornare massa eget egestas purus viverra. Luctus accumsan tortor posuere ac ut. A erat nam at lectus urna duis convallis. Suspendisse sed nisi lacus sed viverra. Pretium nibh ipsum consequat nisl vel pretium lectus quam. Faucibus purus in massa tempor nec. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Ullamcorper sit amet risus nullam. Aliquam sem fringilla ut morbi.\\n \\n Ac ut consequat semper viverra nam libero justo laoreet sit. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Diam ut venenatis tellus in metus. Diam donec adipiscing tristique risus. Ante metus dictum at tempor commodo ullamcorper a lacus. Nibh tellus molestie nunc non blandit massa. Sem viverra aliquet eget sit. At consectetur lorem donec massa sapien. Auctor elit sed vulputate mi sit amet mauris commodo. Elementum tempus egestas sed sed risus. At erat pellentesque adipiscing commodo elit at. Quis commodo odio aenean sed adipiscing diam donec adipiscing.
\\n\"","/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n};\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n result.default = mod;\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, privateMap) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to get private field on non-instance\");\r\n }\r\n return privateMap.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, privateMap, value) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to set private field on non-instance\");\r\n }\r\n privateMap.set(receiver, value);\r\n return value;\r\n}\r\n","export default \".subtitulo {\\n margin: 15px 5px; }\\n\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9kaWsvZ292Y28tcHJlL2Nkbi12Mi9jZG4vc3JjL2FwcC9AY29yZS9jb21wb25lbnRzL2NvZGUtcmVuZGVyL2NvZGUtcmVuZGVyLmNvbXBvbmVudC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0ksZ0JBQWdCLEVBQUEiLCJmaWxlIjoic3JjL2FwcC9AY29yZS9jb21wb25lbnRzL2NvZGUtcmVuZGVyL2NvZGUtcmVuZGVyLmNvbXBvbmVudC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnN1YnRpdHVsbyB7XG4gICAgbWFyZ2luOiAxNXB4IDVweDtcbn0iXX0= */\"","import { Component, OnInit, ViewChild, Input, SimpleChanges, OnChanges, AfterViewChecked } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { HighlightService } from '../../services/highligh.service';\n\n@Component({\n selector: 'app-code-render',\n templateUrl: './code-render.component.html',\n styleUrls: ['./code-render.component.scss']\n})\nexport class CodeRenderComponent implements OnInit, OnChanges, AfterViewChecked {\n @ViewChild('editor', { static: false }) editor: any;\n highlighted: boolean = false;\n\n comment: any;\n sanitizeComponent: any;\n @Input() renderCode : boolean;\n @Input() component: any;\n @Input() titulo: any;\n @Input() subtitulo: any;\n @Input() id: any;\n utils: any;\n @Input() arrayComponents: any;\n\n constructor(\n private sanitizer: DomSanitizer,\n private highlightService: HighlightService) {\n this.utils = window.utils;\n }\n\n ngAfterViewChecked() {\n if (!this.highlighted) {\n this.utils.init();\n this.highlightService.highlightAll();\n this.highlighted = true;\n }\n }\n\n ngOnInit() {\n \n }\n\n\n ngOnChanges(changes: SimpleChanges) {\n if (typeof changes.component !== 'undefined') {\n this.comment = this.component;\n this.sanitizeComponent = this.sanitizer.bypassSecurityTrustHtml(this.comment);\n }\n\n if (typeof changes.arrayComponents !== 'undefined') {\n this.utils.init();\n this.arrayComponents = this.arrayComponents.map((component: any) => {\n return {\n ...component,\n ...{ sanitizeComponent: this.sanitizer.bypassSecurityTrustHtml(component.componentRender) },\n ...{ sanitizeFalseComponent: typeof component.componentFalseRender !== 'undefined' ? \n this.sanitizer.bypassSecurityTrustHtml(component.componentFalseRender): false },\n ...{ subtituloSanitize: this.sanitizer.bypassSecurityTrustHtml(component.subtitulo) },\n ...{ descripcionComponentSanitize: typeof component.descripcionComponent !== 'undefined' ?\n this.sanitizer.bypassSecurityTrustHtml(component.descripcionComponent): false },\n ...{ descripcionList: typeof component.descripcionList !== 'undefined' ?\n component.descripcionList: false },\n ...{ codejsTab: typeof component.codejs !== 'undefined' ? { id: component.id, js: component.codejs} : false,\n }\n }\n });\n }\n }\n\n}\n","export default \"\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL0Bjb3JlL2NvbXBvbmVudHMvZm9vdGVyL2Zvb3Rlci5jb21wb25lbnQuc2NzcyJ9 */\"","import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-footer',\n templateUrl: './footer.component.html',\n styleUrls: ['./footer.component.scss']\n})\nexport class FooterComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit() {\n }\n\n}\n","export default \"\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL0Bjb3JlL2NvbXBvbmVudHMvaGVhZGVyL2hlYWRlci5jb21wb25lbnQuc2NzcyJ9 */\"","import { Component, OnInit } from '@angular/core';\nimport { ToolsService } from '../../services/tools.service';\n\n@Component({\n selector: 'app-header',\n templateUrl: './header.component.html',\n styleUrls: ['./header.component.scss']\n})\nexport class HeaderComponent implements OnInit {\n expand: boolean = false;\n constructor(public tools:ToolsService) {\n this.tools.$collapseStatus.subscribe((status: any) => {\n this.expand = status;\n })\n }\n\n ngOnInit() {\n }\n \n}\n","export * from './header/header.component';\nexport * from './footer/footer.component';\nexport * from './code-render/code-render.component';\nexport * from './sidebar/sidebar.component';","export default \".sidebar-nav li a {\\n margin: 0;\\n padding: 0.5rem 1rem; }\\n .sidebar-nav li a.active {\\n text-decoration: none;\\n color: #007bff;\\n background: #e5eefb; }\\n .navbar-collapse-cdn {\\n display: block;\\n top: 0px;\\n width: 100%;\\n right: 0;\\n margin-right: 0 !important;\\n z-index: 3;\\n visibility: visible;\\n overflow-y: visible;\\n border-top: none;\\n text-align: left;\\n padding-right: 0;\\n padding-left: 0;\\n max-height: none !important; }\\n .navbar-collapse-cdn.close-menu-govco {\\n -webkit-transform: translate3d(100%, 0, 0);\\n transform: translate3d(100%, 0, 0);\\n -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 0);\\n transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 0); }\\n .navbar-collapse-cdn.open-menu-govco {\\n -webkit-transform: translate3d(0, 0, 0);\\n transform: translate3d(0, 0, 0);\\n -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 0);\\n transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 0); }\\n .sidebar-nav {\\n padding: 0;\\n list-style: none;\\n font-weight: bolder; }\\n .sidebar-subnav {\\n padding: 0;\\n list-style: none;\\n font-weight: normal; }\\n .sidebar-nav li {\\n line-height: 40px; }\\n .sidebar-nav li a {\\n display: block;\\n text-decoration: none;\\n color: #004884;\\n border-bottom: 1px solid #dddddd;\\n margin-top: 0.4rem; }\\n .sidebar-nav li a:hover {\\n text-decoration: none;\\n color: #007bff;\\n background: #E5EEFB; }\\n .sidebar-nav li a:active, .sidebar-nav li a:focus {\\n text-decoration: none !important;\\n color: #007bff !important;\\n background: #E5EEFB !important; }\\n .activo {\\n text-decoration: none;\\n color: #007bff;\\n background: #E5EEFB; }\\n .icon-fav {\\n color: #ffab00; }\\n .nav-link {\\n min-height: 48px !important; }\\n .nav-link span {\\n text-indent: 0; }\\n .nav-item-govco-link {\\n margin-top: 0px !important; }\\n\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9kaWsvZ292Y28tcHJlL2Nkbi12Mi9jZG4vc3JjL2FwcC9AY29yZS9jb21wb25lbnRzL3NpZGViYXIvc2lkZWJhci5jb21wb25lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQTtFQUNFLFNBQVM7RUFDVCxvQkFBb0IsRUFBQTtFQUZ0QjtJQUlJLHFCQUFxQjtJQUNyQixjQUFjO0lBQ2QsbUJBQW1CLEVBQUE7RUFLdkI7RUFDRSxjQUFjO0VBQ2QsUUFBUTtFQUNSLFdBQVc7RUFDWCxRQUFRO0VBQ1IsMEJBQTBCO0VBQzFCLFVBQVU7RUFDVixtQkFBbUI7RUFFbkIsbUJBQW1CO0VBQ25CLGdCQUFnQjtFQUNoQixnQkFBZ0I7RUFDaEIsZ0JBQWdCO0VBQ2hCLGVBQWU7RUFDZiwyQkFBMkIsRUFBQTtFQWQ3QjtJQWdCSSwwQ0FBa0M7WUFBbEMsa0NBQWtDO0lBQ2xDLGtFQUEwRDtJQUExRCwwREFBMEQsRUFBQTtFQWpCOUQ7SUFvQkksdUNBQStCO1lBQS9CLCtCQUErQjtJQUMvQixrRUFBMEQ7SUFBMUQsMERBQTBELEVBQUE7RUFJOUQ7RUFDRSxVQUFVO0VBQ1YsZ0JBQWdCO0VBQ2hCLG1CQUFtQixFQUFBO0VBR3JCO0VBQ0UsVUFBVTtFQUVWLGdCQUFnQjtFQUNoQixtQkFBbUIsRUFBQTtFQUdyQjtFQUVFLGlCQUFpQixFQUFBO0VBR25CO0VBQ0UsY0FBYztFQUNkLHFCQUFxQjtFQUNyQixjQUFjO0VBQ2QsZ0NBQWdDO0VBQ2hDLGtCQUFrQixFQUFBO0VBR3BCO0VBQ0UscUJBQXFCO0VBQ3JCLGNBQWM7RUFDZCxtQkFBb0IsRUFBQTtFQUd0QjtFQUNFLGdDQUFnQztFQUNoQyx5QkFBeUI7RUFDekIsK0JBQStCLEVBQUE7RUFHakM7RUFDRSxxQkFBcUI7RUFDckIsY0FBYztFQUNkLG1CQUFvQixFQUFBO0VBR3RCO0VBQ0UsY0FBYyxFQUFBO0VBR2hCO0VBQ0UsMkJBQTJCLEVBQUE7RUFEN0I7SUFHSSxjQUFjLEVBQUE7RUFLbEI7RUFDRSwwQkFBMkIsRUFBQSIsImZpbGUiOiJzcmMvYXBwL0Bjb3JlL2NvbXBvbmVudHMvc2lkZWJhci9zaWRlYmFyLmNvbXBvbmVudC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCBcIi4vLi4vLi4vLi4vLi4vc2Nzcy9iYXNlL2NvbG9yc1wiO1xuLnNpZGViYXItbmF2IGxpIGEge1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDAuNXJlbSAxcmVtO1xuICAmLmFjdGl2ZSB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIGNvbG9yOiAjMDA3YmZmO1xuICAgIGJhY2tncm91bmQ6ICNlNWVlZmI7XG4gIH1cbn1cblxuXG4ubmF2YmFyLWNvbGxhcHNlLWNkbiB7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICB0b3A6IDBweDtcbiAgd2lkdGg6IDEwMCU7XG4gIHJpZ2h0OiAwO1xuICBtYXJnaW4tcmlnaHQ6IDAgIWltcG9ydGFudDtcbiAgei1pbmRleDogMztcbiAgdmlzaWJpbGl0eTogdmlzaWJsZTtcbiAgLy8gYmFja2dyb3VuZC1jb2xvcjogJGNvbG9yLW1hcmluZTtcbiAgb3ZlcmZsb3cteTogdmlzaWJsZTtcbiAgYm9yZGVyLXRvcDogbm9uZTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgcGFkZGluZy1yaWdodDogMDtcbiAgcGFkZGluZy1sZWZ0OiAwO1xuICBtYXgtaGVpZ2h0OiBub25lICFpbXBvcnRhbnQ7XG4gICYuY2xvc2UtbWVudS1nb3ZjbyB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgxMDAlLCAwLCAwKTtcbiAgICB0cmFuc2l0aW9uOiBhbGwgMC41cyBjdWJpYy1iZXppZXIoMC42ODUsIDAuMDQ3MywgMC4zNDYsIDApO1xuICB9XG4gICYub3Blbi1tZW51LWdvdmNvIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuICAgIHRyYW5zaXRpb246IGFsbCAwLjVzIGN1YmljLWJlemllcigwLjY4NSwgMC4wNDczLCAwLjM0NiwgMCk7XG4gIH1cbn1cblxuLnNpZGViYXItbmF2IHtcbiAgcGFkZGluZzogMDtcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgZm9udC13ZWlnaHQ6IGJvbGRlcjtcbn1cblxuLnNpZGViYXItc3VibmF2IHtcbiAgcGFkZGluZzogMDtcbiAgLy8gcGFkZGluZy1sZWZ0OiAxNXB4O1xuICBsaXN0LXN0eWxlOiBub25lO1xuICBmb250LXdlaWdodDogbm9ybWFsO1xufVxuXG4uc2lkZWJhci1uYXYgbGkge1xuICAvLyB0ZXh0LWluZGVudDogMjBweDtcbiAgbGluZS1oZWlnaHQ6IDQwcHg7XG59XG5cbi5zaWRlYmFyLW5hdiBsaSBhIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgY29sb3I6ICMwMDQ4ODQ7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZGRkZGRkO1xuICBtYXJnaW4tdG9wOiAwLjRyZW07XG59XG5cbi5zaWRlYmFyLW5hdiBsaSBhOmhvdmVyIHtcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICBjb2xvcjogIzAwN2JmZjtcbiAgYmFja2dyb3VuZDogI0U1RUVGQiA7XG59XG5cbi5zaWRlYmFyLW5hdiBsaSBhOmFjdGl2ZSwgLnNpZGViYXItbmF2IGxpIGE6Zm9jdXMge1xuICB0ZXh0LWRlY29yYXRpb246IG5vbmUgIWltcG9ydGFudDtcbiAgY29sb3I6ICMwMDdiZmYgIWltcG9ydGFudDtcbiAgYmFja2dyb3VuZDogI0U1RUVGQiAgIWltcG9ydGFudDtcbn1cblxuLmFjdGl2b3tcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICBjb2xvcjogIzAwN2JmZjtcbiAgYmFja2dyb3VuZDogI0U1RUVGQiA7XG59XG5cbi5pY29uLWZhdiB7XG4gIGNvbG9yOiAjZmZhYjAwO1xufVxuXG4ubmF2LWxpbmsge1xuICBtaW4taGVpZ2h0OiA0OHB4ICFpbXBvcnRhbnQ7XG4gIHNwYW4ge1xuICAgIHRleHQtaW5kZW50OiAwO1xuICB9XG59XG5cblxuLm5hdi1pdGVtLWdvdmNvLWxpbmsge1xuICBtYXJnaW4tdG9wIDogMHB4ICFpbXBvcnRhbnQ7XG59Il19 */\"","import { Component, OnInit, Input, SimpleChanges } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { Subject } from 'rxjs';\nimport { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';\nimport { ToolsService } from '../../services/tools.service';\n\n@Component({\n selector: 'app-sidebar',\n templateUrl: './sidebar.component.html',\n styleUrls: ['./sidebar.component.scss']\n})\nexport class SidebarComponent {\n query: string = '';\n categoria: string;\n lastItem: any;\n searchTerm$ = new Subject();\n menuFilter: any[] = [];\n @Input() menu: any[] = [];\n expand: any;\n media: any;\n constructor(private router: Router, private tools: ToolsService) {\n\n this.tools.$collapseStatus.subscribe((status: any) => {\n this.expand = status;\n })\n\n // observable input search events\n this.searchTerm$\n .pipe(\n debounceTime(700),\n distinctUntilChanged(),\n switchMap(query => this.tools.search(this.menu, query, 'recursos')),\n ).subscribe((response: any) => {\n this.menuFilter = response;\n })\n }\n\n ngAfterViewChecked() {\n }\n\n\n redirect(item: any) {\n this.router.navigate([item.url]);\n this.tools.updateMenu(item);\n if (!this.lastItem) {\n this.lastItem = item;\n } else {\n this.lastItem.active = false;\n this.lastItem = item;\n }\n item.active = true;\n if (document.body.clientWidth < 960) {\n this.tools.collapse();\n this.lastItem.active = false;\n }\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (typeof changes.menu !== 'undefined') {\n this.menuFilter = this.menu;\n }\n }\n\n\n}\n\n\n\n\n","import { Injectable, Inject } from '@angular/core';\n\nimport { PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\nimport 'clipboard';\n\nimport 'prismjs';\nimport 'prismjs/plugins/toolbar/prism-toolbar';\nimport 'prismjs/plugins/line-numbers/prism-line-numbers';\nimport 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';\nimport 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-javascript';\nimport 'prismjs/components/prism-java';\nimport 'prismjs/components/prism-markup';\nimport 'prismjs/components/prism-typescript';\nimport 'prismjs/components/prism-sass';\nimport 'prismjs/components/prism-scss';\n\ndeclare var Prism: any;\n\n@Injectable()\nexport class HighlightService {\n\n constructor(@Inject(PLATFORM_ID) private platformId: Object) { }\n\n highlightAll() {\n if (isPlatformBrowser(this.platformId)) {\n Prism.highlightAll();\n }\n }\n\n}\n","import { Injectable, HostListener } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { HttpClient } from '@angular/common/http';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class ToolsService {\n public media: any = false;\n private menuCollapse: boolean = true;\n public innerWidth: any;\n private collapseStatus = new BehaviorSubject({});\n public $collapseStatus = this.collapseStatus.asObservable();\n\n private mediaQuery920 = new BehaviorSubject({});\n public $mediaQuery920 = this.mediaQuery920.asObservable();\n\n private menu = new BehaviorSubject({});\n public $menu = this.menu.asObservable();\n\n private contentModal = new BehaviorSubject({});\n public $contentModal = this.contentModal.asObservable();\n\n constructor(private httpClient: HttpClient){\n }\n\n getFile(url): Observable{\n return this.httpClient.request('GET' ,url , {responseType:'blob'});\n }\n updateModalContent (newContent: any) {\n this.contentModal.next(newContent);\n }\n\n searchInArray(array: string[], type: string) {\n let carsFilter = [];\n carsFilter.push(\n array.filter((car: any) => car.toLowerCase().indexOf((type.trim()).toLowerCase()) !== -1)\n );\n return carsFilter;\n }\n\n search(menu, query, recurso) {\n let treeFilter = this.findInto(menu, query, recurso);\n treeFilter[0] = treeFilter[0].filter((option: any) => {\n let resultado = false;\n resultado = ((option.categoria.toLowerCase()).indexOf(query.toLowerCase()) !== -1 || option[recurso].length > 0 )\n return resultado;\n });\n return treeFilter\n }\n\n findInto(tree: any, term: string, childrenName: string) {\n let treeFilter = []\n tree.forEach((n: any) => {\n const nClone = { ...n }\n let exist = false;\n if (nClone.hasOwnProperty('url') && nClone.hasOwnProperty('nombreRecurso')) {\n exist = (nClone.url.indexOf(term.toLowerCase()) !== -1 || (nClone.nombreRecurso.toLowerCase()).indexOf(term.toLowerCase()) !== -1);\n }\n if (nClone.hasOwnProperty(childrenName)) {\n if (nClone[childrenName] !== null) {\n const children = this.findInto(nClone[childrenName], term, childrenName);\n if (children.length > 0) {\n nClone[childrenName] = children[0];\n exist = true\n } else {\n exist = false\n }\n }\n }\n if (exist) {\n treeFilter = [...treeFilter, ...[nClone]];\n } else {\n treeFilter = [...treeFilter];\n }\n });\n return [treeFilter];\n }\n\n expand() {\n this.menuCollapse = true;\n this.collapseStatus.next(this.menuCollapse);\n }\n\n collapse() {\n this.menuCollapse = false;\n this.collapseStatus.next(this.menuCollapse);\n }\n\n updateMenu(menu: any){\n this.menu.next(menu);\n }\n\n}","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { HttpClientModule } from '@angular/common/http';\n\n\nimport {\n HeaderComponent,\n FooterComponent,\n SidebarComponent,\n CodeRenderComponent\n} from './components'\nimport { HighlightService } from './services/highligh.service';\n\nconst COMPONENTS = [\n HeaderComponent,\n FooterComponent,\n SidebarComponent,\n CodeRenderComponent,\n];\n\n@NgModule({\n declarations: [COMPONENTS],\n imports: [\n CommonModule,\n HttpClientModule,\n ],\n exports: [\n COMPONENTS,\n ],\n providers: [\n HighlightService\n ]\n})\n\nexport class ThemeModule { }\n","export default \"/*scroll item test */\\n\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9kaWsvZ292Y28tcHJlL2Nkbi12Mi9jZG4vc3JjL2FwcC9hcHAuY29tcG9uZW50LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0Esb0JBQUEiLCJmaWxlIjoic3JjL2FwcC9hcHAuY29tcG9uZW50LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAaW1wb3J0IHVybCgnaHR0cHM6Ly9jZG4ud3d3Lmdvdi5jby9hc3NldHMvY3NzL3N0eWxlcy5taW4uY3NzJyk7XG4vKnNjcm9sbCBpdGVtIHRlc3QgKi9cbiJdfQ== */\"","import { Component } from '@angular/core';\nimport { HighlightService } from './@core/services/highligh.service';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n title = 'cdn-and';\n constructor(private highlightService: HighlightService) {\n }\n\n ngAfterViewInit() {\n this.highlightService.highlightAll();\n }\n\n}\n","import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AppComponent } from './app.component';\nimport { RouterModule } from '@angular/router';\nimport { ThemeModule } from './@core/theme.module';\nimport { PagesModule } from './pages/pages.module';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { ToastrModule } from 'ngx-toastr';\nimport { TransversalesModule } from './pages/transversales/transversales.module';\nimport { ClipboardModule } from 'ngx-clipboard';\n\ndeclare const utils: any;\n\ndeclare global {\n interface Window { utils: any }\n}\nwindow.utils = window.utils || utils;\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n RouterModule,\n ThemeModule,\n PagesModule,\n CommonModule,\n TransversalesModule,\n ClipboardModule,\n BrowserAnimationsModule, // required animations module\n ToastrModule.forRoot({\n timeOut: 2000,\n extendedTimeOut: 0,\n positionClass: 'toast-bottom-right',\n })\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n","import { NgModule } from '@angular/core';\nimport { Routes, RouterModule, ExtraOptions } from '@angular/router';\nimport { ImplementationComponent } from './pages/transversales/implementation/implementation.component';\n\nconst routerOptions: ExtraOptions = {\n useHash: false,\n scrollPositionRestoration: 'enabled',\n anchorScrolling: 'enabled',\n scrollOffset: [0, 64]\n};\n\nexport const routes: Routes = [\n { path: 'pages', \n loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)},\n { path: 'componentImplements', component: ImplementationComponent, pathMatch: 'full' },\n { path: '', redirectTo: 'pages/inicio', pathMatch: 'full' },\n { path: '**', redirectTo: 'pages/inicio' },\n];\n\nconst config: ExtraOptions = {\n useHash: true,\n};\n\n@NgModule({\n imports: [RouterModule.forRoot(routes, routerOptions)],\n exports: [RouterModule]\n})\nexport class AppRoutingModule {\n}\n","export default \".alert-govco {\\n max-width: 600px !important; }\\n .alert-govco .modal-content {\\n padding: 0rem 1.563rem 1.25rem; }\\n .alert-govco .modal-header {\\n padding-top: 1.2rem;\\n padding-right: 0rem; }\\n .alert-govco .modal-header .close {\\n color: #004884 !important; }\\n .alert-govco .modal-body {\\n padding: 0 9% 9%;\\n margin-top: 1rem !important; }\\n .alert-govco .modal-body.modal-content-maintenance .headline-xl-govco, .alert-govco .modal-body.modal-content-maintenance .govco-icon, .alert-govco .modal-body.modal-content-exit .headline-xl-govco, .alert-govco .modal-body.modal-content-exit .govco-icon, .alert-govco .modal-body.modal-content-warning .headline-xl-govco, .alert-govco .modal-body.modal-content-warning .govco-icon {\\n color: #FFAB00 !important; }\\n .alert-govco .modal-body.modal-content-info .headline-xl-govco, .alert-govco .modal-body.modal-content-info .govco-icon {\\n color: #3772FF !important; }\\n .alert-govco .modal-body.modal-content-success {\\n padding: 9% !important; }\\n .alert-govco .modal-body.modal-content-success .headline-xl-govco, .alert-govco .modal-body.modal-content-success .govco-icon {\\n color: #069169 !important; }\\n .alert-govco .modal-body.modal-content-error {\\n padding: 9% 9% 2% !important; }\\n .alert-govco .modal-body.modal-content-error .headline-xl-govco, .alert-govco .modal-body.modal-content-error .govco-icon {\\n color: #A80521 !important; }\\n .alert-govco .modal-body.modal-content-exit, .alert-govco .modal-body.modal-content-warning {\\n padding: 9% 9% 2% !important; }\\n .alert-govco .modal-footer {\\n display: block;\\n margin: 0 auto;\\n text-align: center; }\\n\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9kaWsvZ292Y28tcHJlL2Nkbi12Mi9jZG4vc3JjL2FwcC9wYWdlcy9hbGVydGFzL2FsZXJ0YXMuY29tcG9uZW50LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUE7RUFDSSwyQkFBMEIsRUFBQTtFQUQ5QjtJQUdRLDhCQUE4QixFQUFBO0VBSHRDO0lBT1EsbUJBQW1CO0lBQ25CLG1CQUFtQixFQUFBO0VBUjNCO01BVVkseUJBQWlDLEVBQUE7RUFWN0M7SUFjUSxnQkFBZ0I7SUFDaEIsMkJBQTJCLEVBQUE7RUFmbkM7TUFrQjhDLHlCQUE0QixFQUFBO0VBbEIxRTtNQXFCOEMseUJBQW1DLEVBQUE7RUFyQmpGO01Bd0JZLHNCQUFzQixFQUFBO0VBeEJsQztRQXlCOEMseUJBQTZCLEVBQUE7RUF6QjNFO01BNEJZLDRCQUE0QixFQUFBO0VBNUJ4QztRQTZCOEMseUJBQThCLEVBQUE7RUE3QjVFO01BK0J3RCw0QkFBNEIsRUFBQTtFQS9CcEY7SUFrQ1EsY0FBYztJQUNkLGNBQWM7SUFDZCxrQkFBa0IsRUFBQSIsImZpbGUiOiJzcmMvYXBwL3BhZ2VzL2FsZXJ0YXMvYWxlcnRhcy5jb21wb25lbnQuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgXCIuLy4uLy4uLy4uL3Njc3MvYmFzZS9jb2xvcnNcIjtcbkBpbXBvcnQgXCIuLy4uLy4uLy4uL3Njc3MvYmFzZS92YXJpYWJsZXNcIjtcbi5hbGVydC1nb3ZjbyB7XG4gICAgbWF4LXdpZHRoOiA2MDBweCFpbXBvcnRhbnQ7XG4gICAgLm1vZGFsLWNvbnRlbnR7XG4gICAgICAgIHBhZGRpbmc6IDByZW0gMS41NjNyZW0gMS4yNXJlbTtcbiAgICAgICAgXG4gICAgfVxuICAgIC5tb2RhbC1oZWFkZXIge1xuICAgICAgICBwYWRkaW5nLXRvcDogMS4ycmVtO1xuICAgICAgICBwYWRkaW5nLXJpZ2h0OiAwcmVtO1xuICAgICAgICAuY2xvc2Uge1xuICAgICAgICAgICAgY29sb3I6ICRjb2xvci1kYXJrLWJsdWUhaW1wb3J0YW50O1xuICAgICAgICB9XG4gICAgfSAgICBcbiAgICAubW9kYWwtYm9keSB7XG4gICAgICAgIHBhZGRpbmc6IDAgOSUgOSU7XG4gICAgICAgIG1hcmdpbi10b3A6IDFyZW0gIWltcG9ydGFudDtcbiAgICAgICAgLy8gLmdvdmNvLWljb24geyBmb250LXNpemU6IDRyZW0gIWltcG9ydGFudDsgfVxuICAgICAgICAmLm1vZGFsLWNvbnRlbnQtbWFpbnRlbmFuY2UsICYubW9kYWwtY29udGVudC1leGl0LCAmLm1vZGFsLWNvbnRlbnQtd2FybmluZyB7XG4gICAgICAgICAgICAuaGVhZGxpbmUteGwtZ292Y28sIC5nb3Zjby1pY29uIHsgY29sb3I6ICRjb2xvci1nb2xkIWltcG9ydGFudDsgfVxuICAgICAgICB9XG4gICAgICAgICYubW9kYWwtY29udGVudC1pbmZvIHtcbiAgICAgICAgICAgIC5oZWFkbGluZS14bC1nb3ZjbywgLmdvdmNvLWljb24geyBjb2xvcjogJGNvbG9yLWRvZGdlci1ibHVlIWltcG9ydGFudDsgfVxuICAgICAgICB9XG4gICAgICAgICYubW9kYWwtY29udGVudC1zdWNjZXNzIHtcbiAgICAgICAgICAgIHBhZGRpbmc6IDklICFpbXBvcnRhbnQ7XG4gICAgICAgICAgICAuaGVhZGxpbmUteGwtZ292Y28sIC5nb3Zjby1pY29uIHsgY29sb3I6ICRjb2xvci1ncmVlbiFpbXBvcnRhbnQ7IH1cbiAgICAgICAgfVxuICAgICAgICAmLm1vZGFsLWNvbnRlbnQtZXJyb3Ige1xuICAgICAgICAgICAgcGFkZGluZzogOSUgOSUgMiUgIWltcG9ydGFudDtcbiAgICAgICAgICAgIC5oZWFkbGluZS14bC1nb3ZjbywgLmdvdmNvLWljb24geyBjb2xvcjogJGNvbG9yLXNoaXJheiFpbXBvcnRhbnQ7IH1cbiAgICAgICAgfVxuICAgICAgICAmLm1vZGFsLWNvbnRlbnQtZXhpdCwgJi5tb2RhbC1jb250ZW50LXdhcm5pbmcgeyBwYWRkaW5nOiA5JSA5JSAyJSAhaW1wb3J0YW50OyB9XG4gICAgfVxuICAgIC5tb2RhbC1mb290ZXIge1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgbWFyZ2luOiAwIGF1dG87XG4gICAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICB9ICBcbn0iXX0= */\"","import { Component, OnInit } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\n@Component({\n selector: 'app-alertas',\n templateUrl: './alertas.component.html',\n styleUrls: ['./alertas.component.scss']\n})\nexport class AlertasComponent implements OnInit {\n arrayComponent: any;\n componentRender: any;\n infoComponent: any;\n codeHtml: string;\n utils: any;\n\n constructor(private sanitizer:DomSanitizer) { \n this.utils = window.utils;\n\n this.arrayComponent = [\n {\n id: 'alertaInformativa',\n titulo: 'Alerta Informativa',\n subtitulo: '',\n claseContainer: 'col-10',\n componentFalseRender: //Este es fragmento se renderizara como componente HTML\n `\n `,\n componentRender: //Este componente se renderizara en la sección de HTML Markup\n `\n \n \n
\n
\n
\n
\n \n
\n
\n \n
\n Título de la Alerta\n
\n
Texto de ejemplo:Muchas gracias por participar, recibirás una notificación al correo con tu participación.
\n
\n
\n
\n
\n `,\n },\n {\n id: 'alertaExito',\n titulo: 'Alerta de Éxito',\n subtitulo: '',\n claseContainer: 'col-10',\n componentFalseRender: //Este es fragmento se renderizara como componente HTML\n ` \n `,\n componentRender: //Este componente se renderizara en la sección de HTML Markup\n ` \n \n \n
\n
\n
\n
\n \n
Título de la Alerta
\n
Información de detalle al cierre de la acción.
\n
\n \n
\n
\n
\n `,\n },\n {\n id: 'alertaError',\n titulo: 'Alerta de Error',\n subtitulo: '',\n claseContainer: 'col-10',\n componentFalseRender: //Este es fragmento se renderizara como componente HTML\n `\n `,\n componentRender: //Este componente se renderizara en la sección de HTML Markup\n `\n \n \n
\n
\n
\n
\n \n
Título de la alerta
\n
Tu visualización no cumple con los criterios necesarios para su publicación ¿Quieres echarle un vistazo de nuevo a la postulación?
\n
\n \n
\n
\n
\n `,\n },\n {\n id: 'alertaMantenimiento',\n titulo: 'Alerta de Mantenimiento',\n subtitulo: '',\n claseContainer: 'col-10',\n componentFalseRender: //Este es fragmento se renderizara como componente HTML\n `\n `,\n componentRender: //Este componente se renderizara en la sección de HTML Markup\n `\n \n \n
\n
\n
\n
\n \n
\n
\n \n
En mantenimiento
\n
Esta página esta en mantenimiento en breve estaremos de vuelta.
\n
Puedes escribirnos a soporteccc@mintic.gov.co. Llámanos gratis: 01 8000 910742 y en Bogotá: 3 90 79 51
\n
\n
\n
\n
\n `,\n },\n {\n id: 'alertaAdvertencia',\n titulo: 'Alerta de Advertencia',\n subtitulo: '',\n claseContainer: 'col-10',\n componentFalseRender: //Este es fragmento se renderizara como componente HTML\n `\n `,\n componentRender: //Este componente se renderizara en la sección de HTML Markup\n `\n \n \n
\n
\n
\n
\n \n
Ha ocurrido un error
\n
Texto predeterminado.
\n
Puedes escribirnos a soporteccc@mintic.gov.co. Llámanos gratis: 01 8000 910742 y en Bogotá: 3 90 79 51
\n
\n \n
\n
\n
\n `,\n },\n {\n id: 'alertaSalida',\n titulo: 'Alerta de Salida del Portal',\n subtitulo: '',\n claseContainer: 'col-10',\n componentFalseRender: //Este es fragmento se renderizara como componente HTML\n `\n `,\n componentRender: //Este componente se renderizara en la sección de HTML Markup\n `\n \n \n
\n
\n
\n
\n \n
Estas saliendo de GOV.CO
\n
Con esta acción abrirás una nueva pestaña. ¡Te esperamos pronto!
\n \n \n \n Imprimir\n \n \n \n \n Imprimir\n \n \n \n \n \n \n \n \n Inicio\n \n`,\n },\n {\n id: 'textuales',\n titulo: 'Botones textuales',\n subtitulo: 'No tienen icono, describen la acción por medio de texto de no mayor a 3 palabras, salvo en contenidos específicos.',\n componentRender: `\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
\n
\n
\n
\n
\n \n
\n
\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
\n
\n
\n
\n
\n \n
\n
\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
\n
\n
\n
\n `,\n titulo: 'Acordeón GOV.CO General',\n subtitulo: 'Acordeón base de GOV.CO con identificador header de grupo azul oscuro y cuerpo de grupo azul claro'\n },\n {\n id: 'simple',\n claseContainer: 'col-12',\n componentRender:\n `\n
\n
\n
\n \n
\n
\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
\n
\n
\n
\n \n
\n
\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
\n
\n
\n
\n
\n
\n
\n
\n `,\n titulo: 'Acordeón Anidado',\n subtitulo: 'Acordeón GOV.CO general con acordeón simple en su interior'\n },\n ];\n \n this.infoComponent = {\n titulo: 'Acordeón (Collapse)',\n descripcion: 'El .collapse clase indica un elemento plegable (un
en nuestro ejemplo); este es el contenido que se muestra o se oculta con un clic de un botón. Para controlar (mostrar / ocultar) el contenido plegable, agregar la data-toggle=\"collapse\" atributo a un o un
![\\\"...\\\"](\\\"https://beta.www.gov.co/uploads/45929f07-c8bb-4663-ad62-e3286e77e4ac.jfif\\\"\\n)
\\n ![\\\"La](\\\"https://beta.www.gov.co/uploads/c90a6f63-7834-46fd-b342-01949186980b.jpeg\\\"\\n)
\\n ![\"Colombia\"](\"https://www.gov.co/home/portada-01-abril.7755328688b5440943ed.jpg\")
\n