From d84211a6cd084aebe6a84796bb9dde7b114ca821 Mon Sep 17 00:00:00 2001 From: Yura Betrozov Date: Mon, 28 Mar 2016 11:58:12 +0300 Subject: [PATCH] feat(docs): applied new docs style --- demo/assets/css/style.css | 708 +++++++++++++----- demo/assets/images/active.svg | 11 + demo/assets/images/anactive.svg | 13 + demo/assets/images/bar-doc.png | Bin 0 -> 261 bytes demo/assets/images/border-dot.png | Bin 0 -> 928 bytes demo/assets/images/link-doc.png | Bin 0 -> 1402 bytes demo/assets/images/logo.png | Bin 0 -> 12639 bytes demo/assets/images/menu-left.svg | 11 + demo/assets/images/menu-right.svg | 11 + demo/assets/images/repa-down.png | Bin 0 -> 1074 bytes demo/assets/images/repa-up.png | Bin 0 -> 1049 bytes demo/assets/images/search-doc.png | Bin 0 -> 765 bytes demo/components/accordion-section.ts | 57 +- demo/components/alert-section.ts | 58 +- demo/components/buttons-section.ts | 59 +- demo/components/carousel-section.ts | 57 +- demo/components/collapse-section.ts | 57 +- demo/components/datepicker-section.ts | 61 +- demo/components/demo-header.ts | 67 -- demo/components/demo-section.template.html | 44 ++ demo/components/demo-section.ts | 87 +-- demo/components/dropdown-section.ts | 59 +- .../getting-started/dependencies.md | 10 + .../components/getting-started/description.md | 1 + .../getting-started.template.html | 11 + .../getting-started/getting-started.ts | 24 + .../getting-started/installation.md | 9 + .../getting-started/reading-documentation.md | 4 + .../main-menu/main-menu.component.ts | 25 + .../main-menu/main-menu.template.html | 32 + .../main-menu/search-filter.pipe.ts | 26 + demo/components/pagination-section.ts | 59 +- demo/components/progressbar-section.ts | 66 +- demo/components/rating-section.ts | 59 +- demo/components/tabs-section.ts | 59 +- demo/components/timepicker-section.ts | 58 +- demo/components/tooltip-section.ts | 58 +- .../components/top-menu/top-menu.component.ts | 14 + .../top-menu/top-menu.template.html | 28 + demo/components/typeahead-section.ts | 59 +- demo/config.ts | 80 ++ demo/demo.template.html | 6 + demo/index.html | 4 + demo/index.ts | 88 +-- 44 files changed, 1099 insertions(+), 1041 deletions(-) create mode 100644 demo/assets/images/active.svg create mode 100644 demo/assets/images/anactive.svg create mode 100644 demo/assets/images/bar-doc.png create mode 100644 demo/assets/images/border-dot.png create mode 100644 demo/assets/images/link-doc.png create mode 100644 demo/assets/images/logo.png create mode 100644 demo/assets/images/menu-left.svg create mode 100644 demo/assets/images/menu-right.svg create mode 100644 demo/assets/images/repa-down.png create mode 100644 demo/assets/images/repa-up.png create mode 100644 demo/assets/images/search-doc.png delete mode 100644 demo/components/demo-header.ts create mode 100644 demo/components/demo-section.template.html create mode 100644 demo/components/getting-started/dependencies.md create mode 100644 demo/components/getting-started/description.md create mode 100644 demo/components/getting-started/getting-started.template.html create mode 100644 demo/components/getting-started/getting-started.ts create mode 100644 demo/components/getting-started/installation.md create mode 100644 demo/components/getting-started/reading-documentation.md create mode 100644 demo/components/main-menu/main-menu.component.ts create mode 100644 demo/components/main-menu/main-menu.template.html create mode 100644 demo/components/main-menu/search-filter.pipe.ts create mode 100644 demo/components/top-menu/top-menu.component.ts create mode 100644 demo/components/top-menu/top-menu.template.html create mode 100644 demo/config.ts create mode 100644 demo/demo.template.html diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css index 428701bc27..6ac5c09235 100644 --- a/demo/assets/css/style.css +++ b/demo/assets/css/style.css @@ -1,252 +1,612 @@ -/*! - * Bootstrap Docs (http://getbootstrap.com) - * Copyright 2011-2014 Twitter, Inc. - * Licensed under the Creative Commons Attribution 3.0 Unported License. For - * details, see http://creativecommons.org/licenses/by/3.0/. - */ - -.h1, .h2, .h3, h1, h2, h3 { - margin-top: 20px; - margin-bottom: 10px; +body { + font-family: 'Roboto', sans-serif; + background-color: #f5f9fb; } -.h1, h1 { - font-size: 36px; +.text-red { + color: #cd151e; } -.btn-group-lg > .btn, .btn-lg { - font-size: 18px; +/************* START TOP MENU **************/ + +#top-menu { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: #1d1d2b; + z-index: 2; } -section { - padding-top: 30px; +#top-menu > div:not(.menu-right) { + float: left; } -.bd-pageheader { - margin-top: 51px; +#top-menu .menu-right { + float: right; } -.page-header { - padding-bottom: 9px; - margin: 10px 0 40px; - border-bottom: 1px solid #eee; +#top-menu .menu-right > div { + float: left; } -.navbar-default .navbar-nav > li > a { - color: #777; +#top-menu .title { + border-right: 1px solid #191924; + min-width: 270px; + cursor: pointer; } -.navbar { - padding: 0; +#top-menu .title h2 { + font-size: 22px; + padding: 22px 10px; + font-weight: 500; + color: #fff; + margin: 0; } -.navbar-nav .nav-item { - margin-left: 0 !important; +#top-menu .top-menu-container { + margin-left: 13px; } -.nav > li > a { - position: relative; - display: block; - padding: 10px 15px; +#top-menu .top-menu-container ul { + overflow: hidden; + margin: 0; } -.nav .navbar-brand { +#top-menu .top-menu-container li { float: left; - height: 50px; - padding: 15px 15px; +} + +#top-menu .top-menu-container li a { + text-decoration: none; + display: inline-block; + padding: 24px 15px; font-size: 18px; - line-height: 20px; - margin-right: 0 !important; + font-weight: 300; + color: #fff; } -.navbar-brand { - color: #777; - float: left; +#top-menu .top-menu-container li a:hover { + color: #cd151e; +} + +#top-menu .logo { + margin: 3px 25px 11px 0; +} + +#top-menu .logo img { height: 50px; - padding: 15px 15px; - font-size: 18px; - line-height: 20px; } -.navbar-toggler { - margin-top: 8px; - margin-right: 15px; +#top-menu .git-hub { + margin: 22px 0; +} + +#top-menu .git-hub iframe { + height: 20px; + width: 95px; +} + +#mobile-top-menu, +#mobile-main-menu { + display: none; + cursor: pointer; } -.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { - color: #333; - background-color: transparent; +#mobile-main-menu { + padding: 24px 15px; } -.bd-pageheader, .bs-docs-masthead { +#mobile-top-menu { + padding: 24px 30px 24px 10px; +} + +#mobile-main-menu img, +#mobile-top-menu img { + height: 16px; +} + +#top-menu #top-menu-link { + -webkit-transition: max-height .5s ease; + -moz-transition: max-height .5s ease; + -ms-transition: max-height .5s ease; + -o-transition: max-height .5s ease; + transition: max-height .5s ease; + overflow: hidden; +} + +#top-menu #top-menu-link.active { + max-height: 500px; +} + +/************* END TOP MENU **************/ + +/************* START MAIN MENU **************/ + +#main-menu { + width: 270px; + height: calc(100% - 66px); + float: left; + background-color: #20202f; + margin-top: 65px; + position: fixed; + bottom: 0; + left: 0; + z-index: 1; + -webkit-transition: left .5s ease; + -moz-transition: left .5s ease; + -ms-transition: left .5s ease; + -o-transition: left .5s ease; + transition: left .5s ease; +} + +#main-menu.active { + left: 0; +} + +#main-menu > div { + border-top: 1px solid #191924; +} + +#main-menu .menu-search { position: relative; - padding: 30px 0; - color: #cdbfe3; - text-align: center; - text-shadow: 0 1px 0 rgba(0, 0, 0, .1); - background-color: #6f5499; - background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499)); - background-image: -webkit-linear-gradient(top, #563d7c 0, #6f5499 100%); - background-image: -o-linear-gradient(top, #563d7c 0, #6f5499 100%); - background-image: linear-gradient(to bottom, #563d7c 0, #6f5499 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0); - background-repeat: repeat-x; -} - -.bd-pageheader { - margin-bottom: 40px; - font-size: 20px; -} - -.bd-pageheader h1 { - margin-top: 0; + padding: 10px; +} + +#main-menu .menu-search input { + border: 1px solid #babfc4; + font-size: 14px; + color: #a4a4b0; + padding: 8px 10px 8px 30px; + width: 100%; + box-sizing: border-box; + border-radius: 4px; +} + +#main-menu .menu-search:before { + content: ""; + background: url("../images/search-doc.png") no-repeat 50% 50%; + background-size: contain; + width: 16px; + height: 16px; + position: absolute; + top: 19px; + left: 17px; +} + +#main-menu .menu-search input:focus, +#main-menu .menu-search input:active { + outline: 0; +} + +#main-menu .main-menu-container { + overflow-y: auto; + height: calc(100% - 56px); +} + +#main-menu .section .item h4 { + position: relative; +} + +#main-menu .section .item h4 .arrow { + display: block; + width: 11px; + height: 12px; + background: url("../images/repa-down.png") no-repeat bottom left; + background-size: contain !important; + position: absolute; + top: calc(50% - 6px); + right: 0; +} + +#main-menu .section .item.active h4 .arrow { + background: url("../images/repa-up.png") no-repeat top left; +} + +#main-menu .menu-content { + padding: 0 15px 0 10px; +} + +#main-menu .section h3 { + font-size: 16px; + font-weight: 300; + color: #a4a4b0; + text-transform: uppercase; + margin: 15px 0; + cursor: pointer; + + -webkit-transition: all .2s ease-out; + -moz-transition: all .2s ease-out; + -o-transition: all .2s ease-out; + transition: all .2s ease-out; +} + +#main-menu .section h3:hover, +#main-menu .section.active h3 { color: #fff; } -.bd-pageheader p { - margin-bottom: 0; +#main-menu .section .item { + margin-bottom: 13px; + margin-left: 15px; + display: none; +} + +#main-menu .section:first-child .item { + display: none !important; +} + +#main-menu .section.active .item { + display: block; +} + +#main-menu .section h4 { + color: #a4a4b0; + font-size: 16px; + cursor: pointer; font-weight: 300; - line-height: 1.4; + -webkit-transition: all .2s ease-out; + -moz-transition: all .2s ease-out; + -o-transition: all .2s ease-out; + transition: all .2s ease-out; +} + +#main-menu .section h4:hover { + color: #fff; +} + +#main-menu .section .item h4 .arrow { + width: 8px; + height: 9px; + top: calc(50% - 5px); } -.bd-pageheader .btn { - margin: 10px 0; +#main-menu .section ul { + display: none; } -.scrollable-menu .nav-link { - color: #337ab7; +#main-menu .section .item.active ul { + display: block; + margin: 5px 0 -5px; + padding: 0 0 0 5px; + background: url("../images/border-dot.png") repeat-y 5px 0; +} + +#main-menu .section .item li { + color: #a4a4b0; font-size: 14px; + padding: 0 0 0 12px; + margin: 14px 0; + font-family: 'Source Code Pro'; + border-left: 1px solid transparent; + list-style: none; } -.scrollable-menu .nav-link:hover { - color: #23527c; - background-color: #eee; +#main-menu .section .item li.active, +#main-menu .section .item li:hover { + color: #cd151e; + border-left: 1px solid #cd151e; } -@media (min-width: 992px) { - .bd-pageheader h1, .bd-pageheader p { - margin-right: 380px; - } +#main-menu .section .item li:not(.active):hover { + cursor: pointer; } -@media (min-width: 768px) { - .bd-pageheader { - padding-top: 60px; - padding-bottom: 60px; - font-size: 24px; - text-align: left; - } +/************* END MAIN MENU **************/ - .bd-pageheader h1 { - font-size: 60px; - line-height: 1; - } +/************* START MAIN **************/ - .navbar-nav > li > a.nav-link { - padding-top: 15px; - padding-bottom: 15px; - font-size: 14px; - } +#main { + width: calc(100% - 270px); + height: 100%; + float: right; + margin-top: 65px; + padding: 30px 30px 0; + box-sizing: border-box; +} - .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { - margin-left: -15px; - } +#main .content-header { + border-left: 3px solid #babfc4; + padding-left: 15px; } -@media (max-width: 767px) { - .hidden-xs { - display: none !important; - } +#main .content-header h2 { + font-size: 34px; + font-weight: 700; + color: #1d1d2b; + text-transform: uppercase; + margin-bottom: 20px; + line-height: 23px; +} - .navbar .container { - width: 100%; - max-width: 100%; - } - .navbar .container, - .navbar .container .navbar-header { - padding: 0; - margin: 0; - } +#main .content-header h2 a { + display: inline-block; + vertical-align: top; + margin-top: 4px; + line-height: 0; } -@media (max-width: 400px) { - code, kbd { - font-size: 60%; - } +#main .content-header h2 img { + width: 15px; + vertical-align: top; } -/** - * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units - * - * To overcome this, create media queries that target the width, height, and orientation of iOS devices. - * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing - * the height of element '.scrollable-menu' —which is a full width and height cover image. - * - * iOS Resolution Quick Reference: http://www.iosres.com/ - */ +#main .content-header p { + font-size: 18px; + color: #1d1d2b; + font-weight: 300; + line-height: 30px; +} -.scrollable-menu { - height: 90vh; - width: 100vw; - overflow-x: hidden; - padding: 0 0 20px; +#main .content-box { + margin-top: 20px; + padding: 30px; + box-sizing: border-box; + background-color: #fff; + margin-bottom: 30px; } -/** - * iPad with portrait orientation. - */ -@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) { - .scrollable-menu { - height: 1024px !important; - } +/************* END MAIN **************/ + +/************* START CONTENT **************/ + +#content p, +#content li, +#content .accordion h4 { + font-weight: 300; + font-size: 16px; + color: #1d1d2b; } -/** - * iPad with landscape orientation. - */ -@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) { - .scrollable-menu { - height: 768px !important; - } +#content p { + line-height: 30px; } -/** - * iPhone 5 - * You can also target devices with aspect ratio. - */ -@media screen and (device-aspect-ratio: 40/71) { - .scrollable-menu { - height: 500px !important; - } +#content p, +#content li { + line-height: 30px; } -.navbar-default .navbar-toggle .icon-bar { - background-color: #888; +#content li a, +#content p a { + color: #0808df; + text-decoration: none; } -.navbar-toggle:focus { - outline: 0 +#content .bash-code { + color: #55555c !important; + padding: 0 5px; + border-radius: 2px; + background-color: #eef5f9 !important; } -.navbar-toggle .icon-bar { - display: block; - width: 22px; - height: 2px; - border-radius: 1px +#content .code-container { + border-radius: 2px; + margin: 15px 0; + background-color: #eef5f9 !important; + padding: 15px; +} + +#content .code-container:empty { + display: none; +} + +#content .code-style { + font-size: 16px; + color: #1d1d2b; } -.navbar-toggle .icon-bar + .icon-bar { - margin-top: 4px +#content .bash-code, +#content .code-container, +#content .code-style { + font-family: 'Source Code Pro' !important; } -pre { - white-space: pre-wrap; /* CSS 3 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ +#content .section:not(:first-child) { + border-top: 1px solid #babfc4; + padding: 30px 0 0; + margin: 30px 0 0; +} + +#content .section > h3 { + color: #1d1d2b; + font-size: 28px; + font-weight: 500; + margin-bottom: 10px; } -#getting-started { +#content .list-container ul { padding: 0; } + +#content .list-container ul li { + list-style: none; +} + +#content .list-container ul li:before { + content: '•'; + display: inline-block; + margin-right: 5px; +} + +#content .list-container ol { + list-style: decimal; + margin-left: 18px; +} + +#content .accordion { + position: relative; +} + +#content .accordion:not(:first-child) { + height: 90vh; + border-top: 1px dashed #babfc4; + padding: 30px 35px 0; + margin-top: 30px; +} + +#content .accordion:first-child { + padding: 0 35px; + margin-top: 30px; +} + +#content .accordion .accordion-header { + color: #55555c; + cursor: pointer; +} + +#content .accordion .accordion-header h4 { + font-family: 'Source Code Pro'; + font-size: 16px; +} + +#content .accordion .accordion-body { + display: none; + margin-top: 10px; +} + +#content .accordion.active .accordion-body { + display: block; +} + +#content .accordion.notEmpty:before { + content: ''; + background-image: url('../images/anactive.svg'); + background-size: 8px 13px; + width: 8px; + height: 13px; + position: absolute; + top: 32px; + left: 15px; +} + +#content .accordion.notEmpty:first-child:before { + top: 2px; +} + +#content .accordion.active:before { + content: ''; + background-image: url('../images/active.svg'); + background-size: 12px 9px; + width: 12px; + height: 9px; + top: 36px; +} + +#content .accordion.active:after { + content: ''; + width: 1px; + height: calc(100% - 55px); + position: absolute; + bottom: 0; + left: 20.5px; + background-color: #20202f; +} + +#content .item > h4 { + font-size: 22px; + margin: 20px 0 15px; +} + +/************* END CONTENT **************/ + +@media (max-width: 1020px) { + #top-menu { + border-bottom: 1px solid #191924; + } + + #top-menu .logo { + display: none; + } + + #top-menu .top-menu-container { + position: fixed; + background-color: #1d1d2b; + left: 0; + right: 0; + top: 67px; + margin: 0; + max-height: 0; + } + + #top-menu .title { + max-width: 300px; + min-width: 1px; + } + + #top-menu .top-menu-container ul { + padding: 10px 0; + } + + #top-menu .top-menu-container li { + float: none; + } + + #top-menu .top-menu-container li a { + display: block; + padding: 10px 10px; + } + + #mobile-top-menu, + #mobile-main-menu { + display: inline-block; + } + + #main-menu { + left: -100%; + } + + #main { + width: 100%; + float: none; + } +} + +@media (max-width: 600px) { + #top-menu .title { + width: 100%; + max-width: 100%; + text-align: center; + } + + #top-menu .title h2 { + padding: 15px; + } + + #top-menu .menu-right { + float: left; + width: calc(100% - 50px); + text-align: center; + padding-right: 50px; + box-sizing: border-box; + } + + #top-menu .git-hub { + display: inline-block; + float: none !important; + margin: 15px 0; + } + + #top-menu #mobile-top-menu { + position: absolute; + bottom: 0; + right: 0; + padding: 15px 30px 15px 10px; + } + + #mobile-main-menu { + padding: 17px 15px; + } + + #top-menu .top-menu-container { + top: 105px; + } + + #main-menu { + height: calc(100% - 105px); + } + + #main { + margin-top: 105px; + } +} diff --git a/demo/assets/images/active.svg b/demo/assets/images/active.svg new file mode 100644 index 0000000000..a77b494616 --- /dev/null +++ b/demo/assets/images/active.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/demo/assets/images/anactive.svg b/demo/assets/images/anactive.svg new file mode 100644 index 0000000000..8653861de4 --- /dev/null +++ b/demo/assets/images/anactive.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/demo/assets/images/bar-doc.png b/demo/assets/images/bar-doc.png new file mode 100644 index 0000000000000000000000000000000000000000..48d7110a8977949d9320093d4659da33a166f316 GIT binary patch literal 261 zcmV+g0s8)lP)EUNBG2iuakde>RiM zZi$E+yx~Hw4em-reBv@Wrdd}kvMWXw6|3xukyVKZxWaXE%sW0>P&aCJz<+bllsRZh zcR|DPJe9vb*7zN8i&vcF_SoaTM8p>7$uZ4WZ!;7X4-VIrZI8#c%eoordAUxRgQmZsJ~}UgD6rB<;w? zb_2hGfq@?Y12cbtfxp1Yh|@NOp(T=I`_=nA@AH26{ho7LuUthn;APh|TrS7V3V$)f8wMyw|)%X0>+&2RG;u&ZcSP(>% z6Hr7qafS<1Uh`scF3nH|YZpE@<&CJZI{-FIDbSVknvW0yO+!I?tFGx!fulh9 zyO%igmI;MJnz2Rdi^fe)%TNinQ%X2XJ;rXTDh_6hvuwr^VB71efisu*VO$!YtWmCu zdvV4|?9-lO%7RA;!vHrd$2L&2VOgyPLLJ?(EyuCD-FmmtRCT>mVIAf#A{z4w8wjj@ z-fW_l-mxrWKeil*C=rnznuc#_&`ntc)`{cruomsGmJK%8qh*^%{U8&$;x9ACub;-u)w0l0Hh~-w$6+$~V*N^qtSv H>vw+umZ2J7 literal 0 HcmV?d00001 diff --git a/demo/assets/images/link-doc.png b/demo/assets/images/link-doc.png new file mode 100644 index 0000000000000000000000000000000000000000..26562334b5eafd7fe876d2664ba4c5c28f3d7783 GIT binary patch literal 1402 zcmeAS@N?(olHy`uVBq!ia0vp^@<1%d!3HF+d^$P@NJ*BsMwA5Srr5%(GQ`zk9!uLS~AsQn;zFfp39xYDT62(s|s5su(?)1Hb_`sNdc^+B->UA;;0DU00rm#qErP_Ju}^8LqkIab4xu# zQww7wQym2(14C1N1515F16>0{D?w`eeaV|@MPKjQ^< zmB!^WgpZXoh~J7}F5t;vuChBJYJ4rJV{;>u)n>;MjlKsA^eZ`5WIXn7v(#8{rl-B~L_MQ$ z?w=`@V!^+Cete3|dhX-A^V+>E4@sw*Un=%V?{c%5d<+-zJX1Q}+0DjSu|GQ^-T8FT z$)n7X+tt|^f6SfE`+5QUv==)yAIz=`EO`@^HK~E?rvulQ1J=Q&63VaU`IYK%Y6!ha zQ!$kkF*rXZVH;uX0d$_jmc>ol+ZotY?dy{nA@2(I>oM2JiE>7TzzM^-Merl`YvTmVMd> PE)6|h{an^LB{Ts5A6oeC literal 0 HcmV?d00001 diff --git a/demo/assets/images/logo.png b/demo/assets/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..a077034ff4ae7674ba6213e977cb4b8403dbf46c GIT binary patch literal 12639 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 + + + + + diff --git a/demo/assets/images/menu-right.svg b/demo/assets/images/menu-right.svg new file mode 100644 index 0000000000..492de905c0 --- /dev/null +++ b/demo/assets/images/menu-right.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/demo/assets/images/repa-down.png b/demo/assets/images/repa-down.png new file mode 100644 index 0000000000000000000000000000000000000000..06a07f8fcb5e4fa7510341048bc7a5ff0aa66ef2 GIT binary patch literal 1074 zcmaJ=O-$2J94}iWNI(~Y2f6qxLLg!N*c`Bi$+mWrC6&UeJ^1(HIjCCK?XLAQ+EcJQ$6MCr=tKYK&1|2Llhz9{T?8pWpBI|9q=sqi0*2 zJDMqqYE6wuX>uNO?WRWZPu}dxk>fZ{WbrsE;Id*vDyE@41SvzAglVW~voo*Y5Jh== z^h_3K<#U3H3`TJ=OvSJWo1%t>E0&^8K@9S6Qa2;?myKsM(6tCX5t2FC5@AsvnX}>e z+-OFfn^MCXJ$wcXRRkhnK&*g@F>N|RB|=wq1!B8ymIhS_o{G@BNoD0RAR-%r5Yz8h zd7cLYVTKP41_Pl!5a9R_%Y|8<^K-nwb3%Xvdml}r*;+wJOUb=hA|4;; z=lMh^EXE~COeTZL(*s;6l&Enfq?Qb5;u=>w;3n&G-GwkL5?O+_ehF$x8yTQlxS-e1 zMXam0$JOfRBGu)xBpKEn?_cAtxyTN==Kk`M%l`U9lkB`rmiyY`*8+JM>nSOgsl3g< zd;Gh}>*G9+fbW?KPFM{)$XD>RJ&681y7Iv@({j7<0<|*%ejR!d0Ajf_#dL4xuFt=` z@qIbERJhkmZ{@HzwthtWR0414&D?b3wr8iUyJtDGIMdOT=T07Oo8m5dU$=H`=N20C z!S*}Pzpe1TwYyJR&Y#+jUS9ebxV1iiwPgzu)GFWpo}d<}=#>WQ{zl)^AD`tl_Z6oS Kqte58Zs8AIM^vu> literal 0 HcmV?d00001 diff --git a/demo/assets/images/repa-up.png b/demo/assets/images/repa-up.png new file mode 100644 index 0000000000000000000000000000000000000000..e4068e0a05769c6142257a57c661865afb5dfb76 GIT binary patch literal 1049 zcmaJ=J#5oJ6gIf3+A5Wb5R^o!baI6V67gSf(pU*4i4z)uOO-|<8+GhUV^aH!eQn%q z=|Zw1hF0o?7?_YiFfmj}EJz(005KpYHpGA!;hZLcp~b`9yXW_P?|bjw^;VW|Oix9o zD2kdcEh%NPp9}1Xak3U4UR)zv7#FH|71eP|b0L*APz{2TrLDs<)Qs)>?_ipu=%`t# z;;MQ}){(_(K@96#4nb2?deL_@y$La>!FAKlFyCJvFu*i2%pFPPRVNP{=2F{*tL^2A z-frqCgIT-=(!NXxEQmGWTN}0~`x&OsD-%0#a}4N*;AVz75>-`KKpwdeNNgge3xWWW zDOQjc;-Yi~h`b6bHG;DZ?}{c4UrgwOVW|&LVf6 z6H=)Z$BUdO#z;iW+qSXh$82wY$e=(^cTESI$OZwURzsUO!w{uMC0Ndg*7gQ%A`Rnw z&EW)=4@w#as_OqkEo&6*;WGTI_gG@Dvh6^w3_Y~z>g3|;^Fb;{&bv^<$gLo>G3??> z17YMfkOT7he%C-$)pXMioR|A3Rh3J&hc#P=B_+cU9@aDsxsZ+L_=TjH%Ow+nP>@pj zoTB85#dz^*l9!~y5UU`4(}Ff0Vhw`L^6`A4m|Y;)o^e5Qb(}KrZDl99{a%($(0RIt0@Bjb+ literal 0 HcmV?d00001 diff --git a/demo/assets/images/search-doc.png b/demo/assets/images/search-doc.png new file mode 100644 index 0000000000000000000000000000000000000000..367c42f97fa4ad0788b16b3a7e9fd821ac584157 GIT binary patch literal 765 zcmVD^yR{tka;=xD|?e1sYJERC~-XR4yP?EVXUm5lEc zU%0l4al$)4i0$gab-avIn9vA;cM^NTl?(7sEd^ybidS$B&*BJ1*F&IH1Q4vk#s&?S zq92_iR@$(k9s)fWiSNZWJSzUc+eu!8m#Pt%C<3M+T>nt{TmdJrFUcQPBQQ6~$8k0% z<3)U(#@WKd6$!kVMbvN|354ioAEcs`53@g&b00^{wXBoB&=s7PRM zlDkAv$`i}dco;Xc2%N{UB=_cMyaV%+oOvD;BXcG0pd0VyV0jCjU5mgue46Bq znEwdITZBg^;S!ctn_QZk8?ZG!+llp}gf@byqVi2m_p32bF9BHM!EwA&r07CCS;O#) z*dbg!QEVq{#`J0nn=;z+PT`H#bpM|?UVjmd#%)nrCy9QrEzK*4X7+Q@M|LMNb8x5; z0`P>0g?H61Qa7+)WYL9^_1nd9e=q6UUB0kduRn-y)Ac-F7hgIK!#(&h`B^legB8}# z7v5WhT^NHc^%5w><#aWQyI3rW&<7$WMu`AN#tD@(3RodB0@jttkA*-HtHjR>5u{(D vsopKf3q4{xz7Y-Z#m7y6NbdoBj0^VxxxJM`A;HVo00000NkvXXu0mjffA?Lr literal 0 HcmV?d00001 diff --git a/demo/components/accordion-section.ts b/demo/components/accordion-section.ts index a8ae43edc1..0d82865a80 100644 --- a/demo/components/accordion-section.ts +++ b/demo/components/accordion-section.ts @@ -1,62 +1,29 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {AccordionDemoComponent} from './accordion/accordion-demo'; +import {DemoSection} from './demo-section'; -let name = 'Accordion'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion/'; // webpack html imports let doc = require('../../components/accordion/readme.md'); let titleDoc = require('../../components/accordion/title.md'); + let ts = require('!!prismjs?lang=typescript!./accordion/accordion-demo.ts'); let html = require('!!prismjs?lang=markup!./accordion/accordion-demo.html'); @Component({ selector: 'accordion-section', + directives: [DemoSection, AccordionDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- `, - directives: [AccordionDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES] + + + ` }) export class AccordionSectionComponent { + private name:string = 'Accordion'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/alert-section.ts b/demo/components/alert-section.ts index 9885317f6d..60475cbb08 100644 --- a/demo/components/alert-section.ts +++ b/demo/components/alert-section.ts @@ -1,64 +1,28 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {AlertDemoComponent} from './alert/alert-demo'; - -let name = 'Alerts'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert/'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/alert/readme.md'); let titleDoc = require('../../components/alert/title.md'); - let ts = require('!!prismjs?lang=typescript!./alert/alert-demo.ts'); let html = require('!!prismjs?lang=markup!./alert/alert-demo.html'); @Component({ selector: 'alert-section', + directives: [DemoSection, AlertDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- `, - directives: [AlertDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES] + + + ` }) export class AlertSectionComponent { + private name:string = 'Alerts'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/buttons-section.ts b/demo/components/buttons-section.ts index b19c9e2a92..acb01eb82d 100644 --- a/demo/components/buttons-section.ts +++ b/demo/components/buttons-section.ts @@ -1,11 +1,8 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {ButtonsDemoComponent} from './buttons/buttons-demo'; - -let name = 'Buttons'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons/'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/buttons/readme.md'); @@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./buttons/buttons-demo.html'); @Component({ selector: 'buttons-section', - directives: [ButtonsDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES], + directives: [DemoSection, ButtonsDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- ` + + + ` }) -export class ButtonsSectionComponent { + + private name:string = 'Buttons'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/carousel-section.ts b/demo/components/carousel-section.ts index 8604b4b280..0fbca29aa9 100644 --- a/demo/components/carousel-section.ts +++ b/demo/components/carousel-section.ts @@ -1,11 +1,8 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {CarouselDemoComponent} from './carousel/carousel-demo'; - -let name = 'Carousel'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel/'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/carousel/readme.md'); @@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./carousel/carousel-demo.html'); @Component({ selector: 'carousel-section', - directives: [CarouselDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES], + directives: [DemoSection, CarouselDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- ` + + + ` }) export class CarouselSectionComponent { + private name:string = 'Carousel'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/collapse-section.ts b/demo/components/collapse-section.ts index 571ae8f761..eb3054cc74 100644 --- a/demo/components/collapse-section.ts +++ b/demo/components/collapse-section.ts @@ -1,11 +1,8 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {CollapseDemoComponent} from './collapse/collapse-demo'; - -let name = 'Collapse'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/collapse/'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/collapse/readme.md'); @@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./collapse/collapse-demo.html'); @Component({ selector: 'collapse-section', - directives: [CollapseDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES], + directives: [DemoSection, CollapseDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- ` + + + ` }) export class CollapseSectionComponent { + private name:string = 'Collapse'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/collapse'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/datepicker-section.ts b/demo/components/datepicker-section.ts index 46eefd7283..08d48ca91b 100644 --- a/demo/components/datepicker-section.ts +++ b/demo/components/datepicker-section.ts @@ -1,11 +1,8 @@ -import {Component} from '@angular/core'; +import {Component} from 'angular2/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {DatepickerDemoComponent} from './datepicker/datepicker-demo'; - -let name = 'Datepicker'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/datepicker/'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/datepicker/readme.md'); @@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./datepicker/datepicker-demo.html'); @Component({ selector: 'datepicker-section', + directives: [DemoSection, DatepickerDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- `, - directives: [DatepickerDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES] + + + ` }) -export class DatepickerSectionComponent { + + private name:string = 'Datepicker'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/datepicker'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/demo-header.ts b/demo/components/demo-header.ts deleted file mode 100644 index f96a1e94cc..0000000000 --- a/demo/components/demo-header.ts +++ /dev/null @@ -1,67 +0,0 @@ -import {Component} from '@angular/core'; -import {CORE_DIRECTIVES} from '@angular/common'; -import { - CollapseDirective, DROPDOWN_DIRECTIVES, Ng2BootstrapConfig, Ng2BootstrapTheme -} from '../../ng2-bootstrap'; - -let components = [ - 'Accordion', 'Alerts', 'Buttons', 'Carousel', 'Collapse', 'Datepicker', - 'Dropdowns', 'Modals', 'Pagination', /*'Popover',*/ 'Progressbar', - 'Rating', 'Tabs', 'Timepicker', 'Tooltip', 'Typeahead' -]; - -let template = ` -
-
-
- - ng2-bootstrap -
- - -
-
`; - -@Component({ - selector: 'demo-header', - template: template, - directives: [ - CORE_DIRECTIVES, - CollapseDirective, - DROPDOWN_DIRECTIVES - ] -}) -export class DemoHeaderComponent { - public components:Array = components; - public isCollapsed:boolean = true; - public prefix:string; - - public constructor() { - this.prefix = Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4 - ? 'index-bs4.html' - : ''; - } -} diff --git a/demo/components/demo-section.template.html b/demo/components/demo-section.template.html new file mode 100644 index 0000000000..7786676173 --- /dev/null +++ b/demo/components/demo-section.template.html @@ -0,0 +1,44 @@ +
+

{{name}} + + + +

+ +

+
+ +
+
+

Example

+ +
+ +
+
+ +
+

Markup

+ +
+ + + 
+            
+
+ + + 
+            
+
+ + +
+
+ +
+

Api

+ +
+
+
diff --git a/demo/components/demo-section.ts b/demo/components/demo-section.ts index 7e9e0ea079..f07d9c42fa 100644 --- a/demo/components/demo-section.ts +++ b/demo/components/demo-section.ts @@ -1,76 +1,25 @@ -import {Component} from '@angular/core'; -import {CORE_DIRECTIVES} from '@angular/common'; +import {Component, Input} from 'angular2/core'; import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; -let name = 'Alerts'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert/'; - -// webpack html imports -let doc = require('../../components/alert/readme.md'); -let titleDoc = require('../../components/alert/title.md'); - -let ts = require('!!prismjs?lang=typescript!./alert/alert-demo.ts'); -let html = require('!!prismjs?lang=markup!./alert/alert-demo.html'); -let annotations = require('!!prismjs?lang=typescript!../../components/alert/annotation.md'); - -export class DemoSectionConfig { - public doc:string; - public title:string; - public ts:string; - public html:string; - public annotations:string; -} +let template = require('./demo-section.template.html'); @Component({ selector: 'demo-section', - properties: ['demoSection'], - template: ` -
-
-

${name}(src)

- -
- -
${titleDoc}
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
-

Annotations

- 
${annotations}
- ${doc} -
-
-
- `, - directives: [TAB_DIRECTIVES, CORE_DIRECTIVES] + directives: [TAB_DIRECTIVES], + template: template }) -export class DemoSectionComponent { - public demoSection:DemoSectionConfig; + +export class DemoSection { + @Input() + private name:string; + @Input() + private titleDoc:string; + @Input() + private src:string; + @Input() + private html:string; + @Input() + private ts:string; + @Input() + private doc:string; } diff --git a/demo/components/dropdown-section.ts b/demo/components/dropdown-section.ts index 82e25ba487..8337962944 100644 --- a/demo/components/dropdown-section.ts +++ b/demo/components/dropdown-section.ts @@ -1,11 +1,8 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {DropdownDemoComponent} from './dropdown/dropdown-demo'; - -let name = 'Dropdowns'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/dropdown/'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/dropdown/readme.md'); @@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./dropdown/dropdown-demo.html'); @Component({ selector: 'dropdown-section', - directives: [DropdownDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES], + directives: [DemoSection, DropdownDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- ` + + + ` }) -export class DropdownSectionComponent { + + private name:string = 'Dropdowns'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/dropdown'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/getting-started/dependencies.md b/demo/components/getting-started/dependencies.md new file mode 100644 index 0000000000..9cb3604bf4 --- /dev/null +++ b/demo/components/getting-started/dependencies.md @@ -0,0 +1,10 @@ +### Dependencies +This module consists of native Angular2 components and directives, no jQuery or Bootstrap javascript is required. + +*datepicker*: requires moment for data parsing, until Intl polyfill will be implemented + +Always actual list of JS dependencies you can find [here](https://david-dm.org/valor-software/ng2-bootstrap) + +Plus this module plays nice with Bootstrap CSS [v3](http://getbootstrap.com/css/) and [v4](http://v4-alpha.getbootstrap.com) + +*Note* later on each component will be available independently via npm, jspm, etc. diff --git a/demo/components/getting-started/description.md b/demo/components/getting-started/description.md new file mode 100644 index 0000000000..bd64d14fad --- /dev/null +++ b/demo/components/getting-started/description.md @@ -0,0 +1 @@ +**80%** of baseline functionality is ready in Angular2 diff --git a/demo/components/getting-started/getting-started.template.html b/demo/components/getting-started/getting-started.template.html new file mode 100644 index 0000000000..77261d7673 --- /dev/null +++ b/demo/components/getting-started/getting-started.template.html @@ -0,0 +1,11 @@ +
+

{{name}}

+ +

+
+ +
+
+
+
+
diff --git a/demo/components/getting-started/getting-started.ts b/demo/components/getting-started/getting-started.ts new file mode 100644 index 0000000000..7cd21ac55a --- /dev/null +++ b/demo/components/getting-started/getting-started.ts @@ -0,0 +1,24 @@ +import {Component} from 'angular2/core'; + +let name = 'First of all, Welcome!'; + +// webpack html imports +let template = require('./getting-started.template.html'); + +let desc = require('./description.md'); +let dependencies = require('./dependencies.md'); +let installation = require('./installation.md'); +let readingDocumentation = require('./reading-documentation.md'); + +@Component({ + selector: 'accordion-section', + template: template +}) + +export class GettingStartedSection { + private name:string = name; + private desc:string = desc; + private dependencies:string = dependencies; + private installation:string = installation; + private readingDocumentation:string = readingDocumentation; +} diff --git a/demo/components/getting-started/installation.md b/demo/components/getting-started/installation.md new file mode 100644 index 0000000000..00e9c5e71b --- /dev/null +++ b/demo/components/getting-started/installation.md @@ -0,0 +1,9 @@ +### Installation + +Currently preferable way to install this module is `npm`: + +```bash +npm install --save ng2-bootstrap +``` + +Have fun! diff --git a/demo/components/getting-started/reading-documentation.md b/demo/components/getting-started/reading-documentation.md new file mode 100644 index 0000000000..db173348b1 --- /dev/null +++ b/demo/components/getting-started/reading-documentation.md @@ -0,0 +1,4 @@ +### Reading documentation + +Each `ng2-bootstrap` component has api and annotation docs, examples and working demo. Each `property` and `event` has type annotation and default value if any. + diff --git a/demo/components/main-menu/main-menu.component.ts b/demo/components/main-menu/main-menu.component.ts new file mode 100644 index 0000000000..9465e95ddf --- /dev/null +++ b/demo/components/main-menu/main-menu.component.ts @@ -0,0 +1,25 @@ +import {Component, Inject} from 'angular2/core'; +import {RouterLink, Router} from 'angular2/router'; + +import {config} from './../../config'; +import {SearchFilter} from './search-filter.pipe'; + +// webpack html imports +let template = require('./main-menu.template.html'); + +@Component({ + selector: 'main-menu', + template: template, + directives: [RouterLink], + pipes: [SearchFilter] +}) + +export class MainMenuComponent { + private routes:any = config.routes; + private router:Router; + private search:any = {}; + + constructor(@Inject(Router) router:Router) { + this.router = router; + } +} diff --git a/demo/components/main-menu/main-menu.template.html b/demo/components/main-menu/main-menu.template.html new file mode 100644 index 0000000000..f67271ff95 --- /dev/null +++ b/demo/components/main-menu/main-menu.template.html @@ -0,0 +1,32 @@ + diff --git a/demo/components/main-menu/search-filter.pipe.ts b/demo/components/main-menu/search-filter.pipe.ts new file mode 100644 index 0000000000..2c5efc4eb2 --- /dev/null +++ b/demo/components/main-menu/search-filter.pipe.ts @@ -0,0 +1,26 @@ +import {Pipe} from 'angular2/core'; + +@Pipe({ + name: 'SearchFilter' +}) + +export class SearchFilter { + transform(value:any, args:any) { + let [text] = args; + + if (!text) { + return value; + } + + var items:any = value; + var newItems:any = []; + + items.forEach(function (item:any) { + if (item.name.toLowerCase().indexOf(text.toLowerCase()) !== -1) { + newItems.push(item); + } + }); + + return newItems; + } +} diff --git a/demo/components/pagination-section.ts b/demo/components/pagination-section.ts index 9a2d5e2d5e..80e06520f0 100644 --- a/demo/components/pagination-section.ts +++ b/demo/components/pagination-section.ts @@ -1,11 +1,8 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {PaginationDemoComponent} from './pagination/pagination-demo'; - -let name = 'Pagination'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/pagination/'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/pagination/readme.md'); @@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./pagination/pagination-demo.html'); @Component({ selector: 'pagination-section', - directives: [PaginationDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES], + directives: [DemoSection, PaginationDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- ` + + + ` }) -export class PaginationSectionComponent { + + private name:string = 'Pagination'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/pagination'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/progressbar-section.ts b/demo/components/progressbar-section.ts index 42a7a7da0b..b6465832d9 100644 --- a/demo/components/progressbar-section.ts +++ b/demo/components/progressbar-section.ts @@ -1,72 +1,36 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import { - TAB_DIRECTIVES, - Ng2BootstrapConfig, - Ng2BootstrapTheme -} from '../../ng2-bootstrap'; +import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../../ng2-bootstrap'; import {ProgressbarDemoComponent} from './progressbar/progressbar-demo'; - -let name = 'Progressbar'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/progressbar/'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/progressbar/readme.md'); let titleDoc = require('../../components/progressbar/title.md'); let ts = require('!!prismjs?lang=typescript!./progressbar/progressbar-demo.ts'); + let templates:any = { [Ng2BootstrapTheme.BS3]: require('!!prismjs?lang=markup!./progressbar/progressbar-demo.html'), [Ng2BootstrapTheme.BS4]: require('!!prismjs?lang=markup!./progressbar/progressbar-demo-bs4.html') }; + let html = templates[Ng2BootstrapConfig.theme]; @Component({ selector: 'progressbar-section', - directives: [ProgressbarDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES], + directives: [DemoSection, ProgressbarDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- ` + + + ` }) -export class ProgressbarSectionComponent { + + private name:string = 'Progressbar'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/progressbar'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/rating-section.ts b/demo/components/rating-section.ts index d21c8cf5cf..e2622247c4 100644 --- a/demo/components/rating-section.ts +++ b/demo/components/rating-section.ts @@ -1,11 +1,8 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {RatingDemoComponent} from './rating/rating-demo'; - -let name = 'Rating'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/rating/'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/rating/readme.md'); @@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./rating/rating-demo.html'); @Component({ selector: 'rating-section', - directives: [RatingDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES], + directives: [DemoSection, RatingDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- ` + + + ` }) -export class RatingSectionComponent { + + private name:string = 'Rating'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/rating'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/tabs-section.ts b/demo/components/tabs-section.ts index 95aec38809..516cd36095 100644 --- a/demo/components/tabs-section.ts +++ b/demo/components/tabs-section.ts @@ -1,11 +1,8 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {TabsDemoComponent} from './tabs/tabs-demo'; - -let name = 'Tabs'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tabs/'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/tabs/readme.md'); @@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./tabs/tabs-demo.html'); @Component({ selector: 'tabs-section', - directives: [TabsDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES], + directives: [DemoSection, TabsDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- ` + + + ` }) -export class TabsSectionComponent { + + private name:string = 'Tabs'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tabs'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/timepicker-section.ts b/demo/components/timepicker-section.ts index 6bbcd9dca4..50ba2d246f 100644 --- a/demo/components/timepicker-section.ts +++ b/demo/components/timepicker-section.ts @@ -1,11 +1,8 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {TimepickerDemoComponent} from './timepicker/timepicker-demo'; - -let name = 'Timepicker'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/timepicker/timepicker'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/timepicker/readme.md'); @@ -16,49 +13,18 @@ let html = require('!!prismjs?lang=markup!./timepicker/timepicker-demo.html'); @Component({ selector: 'timepicker-section', - directives: [TimepickerDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES], + directives: [DemoSection, TimepickerDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
+ + + ` +}) -
-
-

