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

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

@@ -1,31 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,91 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-<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

@@ -1,187 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

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

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

package/src/dvm/neighbors/index.ts

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

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

@@ -1,158 +0,0 @@
-.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

@@ -1,45 +0,0 @@
-<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>