XpErvq0M*0|9z3tGjT_ZH zd661~8{Fj_U*G=y??L%EkI=+N6712_4GH>C7|Yy9Y@^&-Dkp#o!>;qRGjFP(ubD`2 zafK+owZc))igGN?cwtK7^?ti0j9$6YnsqNff>|ZdUl2ozrkL_kAQALIHct@&RTlu! z1g?jKt~C+(ZR9VB8bmD55fy}^X2PHai6K2qh` 5!mu1smxwJRdh_G zmH)^Q27EN%$La#-2;O%W$U?q(n)eIV2*QSV_F}@FMR5Men=kuGe>}3xW#saTjb<6* zDL37OfY?LE!RPZahd$AE5`ksRVdiE`?8mZPN#GOwsFGg%1|=D_2zkEI0@`OWT!n;< zj-{}~>c-`f46cbrQtl7m2T*-mXL2= M-dJq6>=8s1k59FnQ3f=-wZYg}a)IA3k2Q zMBqbk<%_P2W?^VYOWBGl3y?KTPU3nr4 sZkQXikJXt!EERv+_=++-2irVb0KQSN+*R#k)?S16C{jODH5`bcc7=Y zTZ_5#B+X88UB(bk>Xwlyo@&hRxhFSVi>8BoK}b-SqBKH}uW4x+w$f=~eWZuL+AgnP z(b@BxXtp$FZ6%4)x@P7x 0;=t)nIf{} z)7oA*dA*=Mg*2mEThN-Enta2B+(zPfIG^&^pQn{5oFq=vw-$zH%}2sy&7FcZBm(Zv zs7DMDL4yu7PIgpAK)g7*vB~cr9Y)+=kM$K(HIKSVV`4~A3O>HmS8T=n8cvPG{ne4J z;@)lKk7D#U4PifTX!hBWm7QElq6JI8zu_($rX1?=HSNyMB#)@qm@u0?bI2la7qk(a zB!~l~UIWUIqV5 @9 XovUD*+K|2lxAsT>96$mIZbo;CBG5&J_cXtB>$aE6B z8A^Lq;i&XXj~9itjsCY}@VxUu8^-tN *xQ{m*u*>GF)os-xk+6*(esdce9 zctVM?{U7C5HgCS7&H^{8Xh5pAft*0vUJz>0Jrvh|ajGxBihTPv|0{Y(!eX+29>tiY zmJMw7Kv(OsY2_D#iR=${=7v$(svjy$cOy;b+a|m6{g4!d$kYrG{a^5&&Wj};7T6p% zU&Zu4{#xl2y~CY vK$>LV7g?u^s!9=gj=RCc_d@8yNZ?xf&a z*Lgc>*y~-6lg3utZF${BgoV8wxZm!MVsTk!^fWm9Y6eNYi0b)w#PQ?VK(ac~4HeRz zY5VIJb5nR|D4}~EA7L&+CbI)|x#4&XEy}l0Mz>r9jDjaHNB{gfOOO%Z1sBMVhm2P# zOtST^(@Nb2Oy@rZG76~7Os8-%Te;*YO45_R{zb;stc5D!7ntJFu|5=q)!sed^A+Ae z&`3{jVx#hB@!(|Vwhk3P*$n-&myz1QSH2HsvU)hKB}q5QPE>Nykji{MZ%#t^$zg*s zu@J{lx*Q+uJ|X~H@g|l-3b+nBhtu63ym`aF1`nKCI~#uHv_lT>mc5Pbh;kDV0*p+e z>+m|&-VZ3ZXb)b7efiRe5#`5Ly1UMDbQu|>#_NGyu=6G2$orxw!iM>p`Wsfz(+oZlUe8A;upB1#RU97 {r->CmuRc9 sZm*eNqY<({FB5W!z-pfTBJ3f-uI4vv=F4z@IJ@E2RAZ-)^ zC&zxFYBlfP!~6MV|Cx) zkx@R*P=itO;Dh-fXT|K(!&&Q5gOPso{d;5Masr?SSDo<&7@~~nmjuy;oNn7_auN0R z-xc~61 ^Ywv$;vnsayDnkmD_(3xWYEARgpl z2`{{y-Emk972+4WAerPu;Tu`@Q<^Yt?(*YdPp_6D1n6BmhnHwgl-2#s9~bL4JTDUH zq2PcBrM~?+6GTP#W1`&jWsHcsYPrf)v;j=svX3$85lLcr^Y;+99WGo9Imj+n-t+c3 z8t!Ex+td~{cZz&{q$^0wvg0qFR?$NkU_O}C)Va7ox$lJ(IvAl}ER`BH1Hy~G32oYr zb9go}Vwb^;>d;^6G&0nP&>Znr85!y1X9_j$v2ZK@6gbjXH;YdrHNe>b#%S?t!3{_t zYU>gb5j4V=*px*MK!$#mf@81#{bKS_h$pv|RcNfe-KwU@29M-6i~Obu7?qZ3^KN#4 zZf|M5q6=lJ>0$Q0+I+`D!@P$!Zf`jVcXY5P#A;9MCoe<> {x;0WbqRHNrNfj$7EJEM}z|pjKYdSv5S2m^q{}g6*r++ zu@cr8!!2M`AR?#?YI8l1pO5$SJRu#LD{EyDQnTGh%gZA`Rp-Hi%}ajJvp@TIl!O7^ z`$Gy+j#TzwqAO2>{n=5OnykpqwHnfN`))CFMSOvSw6;4t@}|~Gp7wxXvxB1S3}IvU z)8fgQPp}o{`h<1fI~Q5iGAavM0nuifr#{IX+mH4Fe>)I3nrUqAFnSpV>aaI&nLY3$ zq(F#6P}CHwY&Uu}SISb9&n>b|F9RzNT@^o^cUMu*^ykEvlg-qt_i*_(41^N;AxbEL zBMZM`oDjcAIbG!NHA^Jyh~U=9kwfu7l>DTfZN#l3oq9;t&;);bu~(;)lYq!X5|N0D z+A&368l>tI{N}x%5+4Q!Ojd~s;M`yYr4;_=X+}QUrnz$ZMQ9Z;C+W14&j`B}*aurt zL@J*7+Ka`2XUA#;#g27&IPi7P?oge^RRjnm%RA63Ub&!}QY>za9V+i>VQe7kFyo{g z!xEaWnNX5EhYO4KgJ)IW?x)znR%lf-9WtG-ydI};+RWE74+%DaG&R=D2&C-VY}zi# zIA=~=Qq7g1q2#w6FO ^%y}##3{Ra)5$WOlCyFLl|$9=t#!@^O(q$(_g7b_i1 z?W|X371-M%KNe>L5){yck_!H^Z}ReYOpja%Qbv@wjUqQPvJCe}GB8jvS=_mAL-Ccd zE?0B^^*BEhCm`!k|N3Q*H>2{tkf+EJ-ZVaVq7ZNO){I7Y XqX gYu=&L{j9+eY(#W&D=1fy!Tn3SQpq+U-rC zB-Z__RHMx&Cvd{+0ae=Mm2Xx!ivn3%Z^eo?23ki?cZEJfuQh!bKtTghx(^cky6VRT z01i1d ~ENDacqX7uUz`kPFsV6oOy@D$*f?L3DiJC z4n=*gsEsduc}Mq}CuQ9=nk2asQVZzyUeEEi|G>#SU?@To%fkh1`njW#su3930hd`7 zE~8nw(?(-gMg2%|dvd1$5-YBtPNUL>JPUJSW(GvcJelxemtG3^f7qpnM$hzTr-B^s zC0|5&@o+YbN`VM0%~opdt=Ht`O7Mj6!ts#Z)faulQ4$+Jehx+nM}L=H8(O{x4!R!J zHBpM-YYFI?+Nx-++NGRyiLEhhoqok`-ZQsZ!}w|42pcwbUteWKB^s%dBN#6}J$(=* zL?X|RET~NCkD~bHF!+PJ^1 0)hElsy) zp`M@oI-aSo6zBiz55;CJZ3`NCr(>#=j%4&t^y_6@u*BfqOmc8n!B@5Aob`0$P` r>o>@-XaOf20>aunuP_h#}o zZo82@tMxm0@M}Tc6)h+w3}-vWCEpADd68)ydnSU9?(^(0)#zpnhvFWY`mcC5v6|@{ z9c&1qVD6cSA2JaC1DcOXGVXGMJ{M89bukp#6k9?cKf|hnqkmrf3-=-TPi3MiI=17! zh`l3vRiK5!n*5VzL*6jcz2ByyE4MNjb5L@m+q_af5 ySGZ zb7!L`;`+B4EpAU*Y)ZjI^>sd1lZX_eUoYGwzNer 4h%%RV!4;YM-dl?!nrusXP^T%}$StpeOMb;qGhn_CNejkG>BY-gn*&0D ziXeiCV?9`e?siUW$yVnFq1L%t7#IVQYf{ms2SV_8=~rU~3BO+DlY(1u#dk3@g9OT6 zYG)3JN%N2FJB$B{fmpcUFy^cVrp@WceV(YFndI>LHJ+Za7QX|iOR?X5&ZcstM{`rm zlzq4kR)3Dhr;tM_xAc!rF8eLd oc%uU9gYIT;Y)DU19Snb@xtyrwg?gTGvjQ!oh{LZA#?fMJt7N<=|E-QM+%)8Rd zS$jfbwfr Q)Yd=xduQ$fHi>=L4JD?3iVJ7{db)`(Mh@e>5L7c}9287@ zMD|&r{KaDnO+a)}8mLp%MuVLU=}o#UO>CJ-6ddqp# 5 z$N9J-9bKqjdXQXsh%fX4LL~j9 `L{)SP61E<&iyTa?1!25UezyxAJ$uYP*k1C_3T)S9iYNGb_IR*TZe -C>{m#oR&o`BRT4HyqGgm59jojxljmQU=&}$chj0SwkFDH8{Wb`<_JcW6+$V8d zILrB?0pFe{pS{hOle4wX)^M*Gt(r(vFCOJCJrKeKczrpUFjpFDK-O^oVv>c`sWpsw z!$6Hk<2p}LMWGpHTIZuoI6by=` VxR-?+PLdsz? z@VO>Kpn=c^H?TWHUnO(d%LlEeeNCNN=!ABV<~ _XJH+mA%q z9cCCN<-JpAOKo`3=IZ(3cWjj08I4Ca;b@cl+z^wv8iY)B zBA9OidoB~G-n8pO&d>Z$PuV?_2K*qR&@)*g#QHjUeUy(vK{gD(3Nul3QPIc7%w?t9 zfdX{~x;g8V>Aey9&9dB5a{*vQuwfeKh*kW-)*mJgCpb)elQm~22ndbGq%M;9)gx@8 zR!Uq=J)&Z=q) 1GtD$=0sl@L)OUv8oMmcO)g6KhtYjg;gaWy=Mc#j#KIH`fli%!KiC}B$X ze|Vpls{UT>(ij2V<^Zzqk;?%EeR(8wvV=*LQkmFYu9;uh6~6+4jwmHB+>G!Rs;0;* zW+FSFk1|?g#C19kcP46X*iq4m>LSQQ D;qN~0?(CY3PLqxX%Vhf zWoq86?vYdG{O4 }JhHemaL0$2SvB^5QNSu0@)cvMc>FR8>nvi9XOnk5k-nXJG2Ze<3 zsV|TM&Pi!0moE} 9d52Iq_R-vOpd#JT0kJQ==e*M zS_b>5_FnZIkr#FriBOZM(OAP!`iom0+V6)#hnAe)T@9-=h?#KJo20l0muL(pq|K|) zBrQLdYfK@ 0#tKppK?XRF;9Pd2KN4pCF%%G&Pto69Z)p3<}qN|$wr`<<0_u2{R zh(~RdxefZLZHI 5C{gK1|xjG(^3R_(YN1C63G zR_#5eUHc(&Tt>G-n;SY6zd{?jrGV#+x5uS^#I(OB!>7J0;+G?{K^5+C_{JMfaQ1 zROPXZH61HocmSbZlb>8Nse !H2|Tz8^uLU b6_SYq7`PijsPDhFuhDZ`n;>0iK z(OxT2Kaf9KYNCA<>Pt4mDhJ^+>G7Ch7&YIZv6iTXfLwzJOIBx|RX7#wZMHlTYw`|x zb@(=v<7kkXb06J0?F4F=zSHl{>NPl$->-QYktXe007}BqklNB4-0-zIsHT6fM$e)~ zo5D7 Ri1!m{Fp?SiNMtTm%&3W#VRbxY|FE5|!Mb29hLd?8K{LsI*7 z$>oBZ`dCOK29n5>VO}XCFK&zp_egeUY33`6# 18`!z+=>U|<(c)A>29W#AE zK1?{nk03AQ_Qy?Iji?dwhNfq*4bs-ciy#~MijOCm;TOf|;+V*=+IagBC4c6QXoCsN z_}3+j3X*a^3B}DqP!Hr4lrO<-W&e;v_sr$)XP$F!vtzk9$yuYi0JU8w6TKHXYc~Bi zuR$FLjn79PSSAT;;3PYzN~Y+q!$r>B<^sQMjOl(nuUjbH)QcdELtGE?q;7jpWR7~> zmS6QN4M4^^qJ0=Esrj _BnknOmPlI8Fs=;Yy)5?cF-;o4$*at#FkgR8^! zLlhm+A2*#0*Qn7ex|@VA HJ(c+7Y#i` YmfUrlnLl;Q+mnJ3)q#Ac=}N@@&u*S182JvJ#1W9q1j zNZ`YETCcPXMD`=}I>ziuriE!30fQ3sJ>nzcDUMXe&6UUcxrVA;FqF%X@Y->9Z+wP) zxrY+-1#K-?BsE%<=TSE=m(21FZWCsg!_KB_IK6kH+Wj}Ou(bCf=kk8=9|m*k5I5QR zW>P+uOZC4PGlm(4DX#juOF<<)4L>-d`Hd6|63?762~o`RpBGzX0HE@zQw$DF!l )Vq4cGmG@Y+~FQH zto=;Dl{@Dq@!*UJ12C|z)~eh7k)2&>)ZU7eCW4#lLGO#fQO1m~-$n)*gc5a>hu7rM z4~JX6DX6(zYZNMuDDpGe@9He>ZZRtb#jwQbSPixx8UdP$K5B}o@eFYe`qRnv84zlX z;R=mmb_FIY1*YqO@~J?+%o(Zo1Bzux$@!?mY~s76h{PM3y#iC78|bY;HER=xIDu!b zp18Y>!mHxgNr8vPU`-;~CZuU+N3@r~1G2n-uu>HrdCpTZEpN$BbnY^r+|5ngEd nA7nQTClckNl1(myx zvjvrnv%47pcxP;1p(DHKFftCSj*KeoY5;IFXl!O^cr + + + + +``` + +## Class members + +### Properties +| Name | Type | Description | +| -- | -- | -- | +| title | string | Title of the application +| logo | string| Path to an image file for the application logo. +| color | string | Primary color for the header +| showSidenavToggle | boolean | Signals if the sidenav button will be displayed in the header or not. By default is true. + +### Events +| Name | Type | Description | +| -- | -- | -- | +| clicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)` ` | Emitted when click on sidenav button + +## Details +This component displays a customizable header which can be reused. The left side of the header (title, button) and the primary color for the header can be configured via input parameters. + +The right part of the header are existing components which are transcluded in the header component. diff --git a/lib/core/assets/images/logo.png b/lib/core/assets/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..d342b10ee0a3e9902047b427f9be8607b487e228 GIT binary patch literal 9826 zcmZ` {5KWcjq=A3`m7KQX zgtr+acLik`q)j*^Tmc+E7bbE5pj}sxmeBHEKF##W(3(rV@7Q10*Von7y=~{iz>xe( zmGeEEIwy=a?W1W%Sc1Zz_}&i@+?+!nGlt%!dJ!g!K1J)%afVrDrba4&Bv$jfqGZ%z zmeLW^itgL)cGvy(Vl?Nzh{I{Goen+)>}}0}o6F8c?gb{!Gxmk|eX_0%9w>d~6k2D{ zGolI-myA4e@Jry1f?PW>7RBKY5CkEWqgGJ<{T8n?*jSuape!h 56A&r%W^IN7_r)IQFvq2PSUBdhnw1uY_DgyT#Ew%WfK} z=NlcP7e1`tQ3TY~#*C|R^*B(RD2gk(e{q)h{iEf_f~%Agi3}zN75p>z1rW ZKEgsJ8?IeH@S>?ZSi(t(eVMDqHBsy9(=y0>#!c-`oP#k z8`X^iu{eoJC#L<}dmharPC%msBP+{Kd+!O`b}InE8+Q>AYT|p3KQpZnz4_AV2T4~C z#xnnByd0lM$LZivA%(~95tM~fm&k#wdM)Yq{hQa# j|Kc6<+ zWkqVUug1j^*2axEDwGFow|eUEi|EfBaQ$_sb;YZa5PzSVZnU< zWja FAtp`yY1SRH+_whBt#Mu70*R>-$H%g-xJV(ZHakF{`7oE==YY2K1gEl(^YW zB=|6w1v8zTLE4}pNsSVREN%MSXQBLjkR0J+!+ZGSAH~yT0+l )70A&45sxM)kGtA1kABU0YvZOL>uwJ+b{O}V%S zPp-|a<6S ?dM4)w>+u1M XpErvq0M*0|9z3tGjT_ZH zd661~8{Fj_U*G=y??L%EkI=+N6712_4GH>C7|Yy9Y@^&-Dkp#o!>;qRGjFP(ubD`2 zafK+owZc))igGN?cwtK7^?ti0j9$6YnsqNff>|ZdUl2ozrkL_kAQALIHct@&RTlu! z1g?jKt~C+(ZR9VB8bmD55fy}^X2PHai6K2qh` 5!mu1smxwJRdh_G zmH)^Q27EN%$La#-2;O%W$U?q(n)eIV2*QSV_F}@FMR5Men=kuGe>}3xW#saTjb<6* zDL37OfY?LE!RPZahd$AE5`ksRVdiE`?8mZPN#GOwsFGg%1|=D_2zkEI0@`OWT!n;< zj-{}~>c-`f46cbrQtl7m2T*-mXL2= M-dJq6>=8s1k59FnQ3f=-wZYg}a)IA3k2Q zMBqbk<%_P2W?^VYOWBGl3y?KTPU3nr4 sZkQXikJXt!EERv+_=++-2irVb0KQSN+*R#k)?S16C{jODH5`bcc7=Y zTZ_5#B+X88UB(bk>Xwlyo@&hRxhFSVi>8BoK}b-SqBKH}uW4x+w$f=~eWZuL+AgnP z(b@BxXtp$FZ6%4)x@P7x 0;=t)nIf{} z)7oA*dA*=Mg*2mEThN-Enta2B+(zPfIG^&^pQn{5oFq=vw-$zH%}2sy&7FcZBm(Zv zs7DMDL4yu7PIgpAK)g7*vB~cr9Y)+=kM$K(HIKSVV`4~A3O>HmS8T=n8cvPG{ne4J z;@)lKk7D#U4PifTX!hBWm7QElq6JI8zu_($rX1?=HSNyMB#)@qm@u0?bI2la7qk(a zB!~l~UIWUIqV5 @9 XovUD*+K|2lxAsT>96$mIZbo;CBG5&J_cXtB>$aE6B z8A^Lq;i&XXj~9itjsCY}@VxUu8^-tN *xQ{m*u*>GF)os-xk+6*(esdce9 zctVM?{U7C5HgCS7&H^{8Xh5pAft*0vUJz>0Jrvh|ajGxBihTPv|0{Y(!eX+29>tiY zmJMw7Kv(OsY2_D#iR=${=7v$(svjy$cOy;b+a|m6{g4!d$kYrG{a^5&&Wj};7T6p% zU&Zu4{#xl2y~CY vK$>LV7g?u^s!9=gj=RCc_d@8yNZ?xf&a z*Lgc>*y~-6lg3utZF${BgoV8wxZm!MVsTk!^fWm9Y6eNYi0b)w#PQ?VK(ac~4HeRz zY5VIJb5nR|D4}~EA7L&+CbI)|x#4&XEy}l0Mz>r9jDjaHNB{gfOOO%Z1sBMVhm2P# zOtST^(@Nb2Oy@rZG76~7Os8-%Te;*YO45_R{zb;stc5D!7ntJFu|5=q)!sed^A+Ae z&`3{jVx#hB@!(|Vwhk3P*$n-&myz1QSH2HsvU)hKB}q5QPE>Nykji{MZ%#t^$zg*s zu@J{lx*Q+uJ|X~H@g|l-3b+nBhtu63ym`aF1`nKCI~#uHv_lT>mc5Pbh;kDV0*p+e z>+m|&-VZ3ZXb)b7efiRe5#`5Ly1UMDbQu|>#_NGyu=6G2$orxw!iM>p`Wsfz(+oZlUe8A;upB1#RU97 {r->CmuRc9 sZm*eNqY<({FB5W!z-pfTBJ3f-uI4vv=F4z@IJ@E2RAZ-)^ zC&zxFYBlfP!~6MV|Cx) zkx@R*P=itO;Dh-fXT|K(!&&Q5gOPso{d;5Masr?SSDo<&7@~~nmjuy;oNn7_auN0R z-xc~61 ^Ywv$;vnsayDnkmD_(3xWYEARgpl z2`{{y-Emk972+4WAerPu;Tu`@Q<^Yt?(*YdPp_6D1n6BmhnHwgl-2#s9~bL4JTDUH zq2PcBrM~?+6GTP#W1`&jWsHcsYPrf)v;j=svX3$85lLcr^Y;+99WGo9Imj+n-t+c3 z8t!Ex+td~{cZz&{q$^0wvg0qFR?$NkU_O}C)Va7ox$lJ(IvAl}ER`BH1Hy~G32oYr zb9go}Vwb^;>d;^6G&0nP&>Znr85!y1X9_j$v2ZK@6gbjXH;YdrHNe>b#%S?t!3{_t zYU>gb5j4V=*px*MK!$#mf@81#{bKS_h$pv|RcNfe-KwU@29M-6i~Obu7?qZ3^KN#4 zZf|M5q6=lJ>0$Q0+I+`D!@P$!Zf`jVcXY5P#A;9MCoe<> {x;0WbqRHNrNfj$7EJEM}z|pjKYdSv5S2m^q{}g6*r++ zu@cr8!!2M`AR?#?YI8l1pO5$SJRu#LD{EyDQnTGh%gZA`Rp-Hi%}ajJvp@TIl!O7^ z`$Gy+j#TzwqAO2>{n=5OnykpqwHnfN`))CFMSOvSw6;4t@}|~Gp7wxXvxB1S3}IvU z)8fgQPp}o{`h<1fI~Q5iGAavM0nuifr#{IX+mH4Fe>)I3nrUqAFnSpV>aaI&nLY3$ zq(F#6P}CHwY&Uu}SISb9&n>b|F9RzNT@^o^cUMu*^ykEvlg-qt_i*_(41^N;AxbEL zBMZM`oDjcAIbG!NHA^Jyh~U=9kwfu7l>DTfZN#l3oq9;t&;);bu~(;)lYq!X5|N0D z+A&368l>tI{N}x%5+4Q!Ojd~s;M`yYr4;_=X+}QUrnz$ZMQ9Z;C+W14&j`B}*aurt zL@J*7+Ka`2XUA#;#g27&IPi7P?oge^RRjnm%RA63Ub&!}QY>za9V+i>VQe7kFyo{g z!xEaWnNX5EhYO4KgJ)IW?x)znR%lf-9WtG-ydI};+RWE74+%DaG&R=D2&C-VY}zi# zIA=~=Qq7g1q2#w6FO ^%y}##3{Ra)5$WOlCyFLl|$9=t#!@^O(q$(_g7b_i1 z?W|X371-M%KNe>L5){yck_!H^Z}ReYOpja%Qbv@wjUqQPvJCe}GB8jvS=_mAL-Ccd zE?0B^^*BEhCm`!k|N3Q*H>2{tkf+EJ-ZVaVq7ZNO){I7Y XqX gYu=&L{j9+eY(#W&D=1fy!Tn3SQpq+U-rC zB-Z__RHMx&Cvd{+0ae=Mm2Xx!ivn3%Z^eo?23ki?cZEJfuQh!bKtTghx(^cky6VRT z01i1d ~ENDacqX7uUz`kPFsV6oOy@D$*f?L3DiJC z4n=*gsEsduc}Mq}CuQ9=nk2asQVZzyUeEEi|G>#SU?@To%fkh1`njW#su3930hd`7 zE~8nw(?(-gMg2%|dvd1$5-YBtPNUL>JPUJSW(GvcJelxemtG3^f7qpnM$hzTr-B^s zC0|5&@o+YbN`VM0%~opdt=Ht`O7Mj6!ts#Z)faulQ4$+Jehx+nM}L=H8(O{x4!R!J zHBpM-YYFI?+Nx-++NGRyiLEhhoqok`-ZQsZ!}w|42pcwbUteWKB^s%dBN#6}J$(=* zL?X|RET~NCkD~bHF!+PJ^1 0)hElsy) zp`M@oI-aSo6zBiz55;CJZ3`NCr(>#=j%4&t^y_6@u*BfqOmc8n!B@5Aob`0$P` r>o>@-XaOf20>aunuP_h#}o zZo82@tMxm0@M}Tc6)h+w3}-vWCEpADd68)ydnSU9?(^(0)#zpnhvFWY`mcC5v6|@{ z9c&1qVD6cSA2JaC1DcOXGVXGMJ{M89bukp#6k9?cKf|hnqkmrf3-=-TPi3MiI=17! zh`l3vRiK5!n*5VzL*6jcz2ByyE4MNjb5L@m+q_af5 ySGZ zb7!L`;`+B4EpAU*Y)ZjI^>sd1lZX_eUoYGwzNer 4h%%RV!4;YM-dl?!nrusXP^T%}$StpeOMb;qGhn_CNejkG>BY-gn*&0D ziXeiCV?9`e?siUW$yVnFq1L%t7#IVQYf{ms2SV_8=~rU~3BO+DlY(1u#dk3@g9OT6 zYG)3JN%N2FJB$B{fmpcUFy^cVrp@WceV(YFndI>LHJ+Za7QX|iOR?X5&ZcstM{`rm zlzq4kR)3Dhr;tM_xAc!rF8eLd oc%uU9gYIT;Y)DU19Snb@xtyrwg?gTGvjQ!oh{LZA#?fMJt7N<=|E-QM+%)8Rd zS$jfbwfr Q)Yd=xduQ$fHi>=L4JD?3iVJ7{db)`(Mh@e>5L7c}9287@ zMD|&r{KaDnO+a)}8mLp%MuVLU=}o#UO>CJ-6ddqp# 5 z$N9J-9bKqjdXQXsh%fX4LL~j9 `L{)SP61E<&iyTa?1!25UezyxAJ$uYP*k1C_3T)S9iYNGb_IR*TZe -C>{m#oR&o`BRT4HyqGgm59jojxljmQU=&}$chj0SwkFDH8{Wb`<_JcW6+$V8d zILrB?0pFe{pS{hOle4wX)^M*Gt(r(vFCOJCJrKeKczrpUFjpFDK-O^oVv>c`sWpsw z!$6Hk<2p}LMWGpHTIZuoI6by=` VxR-?+PLdsz? z@VO>Kpn=c^H?TWHUnO(d%LlEeeNCNN=!ABV<~ _XJH+mA%q z9cCCN<-JpAOKo`3=IZ(3cWjj08I4Ca;b@cl+z^wv8iY)B zBA9OidoB~G-n8pO&d>Z$PuV?_2K*qR&@)*g#QHjUeUy(vK{gD(3Nul3QPIc7%w?t9 zfdX{~x;g8V>Aey9&9dB5a{*vQuwfeKh*kW-)*mJgCpb)elQm~22ndbGq%M;9)gx@8 zR!Uq=J)&Z=q) 1GtD$=0sl@L)OUv8oMmcO)g6KhtYjg;gaWy=Mc#j#KIH`fli%!KiC}B$X ze|Vpls{UT>(ij2V<^Zzqk;?%EeR(8wvV=*LQkmFYu9;uh6~6+4jwmHB+>G!Rs;0;* zW+FSFk1|?g#C19kcP46X*iq4m>LSQQ D;qN~0?(CY3PLqxX%Vhf zWoq86?vYdG{O4 }JhHemaL0$2SvB^5QNSu0@)cvMc>FR8>nvi9XOnk5k-nXJG2Ze<3 zsV|TM&Pi!0moE} 9d52Iq_R-vOpd#JT0kJQ==e*M zS_b>5_FnZIkr#FriBOZM(OAP!`iom0+V6)#hnAe)T@9-=h?#KJo20l0muL(pq|K|) zBrQLdYfK@ 0#tKppK?XRF;9Pd2KN4pCF%%G&Pto69Z)p3<}qN|$wr`<<0_u2{R zh(~RdxefZLZHI 5C{gK1|xjG(^3R_(YN1C63G zR_#5eUHc(&Tt>G-n;SY6zd{?jrGV#+x5uS^#I(OB!>7J0;+G?{K^5+C_{JMfaQ1 zROPXZH61HocmSbZlb>8Nse !H2|Tz8^uLU b6_SYq7`PijsPDhFuhDZ`n;>0iK z(OxT2Kaf9KYNCA<>Pt4mDhJ^+>G7Ch7&YIZv6iTXfLwzJOIBx|RX7#wZMHlTYw`|x zb@(=v<7kkXb06J0?F4F=zSHl{>NPl$->-QYktXe007}BqklNB4-0-zIsHT6fM$e)~ zo5D7 Ri1!m{Fp?SiNMtTm%&3W#VRbxY|FE5|!Mb29hLd?8K{LsI*7 z$>oBZ`dCOK29n5>VO}XCFK&zp_egeUY33`6# 18`!z+=>U|<(c)A>29W#AE zK1?{nk03AQ_Qy?Iji?dwhNfq*4bs-ciy#~MijOCm;TOf|;+V*=+IagBC4c6QXoCsN z_}3+j3X*a^3B}DqP!Hr4lrO<-W&e;v_sr$)XP$F!vtzk9$yuYi0JU8w6TKHXYc~Bi zuR$FLjn79PSSAT;;3PYzN~Y+q!$r>B<^sQMjOl(nuUjbH)QcdELtGE?q;7jpWR7~> zmS6QN4M4^^qJ0=Esrj _BnknOmPlI8Fs=;Yy)5?cF-;o4$*at#FkgR8^! zLlhm+A2*#0*Qn7ex|@VA HJ(c+7Y#i` YmfUrlnLl;Q+mnJ3)q#Ac=}N@@&u*S182JvJ#1W9q1j zNZ`YETCcPXMD`=}I>ziuriE!30fQ3sJ>nzcDUMXe&6UUcxrVA;FqF%X@Y->9Z+wP) zxrY+-1#K-?BsE%<=TSE=m(21FZWCsg!_KB_IK6kH+Wj}Ou(bCf=kk8=9|m*k5I5QR zW>P+uOZC4PGlm(4DX#juOF<<)4L>-d`Hd6|63?762~o`RpBGzX0HE@zQw$DF!l )Vq4cGmG@Y+~FQH zto=;Dl{@Dq@!*UJ12C|z)~eh7k)2&>)ZU7eCW4#lLGO#fQO1m~-$n)*gc5a>hu7rM z4~JX6DX6(zYZNMuDDpGe@9He>ZZRtb#jwQbSPixx8UdP$K5B}o@eFYe`qRnv84zlX z;R=mmb_FIY1*YqO@~J?+%o(Zo1Bzux$@!?mY~s76h{PM3y#iC78|bY;HER=xIDu!b zp18Y>!mHxgNr8vPU`-;~CZuU+N3@r~1G2n-uu>HrdCpTZEpN$BbnY^r+|5ngEd nA7nQTClckNl1(myx zvjvrnv%47pcxP;1p(DHKFftCSj*KeoY5;IFXl!O^cr + + + + + {{title}} +
+ + diff --git a/lib/core/layout/components/header/header.component.scss b/lib/core/layout/components/header/header.component.scss new file mode 100644 index 0000000000..357c9888d6 --- /dev/null +++ b/lib/core/layout/components/header/header.component.scss @@ -0,0 +1,54 @@ +@mixin adf-header-layout-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $background: map-get($theme, background); + + adf-layout-header .mat-toolbar-single-row { + + color: mat-color($primary, default-contrast) !important; + position: relative; + padding: 0 24px 0 0; + + .adf-menu-icon { + position: relative; + margin-left: 14px; + } + + .adf-app-logo { + position: relative; + height: 28px; + width: 28px; + margin-right: 6px; + margin-left: 3px; + } + + .adf-header-delimiter { + height: 24px; + width: 2px; + background-color: mat-color($primary, default-contrast); + margin-right: 16px; + } + + .adf-app-layout-user-profile { + margin-right: 16px; + } + + .adf-userinfo-container { + flex-direction: row; + padding: 0; + } + + .adf-userinfo-name{ + padding-right: 8px; + } + + @media screen and ($mat-xsmall) { + .adf-app-logo, + .adf-app-title { + display: none; + } + } + } +} + + diff --git a/lib/core/layout/components/header/header.component.spec.ts b/lib/core/layout/components/header/header.component.spec.ts new file mode 100644 index 0000000000..5d95747a1b --- /dev/null +++ b/lib/core/layout/components/header/header.component.spec.ts @@ -0,0 +1,124 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ComponentFixture, TestBed, async } from '@angular/core/testing'; +import { HeaderLayoutComponent } from './header.component'; +import { setupTestBed } from '../../../testing/setupTestBed'; +import { CoreTestingModule } from '../../../testing/core.testing.module'; +import { By } from '@angular/platform-browser'; +import { LayoutModule } from '../..'; +import { Component } from '@angular/core'; +import { MaterialModule } from './../../../material.module'; + +describe('HeaderLayoutComponent', () => { + let fixture: ComponentFixture ; + let component: HeaderLayoutComponent; + + describe('Input parameters', () => { + setupTestBed({ + imports: [CoreTestingModule] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HeaderLayoutComponent); + component = fixture.componentInstance; + }); + + afterEach(() => { + fixture.destroy(); + }); + + it('should create instance of HeaderLayoutComponent', () => { + expect(fixture.componentInstance instanceof HeaderLayoutComponent).toBe(true, 'should create HeaderLayoutComponent'); + }); + + it('title element should been displayed', () => { + const titleElement = fixture.debugElement.query(By.css('.adf-app-title')); + expect(titleElement === null).toBeFalsy(); + }); + + it('should show TEST TITLE', () => { + component.title = 'TEST TITLE'; + fixture.detectChanges(); + + const titleElement = fixture.nativeElement.querySelector('.adf-app-title'); + expect(titleElement.innerText).toEqual('TEST TITLE'); + }); + + it('color attribute should be present on mat-toolbar', () => { + component.color = 'primary'; + fixture.detectChanges(); + + const toolbar = fixture.nativeElement.querySelector('mat-toolbar'); + expect(toolbar.getAttribute('ng-reflect-color') === null).toBeFalsy(); + expect(toolbar.getAttribute('ng-reflect-color')).toEqual('primary'); + }); + + it('should display the img element with the expected src if a logo path is set', () => { + component.logo = 'logo.png'; + fixture.detectChanges(); + + const logo = fixture.nativeElement.querySelector('.adf-app-logo'); + const src = logo.getAttribute('src'); + expect(logo === null).toBeFalsy(); + expect(src).toEqual('logo.png'); + }); + + it('test click on sidenav button', () => { + component.showSidenavToggle = true; + fixture.detectChanges(); + spyOn(component.clicked, 'emit'); + const button = fixture.nativeElement.querySelector('.adf-menu-icon'); + + button.dispatchEvent(new Event('click')); + fixture.detectChanges(); + expect(component.clicked.emit).toHaveBeenCalledWith(true); + }); + + it('if showSidenavToggle is false the button menu should not be displayed', () => { + component.showSidenavToggle = false; + fixture.detectChanges(); + + const button = fixture.nativeElement.querySelector('.adf-menu-icon'); + expect(button === null).toBeTruthy(); + }); + }); + + describe('Template tranclusion', () => { + + @Component({ + selector: 'adf-test-layout-header', + template: ` ` + }) + class HeaderLayoutTesterComponent {} + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [HeaderLayoutTesterComponent], + imports: [ LayoutModule, MaterialModule ] + }) + .compileComponents(); + })); + + it('should transclude the provided nodes into the component', () => { + const hostFixture = TestBed.createComponent(HeaderLayoutTesterComponent); + hostFixture.detectChanges(); + const innerText = hostFixture.nativeElement.querySelector('mat-toolbar>p').innerText; + expect(innerText).toEqual('Test text'); + }); + }); +}); diff --git a/lib/core/layout/components/header/header.component.ts b/lib/core/layout/components/header/header.component.ts new file mode 100644 index 0000000000..2828955f80 --- /dev/null +++ b/lib/core/layout/components/header/header.component.ts @@ -0,0 +1,39 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'adf-layout-header', + templateUrl: './header.component.html', + styleUrls: ['./header.component.scss'], + encapsulation: ViewEncapsulation.None, + host: { 'class': 'adf-layout-header' } +}) + +export class HeaderLayoutComponent { + + @Input() title: string; + @Input() logo: string = '../assets/logo.png'; + @Input() color: string; + @Input() showSidenavToggle: boolean = true; + @Output() clicked = new EventEmitter Test text
(); + + toggleMenu() { + this.clicked.emit(true); + } +} diff --git a/lib/core/sidenav-layout/components/layout-container/layout-container.component.html b/lib/core/layout/components/layout-container/layout-container.component.html similarity index 100% rename from lib/core/sidenav-layout/components/layout-container/layout-container.component.html rename to lib/core/layout/components/layout-container/layout-container.component.html diff --git a/lib/core/sidenav-layout/components/layout-container/layout-container.component.scss b/lib/core/layout/components/layout-container/layout-container.component.scss similarity index 100% rename from lib/core/sidenav-layout/components/layout-container/layout-container.component.scss rename to lib/core/layout/components/layout-container/layout-container.component.scss diff --git a/lib/core/sidenav-layout/components/layout-container/layout-container.component.ts b/lib/core/layout/components/layout-container/layout-container.component.ts similarity index 100% rename from lib/core/sidenav-layout/components/layout-container/layout-container.component.ts rename to lib/core/layout/components/layout-container/layout-container.component.ts diff --git a/lib/core/sidenav-layout/components/sidebar-action/sidebar-action-menu.component.html b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.html similarity index 100% rename from lib/core/sidenav-layout/components/sidebar-action/sidebar-action-menu.component.html rename to lib/core/layout/components/sidebar-action/sidebar-action-menu.component.html diff --git a/lib/core/sidenav-layout/components/sidebar-action/sidebar-action-menu.component.scss b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss similarity index 100% rename from lib/core/sidenav-layout/components/sidebar-action/sidebar-action-menu.component.scss rename to lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss diff --git a/lib/core/sidenav-layout/components/sidebar-action/sidebar-action-menu.component.spec.ts b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts similarity index 100% rename from lib/core/sidenav-layout/components/sidebar-action/sidebar-action-menu.component.spec.ts rename to lib/core/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts diff --git a/lib/core/sidenav-layout/components/sidebar-action/sidebar-action-menu.component.ts b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts similarity index 100% rename from lib/core/sidenav-layout/components/sidebar-action/sidebar-action-menu.component.ts rename to lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts diff --git a/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.html b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.html similarity index 100% rename from lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.html rename to lib/core/layout/components/sidenav-layout/sidenav-layout.component.html diff --git a/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.scss b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss similarity index 100% rename from lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.scss rename to lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss diff --git a/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.spec.ts b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.spec.ts similarity index 100% rename from lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.spec.ts rename to lib/core/layout/components/sidenav-layout/sidenav-layout.component.spec.ts diff --git a/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.ts b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts similarity index 100% rename from lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.ts rename to lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts diff --git a/lib/core/sidenav-layout/directives/sidenav-layout-content.directive.ts b/lib/core/layout/directives/sidenav-layout-content.directive.ts similarity index 100% rename from lib/core/sidenav-layout/directives/sidenav-layout-content.directive.ts rename to lib/core/layout/directives/sidenav-layout-content.directive.ts diff --git a/lib/core/sidenav-layout/directives/sidenav-layout-header.directive.ts b/lib/core/layout/directives/sidenav-layout-header.directive.ts similarity index 100% rename from lib/core/sidenav-layout/directives/sidenav-layout-header.directive.ts rename to lib/core/layout/directives/sidenav-layout-header.directive.ts diff --git a/lib/core/sidenav-layout/directives/sidenav-layout-navigation.directive.ts b/lib/core/layout/directives/sidenav-layout-navigation.directive.ts similarity index 100% rename from lib/core/sidenav-layout/directives/sidenav-layout-navigation.directive.ts rename to lib/core/layout/directives/sidenav-layout-navigation.directive.ts diff --git a/lib/core/sidenav-layout/helpers/animations.ts b/lib/core/layout/helpers/animations.ts similarity index 100% rename from lib/core/sidenav-layout/helpers/animations.ts rename to lib/core/layout/helpers/animations.ts diff --git a/lib/core/sidenav-layout/index.ts b/lib/core/layout/index.ts similarity index 100% rename from lib/core/sidenav-layout/index.ts rename to lib/core/layout/index.ts diff --git a/lib/core/sidenav-layout/sidenav-layout.module.ts b/lib/core/layout/layout.module.ts similarity index 88% rename from lib/core/sidenav-layout/sidenav-layout.module.ts rename to lib/core/layout/layout.module.ts index c2e34236e3..22a696f809 100644 --- a/lib/core/sidenav-layout/sidenav-layout.module.ts +++ b/lib/core/layout/layout.module.ts @@ -25,7 +25,7 @@ import { SidenavLayoutComponent } from './components/sidenav-layout/sidenav-layo import { LayoutContainerComponent } from './components/layout-container/layout-container.component'; import { SidebarActionMenuComponent, SidebarMenuDirective, SidebarMenuExpandIconDirective, SidebarMenuTitleIconDirective } from './components/sidebar-action/sidebar-action-menu.component'; - +import { HeaderLayoutComponent } from './components/header/header.component'; @NgModule({ imports: [ CommonModule, @@ -40,7 +40,8 @@ import { SidebarActionMenuComponent, SidebarMenuDirective, SidebarActionMenuComponent, SidebarMenuDirective, SidebarMenuExpandIconDirective, - SidebarMenuTitleIconDirective + SidebarMenuTitleIconDirective, + HeaderLayoutComponent ], declarations: [ SidenavLayoutHeaderDirective, @@ -51,7 +52,9 @@ import { SidebarActionMenuComponent, SidebarMenuDirective, SidebarActionMenuComponent, SidebarMenuDirective, SidebarMenuExpandIconDirective, - SidebarMenuTitleIconDirective + SidebarMenuTitleIconDirective, + HeaderLayoutComponent ] }) -export class SidenavLayoutModule {} +export class LayoutModule {} +export { LayoutModule as SidenavLayoutModule }; diff --git a/lib/core/sidenav-layout/public-api.ts b/lib/core/layout/public-api.ts similarity index 94% rename from lib/core/sidenav-layout/public-api.ts rename to lib/core/layout/public-api.ts index 300a5ec5b5..880bafe4ab 100644 --- a/lib/core/sidenav-layout/public-api.ts +++ b/lib/core/layout/public-api.ts @@ -17,4 +17,4 @@ export * from './components/sidenav-layout/sidenav-layout.component'; -export * from './sidenav-layout.module'; +export * from './layout.module'; diff --git a/lib/core/styles/_index.scss b/lib/core/styles/_index.scss index 98dfbb42b7..b6177709dd 100644 --- a/lib/core/styles/_index.scss +++ b/lib/core/styles/_index.scss @@ -22,13 +22,14 @@ @import '../viewer/components/txtViewer.component'; @import '../viewer/components/imgViewer.component'; @import '../form/components/form.component'; -@import '../sidenav-layout/components/sidebar-action/sidebar-action-menu.component'; +@import '../layout/components/sidebar-action/sidebar-action-menu.component'; @import '../comments/comment-list.component'; @import '../comments/comments.component'; -@import '../sidenav-layout/components/layout-container/layout-container.component'; +@import '../layout/components/layout-container/layout-container.component'; @import "../templates/empty-content/empty-content.component"; @import "../templates/error-content/error-content.component"; @import "../buttons-menu/buttons-menu.component"; +@import '../layout/components/header/header.component'; @mixin adf-core-theme($theme) { @include adf-colors-theme($theme); @@ -60,6 +61,7 @@ @include adf-empty-content-theme($theme); @include adf-error-content-theme($theme); @include adf-buttons-menu-theme($theme); + @include adf-header-layout-theme($theme); }