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

package/components/footer/footer.component.scss

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

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

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

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

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

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

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

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

package/components/footer/public-api.ts

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