guestbell-forms 3.0.39 → 3.0.40

package/src/lib/components/utils/ShallowEqual.ts

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule shallowEqual
+ * @typechecks
+ * @flow
+ */
+
+/*eslint-disable no-self-compare */
+
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+// tslint:disable-next-line:no-any
+function is(x: any, y: any): boolean {
+  // SameValue algorithm
+  if (x === y) {
+    // Steps 1-5, 7-10
+    // Steps 6.b-6.e: +0 != -0
+    // Added the nonzero y check to make Flow happy, but it is redundant
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    // Step 6.a: NaN == NaN
+    return x !== x && y !== y;
+  }
+}
+
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+export function shallowEqual<T extends object>(
+  objA: T,
+  objB: T,
+  ignoreKey?: keyof T
+): boolean {
+  if (is(objA, objB)) {
+    return true;
+  }
+
+  if (
+    typeof objA !== 'object' ||
+    objA === null ||
+    typeof objB !== 'object' ||
+    objB === null
+  ) {
+    return false;
+  }
+
+  const keysA = Object.keys(objA).filter(k => k !== ignoreKey);
+  const keysB = Object.keys(objB).filter(k => k !== ignoreKey);
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  // Test for A's keys different from B.
+  for (let i = 0; i < keysA.length; i++) {
+    if (
+      !hasOwnProperty.call(objB, keysA[i]) ||
+      !is(objA[keysA[i]], objB[keysA[i]])
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/lib/components/utils/TimeUtil.ts

@@ -0,0 +1,22 @@
+// Libs
+
+import { Duration } from 'moment';
+
+class TimeUtil {
+  public dayDiff(start: Duration, end: Duration) {
+    const startOfDay = start
+      .clone()
+      .subtract(start.hours(), 'hours')
+      .subtract(start.minutes(), 'minutes')
+      .subtract(start.seconds(), 'seconds')
+      .subtract(start.milliseconds(), 'milliseconds');
+    const timeDiff = Math.abs(
+      end.asMilliseconds() - startOfDay.asMilliseconds()
+    );
+    const diffDays = Math.floor(timeDiff / (1000 * 3600 * 24));
+    return diffDays;
+  }
+}
+
+const util = new TimeUtil();
+export default util;

package/src/lib/components/utils/Typescript.ts

@@ -0,0 +1,11 @@
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends Array<infer U>
+    ? Array<DeepPartial<U>>
+    : T[P] extends ReadonlyArray<infer UInner>
+    ? ReadonlyArray<DeepPartial<UInner>>
+    : DeepPartial<T[P]>;
+};
+
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

package/src/lib/declarations/import.d.ts

@@ -0,0 +1 @@
+declare module '*.svg';

package/src/lib/index.ts

@@ -0,0 +1,24 @@
+export * from './validators/index';
+export * from './components/button';
+export * from './components/checkbox';
+export * from './components/dropdown';
+export * from './components/dynamicSubmit';
+export * from './components/form';
+export * from './components/inputGroup';
+export * from './components/inputHeader';
+export * from './components/money/Money';
+export * from './components/openingHours/openingHoursDay';
+export * from './components/openingHours/openingHoursSpecial';
+export * from './components/openingHours/openingHoursWeek';
+export * from './components/radio';
+export * from './components/radioContainer';
+export * from './components/select/Select';
+export * from './components/submit';
+export * from './components/tags';
+export * from './components/text';
+export * from './components/textArea';
+export * from './components/time';
+export * from './components/timeSpan';
+export * from './components/themeProvider';
+export * from './components/bookingCalendar';
+export * from './components/externalValidationComponent';

package/src/lib/scss/components/base/index.scss

@@ -0,0 +1 @@
+@import './input/index.scss';

package/src/lib/scss/components/base/input/index.scss

@@ -0,0 +1 @@
+@import './input.scss';

package/src/lib/scss/components/base/input/input.scss

@@ -0,0 +1,237 @@
+> .input__group__border:first-child {
+  border-top: none;
+}
+.input__group__border {
+  border-top: 1px solid $input-border-color;
+}
+
+.input__divider {
+  border-top: 1px solid $input-border-color;
+  padding: 1rem;
+  background-color: $input-divider-color;
+}
+
+.label--help-icon {
+  cursor: pointer;
+}
+
+.input__base {
+  position: relative;
+  border-bottom: 1px solid $input-border-color;
+  width: 100%; // Chrome yellow tint fix
+  transition: 0.5s ease border-color;
+  margin-bottom: 1rem;
+  margin-top: 1.25rem;
+  input:-webkit-autofill {
+    box-shadow: 0 0 0 1000px white inset !important;
+    -webkit-box-shadow: 0 0 0 1000px white inset !important;
+  }
+  /* VALIDATION ======================================= */
+  .validation__container {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    color: $input-validation-color;
+    overflow: hidden;
+    font-size: $input-validation-fontsize;
+  }
+  .validation__ul {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    transform: translateY(-20px);
+    transition: 0.5s transform ease-in-out;
+    .validation__item {
+      white-space: nowrap;
+      margin-left: 10px;
+      list-style: none;
+    }
+  }
+  &.validation__error {
+    .validation__ul {
+      transform: translateY(0);
+    }
+    .bar:before,
+    .bar:after {
+      background-color: $input-validation-error-bar-color;
+    }
+    border-bottom: 1px solid $input-validation-error-border-color !important;
+  }
+  /* INFO TEXT ======================================= */
+  .info-text__container {
+    position: absolute;
+    top: 100%;
+    left: 5px;
+    overflow: hidden;
+    font-size: $input-validation-fontsize;
+  }
+  .info-text__ul {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    transform: translateY(0);
+    transition: 0.5s transform ease-in-out;
+    .info-text__item {
+      white-space: nowrap;
+      list-style: none;
+    }
+  }
+  &.validation__error {
+    .info-text__ul {
+      transform: translateY(-20px);
+    }
+  }
+  /* LABEL ======================================= */
+  label,
+  span.label-classname {
+    color: $input-label-color;
+    font-size: 18px;
+    font-weight: normal;
+    position: absolute; // pointer-events: none;
+    left: 5px;
+    top: 5px;
+    transition: 0.2s ease all;
+    margin-bottom: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+  }
+  $dim: 1.1rem;
+  .label--help-icon {
+    pointer-events: auto;
+    bottom: 0.35rem;
+    margin-left: 0.25rem;
+    background-color: $input-label-color;
+    border-radius: 50%;
+    color: $input-text-color--white;
+    text-align: center;
+    height: $dim;
+    width: $dim;
+    min-width: $dim;
+    line-height: $dim;
+    font-size: $dim - 0.3;
+    display: inline-block;
+    transition: 0.2s ease all;
+  }
+  /* active state */
+  input:placeholder-shown ~ label,
+  input:focus ~ label,
+  .filled ~ label,
+  select:focus ~ label,
+  textarea:focus ~ label,
+  label.label--focused,
+  span.label-classname.label--focused {
+    top: -1rem;
+    font-size: 14px;
+    $dim-dif: -0.2rem;
+    .label--help-icon {
+      bottom: 0.25rem;
+      height: $dim + $dim-dif;
+      width: $dim + $dim-dif;
+      min-width: $dim + $dim-dif;
+      line-height: $dim + $dim-dif;
+      font-size: $dim - 0.2 + $dim-dif;
+    }
+  }
+  input:focus ~ label,
+  .filled ~ label,
+  select:focus ~ label,
+  textarea:focus ~ label,
+  label.label--focused,
+  span.label-classname.label--focused {
+    color: $primary-color;
+  }
+  /* BOTTOM BARS ================================= */
+  .bar {
+    position: absolute;
+    bottom: 0;
+    display: block;
+    width: 100%;
+  }
+  .bar:before,
+  .bar:after {
+    content: '';
+    height: 2px;
+    width: 0;
+    bottom: 0px;
+    position: absolute;
+    background-color: $primary-color;
+    transition: 0.2s ease height, 0.5s ease background-color;
+  }
+  .bar:before {
+    left: 50%;
+  }
+  .bar:after {
+    right: 50%;
+  }
+  /* active state */
+  input:focus ~ .bar:before,
+  input:focus ~ .bar:after,
+  textarea:focus ~ .bar:before,
+  textarea:focus ~ .bar:after,
+  select:focus ~ .bar:before,
+  select:focus ~ .bar:after,
+  label:focus ~ .bar:before,
+  label:focus ~ .bar:after,
+  .bar.focused:before,
+  .bar.focused:after {
+    width: 50%;
+  }
+  /* HIGHLIGHTER ================================== */
+  .highlight {
+    position: absolute;
+    height: 24px;
+    width: 100px;
+    bottom: 5px;
+    left: 0;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  /* active state */
+  input:focus ~ .highlight,
+  select:focus ~ .highlight {
+    animation: inputHighlighter 0.3s ease;
+  }
+  input:focus {
+    outline: none;
+  }
+  input:disabled,
+  select:disabled {
+    cursor: not-allowed;
+    color: $input-label-color;
+    background: transparent;
+  }
+  .input__button {
+    display: inline-block; //background-color: $primary-color;
+    padding: 6px 10px 7px 10px;
+    svg.material-design-icon,
+    & {
+      font-weight: bold;
+      transition: 0.2s all;
+      color: $input-label-color;
+      fill: $input-label-color;
+      &:hover {
+        color: $primary-color;
+        fill: $primary-color;
+      }
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+}
+
+/* ANIMATIONS ================ */
+
+@keyframes inputHighlighter {
+  from {
+    background: $primary-color;
+  }
+  to {
+    width: 0;
+    background: transparent;
+  }
+}

package/src/lib/scss/components/bookingCalendar/bookingCalendar.scss

@@ -0,0 +1,272 @@
+$border-color: $input-border-color;
+$border-color-dark: black;
+.bookingCalendar {
+  display: flex;
+  flex-direction: column;
+}
+.bookingCalendar__table {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  position: relative;
+  // To make sure height 100% works in td-s
+  height: 100%;
+  .bookingCalendar__laneContainer,
+  .bookingCalendar__laneHeaderContainer {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .bookingCalendar__laneHeaderContainer {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid $border-color;
+    border-right: 1px solid $border-color-dark;
+    box-shadow: none;
+  }
+  .bookingCalendar__laneContainer--first,
+  .bookingCalendar__laneHeaderContainer--first {
+    padding-top: 1rem;
+  }
+  .bookingCalendar__laneHeaderContainer--first {
+    border-top: 1px solid $border-color;
+  }
+  .bookingCalendar__laneContainer--last,
+  .bookingCalendar__laneHeaderContainer--last {
+    padding-bottom: 1rem;
+  }
+  .bookingCalendar__laneContainer,
+  .bookingCalendar__lanesHeaderContainer,
+  .bookingCalendar__lanesHeaderHeaderContainer,
+  .bookingCalendar__laneHeaderContainer {
+    box-shadow: 1px 0 0 0 $border-color;
+  }
+  .bookingCalendar__lanesHeaderHeaderContainer {
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid $border-color-dark;
+  }
+  .bookingCalendar__laneContainer--last {
+    border-bottom: 1px solid $input-border-color;
+  }
+}
+.bookingCalendar__lane {
+  display: flex;
+  flex-direction: row;
+  z-index: 1;
+  min-height: 2rem;
+}
+.bookingCalendar__laneHeader {
+  height: 100%;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+.bookingCalendar__item {
+  position: relative;
+  background-color: rgba($primary-color, 0.9);
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.bookingCalendar__renderItem {
+  padding: 0.5rem;
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 0.25rem;
+    display: none;
+  }
+}
+
+.bookingCalendar__renderItem--cutStart {
+  padding-left: 1rem;
+  &::before {
+    display: block;
+    left: 0;
+    background: repeating-linear-gradient(
+      45deg,
+      white,
+      white 5px,
+      transparent 5px,
+      transparent 10px
+    );
+    z-index: 1;
+  }
+}
+.bookingCalendar__renderItem--cutEnd {
+  padding-right: 1rem;
+  &::after {
+    display: block;
+    right: 0;
+    background: repeating-linear-gradient(
+      -45deg,
+      white,
+      white 5px,
+      transparent 5px,
+      transparent 10px
+    );
+    z-index: 1;
+  }
+}
+
+.bookingCalendar__grid {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+  pointer-events: none;
+  grid-column: 2;
+  grid-row-start: 2;
+}
+
+.bookingCalendar__grid__item {
+  height: 100%;
+  width: 0.5px;
+  // transform: translateX(-50%);
+  background-color: $border-color-dark;
+  position: absolute;
+}
+
+.bookingCalendar__lanesHeader {
+  /*box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.08);*/
+  .bookingCalendar__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 1px 0 $border-color-dark;
+    &:last-of-type {
+      box-shadow: none;
+    }
+  }
+  .bookingCalendar__renderItem {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+  }
+  .bookingCalendar__lanesHeader__renderItem__button {
+    white-space: normal;
+    height: 100%;
+    width: 100%;
+    text-align: end;
+    text-transform: none;
+    border-left: 1px solid $border-color;
+  }
+  .bookingCalendar__lanesHeader__renderItem__button__mutedText {
+    opacity: 0.8;
+  }
+  .bookingCalendar__lanesHeader__renderItem__button__mutedText--split {
+    display: flex;
+    > span:first-child {
+      margin-right: auto;
+    }
+  }
+  .bookingCalendar__item:first-of-type
+    .bookingCalendar__lanesHeader__renderItem__button {
+    border-left: none;
+  }
+}
+
+.bookingCalendar__controls {
+  display: flex;
+  padding: 1rem 0;
+  padding-bottom: 0.5rem;
+  align-items: center;
+  .bookingCalendar__controls__monthLabel {
+    display: flex;
+    align-items: center;
+  }
+  .bookingCalendar__controls__buttonsContainer {
+    margin-left: auto;
+  }
+  .bookingCalendar__controls__zoomBookingsButton {
+    svg {
+      transform: rotate(90deg);
+    }
+  }
+  .bookingCalendar__controls__zoomLevelsContainer {
+    margin-left: auto;
+  }
+  .bookingCalendar__controls__zoomLevelsButton {
+    text-transform: none;
+    display: flex;
+    align-items: center;
+    svg {
+      margin-right: 0.5rem;
+    }
+  }
+}
+
+.bookingCalendar__datePicker {
+  display: flex;
+  height: 100%;
+  .bookingCalendar__datePicker__button {
+    height: 100%;
+    width: 100%;
+    text-transform: none;
+  }
+}
+
+.bookingCalendar__timeAxis {
+  padding-top: 0.5rem;
+  width: 100%;
+  overflow: visible;
+  svg {
+    overflow: visible;
+  }
+  text {
+    // text-anchor: middle;
+  }
+}
+
+/*.bookingCalendar__timeAxis__item {
+  position: absolute;
+  display: inline-block;
+  transform: rotate(75deg);
+}*/
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.bookingCalendar__selection__container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+  grid-column: 2;
+  grid-row-start: 2;
+}
+
+.bookingCalendar__selection {
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 1px dashed white;
+  position: absolute;
+  animation-duration: 0.2s;
+  animation-name: fadeIn;
+  user-select: none;
+}
+
+.bookingCalendar__selection--fadeout {
+  animation-duration: 0.3s;
+  animation-name: fadeOut;
+  animation-fill-mode: forwards;
+}

package/src/lib/scss/components/bookingCalendar/index.scss

@@ -0,0 +1 @@
+@import './bookingCalendar.scss';