@gardev/components 0.0.1 → 0.0.4

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+<header class="page-header" [ngStyle]="{
+    'background': headerBackground
+      ? `linear-gradient(color-mix(in srgb, var(--color-bg) 40%, transparent), color-mix(in srgb, var(--color-bg) 40%, transparent)),
+    url('${headerBackground}') center/cover no-repeat`
+      : 'none'
+  }" style="position: relative">
+    <div class="layout_max-width">
+        <h1>
+            {{title}}
+        </h1>
+    </div>
+    <div class="custom-shape-divider-top-1770151990" style="position: absolute; bottom: 0; height: 25px; width: 100%">
+        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"
+            style="height: 40px; width: 100%">
+            <path
+                d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z"
+                style="fill: var(--color-bg)"></path>
+        </svg>
+    </div>
+</header>
+
+<main class="page-main">
+    <div class="layout_max-width">
+        <ng-content></ng-content>
+    </div>
+</main>
+
+<section class="page-sections">
+    <div class="layout_max-width">
+        <ng-content select="[sections]"></ng-content>
+    </div>
+</section>

package/src/lib/layouts/page-layout/page-layout.component.spec.ts

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

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

@@ -0,0 +1,13 @@
+import { NgStyle } from '@angular/common';
+import { Component, Input, } from '@angular/core';
+
+@Component({
+  selector: 'ard-page-layout',
+  templateUrl: './page-layout.component.html',
+  styleUrls: ['./page-layout.component.css'],
+  imports: [NgStyle,]
+})
+export class PageLayoutComponent {
+  @Input() headerBackground?: string = '';
+  @Input() title?: string = 'Lorem ipsum'
+}

package/src/lib/layouts/scroll-reactive-section/scroll-reactive-section.component.html

@@ -0,0 +1,10 @@
+<div style="position: sticky; top:0; height: 0; z-index: 0;">
+    <div #content
+        style="background: gray; display: flex; justify-content: center; align-items: center;overflow: hidden;">
+        <ng-content></ng-content>
+
+    </div>
+</div>
+<div style="position: relative; height: 100vh; pointer-events: none;" #container>
+
+</div>

package/src/lib/layouts/scroll-reactive-section/scroll-reactive-section.component.spec.ts

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

package/src/lib/layouts/scroll-reactive-section/scroll-reactive-section.component.ts

@@ -0,0 +1,40 @@
+import {
+  Component,
+  ElementRef,
+  ViewChild,
+  AfterViewInit,
+  HostListener
+} from '@angular/core';
+
+@Component({
+  selector: 'ard-scroll-reactive-section',
+  standalone: true,
+  templateUrl: './scroll-reactive-section.component.html',
+})
+export class ScrollReactiveSectionComponent implements AfterViewInit {
+  @ViewChild('container') container!: ElementRef<HTMLElement>;
+  @ViewChild('content') content!: ElementRef<HTMLElement>;
+
+  ngAfterViewInit() {
+    this.update();
+  }
+
+  @HostListener('window:scroll')
+  @HostListener('window:resize')
+  update() {
+    const containerEl = this.container.nativeElement;
+    const contentEl = this.content.nativeElement;
+
+    const rect = containerEl.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+
+    const visibleTop = Math.max(rect.top, 0);
+    const visibleBottom = Math.min(rect.bottom, viewportHeight);
+    const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+
+    const maxHeight = containerEl.offsetHeight;
+    const height = Math.min(visibleHeight, maxHeight);
+
+    contentEl.style.height = `${height}px`;
+  }
+}

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

@@ -0,0 +1,10 @@
+<section class="layout_max-width">
+  <h2>Secció</h2>
+  <div style="display: flex;">
+    <!-- <app-bottle [color]="'#5b8940'"></app-bottle> -->
+    <!-- <app-bottle [color]="'#b4862a'"></app-bottle>
+    <app-bottle [color]="'#121e10'"></app-bottle>
+    <app-bottle [wineColor]="'#ffffff'"></app-bottle> -->
+    <!-- <app-bottle [color]="'#868132'" [wineColor]="'#e2d744'"></app-bottle> -->
+  </div>
+</section>

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

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

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ard-section',
+  imports: [],
+  templateUrl: './section.component.html',
+  styleUrl: './section.component.css',
+  standalone: true,
+})
+export class SectionComponent {
+
+}

package/src/lib/theme.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+
+    ngOnInit() {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        document.body.classList.toggle('dark', prefersDark);
+
+    }
+    toggle() {
+        document.body.classList.toggle('dark');
+    }
+
+    setDark() {
+        document.body.classList.add('dark');
+    }
+
+    setLight() {
+        document.body.classList.remove('dark');
+    }
+}

package/src/public-api.ts

@@ -0,0 +1,14 @@
+/*
+ * Public API Surface of @ardev/components
+ */
+
+export * from './lib/components/bottle/bottle.component';
+export * from './lib/components/caroussel/caroussel.component';
+export * from './lib/components/cronogram/cronogram.component';
+export * from './lib/layouts/menu/menu.component';
+export * from './lib/layouts/navbar/navbar.component';
+export * from './lib/layouts/page-layout/page-layout.component';
+export * from './lib/layouts/scroll-reactive-section/scroll-reactive-section.component'; // probablement esborrar
+export * from './lib/layouts/section/section.component';
+export * from './lib/components/stack-caroussel/stack-caroussel'
+export * from './lib/theme.service'

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}