@gardev/components 0.0.7 → 0.0.8

package/src/lib/components/caroussel/caroussel.component.ts

@@ -1,24 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { NgForOf } from "@angular/common";
-import { CarousselMenuComponent } from './caroussel-menu/caroussel-menu.component';
-
-@Component({
-  selector: 'ard-caroussel',
-  imports: [NgForOf, CarousselMenuComponent],
-  templateUrl: './caroussel.component.html',
-  styleUrl: './caroussel.component.css',
-})
-export class CarousselComponent {
-  @Input() images: string[] = [];
-
-  index = 0;
-
-  next() {
-    this.index = (this.index + 1) % this.images.length;
-  }
-
-  goTo(i: number) {
-    this.index = i;
-  }
-
-}

package/src/lib/components/cronogram/cronogram.component.css

@@ -1,58 +0,0 @@
-.left-container.odd {
-    padding: 0 1rem
-}
-
-.right-container.even {
-    padding: 0 1rem;
-}
-
-.left-container,
-.right-container {
-    padding: 0 1rem;
-    max-width: 35ch;
-}
-
-.general-container {
-    transition: opacity 0.6s;
-
-}
-
-.line {
-    background: var(--color-text);
-    width: 100%;
-    position: absolute;
-    border-radius: 1rem 1rem 0 0;
-    animation-timing-function: ease-out;
-    width: 0.4rem
-}
-
-.bullet {
-    width: 0.4rem;
-    min-height: 0.4rem;
-    background: var(--color-text);
-    outline: 3px solid var(--color-text);
-    border-radius: 2rem;
-    position: absolute;
-}
-
-.hidden {
-    opacity: 0;
-}
-
-.visible {
-    opacity: 1;
-}
-
-.center {
-    position: relative;
-}
-
-
-
-.left-container {
-    display: flex;
-    justify-content: end;
-    text-align: end;
-    justify-self: end;
-    flex-flow: column
-}

package/src/lib/components/cronogram/cronogram.component.html

@@ -1,47 +0,0 @@
-<h4>cronogram.component.ts</h4>
-
-<p>
-    en la vista mobile, estarà tot en un mateix costat?
-</p>
-
-<div #wrapper>
-
-
-
-    @for(day of items; track day.date; let i = $index;) {
-
-    <div style="display: grid; grid-template-columns: 1fr 0fr 1fr;" class="general-container" #CronogramContent>
-
-
-        <div class="left-container" [ngClass]="i % 2 == 0  ? 'odd' : 'even'">
-            @if(i % 2 === 0) {
-            <h3>{{day.date}}</h3>
-            <p>lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit
-                amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,</p>
-            }
-        </div>
-
-
-        <div class="center" style="height: 100%; display: flex; width: 1rem; flex-flow: column; position: relative">
-            <div class="bullet" style="z-index: 2">
-            </div>
-
-            @if (i == 0) {
-            <div class="line" #line>
-
-            </div>
-            }
-
-        </div>
-        <div class="right-container cronogram-content" [ngClass]="i % 2 == 0  ? 'odd' : 'even'">
-            @if(i % 2 !== 0) {
-            <h3>{{day.date}}</h3>
-            <p>lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit
-                amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,</p>
-
-            }
-        </div>
-
-    </div>
-    }
-</div>

