feat(shared): Ticker add new component and use it in marketplace (#1940)

frontend/projects/shared/src/components/ticker/ticker.component.scss

@@ -0,0 +1,11 @@
+:host {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: text-indent 1s;
+
+  &:hover {
+    text-indent: var(--indent, 0);
+    text-overflow: clip;
+  }
+}

frontend/projects/shared/src/components/ticker/ticker.component.ts

@@ -0,0 +1,27 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  HostBinding,
+  HostListener,
+} from '@angular/core'
+
+@Component({
+  selector: '[ticker]',
+  template: '<ng-content></ng-content>',
+  styleUrls: ['./ticker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TickerComponent {
+  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
+
+  @HostBinding('style.--indent.px')
+  indent = 0
+
+  @HostListener('mouseenter')
+  onMouseEnter() {
+    const { scrollWidth, clientWidth } = this.elementRef.nativeElement
+
+    this.indent = Math.ceil(clientWidth - scrollWidth)
+  }
+}

frontend/projects/shared/src/components/ticker/ticker.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core'
+
+import { TickerComponent } from './ticker.component'
+
+@NgModule({
+  declarations: [TickerComponent],
+  exports: [TickerComponent],
+})
+export class TickerModule {}

frontend/projects/shared/src/public-api.ts

@@ -13,6 +13,8 @@ export * from './components/markdown/markdown.component'
 export * from './components/markdown/markdown.component.module'
 export * from './components/text-spinner/text-spinner.component'
 export * from './components/text-spinner/text-spinner.component.module'
+export * from './components/ticker/ticker.component'
+export * from './components/ticker/ticker.module'
 export * from './components/toast/toast.component'
 export * from './components/toast/toast.module'
 export * from './components/toast/toast-button.directive'