API

-
${doc}
-
-
- ` -}) -export class TimepickerSectionComponent { + private name:string = 'Timepicker'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/timepicker'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/tooltip-section.ts b/demo/components/tooltip-section.ts index 692b7f5dfb..3d55a421cc 100644 --- a/demo/components/tooltip-section.ts +++ b/demo/components/tooltip-section.ts @@ -1,11 +1,11 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {TooltipDemoComponent} from './tooltip/tooltip-demo'; +import {DemoSection} from './demo-section'; let name = 'Tooltip'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tooltip/'; +let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tooltip'; // webpack html imports let doc = require('../../components/tooltip/readme.md'); @@ -16,49 +16,17 @@ let html = require('!!prismjs?lang=markup!./tooltip/tooltip-demo.html'); @Component({ selector: 'tooltip-section', - directives: [TooltipDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES], + directives: [DemoSection, TooltipDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- ` + + + ` }) -export class TooltipSectionComponent { + + private name:string = 'Tooltip'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tooltip'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/components/top-menu/top-menu.component.ts b/demo/components/top-menu/top-menu.component.ts new file mode 100644 index 0000000000..b416039c36 --- /dev/null +++ b/demo/components/top-menu/top-menu.component.ts @@ -0,0 +1,14 @@ +import {Component} from 'angular2/core'; +import {RouterLink} from 'angular2/router'; + +// webpack html imports +let template = require('./top-menu.template.html'); + +@Component({ + selector: 'top-menu', + template: template, + directives: [RouterLink] +}) + +export class TopMenuComponent { +} diff --git a/demo/components/top-menu/top-menu.template.html b/demo/components/top-menu/top-menu.template.html new file mode 100644 index 0000000000..2c7c169194 --- /dev/null +++ b/demo/components/top-menu/top-menu.template.html @@ -0,0 +1,28 @@ +
+
+

ng2-bootstrap

+
+ +
+ +
+ +
+
+ + +
+ + + +
+ +
+
+
diff --git a/demo/components/typeahead-section.ts b/demo/components/typeahead-section.ts index cf9cf4b6df..caba7012cb 100644 --- a/demo/components/typeahead-section.ts +++ b/demo/components/typeahead-section.ts @@ -1,11 +1,8 @@ import {Component} from '@angular/core'; import {CORE_DIRECTIVES} from '@angular/common'; -import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; import {TypeaheadDemoComponent} from './typeahead/typeahead-demo'; - -let name = 'Typeahead'; -let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/typeahead/typeahead'; +import {DemoSection} from './demo-section'; // webpack html imports let doc = require('../../components/typeahead/readme.md'); @@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./typeahead/typeahead-demo.html'); @Component({ selector: 'typeahead-section', - directives: [TypeaheadDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES], + directives: [DemoSection, TypeaheadDemo, CORE_DIRECTIVES], template: ` -
-

