@rededor/site-front-end-lib 20.0.26 → 20.0.27

package/components/footer/footer.component.scss

@@ -0,0 +1,451 @@
+@use '../../styles/_breakpoints.scss' as breakpoints;
+
+// Footer grid
+footer[sl-ftr] {
+  min-height: 530px;
+  background-color: var(--ftr-bg-color);
+  display: grid !important;
+  grid-template-areas:
+    '. . .'
+    '. content .'
+    '. . .'
+    'disc disc disc';
+  grid-template-columns: minmax(10%, 1fr) minmax(auto, calc(breakpoints.$breakpoint-large - breakpoints.$breakpoint-large * 0.1)) minmax(10%, 1fr);
+  grid-template-rows: 48px 1fr 48px auto;
+
+  * {
+    font-family: var(--font-family) !important;
+  }
+
+  svg {
+    stroke: var(--ftr-alt-color);
+    stroke-width: 2.25px;
+    fill: none;
+  }
+
+  .sl-ftr-content {
+    grid-area: content;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    gap: 32px;
+
+    .content-menu {
+      width: 100%;
+    }
+  }
+
+  .sl-ftr-disc {
+    grid-area: disc;
+  }
+
+  @media only screen and (min-width: breakpoints.$breakpoint-medium) {
+    grid-template-columns: minmax(5%, 1fr) minmax(auto, calc(breakpoints.$breakpoint-large - breakpoints.$breakpoint-large * 0.1)) minmax(5%, 1fr);
+
+    .sl-ftr-content {
+      flex-direction: row;
+      gap: 44px;
+    }
+  }
+}
+
+// Menu principal
+.sl-ftr-menu {
+  display: flex;
+  flex-direction: column;
+  padding-top: 20px;
+
+  nav {
+    width: 100%;
+    height: auto;
+    flex: auto;
+    column-count: unset;
+  }
+
+  @media only screen and (min-width: breakpoints.$breakpoint-medium) {
+    flex-direction: row;
+
+    nav {
+      flex: 3 1 0;
+      column-count: 3;
+    }
+  }
+}
+
+// Lista e links do menu principal
+a.sl-ftr-menu-item-link {
+  text-align: left;
+  padding: 8px 0;
+  text-decoration: none;
+  font-style: normal;
+}
+
+.sl-ftr-menu-list {
+  list-style: none;
+  .sl-ftr-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: transparent;
+    width: auto;
+    cursor: pointer;
+
+    a.sl-ftr-menu-item-link {
+      color: var(--ftr-color);
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16px;
+      min-height: 35px;
+      letter-spacing: 0.56px;
+    }
+
+    &:hover {
+      a {
+        color: var(--ftr-menu-hover-color);
+      }
+      svg {
+        stroke: var(--ftr-menu-hover-color) !important;
+      }
+    }
+
+    &:active {
+      a {
+        color: var(--ftr-menu-active-color);
+      }
+      svg {
+        stroke: var(--ftr-menu-active-color) !important;
+      }
+    }
+
+    &.alt {
+      a.sl-ftr-menu-item-link {
+        color: var(--ftr-alt-color);
+        font-size: 12px;
+        font-weight: 300;
+      }
+
+      &:hover {
+        a {
+          color: var(--ftr-menu-alt-hover-color);
+        }
+        svg {
+          stroke: var(--ftr-menu-alt-hover-color) !important;
+        }
+      }
+
+      &:active {
+        a {
+          color: var(--ftr-menu-alt-active-color);
+        }
+        svg {
+          stroke: var(--ftr-menu-alt-active-color) !important;
+        }
+      }
+    }
+
+    &.have-children {
+      width: 100%;
+    }
+
+    svg {
+      display: inline;
+    }
+  }
+
+  .sl-ftr-menu-item-children {
+    list-style: none;
+
+    &.closed {
+      display: none;
+    }
+
+    &-item {
+      margin: 0px 0px 0px 12px;
+    }
+  }
+
+  @media only screen and (min-width: breakpoints.$breakpoint-medium) {
+    .sl-ftr-menu-item {
+      svg {
+        display: none;
+      }
+
+      &.have-children {
+        width: auto;
+      }
+    }
+
+    .sl-ftr-menu-item-children {
+      &.closed {
+        display: block;
+      }
+
+      &-item {
+        margin: 0px 0px 0px 12px;
+      }
+    }
+  }
+}
+
+// Logo e telefone
+.sl-ftr-contact {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 20px 16px;
+  margin-bottom: 20px;
+  width: 100%;
+  min-height: 77px;
+
+  img {
+    width: var(--logo-width, 92px);
+    height: 50px;
+    object-fit: contain;
+  }
+  .logos {
+    .logo {
+      display: contents;
+
+      &::after {
+        content: '';
+        width: 1px;
+        height: 60px;
+        background-color: var(--ftr-color);
+      }
+    }
+
+    .partner-logo {
+      display: contents;
+    }
+  }
+
+  .phones {
+    display: flex;
+    width: 100%;
+    gap: 12px;
+    .phone,
+    .dora {
+      display: flex;
+      gap: 8px;
+      .label {
+        p {
+          color: #f6f6f6;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 16px;
+          letter-spacing: 0.72px;
+          padding-bottom: 0;
+        }
+        a {
+          color: #f6f6f6;
+          font-size: 14px;
+          font-weight: 700;
+          line-height: 19px;
+          letter-spacing: 0.56px;
+          text-decoration: none;
+        }
+      }
+    }
+    .dora {
+      .img {
+        display: block;
+        width: 32px;
+        height: 32px;
+        background: lightgray 50% / cover no-repeat;
+        border-radius: 50%;
+        border: 2px solid #448ecd;
+      }
+    }
+    .phone {
+      .svg {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #003da5;
+        border-radius: 50%;
+        width: 32px;
+        height: 32px;
+      }
+      &.before::before {
+        content: '';
+        width: 2px;
+        background-color: #f6f6f6;
+        margin-right: 6px;
+      }
+    }
+
+    @media only screen and (max-width: breakpoints.$breakpoint-medium) {
+      flex-direction: column;
+      gap: 20px;
+      .phone.before::before {
+        display: none;
+      }
+    }
+  }
+
+  @media only screen and (min-width: breakpoints.$breakpoint-medium) {
+    gap: 20px 24px;
+    width: 328px;
+  }
+
+  &.starTheme {
+    .logos {
+      .logo {
+        &::after {
+          background-color: #262626;
+        }
+      }
+    }
+
+    .phones {
+      .phone,
+      .dora {
+        .label {
+          p {
+            color: #262626;
+          }
+          a {
+            color: #262626;
+          }
+        }
+      }
+      .dora {
+        .img {
+          border: 2px solid #8b7063;
+        }
+      }
+      .phone {
+        .svg {
+          background: transparent;
+          svg {
+            stroke: #262626;
+          }
+        }
+        &.before::before {
+          content: '';
+          background-color: #262626;
+        }
+      }
+    }
+  }
+}
+
+// Redes sociais
+nav.sl-ftr-medias {
+  ul {
+    list-style: none;
+    display: flex;
+    gap: 16px 0px;
+    flex-wrap: wrap;
+    width: 100%;
+
+    li {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 100%;
+      border: 1px solid #ffffff;
+      width: 36px;
+      height: 36px;
+      margin-right: 12px;
+
+      a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 100%;
+        width: 36px;
+        height: 36px;
+        text-decoration: none;
+      }
+    }
+  }
+
+  @media only screen and (min-width: breakpoints.$breakpoint-xsmall) {
+    ul li {
+      margin-right: 15px;
+    }
+  }
+
+  @media only screen and (min-width: breakpoints.$breakpoint-medium) {
+    ul {
+      flex-wrap: nowrap;
+    }
+  }
+
+  &.starTheme {
+    ul {
+      li {
+        border: 1px solid #262626;
+        a svg {
+          stroke: #262626;
+        }
+      }
+    }
+  }
+}
+
+// Disclaimer
+.sl-ftr-disc {
+  background-color: var(--ftr-disc-bg-color);
+  display: grid !important;
+  grid-template-areas: '. disc-content .';
+  grid-template-columns: minmax(5%, 1fr) minmax(auto, calc(breakpoints.$breakpoint-large - breakpoints.$breakpoint-large * 0.1)) minmax(5%, 1fr);
+  grid-template-rows: auto;
+
+  .disc-content {
+    grid-area: disc-content;
+
+    height: auto;
+    padding: 12px 0px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 8px;
+    flex-direction: column;
+
+    &-copy {
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      text-transform: uppercase;
+      color: var(--ftr-disc-color);
+    }
+
+    &-links {
+      list-style: none;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      gap: 0px 36px;
+
+      li a,
+      li button {
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        color: var(--ftr-disc-alt-color);
+        text-decoration: none;
+        cursor: pointer;
+        background: transparent;
+      }
+    }
+  }
+
+  @media only screen and (min-width: breakpoints.$breakpoint-medium) {
+    .disc-content {
+      height: 40px;
+      padding: 0px;
+      align-items: center;
+      flex-direction: row;
+      gap: 36px;
+
+      &-links {
+        gap: 36px;
+      }
+    }
+  }
+}