package/src/lib/components/cronogram/cronogram.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CronogramComponent } from './cronogram.component';
-
-describe('CronogramComponent', () => {
-  let component: CronogramComponent;
-  let fixture: ComponentFixture<CronogramComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [CronogramComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(CronogramComponent);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/cronogram/cronogram.component.ts

@@ -1,99 +0,0 @@
-import { Component, ElementRef, HostListener, QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { NgClass } from "@angular/common";
-
-@Component({
-  selector: 'ard-cronogram',
-  imports: [NgClass],
-  templateUrl: './cronogram.component.html',
-  styleUrl: './cronogram.component.css',
-})
-export class CronogramComponent {
-  @ViewChild('wrapper', { read: ElementRef }) wrapper!: ElementRef<HTMLElement>;
-  @ViewChild('line', { read: ElementRef }) line!: ElementRef<HTMLElement>;
-
-  @ViewChildren('CronogramContent', { read: ElementRef })
-  children!: QueryList<ElementRef>;
-  items = [
-    { date: 2000, content: 'Lorem ipsum dolor sit amet', image: 'lorem' },
-    { date: 2001, content: 'Lorem ipsum dolor sit amet', image: 'lorem' },
-    { date: 2002, content: 'Lorem ipsum dolor sit amet', image: 'lorem' }
-  ]
-
-  positionsY: number[] = []
-
-  ngAfterViewInit() {
-    this.positionsY = this.children.map(i => i.nativeElement.getBoundingClientRect().y)
-
-    this.line.nativeElement.style.maxHeight = `${this.wrapper.nativeElement.getBoundingClientRect().height}px`
-  }
-
-  lastScrollY = window.scrollY;
-
-  @HostListener('window:scroll', [])
-  onScroll() {
-    const scrollPosition = window.scrollY;
-
-    if (scrollPosition > this.lastScrollY) {
-      this.onScrollDown(scrollPosition);
-    } else if (scrollPosition < this.lastScrollY) {
-      this.onScrollUp(scrollPosition);
-    }
-
-    this.lastScrollY = scrollPosition;
-
-    this.line.nativeElement.style.height = `${this.visibleHeight(this.wrapper.nativeElement)}px`
-
-
-  }
-  onScrollDown(scrollPosition: number) {
-    let index = this.positionsY.findIndex(pos => pos > scrollPosition - 100);
-
-    if (index === -1) {
-      index = this.positionsY.length;
-    }
-
-    this.children.forEach((child, i) => {
-      const el = child.nativeElement as HTMLElement;
-
-      if (i < index) {
-        el.classList.remove("hidden");
-        el.classList.add("visible");
-      }
-    });
-
-    this.line.nativeElement.style.transition = 'height 1.2s';
-
-  }
-  onScrollUp(scrollPosition: number) {
-    let index = this.positionsY.findIndex(pos => pos > scrollPosition - 50);
-
-    if (index === -1) {
-      index = this.positionsY.length;
-    }
-
-    this.children.forEach((child, i) => {
-      const el = child.nativeElement as HTMLElement;
-
-      if (i >= index) {
-        el.classList.add("hidden");
-        el.classList.remove("visible");
-      }
-    });
-
-    this.line.nativeElement.style.transition = 'height 0s';
-
-  }
-
-
-
-  visibleHeight(el: HTMLElement) {
-    const rect = el.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-
-    const topVisible = Math.max(rect.top, 0);
-    const bottomVisible = Math.min(rect.bottom, viewportHeight);
-
-    return Math.max(0, bottomVisible - topVisible);
-  }
-
-}

package/src/lib/components/stack-caroussel/stack-caroussel.css

@@ -1,25 +0,0 @@
-:host {
-    --anim-speed: 300ms;
-    /* VARIABLE DE VELOCITAT */
-}
-
-.stack-container {
-    position: relative;
-    width: 400px;
-    height: 400px;
-    cursor: pointer;
-}
-
-.stack-image {
-    position: absolute;
-    width: 200px;
-    height: 200px;
-    object-fit: cover;
-    transition:
-        transform var(--anim-speed) ease,
-        opacity var(--anim-speed) ease;
-}
-
-.stack-image.move-out {
-    transform: translate(200px, 0px) !important;
-}

package/src/lib/components/stack-caroussel/stack-caroussel.html

@@ -1,4 +0,0 @@
-<div class="stack-container" (click)="rotateStack()">
-    <img *ngFor="let img of images; let i = index; let last = last" [src]="img" [ngStyle]="getOffset(i)"
-        [class.img-last]="last" class="stack-image" />
-</div>

package/src/lib/components/stack-caroussel/stack-caroussel.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { StackCaroussel } from './stack-caroussel';
-
-describe('StackCaroussel', () => {
-  let component: StackCaroussel;
-  let fixture: ComponentFixture<StackCaroussel>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [StackCaroussel]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(StackCaroussel);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/stack-caroussel/stack-caroussel.ts

@@ -1,50 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'ard-stack-caroussel',
-  imports: [CommonModule],
-  templateUrl: './stack-caroussel.html',
-  styleUrl: './stack-caroussel.css',
-})
-export class StackCaroussel {
-  @Input() images: string[] = [];
-  @Input() atmospheric = false;
-
-  animating = false;
-
-  getOffset(index: number) {
-    return {
-      transform: `translate(${index * 16}px, ${index * 16}px)`,
-      zIndex: this.images.length - index,
-      opacity: this.atmospheric
-        ? 1 - (this.images.length - index * 0.08)
-        : 1
-    };
-  }
-
-  rotateStack() {
-    if (this.animating || this.images.length === 0) return;
-
-    this.animating = true;
-
-    const last = this.images[this.images.length - 1];
-    const rest = this.images.slice(0, this.images.length - 1);
-
-    // Fase 1
-    const el = document.querySelector('.img-last') as HTMLElement;
-    if (el) {
-      el.classList.add('move-out');
-    }
-
-    setTimeout(() => {
-      // Reordenem array
-      this.images = [last, ...rest];
-
-      setTimeout(() => {
-        this.animating = false;
-      }, 50);
-
-    }, 300);
-  }
-}

package/src/lib/layouts/menu/menu.component.css

@@ -1,50 +0,0 @@
-ul {
-    list-style-type: none;
-    display: flex;
-    margin: 0;
-    padding: 0;
-}
-
-a {
-    color: var(--menu-text);
-    text-decoration: none;
-    font-weight: 400;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-button {
-    display: flex;
-    justify-self: end;
-}
-
-li::after {
-    content: '';
-    margin-left: 1rem;
-}
-
-#menu-container {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
-
-:host {
-    width: 100%;
-    overflow: hidden;
-}
-
-#dropdown {
-    li {
-        list-style-type: none;
-    }
-
-    ;
-    background: white;
-    border-radius: 1rem;
-    border: 1px solid black;
-    padding: 1rem;
-    margin: 0 1rem;
-}

package/src/lib/layouts/menu/menu.component.html

@@ -1,21 +0,0 @@
-<div #menuContainer id="menu-container">
-    @if(!collapsed) {
-    <ul #unorderedList [style.flexFlow]="direction == 'horizontal' ? 'row' : 'column'"
-        [style.justifySelf]="justifySelf">
-        @for (i of menu; track i.label) {
-        <li><a [href]="i.path">{{i.label}}</a></li>
-        }
-    </ul>
-    } @else {
-    <button #overlayTrigger [style.justifySelf]="justifySelf" (click)="toggleMenu()">Menu</button>
-
-    <ng-template #menuOverlay>
-        <div id="dropdown">
-            @for (i of menu; track i.label) {
-            <li><a [href]="i.path">{{i.label}}</a></li>
-            }
-        </div>
-    </ng-template>
-    }
-
-</div>

package/src/lib/layouts/menu/menu.component.ts

@@ -1,98 +0,0 @@
-import { Inject, Component, ElementRef, HostListener, Input, ViewChild, AfterViewInit, ChangeDetectorRef, inject, TemplateRef, ViewContainerRef } from '@angular/core';
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-@Component({
-  selector: 'ard-menu',
-  templateUrl: './menu.component.html',
-  styleUrl: './menu.component.css',
-})
-export class MenuComponent implements AfterViewInit {
-
-  @Input() justifySelf: 'center' | 'end' | 'start' = 'end';
-  @Input() menu?: {
-    path: string;
-    label: string;
-  }[] = [
-
-    ];
-
-  @Input() direction: 'horizontal' | 'vertical' = 'horizontal';
-
-  @ViewChild('menuContainer') menuContainer!: ElementRef<HTMLElement>;
-  @ViewChild('unorderedList') unorderedList!: ElementRef<HTMLElement>;
-
-  constructor(private cdr: ChangeDetectorRef) { }
-
-  collapsed = false;
-  listWidth = 0;
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.getWidth();
-    });
-  }
-
-  @HostListener('window:resize')
-  getWidth() {
-    const containerWidth =
-      this.menuContainer.nativeElement.getBoundingClientRect().width;
-
-    if (!this.collapsed) this.listWidth = this.unorderedList?.nativeElement?.scrollWidth;
-
-    this.collapsed = containerWidth < this.listWidth;
-    this.cdr.detectChanges();
-    console.log(containerWidth, this.listWidth, this.collapsed)
-  }
-
-
-  //#region overlay
-  private overlay = inject(Overlay);
-  private overlayRef?: OverlayRef;
-
-  @ViewChild('menuOverlay') menuOverlay!: TemplateRef<any>;        // Template del menú
-  @ViewChild('overlayTrigger', { read: ElementRef }) trigger!: ElementRef; // Botó
-
-  toggleMenu() {
-    console.log('toggleMenu');
-    this.overlayRef ? this.closeMenu() : this.openMenu();
-  }
-  private viewContainerRef = inject(ViewContainerRef);
-
-  openMenu() {
-    const positionStrategy = this.overlay
-      .position()
-      .flexibleConnectedTo(this.trigger)
-      .withPositions([
-        {
-          originX: 'start',
-          originY: 'bottom',
-          overlayX: 'start',
-          overlayY: 'top'
-        }
-      ]);
-
-    this.overlayRef = this.overlay.create({
-      positionStrategy,
-      hasBackdrop: true,
-      backdropClass: 'cdk-overlay-transparent-backdrop',
-      scrollStrategy: this.overlay.scrollStrategies.reposition()
-    });
-
-    this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
-
-    const portal = new TemplatePortal(this.menuOverlay, this.viewContainerRef); // ✅ SI
-    this.overlayRef.attach(portal);
-  }
-
-  closeMenu() {
-    this.overlayRef?.dispose();
-    this.overlayRef = undefined;
-  }
-
-  action(value: string) {
-    console.log(value);
-    this.closeMenu();
-  }
-  //#endregion overlay
-
-}

package/src/lib/layouts/menu/menu.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MenuComponent } from './menu.component';
-
-describe('MenuComponent', () => {
-  let component: MenuComponent;
-  let fixture: ComponentFixture<MenuComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MenuComponent]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(MenuComponent);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/layouts/navbar/navbar.component.css

@@ -1,34 +0,0 @@
-:host {
-    width: 100%
-}
-
-#nav-container {
-    height: 0;
-    position: sticky;
-    top: 0;
-    will-change: transform, opacity;
-
-    nav {
-        will-change: transform, opacity;
-        position: relative;
-        bottom: 0;
-        will-change: transform;
-        display: flex;
-        flex-flow: column;
-        justify-content: end;
-        align-items: center;
-        border-bottom: 1px solid grey;
-
-        #nav-content {
-            will-change: transform, opacity;
-            min-height: fit-content;
-            display: flex;
-            width: 100%;
-            justify-content: center;
-            align-items: center;
-            flex: 1;
-        }
-    }
-}
-
-.nav_sticky--onScroll {}

