guestbell-forms 3.0.39 → 3.0.40

package/src/lib/scss/components/tags/tags.scss

@@ -0,0 +1,128 @@
+.tags-input {
+  display: inline-block;
+  margin-top: 20px;
+  max-width: 37.5rem;
+  /*align-items: center;
+  display: flex;
+  min-height: 2.25rem;*/
+  .tags-input__text-input {
+    margin: 0;
+    padding-right: 0;
+    border-bottom: none;
+  }
+  .tags-input__tag {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    padding-left: 0.25rem;
+    margin-right: 0.25rem;
+    margin-bottom: 0.125rem;
+    margin-top: 0.125rem;
+    &.tags-input__tag-chip {
+      border: 1px solid;
+      border-radius: 1.5rem;
+    }
+  }
+  .tags-input__tags__wrapper {
+    display: flex;
+    align-items: center;
+  }
+  .tags-input__tag__wrapper {
+    display: inline-flex;
+    flex-wrap: wrap;
+    padding-top: 0.25rem;
+    padding-bottom: 0.125rem;
+  }
+  &.tags-input--readOnly {
+    border-bottom-color: transparent !important;
+    input:focus ~ .bar:before,
+    input: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: initial;
+    }
+    input:focus ~ .highlight,
+    select:focus ~ .highlight {
+      animation: none;
+    }
+    .tags-input__tag__wrapper {
+      min-height: 34px;
+    }
+  }
+  &.input__base label,
+  &.input__base span.label-classname {
+    top: calc(100% - 32px);
+  }
+  &.input__base {
+    label.label--focused,
+    &.tags-input--hasPlaceholder label {
+      top: -1rem;
+      font-size: 14px;
+    }
+  }
+  &.tags-input--mobile {
+    z-index: 9999;
+    position: fixed;
+    top: 0;
+    left: 0.5rem;
+    right: 0.5rem;
+    width: calc(100vw - 1rem);
+    margin-bottom: 1rem;
+    margin-top: 1.25rem;
+  }
+}
+
+.tags-input__leaveMobileTagsButton {
+  padding-right: 0;
+}
+
+.tags-input__mobileBackdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: $input-bg-color;
+}
+
+.tags-input__suggestions {
+  /*position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;*/
+  background-color: white;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
+  z-index: 999;
+  .tags-input__suggestion {
+    text-transform: initial;
+    &.tags-input__suggestion--preselected {
+      background-color: $input-border-color;
+    }
+  }
+  > ul {
+    padding: 0;
+    margin: 0;
+    > li {
+      list-style: none;
+    }
+  }
+  .tags-input__suggestions__defaultLoading {
+    position: absolute;
+    top: -3px;
+    left: 0;
+    right: 0;
+    height: 2px;
+  }
+  /*&.tags-input__suggestions--loading::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+  }*/
+}

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

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

package/src/lib/scss/components/text/text.scss

@@ -0,0 +1,42 @@
+.text-input {
+  display: inline-block;
+  max-width: 37.5rem;
+  &.text-input--readOnly {
+    border-bottom-color: transparent !important;
+    input:focus ~ .bar:before,
+    input: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: initial;
+    }
+    input:focus ~ .highlight,
+    select:focus ~ .highlight {
+      animation: none;
+    }
+  }
+  .text-input__textWrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+  input {
+    padding: 5px;
+    color: inherit;
+    outline: 0;
+    border: none;
+    flex: 1;
+    background-color: transparent;
+    text-overflow: ellipsis;
+  }
+  .text-input__clearButton {
+    padding-left: 0;
+  }
+  .text-input__clearButton--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}

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

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

package/src/lib/scss/components/textArea/textArea.scss

@@ -0,0 +1,32 @@
+.textArea-input {
+  max-width: 37.5rem;
+  &.textArea-input--readOnly {
+    border-bottom-color: transparent !important;
+    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: initial;
+    }
+    textarea:focus ~ .highlight,
+    select:focus ~ .highlight {
+      animation: none;
+    }
+  }
+  textarea {
+    padding: 6px 10px 5px 5px;
+    color: $input-text-color;
+    outline: 0;
+    border: none;
+    width: 100%;
+    background-color: transparent;
+    text-overflow: ellipsis;
+    display: block;
+  }
+}

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

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

package/src/lib/scss/components/time/time.scss