package/components/footer/footer.component.spec.ts

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

package/components/footer/footer.component.ts

@@ -0,0 +1,94 @@
+import { Component, ElementRef, AfterViewInit, ViewEncapsulation, input, output, inject, effect, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PrivacyToolsService, LIB_CONFIG, LibConfig, RdsiteLinkDirective, MenuItem, MenuSocialMedia } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { FooterTheme } from './models/FooterTheme.model';
+import { getFooterTheme } from './helpers/footerTheme.func';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'footer[sl-ftr]',
+  imports: [CommonModule, RdsiteLinkDirective],
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss',
+  host: {
+    '[style.--font-family]': 'this.curaApiService.theme.fonts.getFamily()',
+  },
+})
+export class FooterComponent implements AfterViewInit {
+  public privacyTools = inject(PrivacyToolsService);
+  public curaApiService = inject(CuraApiService);
+  private elementRef = inject(ElementRef);
+
+  project = input<string>('site');
+  theme = input<string>('default');
+  disclaimer = input<string>('');
+  linkPrivacyFooter = input<string>('');
+  logo = input<any>(null);
+  partnerLogo = input<any>(null);
+  phone = input<string>('');
+  dora = input<{ number: string; link: string; imgUrl: string }>({ number: '', link: '', imgUrl: '' });
+  socialMenu = input<MenuSocialMedia[]>([]);
+  logoWidth = input<number>(72);
+  footerMenu = input<MenuItem[]>([]);
+
+  footerPrivacyClick = output<Event>();
+  footerCookieClick = output<Event>();
+  footerSocialMediaClick = output<Event>();
+  footerMenuItemClick = output<Event>();
+
+  currentYear: number = new Date().getFullYear();
+
+  // Computed signals
+  public assetsPath = computed(() => this.curaApiService.localAssetsPath());
+
+  constructor() {
+    effect(() => {
+      this.updateFooterTheme();
+    });
+
+    effect(() => {
+      this.updateLogoWidth();
+    });
+  }
+
+  ngAfterViewInit() {
+    this.updateFooterTheme();
+  }
+
+  private updateLogoWidth() {
+    this.elementRef.nativeElement.style.setProperty('--logo-width', `${this.logoWidth()}px`);
+  }
+
+  private updateFooterTheme() {
+    const footerTheme: FooterTheme = getFooterTheme(this.project(), this.theme(), this.curaApiService);
+    Object.entries(footerTheme).forEach(([key, value]) => {
+      Object.entries(value).forEach(([prop, val]) => {
+        const cssVar = `--${key}-${prop}`;
+        this.elementRef.nativeElement.style.setProperty(cssVar, val as string);
+      });
+    });
+  }
+
+  footerSocialMediaClicked(event: Event) {
+    this.footerSocialMediaClick.emit(event);
+  }
+
+  toggleSubMenu(event: Event, menu: Partial<MenuItem>) {
+    event.stopPropagation();
+    menu.active = !menu.active;
+  }
+
+  footerMenuItemClicked(event: Event) {
+    this.footerMenuItemClick.emit(event);
+  }
+
+  footerPrivacyClicked(event: Event) {
+    this.footerPrivacyClick.emit(event);
+  }
+
+  footerCookieClicked(event: Event) {
+    this.footerCookieClick.emit(event);
+  }
+}

