@3ddv/software-division-components 1.4.1 → 1.4.3

package/src/dvm/loader/loader.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { LoaderComponent } from './loader.component';
+
+const meta: Meta<LoaderComponent> = {
+  title: 'Dvm/Loader',
+  component: LoaderComponent,
+  id: 'Loader',
+};
+
+export default meta;
+
+type Story = StoryObj<LoaderComponent>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    icon: 'pi pi-check',
+    type: 'button',
+    iconPos: 'left',
+    disabled: false,
+    loading: false,
+    severity: 'primary',
+    rounded: false,
+    raised: true,
+    outlined: false,
+    link: false,
+    size: undefined,
+    ariaLabel: 'Primary button',
+    style: { 'margin-right': '10px' },
+  },
+};

package/src/dvm/loader/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

package/src/dvm/loader/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './loader.component';
+export * from './loader.service';

package/src/dvm/map-loader/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/dvm/map-loader/map-loader.component.css

@@ -0,0 +1,91 @@
+.ripple-animation {
+  animation: ripple 1s linear infinite;
+}
+
+@-webkit-keyframes ripple {
+  0% {
+    box-shadow:
+      0 4px 10px rgba(var(--ripple-color), 0.1),
+      0 0 0 0 rgba(var(--ripple-color), 0.1),
+      0 0 0 5px rgba(var(--ripple-color), 0.1),
+      0 0 0 10px rgba(var(--ripple-color), 0.1),
+      0 0 0 20px rgba(var(--ripple-color), 0.1),
+      0 0 0 30px rgba(var(--ripple-color), 0.1),
+      0 0 0 40px rgba(var(--ripple-color), 0.1);
+  }
+  100% {
+    box-shadow:
+      0 4px 10px rgba(var(--ripple-color), 0.1),
+      0 0 0 5px rgba(var(--ripple-color), 0.1),
+      0 0 0 10px rgba(var(--ripple-color), 0.1),
+      0 0 0 20px rgba(var(--ripple-color), 0.1),
+      0 0 0 30px rgba(var(--ripple-color), 0.1),
+      0 0 0 40px rgba(var(--ripple-color), 0.1),
+      0 0 0 50px rgba(var(--ripple-color), 0);
+  }
+}
+@keyframes ripple {
+  0% {
+    box-shadow:
+      0 4px 10px rgba(var(--ripple-color), 0.1),
+      0 0 0 0 rgba(var(--ripple-color), 0.1),
+      0 0 0 5px rgba(var(--ripple-color), 0.1),
+      0 0 0 10px rgba(var(--ripple-color), 0.1),
+      0 0 0 20px rgba(var(--ripple-color), 0.1);
+  }
+  100% {
+    box-shadow:
+      0 4px 10px rgba(var(--ripple-color), 0.1),
+      0 0 0 5px rgba(var(--ripple-color), 0.1),
+      0 0 0 10px rgba(var(--ripple-color), 0.1),
+      0 0 0 20px rgba(var(--ripple-color), 0.1),
+      0 0 0 30px rgba(var(--ripple-color), 0);
+  }
+}
+
+.container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  overflow: visible;
+}
+
+.pill-container {
+  position: absolute;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+.pill {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* default size */
+  width: 8rem; /* Tailwind w-32 = 128px */
+  height: 8rem; /* Tailwind h-32 = 128px */
+
+  border-radius: 50%; /* rounded-full */
+  background-color: rgba(17, 24, 39, 0.9); /* gray-900/90 */
+}
+
+/* Custom "3xl" responsive size (if you want to keep that breakpoint behavior) */
+@media (min-width: 1024px) {
+  .pill {
+    width: 12rem;
+    height: 12rem;
+  }
+}
+
+/* Custom "3xl" responsive size (if you want to keep that breakpoint behavior) */
+@media (min-width: 1920px) {
+  .pill {
+    width: 13.5rem; /* Tailwind w-54 ≈ 216px */
+    height: 13.5rem; /* Tailwind h-54 ≈ 216px */
+  }
+}

package/src/dvm/map-loader/map-loader.component.html

@@ -0,0 +1,23 @@
+<div #container class="container" [style]="ripple">
+  <!-- Container -->
+  <div #pillContainer class="pill-container">
+    <!-- PILL -->
+    <div #pill class="pill ripple-animation">
+      <!-- LOGO -->
+      <img
+        [ngClass]="size() === 'sm' ? 'block' : 'hidden'"
+        alt="Club logo loader"
+        height="70"
+        priority
+        width="50"
+        [ngSrc]="logo()" />
+      <img
+        [ngClass]="size() === 'md' ? 'block' : 'hidden'"
+        alt="Club logo loader"
+        height="90"
+        priority
+        width="70"
+        [ngSrc]="logo()" />
+    </div>
+  </div>
+</div>

package/src/dvm/map-loader/map-loader.component.ts

@@ -0,0 +1,187 @@
+import { CommonModule, NgClass, NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ElementRef, input, OnDestroy, OnInit, viewChild } from '@angular/core';
+import { createTimeline } from 'animejs';
+import { catchError, merge, mergeMap, Observable, skip, Subscription, tap } from 'rxjs';
+
+@Component({
+  selector: 'sdc-map-loader',
+  templateUrl: './map-loader.component.html',
+  styleUrl: './map-loader.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgOptimizedImage, NgClass, CommonModule],
+})
+export class MapLoaderComponent implements OnInit, OnDestroy {
+  // INPUTS
+  public viewerService = input.required<{
+    waitInitialize: () => Observable<any>;
+    getObservable: (value: 'load_success' | 'load_start') => Observable<any>;
+  }>();
+  public logo = input.required<string>();
+  public color = input<string>('255 165 0');
+  public duration = input<number>(500);
+  public size = input<'sm' | 'md'>('md');
+
+  // SIGNALS
+  public pill = viewChild<ElementRef>('pill');
+  public pillContainer = viewChild<ElementRef>('pillContainer');
+  public container = viewChild<ElementRef>('container');
+
+  // CLASS PROPERTIES
+  private isFirstLoad = true;
+  private varName = '--ripple-color';
+  private readonly handlers: Subscription[] = [];
+
+  // GETTERS
+  /**
+   * Retorna la variable CSS para el color del ripple.
+   * Necesitamos setear la variable css --ripple-color con el color accent de la configuración.
+   * Como este valor originalmente viene sin comas para ser usado en Tailwind, debemos reemplazar los espacios por comas.
+   * Finalmente retornamos el valor y lo implementamos en el div contenedor del ripple para ser usado por el scss.
+   */
+  public get ripple(): string {
+    const rgb = this.formatRgb(this.color(), false);
+
+    return `${this.varName}:${rgb};`;
+  }
+
+  // LC METHODS
+  public ngOnInit(): void {
+    this.initComponent();
+  }
+
+  public ngOnDestroy(): void {
+    this.destroyComponent();
+  }
+
+  // CLASS METHODS
+
+  /**
+   * Muestra el loader.
+   * Mediante una animación de animejs, mostramos el loader.
+   * Al comenzar, verificará si el contenedor tiene la clase hidden y la removerá si es así.
+   */
+  private showLoader(): void {
+    const pill = this.pill();
+    const container = this.container();
+    const pillContainer = this.pillContainer();
+
+    if (!container || !pill || !pillContainer) {
+      return console.error('Loader could not be loaded');
+    }
+
+    const containerClasses: string = container.nativeElement.classList.value;
+
+    if (containerClasses.includes('hidden')) {
+      container.nativeElement.classList.remove('hidden');
+    }
+
+    createTimeline({
+      duration: this.duration,
+    })
+      .add(pillContainer.nativeElement, {
+        opacity: [0, 1],
+        duration: 100,
+      })
+      .add(
+        pill.nativeElement,
+        {
+          scale: [0, 1],
+          opacity: [0, 1],
+        },
+        '+=10'
+      );
+  }
+
+  /**
+   * Oculta el loader.
+   * Cuando termina aplica la clase hidden al contenedor para ocultarlo.
+   */
+  private hideLoader(): void {
+    const pill = this.pill();
+    const container = this.container();
+    const pillContainer = this.pillContainer();
+
+    if (!container || !pill || !pillContainer) {
+      return console.error('Loader could not be hidden');
+    }
+    createTimeline({
+      delay: 400,
+      duration: this.duration,
+      playbackEase: 'outQuad',
+      onComplete: () => container.nativeElement.classList.add('hidden'),
+    })
+      .add(pill.nativeElement, {
+        opacity: [1, 0],
+        scale: [1, 0],
+      })
+      .add(pillContainer.nativeElement, {
+        opacity: [1, 0],
+      });
+  }
+
+  private handleLoadSuccess(): void {
+    if (this.isFirstLoad) {
+      this.hideLoader();
+      return;
+    }
+
+    setTimeout(() => this.hideLoader(), this.duration());
+  }
+
+  /**
+   * Inicializa el componente y sus handlers.
+   * Haciendo uso de waitInitialize, esperamos a que el mapa se inicialice para poder suscribirnos a los eventos de carga del mapa.
+   * Excepto en la carga inicial del mapa y para evitar superponer animaciones, skipeamos la primera carga y esperamos a que el mapa se recargue
+   * para futuras ocasiones y delegamos en los handlers start y success para mostrar u ocultar el loader respectivamente.
+   */
+  private initComponent(): void {
+    const subscription = this.viewerService()
+      .waitInitialize()
+      .pipe(
+        mergeMap(() => {
+          // when initialized, we listen to both load_start and load_success
+          const loadStart$ = this.viewerService()
+            .getObservable('load_start')
+            .pipe(
+              skip(1), // skip first emission
+              tap(() => this.showLoader())
+            );
+
+          const loadSuccess$ = this.viewerService()
+            .getObservable('load_success')
+            .pipe(
+              tap(() => {
+                if (this.isFirstLoad) {
+                  this.isFirstLoad = false;
+                }
+              }),
+              tap(() => this.handleLoadSuccess())
+            );
+
+          // merge both into one stream
+          return merge(loadStart$, loadSuccess$);
+        }),
+        catchError((error: unknown) => {
+          console.error('viewer init error', error);
+          return []; // swallow error or return EMPTY
+        })
+      )
+      .subscribe();
+
+    this.handlers.push(subscription);
+  }
+
+  private formatRgb(rgbString: string, wrapped = true): string {
+    return wrapped ? 'rgb(' + rgbString.split(' ').join(', ') + ')' : rgbString.split(' ').join(', ');
+  }
+
+  /**
+   * Destruye el componente y sus handlers.
+   * Recorre el array de handlers y se desuscribe de cada uno de ellos.
+   */
+  private destroyComponent(): void {
+    for (const h of this.handlers) {
+      h.unsubscribe();
+    }
+  }
+}

package/src/dvm/map-loader/map-loader.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { MapLoaderComponent } from './map-loader.component';
+
+const meta: Meta<MapLoaderComponent> = {
+  title: 'Dvm/MapLoader',
+  component: MapLoaderComponent,
+  id: 'MapLoader',
+};
+
+export default meta;
+
+type Story = StoryObj<MapLoaderComponent>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/dvm/map-loader/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

package/src/dvm/map-loader/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './map-loader.component';

package/src/dvm/neighbors/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/dvm/neighbors/neighbors.component.css

@@ -0,0 +1,158 @@
+.sdc-neighbors {
+  --sdc-neighbors-background-color: transparent;
+  --sdc-neighbors-text-color: var(--color-pure-black);
+  --sdc-neighbors-border-radius: 1rem;
+  --sdc-neighbors-padding-x: var(--space-3);
+  --sdc-neighbors-padding-y: var(--space-2_5);
+  --sdc-neighbors-height: var(--space-6);
+  --sdc-neighbors-max-width: 25rem;
+  --sdc-neighbors-button-width: 8rem;
+  --sdc-neighbors-button-height: var(--space-6);
+  --sdc-neighbors-button-icon-color: var(--color-pure-black);
+  --sdc-neighbors-button-hover-background-color: #f5f5f5;
+  --sdc-neighbors-button-text-font-weight: var(--font-medium);
+  --sdc-neighbors-button-text-font-size: var(--text-sm);
+  --sdc-neighbors-button-text-transform: none;
+  --sdc-neighbors-prefix-opacity: 1;
+  --sdc-neighbors-current-section-min-width: 6rem;
+  --sdc-neighbors-current-section-loading-font-weight: var(--font-semibold);
+  --sdc-neighbors-current-section-loading-font-size: var(--text-sm);
+  --sdc-neighbors-current-section-text-font-weight: var(--font-semibold);
+  --sdc-neighbors-current-section-text-font-size: var(--text-sm);
+  --sdc-neighbors-current-section-text-transform: none;
+}
+
+.neighbors-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--sdc-neighbors-background-color);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--sdc-neighbors-padding-x);
+  padding-right: var(--sdc-neighbors-padding-x);
+  padding-top: var(--sdc-neighbors-padding-y);
+  padding-bottom: var(--sdc-neighbors-padding-y);
+  border-radius: var(--sdc-neighbors-border-radius);
+  height: var(--sdc-neighbors-height);
+  max-width: var(--sdc-neighbors-max-width);
+  pointer-events: auto;
+}
+
+@media (min-width: 640px) {
+  .neighbors-container {
+    --sdc-neighbors-height: var(--space-8);
+  }
+}
+
+.neighbor-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: white;
+  border-radius: 50%;
+  transition-property: opacity, background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 640px) {
+  .neighbor-button {
+    width: 3rem;
+    height: 3rem;
+  }
+}
+
+.neighbor-button-left {
+  margin-right: 0.75rem;
+}
+
+.neighbor-button-right {
+  margin-left: 0.75rem;
+}
+
+.neighbor-button:hover {
+  background-color: var(--sdc-neighbors-button-hover-background-color);
+}
+
+.neighbor-button-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sdc-neighbors-button-icon-color);
+}
+
+.neighbor-button-icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.current-section-text .section-number {
+  font-weight: var(--font-bold);
+  white-space: nowrap;
+}
+
+.current-section-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
+  min-width: var(--sdc-neighbors-current-section-min-width);
+  background-color: white;
+  border-radius: var(--sdc-neighbors-border-radius);
+  padding: 0.75rem 1rem;
+  cursor: default;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 640px) {
+  .current-section-wrapper {
+    --sdc-neighbors-current-section-min-width: 14rem;
+  }
+}
+
+.current-section-loading {
+  font-weight: var(--sdc-neighbors-current-section-loading-font-weight);
+  color: var(--sdc-neighbors-text-color);
+  font-size: var(--sdc-neighbors-current-section-loading-font-size);
+}
+
+.current-section-text {
+  display: flex;
+  font-weight: var(--sdc-neighbors-current-section-text-font-weight);
+  color: var(--sdc-neighbors-text-color);
+  font-size: var(--sdc-neighbors-current-section-text-font-size);
+  text-transform: var(--sdc-neighbors-current-section-text-transform);
+}
+
+.current-section-text .prefix {
+  opacity: var(--sdc-neighbors-prefix-opacity);
+  margin-right: 0.35rem;
+}
+
+.current-section-text .sm-prefix {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .current-section-text .sm-prefix {
+    display: block;
+  }
+}
+
+.current-section-text .xs-prefix {
+  display: block;
+}
+
+@media (min-width: 640px) {
+  .current-section-text .xs-prefix {
+    display: none;
+  }
+}

