From 080f97e5973fef3158a1f89599fa87dc56d307ce Mon Sep 17 00:00:00 2001 From: Gabriel De Los Rios Date: Mon, 22 Dec 2025 23:02:56 -0300 Subject: [PATCH] feat: lang switcher --- public/images/sp_flag.png | Bin 0 -> 3103 bytes public/images/uk_flag.png | Bin 0 -> 2716 bytes .../lang-switch-btn/lang-switch-btn.html | 5 ++ .../lang-switch-btn/lang-switch-btn.scss | 19 ++++++++ .../lang-switch-btn/lang-switch-btn.spec.ts | 43 ++++++++++++++++++ .../lang-switch-btn/lang-switch-btn.ts | 25 ++++++++++ 6 files changed, 92 insertions(+) create mode 100644 public/images/sp_flag.png create mode 100644 public/images/uk_flag.png create mode 100644 src/app/components/lang-switch-btn/lang-switch-btn.html create mode 100644 src/app/components/lang-switch-btn/lang-switch-btn.scss create mode 100644 src/app/components/lang-switch-btn/lang-switch-btn.spec.ts create mode 100644 src/app/components/lang-switch-btn/lang-switch-btn.ts diff --git a/public/images/sp_flag.png b/public/images/sp_flag.png new file mode 100644 index 0000000000000000000000000000000000000000..1ed07eea8de7fa1ef87e388741cf8cde624209b4 GIT binary patch literal 3103 zcmV+)4B+#LP)^* zK~#90-J5%GRM&aHf9Kx2?_I4}Y4t!zLXs`h@ z&7|!#(`hr*e{||Jt`kot52yH1k7+usJCg@-;wDN$Bp}Av4oCbZOObswjH zEW#Khp~vnD^7~7B?svZZzHiSt_vri15#*RQe_aU}?^kTrBE%|*tOu3>g@FH(SPU2k z#z34z$}Xvh4$uy?#LisIrF|k7O541ZcM73w2YC;$b`jqrfewlInUwavE%DwX*|Rc3 z)&g)SbW4GqGIoP}2w0shy;so*;yK&n{?3-j$!IndE;<111uH_>$`_D4MrLT|gE1-i zhOP4TtrIh23ZbgcSSQeAQo*^YCj^1}6|!>kVv`l_A+{xqv* zCp@7*`ulW7Cc7Obojrg#Gg=G3nIF=1J( z-d-a2Brho(?4DlkrKh6ULRh8%EG(Y$?0XXEXe)xvkl1gM|EuEisn3@K;0`6ft@-Rl zeZCw3e|>7(VifBs=oq>=W{Rr7REQsW7jdYvTJ|A7ngT zhMo>&%hsIWUT(Vjzf`atE-ixIGVAgAD2ODB7>zm@*BxL-3Aly{iWr;A3mA-C1mR>v zucp8or`T^34#dzzDi^*i7GoDjWJCES&wv@ylt`ULlG^y1Yfa_Q6jkP!LLK!c_P zjfduw87y!rbRBb`jw;wy5%jo?R^h}b9>+LpB5OP(ibhaPK}`3dA9GT0n+K1Y)B48z z5nu*+L{q%x9oLh!ZBQ=_FW~LQo&VXVFgC9<;n>Pik%N1%H(m1r)zB%`3eydh-; z8mvaK)?ugm33%ROYAKs6PSanjBM>Y<>!l!)iDUmy+6Xi($2i=JRXWDV2?u2xGJQ&d z#Ux#uNa|yh6tw5kw>hD@rJ|@VIqUKi3^x*L*n?JZ?|a(E>UGrmG)hB?v3mV-ySuIm z4h~Tf_u>hx#Z~ie)hrOKCe*M8HT0=0yRtA8w^Zh|3?+4)*w6%{+PmY{m2`1I)FT8` zr+O~8#|JJ@R8x%ApTHgPVx%kp^q64eVw#vWl4Um*hi0XO)Ev`~f_K_noPPT#X3wY4 zgv}vQ$V61&0)(YvPvw{l6@O!)~H(fd{s?N<54w?ZiP07C4* zTJGU+iI2wndZ@=;+*66E9sd8)_hVYSY61n4I4>zN9aB7ptRlupz8lZH16-DaepVNu4>{RvJo3? zT7?%h1NW_ED0fz(s0uEhBv@|I^~wan`g)ve)=^SxQhuwMH)p5A)|Hf&9#e-s)kgJn z0(I-t#7mda{o+gT!#4@+gwxSw47VgOiV`S2ey|1Ue!&}KEvyQ55=|E|^upg0+oz%W zEMmHf?pn^RkAZsDqWdd*ur}4O`A_uezA~?*$JC388CB2CB=GkCcVFtHXHuA z1ZRCc)=RIl|8GJh<4e0gHYU}xnh{fu0C!I(5KBPaKQyv3NQt7nk7~!3QeEUaa><@?yy0LvR5g8X0$Uope3i1 z@%SXFV}f+F18EEcplKP8t{J=%6t@H61g+3wO7sJx9Ym8maR8Ah6fa@wFwv(S10$0YOb%*K120}JbhvjF zhlf^B=t>YZ91N#Sw%_&}DjVzQi^cGhImwtvYm|TZan$56V?S!fUw#Co(8fv#CX#FU z_Q9u3q zO5PcB;c=!h%|QURZR@1-Yys!IwWO%SU9*KYsbNG@lsx=7>ISzUhF+(n@g(;(wIc*v znDB8SUd5RS2R?^^N6E@L#|4ob&{7poO?)4&n99RX_^`-AX5#6J#K)CTnt&+bA!(Z7)Dkg7n~KLOl8NzWNDV~W&Ayq||Sa7ATk z<Gm_?pttG(f|mT5mKT2AtoPh4c<;XVn$)BKDIIbr zH^YiHcg8J?KfBs_nBkmY%S7)PDR?CJcI5{l#KY5_5QA9`O18v${#zoR%AHyHLBf;G zvF=x9dOqtrUxH}&RqYk9E9;i!1^IHb-uvKemnmi~PY94MJ-l1M{_GobA4l*7AhcM0b7TZ5zV39X z-?(G!?4ow8Sxd~fhQoe$+`U_7-V}2_bv93q3*_FUH~H)bhKFO>P?(d-M7y`T31ROL zaF0a1j|JRMyo3$>4tPzXyxgLne=B=dX2^MI=15?9u^}Drw{6x4VXp>Jk06A+>iWE3 t9LcDJlSt7eBppu8IB-XFAd*Y_{vWUwPm|-Fj_&{f002ovPDHLkV1j4n^KSqE literal 0 HcmV?d00001 diff --git a/public/images/uk_flag.png b/public/images/uk_flag.png new file mode 100644 index 0000000000000000000000000000000000000000..3f8ad703cb9e3db8a04dcd3df1f4412cb8098561 GIT binary patch literal 2716 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 Wu|hUv3P^we0000 + + diff --git a/src/app/components/lang-switch-btn/lang-switch-btn.scss b/src/app/components/lang-switch-btn/lang-switch-btn.scss new file mode 100644 index 0000000..e59a43a --- /dev/null +++ b/src/app/components/lang-switch-btn/lang-switch-btn.scss @@ -0,0 +1,19 @@ +.container { + background-color: transparent; + border: none; + + align-items: center; + display: flex; + min-height: 65px; + + cursor: pointer; + img { + width: 50px; + } + @media screen and (min-width: 480px) { + min-height: 76.8px; + img { + width: unset; + } + } +} diff --git a/src/app/components/lang-switch-btn/lang-switch-btn.spec.ts b/src/app/components/lang-switch-btn/lang-switch-btn.spec.ts new file mode 100644 index 0000000..cb2a3b3 --- /dev/null +++ b/src/app/components/lang-switch-btn/lang-switch-btn.spec.ts @@ -0,0 +1,43 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LangSwitchBtn } from './lang-switch-btn'; +import { LanguageManager } from '../../services/language-manager'; +import { By } from '@angular/platform-browser'; + +describe('LangSwitchBtn', () => { + let component: LangSwitchBtn; + let fixture: ComponentFixture; + let languageManager: jasmine.SpyObj; + + beforeEach(async () => { + languageManager = jasmine.createSpyObj(LanguageManager, ['selectedLanguage$', 'setLanguage']); + await TestBed.configureTestingModule({ + imports: [LangSwitchBtn], + providers: [{ provide: LanguageManager, useValue: languageManager }], + }).compileComponents(); + + fixture = TestBed.createComponent(LangSwitchBtn); + component = fixture.componentInstance; + }); + + it('should create', () => { + fixture.detectChanges(); + expect(component).toBeTruthy(); + }); + + it('should show spanish flag', () => { + languageManager.selectedLanguage$.and.returnValue('en'); + fixture.detectChanges(); + const img = fixture.debugElement.query(By.css('img')).attributes; + expect(img['src']).toEqual('images/sp_flag.png'); + }); + + it('should updateLanguage on click', () => { + const updateLanguageSpy = spyOn(component, 'updateLanguage').and.callThrough(); + languageManager.selectedLanguage$.and.returnValue('en'); + fixture.detectChanges(); + const container = fixture.debugElement.query(By.css('.container')); + container.triggerEventHandler('click'); + expect(updateLanguageSpy).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/app/components/lang-switch-btn/lang-switch-btn.ts b/src/app/components/lang-switch-btn/lang-switch-btn.ts new file mode 100644 index 0000000..065fc31 --- /dev/null +++ b/src/app/components/lang-switch-btn/lang-switch-btn.ts @@ -0,0 +1,25 @@ +import { Component, computed, inject } from '@angular/core'; +import { LanguageManager } from '../../services/language-manager'; + +@Component({ + selector: 'app-lang-switch-btn', + templateUrl: './lang-switch-btn.html', + styleUrl: './lang-switch-btn.scss', +}) +export class LangSwitchBtn { + protected readonly languageManager = inject(LanguageManager); + + flagSrc = computed(() => { + if (this.languageManager.selectedLanguage$() === 'en') { + return 'images/sp_flag.png'; + } else { + return 'images/uk_flag.png'; + } + }); + + updateLanguage() { + this.languageManager.setLanguage( + this.languageManager.selectedLanguage$() === 'en' ? 'es' : 'en' + ); + } +}