Search logos

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-techs-logos-spa",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -35,7 +35,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "angular-techs-logos": "^0.0.20",
+    "angular-techs-logos": "^0.1.9",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

projects/angular-techs-logos/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-techs-logos",
-  "version": "0.1.0",
+  "version": "0.1.9",
   "public": true,
   "peerDependencies": {
     "@angular/common": "^18.0.0",

projects/angular-techs-logos/src/lib/angular-techs-logos.component.html

@@ -11,15 +11,15 @@
       </figcaption>
     </figure>
   </ng-container>
-  <ng-container *ngIf="!name && (list || techs)">
+  <ng-container *ngIf="!name && (list || techsList)">
     <figure
       class="tech-container"
-      *ngFor="let tech of techs"
+      *ngFor="let tech of techsList()"
       [ngClass]="[tech.name.toLowerCase()]"
       [style.width]="size ? size : '100px'"
       [attr.key]="tech.name"
     >
-    <ng-container *ngComponentOutlet="getIcon(tech.name)" />
+      <ng-container *ngComponentOutlet="getIcon(tech.name)" />
       <figcaption [ngClass]="{ tooltip: hiddenLabel }">
         {{ tech.name }}
       </figcaption>

projects/angular-techs-logos/src/lib/angular-techs-logos.component.ts

@@ -8,7 +8,7 @@ import {
   ViewContainerRef,
   Type,
   ViewEncapsulation,
-  ChangeDetectorRef
+  signal
 } from '@angular/core';
 
 import { techs } from './techs/techs-data';
@@ -33,55 +33,74 @@ export class AngularTechsLogosComponent implements OnInit, OnChanges {
   @Input() class: string | undefined;
   @Input() hiddenLogos: string[] | undefined;
 
-  @ViewChild('iconContainer', { read: ViewContainerRef }) iconContainer!: ViewContainerRef;
+  @ViewChild('iconContainer', { read: ViewContainerRef })
+  iconContainer!: ViewContainerRef;
 
   techs: Tech[] = techs;
-
-  constructor(
-    private cdr: ChangeDetectorRef
-  ) {}
+  listSignal = signal<string[] | undefined>([]);
+  hiddenLogosSignal = signal<string[] | undefined>([]);
+  techsList = signal<Tech[]>(this.techs);
 
   ngOnInit(): void {
-    if(!this.name) {
+    if (!this.name) {
       this.updateTechs();
     }
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['list'] || changes['hiddenLogos']) {
+    if (changes['list']) {
+      this.listSignal.set(this.list);
+    }
+    if (changes['hiddenLogos']) {
+      this.hiddenLogosSignal.set(this.hiddenLogos);
+    }
+
+    if (!this.name) {
       this.updateTechs();
     }
   }
 
   private updateTechs(): void {
-    if (this.list) {
-      this.techs = this.getTechs(this.list);
-    } else if (this.hiddenLogos) {
-      this.techs = this.hiddenTechs(this.hiddenLogos);
+    const currentList = this.listSignal();
+    const currentHiddenLogos = this.hiddenLogosSignal();
+
+    if (currentList) {
+      this.techsList.set(this.getTechs(currentList));
+    } else if (currentHiddenLogos && currentHiddenLogos.length > 0) {
+      this.techsList.set(this.hiddenTechs(currentHiddenLogos));
     } else {
-      this.techs = this.techs;
+      this.techsList.set(this.techs);
     }
   }
 
-  public techClass(name: string) {
+  public techClass(name: string): string[] {
     const className = name?.toLowerCase() || '';
     return [this.class || '', className];
   }
 
   public getTech(name: string): Tech | undefined {
-    return this.techs.find(item => item.name.toLowerCase() === name.toLowerCase());
+    return this.techs.find(
+      (item) => item.name.toLowerCase() === name.toLowerCase()
+    );
   }
 
   private getTechs(items: string[]): Tech[] {
-    return this.techs.filter(tech => items.some(item => tech.name.toLowerCase() === item.toLowerCase()));
+    return this.techs.filter((tech) => {
+      if (typeof tech.name !== 'string') return false;
+      return items.some((item) => {
+        if (typeof item !== 'string') return false;
+        return tech.name.toLowerCase() === item.toLowerCase();
+      });
+    });
   }
 
   private hiddenTechs(items: string[]): Tech[] {
-    return this.techs.filter(tech => !items.includes(tech.name.toLowerCase()));
+    return this.techs.filter(
+      (tech) => !items.includes(tech.name.toLowerCase())
+    );
   }
 
   public getIcon(name: string): Type<any> | null {
-    console.log("getIcon name icon: ", name)
     const tech = this.getTech(name);
     return tech ? tech.icon : null;
   }

projects/angular-techs-logos/src/lib/techs/linkedin/linkedin.component.html

@@ -1 +1,17 @@
-<?xml version="1.0" ?><svg height="72" viewBox="0 0 72 72" width="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z" fill="#007EBB"/><path d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z" fill="#FFF"/></g></svg>
+<svg
+  height="72"
+  viewBox="0 0 72 72"
+  width="72"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g fill="none" fill-rule="evenodd">
+    <path
+      d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z"
+      fill="#007EBB"
+    />
+    <path
+      d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"
+      fill="#FFF"
+    />
+  </g>
+</svg>

projects/angular-techs-logos/src/public-api.ts

@@ -5,3 +5,4 @@
 export * from './lib/angular-techs-logos.service';
 export * from './lib/angular-techs-logos.component';
 export * from './lib/angular-techs-logos.module';
+export * from './lib/techs/techs-data';

src/app/app.component.html

@@ -8,20 +8,50 @@ <h2>List of techs</h2>
       <div class="install">
         <code class="code-wrapper">{{ codeString }}</code>
         <button class="button-modal" type="button" (click)="openModal()">
-          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40px" height="40px" viewBox="0 0 512 512"
-              fill="var(--vtl-background-svg)">
-              <path
-                d="m499.139 318.571-37.178-5.407a6.15 6.15 0 0 1-5.228-3.8l-12.054-29.086a6.116 6.116 0 0 1 1-6.379l22.243-29.88c3.533-4.141 3.301-10.314-.554-14.168l-17.602-17.594c-3.846-3.854-10.029-4.104-14.159-.553l-29.889 22.233a6.159 6.159 0 0 1-6.38 1.018l-29.094-12.062a6.213 6.213 0 0 1-3.81-5.228l-5.389-37.169c-.428-5.442-4.96-9.635-10.402-9.635H325.75c-5.45 0-9.983 4.193-10.402 9.635l-5.407 37.169a6.142 6.142 0 0 1-3.792 5.228l-29.103 12.062a6.176 6.176 0 0 1-6.388-1.018l-29.872-22.233c-4.13-3.542-10.304-3.302-14.167.553l-17.594 17.594c-3.854 3.854-4.086 10.028-.554 14.168l22.234 29.888a6.143 6.143 0 0 1 1.009 6.371l-12.054 29.086c-.874 2.159-2.908 3.622-5.219 3.81l-37.195 5.398a10.445 10.445 0 0 0-9.618 10.412v24.883c0 5.442 4.194 9.993 9.618 10.403l37.195 5.398a6.177 6.177 0 0 1 5.219 3.81l12.054 29.086c.901 2.159.5 4.63-1.009 6.388l-22.234 29.889a10.45 10.45 0 0 0 .554 14.168l17.594 17.594c3.863 3.854 10.037 4.086 14.167.544l29.872-22.243a6.191 6.191 0 0 1 6.388-.998l29.103 12.044a6.208 6.208 0 0 1 3.802 5.246l5.398 37.169c.428 5.433 4.952 9.636 10.402 9.636h24.893c5.451 0 9.974-4.203 10.402-9.636l5.389-37.169a6.23 6.23 0 0 1 3.81-5.246l29.103-12.044a6.173 6.173 0 0 1 6.379.998l29.881 22.243c4.13 3.542 10.314 3.31 14.159-.544l17.602-17.594a10.441 10.441 0 0 0 .554-14.168l-22.243-29.889a6.186 6.186 0 0 1-1-6.388l12.054-29.086a6.19 6.19 0 0 1 5.228-3.81l37.178-5.398c5.434-.41 9.627-4.961 9.627-10.403v-24.883a10.448 10.448 0 0 0-9.628-10.413zm-120.046 63.757c-10.93 10.912-25.445 16.926-40.898 16.926-15.444 0-29.978-6.014-40.898-16.926-10.92-10.938-16.943-25.454-16.943-40.907 0-15.444 6.022-29.969 16.943-40.89 10.92-10.939 25.454-16.934 40.898-16.934 15.454 0 29.969 5.995 40.898 16.934 10.92 10.92 16.934 25.446 16.934 40.89 0 15.453-6.013 29.969-16.934 40.907z" />
-              <path
-                d="M187.351 252.156a8.174 8.174 0 0 0 5.122-9.868l-5.898-28.854a4.896 4.896 0 0 1 1.419-4.88l18.263-16.621a4.855 4.855 0 0 1 4.97-.946l27.961 8.466c3.989 1.508 8.485-.294 10.306-4.166l8.297-17.656a8.15 8.15 0 0 0-3.346-10.591l-24.339-16.14c-1.58-.91-2.535-2.632-2.436-4.452l1.16-24.66a4.873 4.873 0 0 1 2.838-4.194l26.008-13.874c3.898-1.74 5.781-6.218 4.336-10.215l-6.603-18.371a8.194 8.194 0 0 0-9.876-5.121l-28.863 5.879c-1.767.5-3.632-.053-4.871-1.41L195.185 56.23a4.795 4.795 0 0 1-.955-4.978l8.468-27.944c1.507-4.006-.294-8.494-4.175-10.306l-17.648-8.306c-3.872-1.821-8.494-.366-10.608 3.354l-16.131 24.34a4.86 4.86 0 0 1-4.444 2.445l-24.66-1.169a4.878 4.878 0 0 1-4.202-2.847L106.974 4.821A8.186 8.186 0 0 0 96.74.485L78.379 7.096a8.158 8.158 0 0 0-5.112 9.859l5.888 28.872a4.83 4.83 0 0 1-1.418 4.862l-18.264 16.63a4.884 4.884 0 0 1-4.987.955l-27.944-8.476c-3.988-1.516-8.476.304-10.305 4.175L7.939 81.622c-1.82 3.872-.366 8.494 3.346 10.599l24.339 16.14a4.806 4.806 0 0 1 2.436 4.435l-1.16 24.66a4.814 4.814 0 0 1-2.837 4.193L8.055 155.522a8.167 8.167 0 0 0-4.336 10.216l6.611 18.37a8.19 8.19 0 0 0 9.859 5.131l28.881-5.906a4.835 4.835 0 0 1 4.862 1.427l16.612 18.255a4.845 4.845 0 0 1 .954 4.987l-8.466 27.944c-1.499 3.997.304 8.485 4.175 10.305l17.648 8.297a8.19 8.19 0 0 0 10.608-3.346l16.122-24.348c.91-1.57 2.623-2.534 4.452-2.428l24.661 1.16a4.873 4.873 0 0 1 4.211 2.846l13.847 25.989c1.767 3.9 6.219 5.8 10.233 4.354l18.362-6.619zm-39.122-79.86c-11.394 4.095-23.714 3.524-34.68-1.633-10.965-5.157-19.245-14.275-23.358-25.678-4.095-11.402-3.524-23.714 1.634-34.67 5.156-10.974 14.283-19.254 25.677-23.357 11.402-4.105 23.714-3.534 34.67 1.641 10.956 5.139 19.254 14.258 23.366 25.66 4.096 11.403 3.516 23.706-1.632 34.672-5.175 10.955-14.285 19.252-25.677 23.365z" />
-            </svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            version="1.1"
+            width="40px"
+            height="40px"
+            viewBox="0 0 512 512"
+            fill="var(--vtl-background-svg)"
+          >
+            <path
+              d="m499.139 318.571-37.178-5.407a6.15 6.15 0 0 1-5.228-3.8l-12.054-29.086a6.116 6.116 0 0 1 1-6.379l22.243-29.88c3.533-4.141 3.301-10.314-.554-14.168l-17.602-17.594c-3.846-3.854-10.029-4.104-14.159-.553l-29.889 22.233a6.159 6.159 0 0 1-6.38 1.018l-29.094-12.062a6.213 6.213 0 0 1-3.81-5.228l-5.389-37.169c-.428-5.442-4.96-9.635-10.402-9.635H325.75c-5.45 0-9.983 4.193-10.402 9.635l-5.407 37.169a6.142 6.142 0 0 1-3.792 5.228l-29.103 12.062a6.176 6.176 0 0 1-6.388-1.018l-29.872-22.233c-4.13-3.542-10.304-3.302-14.167.553l-17.594 17.594c-3.854 3.854-4.086 10.028-.554 14.168l22.234 29.888a6.143 6.143 0 0 1 1.009 6.371l-12.054 29.086c-.874 2.159-2.908 3.622-5.219 3.81l-37.195 5.398a10.445 10.445 0 0 0-9.618 10.412v24.883c0 5.442 4.194 9.993 9.618 10.403l37.195 5.398a6.177 6.177 0 0 1 5.219 3.81l12.054 29.086c.901 2.159.5 4.63-1.009 6.388l-22.234 29.889a10.45 10.45 0 0 0 .554 14.168l17.594 17.594c3.863 3.854 10.037 4.086 14.167.544l29.872-22.243a6.191 6.191 0 0 1 6.388-.998l29.103 12.044a6.208 6.208 0 0 1 3.802 5.246l5.398 37.169c.428 5.433 4.952 9.636 10.402 9.636h24.893c5.451 0 9.974-4.203 10.402-9.636l5.389-37.169a6.23 6.23 0 0 1 3.81-5.246l29.103-12.044a6.173 6.173 0 0 1 6.379.998l29.881 22.243c4.13 3.542 10.314 3.31 14.159-.544l17.602-17.594a10.441 10.441 0 0 0 .554-14.168l-22.243-29.889a6.186 6.186 0 0 1-1-6.388l12.054-29.086a6.19 6.19 0 0 1 5.228-3.81l37.178-5.398c5.434-.41 9.627-4.961 9.627-10.403v-24.883a10.448 10.448 0 0 0-9.628-10.413zm-120.046 63.757c-10.93 10.912-25.445 16.926-40.898 16.926-15.444 0-29.978-6.014-40.898-16.926-10.92-10.938-16.943-25.454-16.943-40.907 0-15.444 6.022-29.969 16.943-40.89 10.92-10.939 25.454-16.934 40.898-16.934 15.454 0 29.969 5.995 40.898 16.934 10.92 10.92 16.934 25.446 16.934 40.89 0 15.453-6.013 29.969-16.934 40.907z"
+            />
+            <path
+              d="M187.351 252.156a8.174 8.174 0 0 0 5.122-9.868l-5.898-28.854a4.896 4.896 0 0 1 1.419-4.88l18.263-16.621a4.855 4.855 0 0 1 4.97-.946l27.961 8.466c3.989 1.508 8.485-.294 10.306-4.166l8.297-17.656a8.15 8.15 0 0 0-3.346-10.591l-24.339-16.14c-1.58-.91-2.535-2.632-2.436-4.452l1.16-24.66a4.873 4.873 0 0 1 2.838-4.194l26.008-13.874c3.898-1.74 5.781-6.218 4.336-10.215l-6.603-18.371a8.194 8.194 0 0 0-9.876-5.121l-28.863 5.879c-1.767.5-3.632-.053-4.871-1.41L195.185 56.23a4.795 4.795 0 0 1-.955-4.978l8.468-27.944c1.507-4.006-.294-8.494-4.175-10.306l-17.648-8.306c-3.872-1.821-8.494-.366-10.608 3.354l-16.131 24.34a4.86 4.86 0 0 1-4.444 2.445l-24.66-1.169a4.878 4.878 0 0 1-4.202-2.847L106.974 4.821A8.186 8.186 0 0 0 96.74.485L78.379 7.096a8.158 8.158 0 0 0-5.112 9.859l5.888 28.872a4.83 4.83 0 0 1-1.418 4.862l-18.264 16.63a4.884 4.884 0 0 1-4.987.955l-27.944-8.476c-3.988-1.516-8.476.304-10.305 4.175L7.939 81.622c-1.82 3.872-.366 8.494 3.346 10.599l24.339 16.14a4.806 4.806 0 0 1 2.436 4.435l-1.16 24.66a4.814 4.814 0 0 1-2.837 4.193L8.055 155.522a8.167 8.167 0 0 0-4.336 10.216l6.611 18.37a8.19 8.19 0 0 0 9.859 5.131l28.881-5.906a4.835 4.835 0 0 1 4.862 1.427l16.612 18.255a4.845 4.845 0 0 1 .954 4.987l-8.466 27.944c-1.499 3.997.304 8.485 4.175 10.305l17.648 8.297a8.19 8.19 0 0 0 10.608-3.346l16.122-24.348c.91-1.57 2.623-2.534 4.452-2.428l24.661 1.16a4.873 4.873 0 0 1 4.211 2.846l13.847 25.989c1.767 3.9 6.219 5.8 10.233 4.354l18.362-6.619zm-39.122-79.86c-11.394 4.095-23.714 3.524-34.68-1.633-10.965-5.157-19.245-14.275-23.358-25.678-4.095-11.402-3.524-23.714 1.634-34.67 5.156-10.974 14.283-19.254 25.677-23.357 11.402-4.105 23.714-3.534 34.67 1.641 10.956 5.139 19.254 14.258 23.366 25.66 4.096 11.403 3.516 23.706-1.632 34.672-5.175 10.955-14.285 19.252-25.677 23.365z"
+            />
+          </svg>
           Learn install
         </button>
       </div>
-      <angular-techs-logos></angular-techs-logos>
+      <input
+        class="input-search"
+        type="text"
+        [(ngModel)]="searchSignal"
+        placeholder="Search logo name..."
+        (input)="onSearchChange($event)"
+      />
+      <angular-techs-logos [list]="techsFiltered" />
+      <div class="not-found" [hidden]="techsFiltered.length > 0">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          width="100px"
+          height="100px"
+          viewBox="-20 0 190 190"
+        >
+          <path
+            fill="var(--vtl-background-svg)"
+            fill-rule="evenodd"
+            d="m38.155 140.475 10.833-78.364 43.881 4.946 18.568 23.955-8.041 57.109-65.241-7.646Zm45.858-46.473 4.814-22.195-34.781-3.5-9.854 67.15 54.143 6.627 6.542-45.275-20.864-2.807Zm-24.242 29.593c-.377-.496-3.721-3.296-4.35-4.162 8.899-9.911 30.629-9.788 36.664 3.324-1.005.371-5.495 2.315-6.375 2.81-2.518-7.317-17.265-9.625-25.939-1.972Zm16.732-27.096-3.666 2.76-5.515-6.642-7.507 4.03-3.029-5.07 6.829-3.426-4.526-5.452 5.5-3.68 4.39 6.439 7.819-3.925 2.356 4.73-7.047 3.784 4.396 6.452Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+        <p>No logos found matching your search.</p>
+      </div>
     </div>
   </main>
   <app-footer></app-footer>
-  <router-outlet></router-outlet>
 </div>
-

src/app/app.component.ts

@@ -1,16 +1,23 @@
-import { Component, Renderer2 } from '@angular/core';
+import { Component, Renderer2, Type, signal, effect } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { AngularTechsLogosModule } from 'angular-techs-logos';
+import { AngularTechsLogosModule, techs } from 'angular-techs-logos';
 import { AppHeaderComponent } from './components/app-header/app-header.component';
 import { ModalinstallComponent } from './components/modal-install/modal-install.component';
 import { DarkmodeComponent } from './components/darkmode/darkmode.component';
 import { AppFooterComponent } from './components/app-footer/app-footer.component';
+import { FormsModule } from '@angular/forms';
+
+interface Tech {
+  name: string;
+  icon: Type<any>;
+}
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [
     RouterOutlet,
+    FormsModule,
     AngularTechsLogosModule,
     AppHeaderComponent,
     ModalinstallComponent,
@@ -24,8 +31,28 @@ export class AppComponent {
   constructor(private renderer: Renderer2) {}
 
   codeString: string = '<angular-techs-logos />';
-
   isModalActive: boolean = false;
+  techs: Tech[] = techs;
+  techsFiltered: string[] = [];
+  searchSignal = signal<string>('');
+
+  techsFilteredEffect = effect(() => {
+    this.techsFiltered = this.techs
+      .filter((item) => {
+        if (typeof item.name === 'string') {
+          const nameItem = item.name.toLowerCase();
+          return nameItem.includes(this.searchSignal().trim().toLowerCase());
+        }
+        return false; // Ignore items without a valid name
+      })
+      .map((item) => item.name);
+  });
+
+  onSearchChange(event: Event): void {
+    if (event.target) {
+      this.searchSignal.set((event.target as HTMLInputElement).value);
+    }
+  }
 
   openModal(): void {
     this.isModalActive = true;

src/app/components/darkmode/darkmode.component.scss

@@ -13,6 +13,7 @@
   top: 0;
   right: 0;
   padding: .6rem;
+  z-index: 11;
   &.hiddenLabel svg {
     margin-right: 0;
   }