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

package/components/algolia-search/components/algolia-search/algolia-search.component.scss

@@ -1,588 +0,0 @@
-@use '../../../../styles/_breakpoints.scss' as breakpoints;
-@use '../../../../styles/_mixins.scss' as mixins;
-
-// Vars
-$controls-height: 72px;
-$padding: 20px;
-
-:host {
-  --results-height: calc(100vh - #{$controls-height});
-}
-
-// Algolia Search
-.algolia-search {
-  position: relative;
-  box-sizing: border-box;
-
-  * {
-    font-family: var(--font-family);
-  }
-
-  algolia-search-results,
-  .algolia-search-results {
-    z-index: 5001;
-  }
-
-  &.star-theme {
-    border-radius: 0px !important;
-  }
-
-  &.maternity-star-theme {
-    border-radius: 2rem !important;
-    .algolia-search-controls {
-      border-radius: 2rem !important;
-    }
-  }
-
-  &-controls {
-    z-index: 5002;
-    display: grid;
-    position: relative;
-    grid-template-columns: $padding 14px $padding 1fr auto (calc($padding / 2));
-    grid-template-rows: auto;
-    grid-template-areas: '. left-icon . field clean-icon .';
-    background: #ffffff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
-    padding-top: 6px;
-    transition: ease 0.2s all;
-
-    algolia-search-field {
-      display: block;
-      position: relative;
-      grid-area: field;
-    }
-
-    .left-icon {
-      grid-area: left-icon;
-      align-self: center;
-    }
-
-    .clean-icon {
-      grid-area: clean-icon;
-      align-self: center;
-    }
-
-    &-hint {
-      grid-area: field;
-      height: 66px;
-      font-weight: 300;
-      font-size: 25px;
-      color: rgb(226, 226, 226);
-      white-space: nowrap;
-      overflow: hidden;
-      text-transform: uppercase;
-      display: flex;
-      align-items: center;
-
-      @media screen and (max-width: breakpoints.$breakpoint-medium) {
-        font-size: 22px;
-      }
-    }
-
-    &-field {
-      input {
-        width: 100%;
-        height: 66px;
-        font-weight: 300;
-        font-size: 25px;
-        font-style: normal;
-        color: rgb(74, 74, 74);
-        background: transparent;
-
-        &::placeholder {
-          color: rgb(110, 110, 110);
-          font-size: 18px;
-          font-weight: 500;
-          opacity: 1;
-        }
-      }
-
-      &.disabled {
-        input {
-          opacity: 1;
-          -webkit-text-fill-color: rgb(146, 146, 146);
-        }
-      }
-    }
-  }
-
-  &.focus,
-  &.focus-mobile:not(.no-overlay) {
-    z-index: 9998;
-
-    @media screen and (max-width: breakpoints.$breakpoint-medium) {
-      width: 100%;
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 10000;
-
-      // Results overlay on mobile
-      .algolia-search-results-overlay {
-        width: 100%;
-        height: 100vh;
-        background:
-          linear-gradient(259.8deg, #f2f2f2 37.83%, #fffbff 55.77%, rgba(255, 251, 255, 0) 76.8%),
-          linear-gradient(79.63deg, #f5f6f8 45.51%, rgba(245, 246, 248, 0) 75.93%);
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
-    }
-
-    .algolia-search-controls {
-      &-field {
-        input {
-          &::placeholder {
-            color: rgb(183, 183, 183);
-            font-size: 25px;
-            font-weight: 300;
-          }
-
-          @media screen and (max-width: breakpoints.$breakpoint-medium) {
-            font-size: 22px;
-            text-transform: uppercase;
-
-            &::placeholder {
-              font-size: 20px;
-            }
-          }
-        }
-      }
-    }
-
-    &.no-results {
-      .algolia-search-controls {
-        &-field {
-          input {
-            color: rgb(157, 58, 58) !important;
-          }
-        }
-      }
-    }
-  }
-
-  &.disabled {
-    background-color: rgba(246, 246, 246, 1) !important;
-    border: 2px solid rgba(183, 183, 183, 1);
-
-    .algolia-search-controls {
-      background-color: rgba(246, 246, 246, 1) !important;
-    }
-  }
-
-  @mixin light-control {
-    background-color: #ffffff;
-    border-radius: 4px;
-    padding: 6px 0px;
-    border: 2px solid rgb(146, 146, 146);
-
-    .algolia-search-controls {
-      height: auto;
-      padding-top: 0;
-      grid-template-areas: '. search-icon . field clean-icon .';
-      grid-template-columns: 12px auto 8px 1fr auto 12px;
-      grid-template-rows: minmax(28px, auto);
-      box-shadow: none;
-
-      &-hint {
-        grid-area: field;
-        width: 100%;
-        height: auto;
-        font-weight: 500;
-        font-size: 16px;
-        font-style: normal;
-        text-transform: none;
-      }
-
-      algolia-search-field {
-        display: flex;
-        align-items: center;
-      }
-
-      &-field {
-        padding-bottom: 0;
-        flex-grow: 1;
-
-        display: flex;
-
-        input {
-          display: flex;
-          flex: 1 1 0;
-
-          width: 100%;
-          height: auto;
-          font-weight: 500;
-          font-size: 16px;
-          font-style: normal;
-          color: rgb(110, 110, 110);
-          text-transform: capitalize;
-
-          &::placeholder {
-            font-style: normal;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 135%;
-            display: flex;
-            align-items: center;
-            color: rgb(110, 110, 110);
-            text-transform: none;
-          }
-
-          &:focus {
-            color: rgb(38, 38, 38);
-          }
-        }
-
-        &.disabled {
-          input {
-            width: 100%;
-            height: auto;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 135%;
-            color: rgb(146, 146, 146);
-            text-transform: uppercase;
-            cursor: not-allowed;
-            &::placeholder {
-              color: rgb(146, 146, 146);
-              -webkit-text-fill-color: rgb(146, 146, 146);
-            }
-          }
-        }
-      }
-
-      .search-icon {
-        grid-area: search-icon;
-        align-self: center;
-      }
-
-      .clean-icon {
-        grid-area: clean-icon;
-        align-self: center;
-      }
-    }
-
-    &.focus {
-      z-index: 9998;
-      border: 2px solid rgb(110, 168, 255);
-
-      @media screen and (max-width: breakpoints.$breakpoint-medium) {
-        border: none;
-        width: 100%;
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 10000;
-
-        // Results overlay on mobile
-        .algolia-search-results-overlay {
-          width: 100%;
-          height: 100vh;
-          background:
-            linear-gradient(259.8deg, #f2f2f2 37.83%, #fffbff 55.77%, rgba(255, 251, 255, 0) 76.8%),
-            linear-gradient(79.63deg, #f5f6f8 45.51%, rgba(245, 246, 248, 0) 75.93%);
-          position: absolute;
-          top: 0;
-          left: 0;
-        }
-      }
-
-      &.no-results {
-        border: solid 2px rgb(157, 58, 58);
-        .algolia-search-controls {
-          @media screen and (max-width: breakpoints.$breakpoint-medium) {
-            border: none;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
-          }
-
-          &-field {
-            input {
-              color: rgb(157, 58, 58) !important;
-            }
-          }
-        }
-      }
-    }
-
-    .algolia-search-results {
-      background: #ffffff;
-      border: none;
-      border-radius: 0 0 4px 4px;
-      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
-      margin-top: 2px;
-
-      .algolia-search-results-item {
-        background-color: #ffffff;
-      }
-
-      .algolia-multiple-results {
-        width: 100%;
-        max-height: 398px;
-        overflow: hidden;
-        display: flex;
-
-        &-primary {
-          width: 60%;
-
-          algolia-search-result-item:nth-child(1n + 8) {
-            display: none;
-          }
-        }
-
-        &-secondary {
-          width: 40%;
-          overflow-x: auto;
-        }
-
-        @media screen and (min-width: breakpoints.$breakpoint-medium) {
-          .algolia-multiple-results-primary,
-          .algolia-multiple-results-secondary {
-            width: 100%;
-          }
-        }
-
-        &.single-result {
-          display: block;
-        }
-      }
-    }
-  }
-
-  @media screen and (min-width: breakpoints.$breakpoint-medium) {
-    &.light-style {
-      @include light-control;
-    }
-  }
-
-  @media screen and (max-width: breakpoints.$breakpoint-medium) {
-    &.light-style:not(.focus-mobile),
-    &.light-style.no-overlay {
-      @include light-control;
-    }
-  }
-
-  // Results container
-  algolia-search-results,
-  &.no-results > .algolia-search-results {
-    display: block;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-  }
-
-  .algolia-search-results {
-    max-height: 70vh;
-    overflow-y: auto;
-    z-index: 1;
-
-    @media screen and (max-height: breakpoints.$breakpoint-medium) {
-      max-height: 400px;
-    }
-
-    @media screen and (max-width: breakpoints.$breakpoint-medium) {
-      max-height: var(--results-height);
-    }
-  }
-
-  &.no-results .algolia-search-results {
-    max-height: 70vh;
-    overflow-y: auto;
-    z-index: 1;
-
-    @media screen and (max-height: breakpoints.$breakpoint-medium) {
-      max-height: 400px;
-    }
-
-    @media screen and (max-width: breakpoints.$breakpoint-medium) {
-      max-height: var(--results-height);
-    }
-  }
-
-  // Result Item
-  algolia-search-result-item {
-    display: block;
-    position: relative;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid rgb(226, 226, 226);
-    }
-  }
-
-  .algolia-multiple-results-secondary {
-    algolia-search-result-item {
-      &:not(:last-child) {
-        border-bottom: none;
-      }
-
-      .algolia-search-results-item {
-        h4 {
-          font-size: 13px;
-          font-weight: 400;
-        }
-
-        p {
-          font-size: 12px;
-          font-weight: 300;
-        }
-      }
-    }
-  }
-
-  .algolia-search-results-item {
-    width: 100%;
-    display: grid;
-    padding: 8px $padding;
-    grid-template-columns: auto 1fr 8px auto auto;
-    grid-template-rows: 1fr auto;
-    grid-template-areas:
-      'icon title . action .'
-      'icon subtitle . action description';
-    align-items: center;
-    background-color: #fff;
-    cursor: pointer;
-
-    @media screen and (max-width: breakpoints.$breakpoint-medium) {
-      background-color: unset;
-    }
-
-    &-icon,
-    &-img,
-    &-distance {
-      grid-area: icon;
-    }
-
-    h4,
-    p {
-      padding: 0;
-      margin: 0;
-      color: #6e6e6e;
-      line-height: 16px;
-      letter-spacing: 0.72px;
-    }
-
-    h4 {
-      grid-area: title;
-      font-size: 12px;
-      color: #262626;
-      font-weight: 700;
-
-      &.hasSubtitle {
-        @include mixins.truncate();
-      }
-
-      &:not(.hasSubtitle) {
-        @include mixins.multilineTruncate(2);
-      }
-
-      &.error-message {
-        color: rgb(157, 58, 58);
-        font-size: 14px;
-        font-weight: 300;
-        height: 70px;
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    p {
-      grid-area: subtitle;
-      @include mixins.truncate();
-      font-size: 12px;
-    }
-
-    h4 em,
-    p em {
-      color: rgb(0, 150, 129);
-      font-weight: 500;
-      font-style: normal;
-    }
-
-    h5 {
-      grid-area: description;
-      color: rgb(74, 74, 74);
-      font-weight: 300;
-      font-style: normal;
-      font-size: 12px;
-      line-height: 14px;
-    }
-
-    &-icon,
-    &-img {
-      display: flex;
-      align-items: center;
-      margin-right: calc($padding / 2);
-
-      cura-icon {
-        stroke: rgb(183, 183, 183);
-        transition: ease 0.5s stroke;
-      }
-    }
-
-    &-img img {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      overflow: hidden;
-      object-fit: cover;
-    }
-
-    &-distance {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-      margin-right: 8px;
-      min-width: 30px;
-    }
-
-    &:hover,
-    &.preselected {
-      background: #f6f6f6 !important;
-    }
-
-    &-action {
-      grid-area: action;
-      a {
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        font-weight: 300;
-        color: rgb(0, 150, 129);
-
-        @media screen and (max-width: breakpoints.$breakpoint-medium) {
-          span {
-            display: none;
-          }
-        }
-
-        cura-icon {
-          margin-left: 8px;
-          stroke: rgb(0, 150, 129);
-        }
-      }
-
-      > cura-icon {
-        @extend a;
-        stroke: rgb(0, 150, 129);
-      }
-    }
-  }
-
-  &.light-style .algolia-search-results-item {
-    padding-right: 12px;
-    padding-left: 12px;
-  }
-
-  &.no-results .algolia-search-results-item {
-    background: transparent !important;
-    cursor: default;
-
-    .algolia-search-results-item-icon {
-      cura-icon {
-        stroke: rgb(183, 183, 183);
-      }
-    }
-  }
-}

package/components/algolia-search/components/algolia-search/algolia-search.component.spec.ts

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