package/src/dvm/neighbors/neighbors.component.html

@@ -0,0 +1,45 @@
+<div #neighborsContainer class="neighbors-container" [class]="computedClass()" [class.hidden]="!showElement()">
+  <!-- LEFT SECTION BUTTON -->
+  @if (leftSection) {
+    <div
+      class="neighbor-button-left neighbor-button"
+      tabindex="0"
+      (click)="navigateToSection(leftSection!)"
+      (keypress.enter)="navigateToSection(leftSection!)">
+      <i class="neighbor-button-icon">
+        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M15.75 19.5 8.25 12l7.5-7.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </i>
+    </div>
+  }
+  <div class="current-section-wrapper">
+    @if (isLoading()) {
+      <p class="current-section-loading">
+        <span>Loading</span>
+      </p>
+    } @else {
+      @if (section) {
+        <h3 class="current-section-text">
+          <span class="prefix">Section </span>
+          <span #currentSection class="section-number">{{ section }}</span>
+        </h3>
+      }
+    }
+  </div>
+
+  <!-- RIGHT SECTION BUTTON -->
+  @if (rightSection) {
+    <div
+      class="neighbor-button-right neighbor-button"
+      tabindex="1"
+      (click)="navigateToSection(rightSection!)"
+      (keypress.enter)="navigateToSection(rightSection!)">
+      <i class="neighbor-button-icon">
+        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </i>
+    </div>
+  }
+</div>