${name}(src)

- -
- -
${titleDoc}
- -
- -
-

Example

-
- -
-
- -
- -
- - -
- 
${html}
-
- - -
- 
${ts}
-
- - -
- -
- -
-

API

-
${doc}
-
-
- ` + + + ` }) -export class TypeaheadSectionComponent { + + private name:string = 'Typeahead'; + private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/typeahead'; + private html:string = html; + private ts:string = ts; + private titleDoc:string = titleDoc; + private doc:string = doc; } diff --git a/demo/config.ts b/demo/config.ts new file mode 100644 index 0000000000..8085951e7b --- /dev/null +++ b/demo/config.ts @@ -0,0 +1,80 @@ +import {GettingStartedSection} from './components/getting-started/getting-started'; +import {AccordionSection} from './components/accordion-section'; +import {AlertSection} from './components/alert-section'; +import {ButtonsSection} from './components/buttons-section'; +import {CarouselSection} from './components/carousel-section'; +import {CollapseSection} from './components/collapse-section'; +import {DatepickerSection} from './components/datepicker-section'; +import {DropdownSection} from './components/dropdown-section'; +import {PaginationSection} from './components/pagination-section'; +import {ProgressbarSection} from './components/progressbar-section'; +import {RatingSection} from './components/rating-section'; +import {TabsSection} from './components/tabs-section'; +import {TimepickerSection} from './components/timepicker-section'; +import {TooltipSection} from './components/tooltip-section'; +import {TypeaheadSection} from './components/typeahead-section'; + +export module config { + export let routes = [{ + path: '/getting-started', + name: 'Getting started', + component: GettingStartedSection, + useAsDefault: true + }, { + path: '/accordion', + name: 'Accordion', + component: AccordionSection + }, { + path: '/alerts', + name: 'Alerts', + component: AlertSection + }, { + path: '/buttons', + name: 'Buttons', + component: ButtonsSection + }, { + path: '/carousel', + name: 'Carousel', + component: CarouselSection + }, { + path: '/collapse', + name: 'Collapse', + component: CollapseSection + }, { + path: '/datepicker', + name: 'Datepicker', + component: DatepickerSection + }, { + path: '/dropdowns', + name: 'Dropdowns', + component: DropdownSection + }, { + path: '/pagination', + name: 'Pagination', + component: PaginationSection + }, { + path: '/progressbar', + name: 'Progressbar', + component: ProgressbarSection + }, { + path: '/rating', + name: 'Rating', + component: RatingSection + }, { + path: '/tabs', + name: 'Tabs', + component: TabsSection + }, { + path: '/timepicker', + name: 'Timepicker', + component: TimepickerSection + }, { + path: '/tooltip', + name: 'Tooltip', + component: TooltipSection + }, { + path: '/typeahead', + name: 'Typeahead', + component: TypeaheadSection + }]; +} diff --git a/demo/demo.template.html b/demo/demo.template.html new file mode 100644 index 0000000000..7cf33786fc --- /dev/null +++ b/demo/demo.template.html @@ -0,0 +1,6 @@ + + + +
+ +
diff --git a/demo/index.html b/demo/index.html index df9b6b01d4..68c70ee7ba 100644 --- a/demo/index.html +++ b/demo/index.html @@ -11,6 +11,10 @@ + + + + diff --git a/demo/index.ts b/demo/index.ts index c0fc69bc55..05bc069940 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -1,9 +1,9 @@ import {Component, enableProdMode, ViewContainerRef} from '@angular/core'; -import {CORE_DIRECTIVES} from '@angular/common'; -import {bootstrap} from '@angular/platform-browser-dynamic'; +import {Component, provide, enableProdMode} from 'angular2/core'; +import {RouterOutlet, RouteConfig, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router'; import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap'; -import {AccordionSectionComponent} from './components/accordion-section'; -import {AlertSectionComponent} from './components/alert-section'; +import {MainMenuComponent} from './components/main-menu/main-menu.component'; +import {TopMenuComponent} from './components/top-menu/top-menu.component'; import {ButtonsSectionComponent} from './components/buttons-section'; import {CarouselSectionComponent} from './components/carousel-section'; import {CollapseSectionComponent} from './components/collapse-section'; @@ -19,95 +19,32 @@ import {TooltipSectionComponent} from './components/tooltip-section'; import {TypeaheadSectionComponent} from './components/typeahead-section'; import {DemoHeaderComponent} from './components/demo-header'; +import {config} from './config'; + // todo: enable prod mod only for prod build // if (false) { enableProdMode(); // } let w:any = window; + if (w && w.__theme === 'bs4') { Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4; } -let gettingStarted = require('./getting-started.md'); +let tmp = require('./demo.template.html'); @Component({ selector: 'app', - template: ` - Loading header -
-
-

ng2-bootstrap

-

Native Angular2 directives for Bootstrap

- View on GitHub -
-
-
-
-
-
+ template: tmp, + directives: [RouterOutlet, TopMenuComponent, MainMenuComponent] -
-

- ng2-bootstrap available with: - Bootstrap 3 - Bootstrap 4 -

- -
${gettingStarted}
+@RouteConfig(config.routes) - - - - - - - - - - - - - - -
- - - `, - directives: [ - CORE_DIRECTIVES, - DemoHeaderComponent, - - AccordionSectionComponent, - AlertSectionComponent, - ButtonsSectionComponent, - CarouselSectionComponent, - CollapseSectionComponent, - - // todo: fix it to much write value calls!!! - DatepickerSectionComponent, - // - DropdownSectionComponent, - ModalSectionComponent, - PaginationSectionComponent, - ProgressbarSectionComponent, - RatingSectionComponent, - TabsSectionComponent, - TimepickerSectionComponent, - TooltipSectionComponent, TypeaheadSectionComponent - ] -}) export class DemoComponent { public isBs3:boolean = Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS3; - private viewContainerRef:ViewContainerRef; public constructor(viewContainerRef:ViewContainerRef) { @@ -116,4 +53,5 @@ export class DemoComponent { } } -bootstrap(DemoComponent); +bootstrap(Demo, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'})]); +