package/src/lib/layouts/navbar/navbar.component.html

@@ -1,10 +0,0 @@
-<div id="nav-container" style="z-index: 1">
-  <nav #nav [style.height]="navHeight" [style.minHeight]="sticky ? 'fit-content' : 0 "
-    [ngClass]="`nav_sticky--` + sticky">
-    <div #navContent id="nav-content">
-      <ng-content></ng-content>
-    </div>
-  </nav>
-</div>
-<div #navFiller id="nav-filler" [style.height]="navHeight">
-</div>

package/src/lib/layouts/navbar/navbar.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NavbarComponent } from './navbar.component';
-
-describe('Navbar', () => {
-  let component: NavbarComponent;
-  let fixture: ComponentFixture<NavbarComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [NavbarComponent]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(NavbarComponent);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/layouts/navbar/navbar.component.ts

@@ -1,46 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, ElementRef, HostListener, Input, ViewChild } from '@angular/core';
-
-@Component({
-  selector: 'ard-navbar',
-  imports: [NgClass],
-  templateUrl: './navbar.component.html',
-  styleUrl: './navbar.component.css',
-  standalone: true,
-})
-export class NavbarComponent {
-  @ViewChild('nav') nav!: ElementRef<HTMLElement>;
-  @ViewChild('navFiller') navFiller!: ElementRef<HTMLElement>;
-  @ViewChild('navContent') navContent!: ElementRef<HTMLElement>;
-
-  @Input() onScrollCallback?: (ratio: number) => void;
-  @Input() type: 'hero' | 'regular' = 'regular'
-  @Input() sticky: boolean | 'onScrollUp' = true;
-  @Input() navHeight: CSSStyleDeclaration["height"] = '100vhh'
-
-  private lastScrollY: number = 0;
-  private initialNavHeight!: number;
-
-  ngAfterViewInit() {
-    this.initialNavHeight = this.navFiller.nativeElement.offsetHeight
-  }
-
-  @HostListener('window:scroll', [])
-  onScroll() {
-
-    if (this.type == 'hero') this.nav!.nativeElement.style.height = `calc(${this.navHeight} - ${window.scrollY}px)`;
-
-    if (this.sticky == 'onScrollUp') {
-      this.nav.nativeElement.style.minHeight = window.scrollY < this.lastScrollY
-        ? this.navContent.nativeElement.clientHeight + 'px'
-        : '0px';
-      this.lastScrollY = window.scrollY
-    }
-
-    let navScrollRatio = window.scrollY / (this.initialNavHeight - 100); //100: alçada temptativa del navbar
-    navScrollRatio > 1 - this.nav.nativeElement.offsetHeight ? this.nav.nativeElement.style.transition = 'min-height 0.3s ease' : this.nav.nativeElement.style.transition = 'min-height 0s ease';
-
-    if (this.onScrollCallback) this.onScrollCallback(navScrollRatio);
-
-  }
-}

package/src/lib/layouts/page-layout/page-layout.component.css

@@ -1,13 +0,0 @@
-.page-header {
-    height: 66vh;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    display: flex;
-    align-items: center;
-
-}
-
-.header-content {
-    width: 100%;
-}