package/components/footer/helpers/footerTheme.func.ts

@@ -0,0 +1,119 @@
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { FooterTheme } from '../models/FooterTheme.model';
+
+export const getFooterTheme = (project: string = 'site', themeStyle: string = 'default', curaApiService: CuraApiService) => {
+  const theme: FooterTheme = {
+    ftr: {},
+    'ftr-disc': {},
+    'ftr-menu': {},
+    'ftr-social': {},
+  };
+
+  const [primaryLighter, primaryLight, primaryBase, primaryDarker] = [
+    curaApiService.theme.colors.getColor('primary-lighter'),
+    curaApiService.theme.colors.getColor('primary-light'),
+    curaApiService.theme.colors.getColor('primary-base'),
+    curaApiService.theme.colors.getColor('primary-darker'),
+  ];
+  const [accentLight, accentBase] = [curaApiService.theme.colors.getColor('accent-light'), curaApiService.theme.colors.getColor('accent-base')];
+  const [neutralPurewhite, neutralWhite, neutralBlack] = [
+    curaApiService.theme.colors.getColor('neutral-purewhite'),
+    curaApiService.theme.colors.getColor('neutral-white'),
+    curaApiService.theme.colors.getColor('neutral-black'),
+  ];
+  const [secondaryLight] = [curaApiService.theme.colors.getColor('secondary-light')];
+
+  switch (project) {
+    case 'site':
+      if (themeStyle === 'default') {
+        theme.ftr = {
+          'bg-color': primaryDarker,
+          color: neutralWhite,
+          'alt-color': primaryLighter,
+        };
+        theme['ftr-disc'] = {
+          'bg-color': neutralPurewhite,
+          color: neutralBlack,
+          'alt-color': primaryBase,
+        };
+        theme['ftr-menu'] = {
+          'hover-color': accentLight,
+          'active-color': accentBase,
+          'alt-hover-color': primaryLight,
+          'alt-active-color': primaryBase,
+        };
+        theme['ftr-social'] = {
+          color: neutralWhite,
+        };
+      } else {
+        theme.ftr = {
+          'bg-color': primaryDarker,
+          color: neutralWhite,
+          'alt-color': primaryLighter,
+        };
+        theme['ftr-disc'] = {
+          'bg-color': neutralPurewhite,
+          color: neutralBlack,
+          'alt-color': primaryBase,
+        };
+        theme['ftr-menu'] = {
+          'hover-color': accentLight,
+          'active-color': accentBase,
+          'alt-hover-color': primaryLight,
+          'alt-active-color': primaryBase,
+        };
+        theme['ftr-social'] = {
+          color: neutralWhite,
+        };
+      }
+      break;
+    case 'star':
+      if (themeStyle === 'star') {
+        theme.ftr = {
+          'bg-color': secondaryLight,
+          color: neutralBlack,
+          'alt-color': neutralBlack,
+        };
+        theme['ftr-disc'] = {
+          'bg-color': neutralPurewhite,
+          color: neutralBlack,
+          'alt-color': primaryBase,
+        };
+        theme['ftr-menu'] = {
+          'hover-color': primaryBase,
+          'active-color': primaryLight,
+          'alt-hover-color': primaryBase,
+          'alt-active-color': primaryLight,
+        };
+        theme['ftr-social'] = {
+          color: neutralBlack,
+        };
+      } else {
+        theme.ftr = {
+          'bg-color': primaryDarker,
+          color: neutralWhite,
+          'alt-color': primaryLighter,
+        };
+        theme['ftr-disc'] = {
+          'bg-color': neutralPurewhite,
+          color: neutralBlack,
+          'alt-color': primaryBase,
+        };
+        theme['ftr-menu'] = {
+          'hover-color': accentLight,
+          'active-color': accentBase,
+          'alt-hover-color': primaryLight,
+          'alt-active-color': primaryBase,
+        };
+        theme['ftr-social'] = {
+          color: neutralWhite,
+        };
+      }
+      break;
+
+    default:
+      break;
+  }
+
+  return theme;
+};

package/components/footer/index.ts

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

package/components/footer/models/FooterTheme.model.ts

@@ -0,0 +1,8 @@
+export interface FooterTheme {
+  ftr: Record<string, any>;
+  'ftr-disc': Record<string, any>;
+  'ftr-menu': Record<string, any>;
+  'ftr-social': Record<string, any>;
+}
+
+export type FooterThemeKeys = keyof FooterTheme;

package/components/footer/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/components/footer/public-api.ts

@@ -0,0 +1 @@
+export * from './footer.component';