@@ -0,0 +1,111 @@
+.time-input {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  max-width: 37.5rem;
+  > div,
+  > span {
+    display: inline-block;
+    position: relative;
+    align-self: baseline;
+  }
+  display: inline-flex !important;
+  align-items: center;
+  // justify-content: center;
+  // border-bottom: none !important;
+  // width: initial !important;
+  .input-padding {
+    margin: 10px 5px 10px 5px;
+    position: relative;
+  }
+  input {
+    padding: 0;
+    color: $input-text-color;
+    outline: 0;
+    border: none;
+    width: 100%;
+    text-align: center;
+    border: 1px solid $input-border-color;
+    height: 26px;
+    line-height: 0;
+    background-color: transparent;
+  }
+  .highlight {
+    position: absolute;
+    left: 3px;
+    right: 3px;
+    top: 3px;
+    bottom: 3px;
+    width: initial;
+    height: initial;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  input[type='number'] {
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+  }
+  .time-input__arrows__container {
+    position: relative;
+    display: inline-block;
+  }
+  input:focus ~ label,
+  input.filled ~ label,
+  select:focus ~ label,
+  select.filled ~ label,
+  label.label--focused {
+    top: -17px;
+    font-size: 14px;
+    color: $primary-color;
+  }
+  button {
+    &.plus {
+      top: -12px;
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+    &.minus {
+      bottom: -12px;
+    }
+    padding: 0 5px;
+    line-height: 0;
+    overflow: hidden;
+    border: none;
+    background: transparent;
+    position: absolute;
+    left: 1px;
+    /* Styling the down arrow */
+    border: none;
+    cursor: pointer;
+    &:focus {
+      outline: 0;
+    }
+    &:focus-visible {
+      outline: 1px dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+    }
+    svg {
+      transition: 0.2s all;
+      fill: $input-label-color;
+    }
+    &:hover,
+    &:active,
+    &:focus {
+      svg {
+        fill: $primary-color;
+      }
+    }
+  }
+  .time-input__time {
+    width: 26px;
+    display: inline-block;
+  }
+  .time-input__am-pm {
+    color: $input-label-color;
+  }
+}

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

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

package/src/lib/scss/components/timeSpan/timeSpan.scss

@@ -0,0 +1,115 @@
+.timeSpan-input {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  max-width: 37.5rem;
+  > div,
+  > span {
+    display: inline-block;
+    position: relative;
+    align-self: baseline;
+  }
+  display: inline-flex !important;
+  align-items: center;
+  // border-bottom: none !important;
+  // width: initial !important;
+  .input-padding {
+    margin: 10px 5px 10px 5px;
+    position: relative;
+  }
+  input {
+    padding: 0;
+    color: $input-text-color;
+    outline: 0;
+    border: none;
+    width: 100%;
+    text-align: center;
+    border: 1px solid $input-border-color;
+    height: 26px;
+    line-height: 0;
+    background-color: transparent;
+  }
+  .highlight {
+    position: absolute;
+    left: 3px;
+    right: 3px;
+    top: 3px;
+    bottom: 3px;
+    width: initial;
+    height: initial;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  input[type='number'] {
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+  }
+  .timeSpan-input__arrows__container {
+    position: relative;
+    display: inline-block;
+  }
+  input:focus ~ label,
+  input.filled ~ label,
+  select:focus ~ label,
+  select.filled ~ label,
+  label.label--focused {
+    top: -17px;
+    font-size: 14px;
+    color: $primary-color;
+  }
+  button {
+    &.plus {
+      top: -12px;
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+    &.minus {
+      bottom: -12px;
+    }
+    padding: 0 5px;
+    line-height: 0;
+    overflow: hidden;
+    border: none;
+    background: transparent;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    /* Styling the down arrow */
+    border: none;
+    cursor: pointer;
+    &:focus {
+      outline: 0;
+    }
+    &:focus-visible {
+      outline: 1px dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+    }
+    svg {
+      transition: 0.2s all;
+      fill: $input-label-color;
+    }
+    &:hover,
+    &:active,
+    &:focus {
+      svg {
+        fill: $primary-color;
+      }
+    }
+  }
+  .timeSpan-input__time {
+    width: 26px;
+    display: inline-block;
+  }
+  .timeSpan-input__time--ms {
+    width: 40px;
+    display: inline-block;
+  }
+  .timeSpan-input__am-pm {
+    color: $input-label-color;
+  }
+}

package/src/lib/scss/index.scss

@@ -0,0 +1,8 @@
+// Vendor
+@import '~react-datepicker/dist/react-datepicker.css';
+// Site
+@import './variables/colors';
+@import './variables/buttons';
+@import './variables/common';
+@import './styles/index.scss';
+@import './components/index.scss';

package/src/lib/scss/styles/base.scss

@@ -0,0 +1,7 @@
+.line-height--0 {
+  line-height: 0 !important;
+}
+
+.transform-rotate--45 {
+  transform: rotate(45deg);
+}

package/src/lib/scss/styles/index.scss

@@ -0,0 +1,2 @@
+@import './base.scss';
+@import './react-tippy.scss';

package/src/lib/scss/styles/react-tippy.scss

@@ -0,0 +1,4 @@
+.tippy-tooltip {
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
+    0 3px 5px -1px rgba(0, 0, 0, 0.3);
+}

package/src/lib/scss/variables/_buttons.scss

@@ -0,0 +1,6 @@
+$white-color: white;
+$success-color: #5cb85c;
+$info-color: #a8dadc;
+$error-color: #d9534f;
+$warning-color: #f0ad4e;
+$gray-color: #555555;

package/src/lib/scss/variables/_colors.scss

@@ -0,0 +1 @@
+$primary-color: #10bdc7;

package/src/lib/scss/variables/_common.scss

@@ -0,0 +1,12 @@
+$input-bg-color: white;
+$input-divider-color: lighten(#000, 97.5%);
+$input-border-color: lighten(#000, 93.5%);
+$input-label-color: lighten(#000, 60%);
+$input-text-color: lighten(#000, 33.5%);
+$input-text-color--white: white;
+$link-color: $primary-color;
+$hover-color: rgba(black, 0.01);
+$input-validation-color: #ff5d5d;
+$input-validation-fontsize: 12px;
+$input-validation-error-bar-color: #ff5d5d;
+$input-validation-error-border-color: #ffbbbb;

package/src/lib/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "outDir": "../../build",
+    "moduleResolution": "node",
+    "target": "es5",
+    "module": "esnext",
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "lib": ["es7", "dom"],
+    "types": ["node"]
+  },
+  "exclude": ["bin", "node_modules"]
+}

package/src/lib/types/ElementOverrideProp.ts

@@ -0,0 +1,3 @@
+export type ElementOverrideProp<P> = {
+  props: Partial<P>;
+};

package/src/lib/types/Theme.ts

@@ -0,0 +1,5 @@
+import { ThemeOverrides } from './ThemeOverrides';
+
+export type Theme = {
+  overrides?: ThemeOverrides;
+};

package/src/lib/types/ThemeOverrides.ts

@@ -0,0 +1,46 @@
+import { TextProps } from '../components/text';
+import { ElementOverrideProp } from './ElementOverrideProp';
+import { ButtonProps } from '../components/button';
+import { CheckboxProps } from '../components/checkbox';
+import { DropdownProps } from '../components/dropdown';
+import { DynamicSubmitProps } from '../components/dynamicSubmit';
+import { FormProps } from '../components/form';
+import { InputGroupProps } from '../components/inputGroup';
+import { InputHeaderProps } from '../components/inputHeader';
+import { MoneyProps } from '../components/money';
+import { NumberInputProps } from '../components/numberInput';
+import { RadioContainerProps } from '../components/radioContainer';
+import { OpeningHoursDayProps } from '../components/openingHours/openingHoursDay';
+import { OpeningHoursWeekProps } from '../components/openingHours/openingHoursWeek';
+import { OpeningHoursSpecialProps } from '../components/openingHours/openingHoursSpecial';
+import { SubmitProps } from '../components/submit';
+import { TagsProps } from '../components/tags';
+import { TextAreaProps } from '../components/textArea';
+import { TimeProps } from '../components/time';
+import { TimeSpanProps } from '../components/timeSpan';
+import { RadioProps } from '../components/radio';
+import { SelectProps } from '../components/select';
+
+export type ThemeOverrides = {
+  button?: ElementOverrideProp<ButtonProps>;
+  checkbox?: ElementOverrideProp<CheckboxProps>;
+  dropdown?: ElementOverrideProp<DropdownProps>;
+  dynamicSubmit?: ElementOverrideProp<DynamicSubmitProps>;
+  form?: ElementOverrideProp<FormProps>;
+  inputGroup?: ElementOverrideProp<InputGroupProps>;
+  inputHeader?: ElementOverrideProp<InputHeaderProps>;
+  money?: ElementOverrideProp<MoneyProps>;
+  numberInput?: ElementOverrideProp<NumberInputProps>;
+  radio?: ElementOverrideProp<RadioProps>;
+  radioContainer?: ElementOverrideProp<RadioContainerProps>;
+  openingHoursDay?: ElementOverrideProp<OpeningHoursDayProps>;
+  openingHoursWeek?: ElementOverrideProp<OpeningHoursWeekProps>;
+  openingHoursSpecial?: ElementOverrideProp<OpeningHoursSpecialProps>;
+  select?: ElementOverrideProp<SelectProps>;
+  submit?: ElementOverrideProp<SubmitProps>;
+  tags?: ElementOverrideProp<TagsProps>;
+  text?: ElementOverrideProp<TextProps>;
+  textArea?: ElementOverrideProp<TextAreaProps>;
+  time?: ElementOverrideProp<TimeProps>;
+  timeSpan?: ElementOverrideProp<TimeSpanProps>;
+};

package/src/lib/validators/EmailValidator.ts

@@ -0,0 +1,15 @@
+import { IBaseValidator } from './base';
+
+export class EmailValidator implements IBaseValidator {
+  public Validate(
+    value: string,
+    isRequired: boolean,
+    addError: (error: string) => void
+  ): boolean {
+    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
+      return true;
+    }
+    addError('Invalid email');
+    return false;
+  }
+}

package/src/lib/validators/LatitudeValidator.ts

@@ -0,0 +1,25 @@
+import { IBaseValidator } from './base';
+import { NumberValidator } from './NumberValidator';
+
+export class LatitudeValidator implements IBaseValidator {
+  public Validate(
+    value: string,
+    isRequired: boolean,
+    addError: (error: string) => void
+  ): boolean {
+    let validNumber = new NumberValidator().Validate(
+      value,
+      isRequired,
+      addError
+    );
+    if (validNumber) {
+      let num = Number(value);
+      if (-90 > num || num > 90) {
+        addError('Invalid latitude');
+        return false;
+      }
+      return true;
+    }
+    return false;
+  }
+}

package/src/lib/validators/LongitudeValidator.ts

@@ -0,0 +1,25 @@
+import { IBaseValidator } from './base';
+import { NumberValidator } from './NumberValidator';
+
+export class LongitudeValidator implements IBaseValidator {
+  public Validate(
+    value: string,
+    isRequired: boolean,
+    addError: (error: string) => void
+  ): boolean {
+    let validNumber = new NumberValidator().Validate(
+      value,
+      isRequired,
+      addError
+    );
+    if (validNumber) {
+      let num = Number(value);
+      if (-180 > num || num > 180) {
+        addError('Invalid longitude');
+        return false;
+      }
+      return true;
+    }
+    return false;
+  }
+}

package/src/lib/validators/NumberValidator.ts

@@ -0,0 +1,50 @@
+import { IBaseValidator } from './base';
+export interface NumberValidatorConfig {
+  min?: number;
+  max?: number;
+  minInclusive?: number;
+  maxInclusive?: number;
+}
+
+export class NumberValidator implements IBaseValidator {
+  private config: NumberValidatorConfig;
+  constructor(
+    config: NumberValidatorConfig = { min: undefined, max: undefined }
+  ) {
+    this.config = config;
+  }
+  public Validate(
+    value: string,
+    isRequired: boolean,
+    addError: (error: string) => void
+  ): boolean {
+    let num = Number(value);
+    if (!isNaN(num)) {
+      if (this.config.min !== undefined && num <= this.config.min) {
+        addError('Min: ' + this.config.min);
+        return false;
+      }
+      if (this.config.max !== undefined && num >= this.config.max) {
+        addError('Max: ' + (this.config.max - 1));
+        return false;
+      }
+      if (
+        this.config.minInclusive !== undefined &&
+        num < this.config.minInclusive
+      ) {
+        addError('Min: ' + this.config.minInclusive);
+        return false;
+      }
+      if (
+        this.config.maxInclusive !== undefined &&
+        num >= this.config.maxInclusive
+      ) {
+        addError('Max: ' + (this.config.maxInclusive - 1));
+        return false;
+      }
+      return true;
+    }
+    addError('Invalid number');
+    return false;
+  }
+}