@bnsights/bbsf-controls 1.0.65 → 1.0.67

package/src/lib/assets/fontawesome/scss/brands.scss

@@ -0,0 +1,30 @@
+/*!
+ * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{ $fa-css-prefix }-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
+}
+
+.fab,
+.fa-brands {
+  font-family: 'Font Awesome 6 Brands';
+  font-weight: 400;
+}
+
+@each $name, $icon in $fa-brand-icons {
+  .#{$fa-css-prefix}-#{$name}:before { content: fa-content($icon); }
+}

package/src/lib/assets/fontawesome/scss/fontawesome.scss

@@ -0,0 +1,21 @@
+/*!
+ * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+// Font Awesome core compile (Web Fonts-based)
+// -------------------------
+
+@import 'functions';
+@import 'variables';
+@import 'mixins';
+@import 'core';
+@import 'sizing';
+@import 'fixed-width';
+@import 'list';
+@import 'bordered-pulled';
+@import 'animated';
+@import 'rotated-flipped';
+@import 'stacked';
+@import 'icons';
+@import 'screen-reader';

package/src/lib/assets/fontawesome/scss/regular.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{ $fa-css-prefix }-font-regular: normal 400 1em/1 "#{ $fa-style-family }";
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
+}
+
+.far,
+.fa-regular {
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 400;
+}

package/src/lib/assets/fontawesome/scss/solid.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{ $fa-css-prefix }-font-solid: normal 900 1em/1 "#{ $fa-style-family }";
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
+}
+
+.fas,
+.fa-solid {
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 900;
+}

package/src/lib/assets/fontawesome/scss/v4-shims.scss

@@ -0,0 +1,11 @@
+/*!
+ * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+// V4 shims compile (Web Fonts-based)
+// -------------------------
+
+@import 'functions';
+@import 'variables';
+@import 'shims';

package/src/lib/assets/sass/base.scss

@@ -0,0 +1,180 @@
+/*form control*/
+.bbsf-control.form-group {
+  margin-bottom: 1.75rem;
+
+  .bbsf-label {
+    font-size: 13px;
+    color: $label-color;
+    font-weight: 500;
+    margin-bottom: 0.8rem;
+    word-break: break-all;
+  }
+
+  .bbsf-input-container {
+    position: relative;
+
+    &.p-40px {
+      input, textarea {
+        padding-right: 40px;
+
+        &[dir = "rtl"] {
+          padding-left: 40px !important;
+          padding-right: 1rem !important;
+        }
+      }
+    }
+
+    .form-control {
+      border-color: $light-gray;
+      padding: 0.75rem 1rem;
+      font-size: 13px;
+      border-radius: $bbsf-rounded;
+      height: 45px;
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+
+      &.is-invalid {
+        background-position:right calc(0.375em + 0.3875rem) center;
+
+        &[dir = "rtl"] {
+          background-position: left calc(0.375em + 0.3875rem) center;
+        }
+      }
+
+      &[dir = "rtl"] {
+        + .copy-clipboard {
+          left: 0px;
+          right: auto;
+          border-top-left-radius: $bbsf-rounded;
+          border-bottom-left-radius: $bbsf-rounded;
+          border-top-right-radius: 0px;
+          border-bottom-right-radius: 0px;
+        }
+      }
+    }
+
+    .form-control:focus {
+      border-color: #d5d5d5;
+      box-shadow: none;
+    }
+    /* input with icon*/
+    .bbsf-icon {
+      z-index: 4;
+      position: absolute;
+      transform: translate(-50%, -50%) !important;
+      top: 50% !important;
+
+      svg {
+        height: 1.5rem !important;
+        width: 1.5rem !important
+      }
+    }
+
+    .bbsf-left-icon {
+      position: absolute;
+      transform: translate(0, -50%) !important;
+      top: 50% !important;
+      left: 0px;
+      margin-left: 0.7rem !important;
+
+      + input {
+        padding-left: 2.7rem !important;
+      }
+    }
+
+    .bbsf-right-icon {
+      position: absolute;
+      transform: translate(0, -50%) !important;
+      top: 50% !important;
+      right: 0px;
+      margin-right: 0.7rem !important;
+
+      + input {
+        padding-right: 2.7rem !important;
+      }
+    }
+    //copy to clipboard
+    .copy-clipboard {
+      position: absolute;
+      top: 50%;
+      right: 0px;
+      transform: translate(0px, -50%);
+      padding: 10px;
+      background: #eeeeee;
+      border-radius: $bbsf-rounded;
+      border-top-left-radius: 0px;
+      border-bottom-left-radius: 0px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      i {
+        color: #8b8b8b;
+      }
+
+      &:hover {
+        background: #e5e5e5
+      }
+    }
+  }
+  /* horizontal form control*/
+  .bbsf-horizontal {
+    display: flex;
+    align-items: center;
+
+    .bbsf-label {
+      margin-right: 1rem;
+      white-space: nowrap;
+      margin-bottom: 0px;
+    }
+
+    .bbsf-input-container {
+      width: 100%;
+    }
+  }
+
+  @media only screen and (max-width: 768px) {
+    .bbsf-horizontal {
+      display: block;
+
+      .bbsf-label {
+        margin-right: 0;
+        margin-bottom: 1rem;
+      }
+    }
+  }
+
+  .subtext-container {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    //validation
+    .bbsf-validation, .bbsf-character-count, .bbsf-word-count, .bbsf-control-desc {
+      margin-top: 0.3rem;
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .bbsf-validation, .bbsf-character-count {
+      color: $danger;
+    }
+    //word count and description
+    .bbsf-word-count, .bbsf-control-desc {
+      color: $subtext-color;
+    }
+  }
+}
+  //buttons
+
+  .btn-brand {
+    background: $primary;
+    color: white;
+    border: $primary;
+
+    &:hover {
+      background: #3781d2;
+      color: white;
+    }
+  }

package/src/lib/assets/sass/checkbox.scss

@@ -0,0 +1,39 @@
+
+.bbsf-checkbox {
+  .bbsf-input-container {
+    display: flex;
+    align-items: start;
+
+    .label-subtext-container {
+      margin-left: 0.55rem;
+
+      .bbsf-label {
+        margin-bottom: 0px;
+      }
+    }
+
+    .bbsf-checkbox-input {
+      &[type="checkbox"] {
+        width: 18px;
+        height: 18px;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 6px;
+        background: $light-gray;
+        transition: background-color 0.15s ease-in-out;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 55%;
+      }
+    }
+
+    .bbsf-checkbox-input:checked {
+      background-color: $primary;
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23FFFFFF'/%3e%3c/svg%3e");
+    }
+
+    .bbsf-checkbox-input:disabled {
+      cursor: not-allowed;
+    }
+  }
+}

package/src/lib/assets/sass/confirmation-modal.scss

@@ -0,0 +1,53 @@
+.swal2-container {
+
+  .swal2-popup.swal2-modal {
+    padding: 20px;
+    width: 30em;
+
+    .swal2-close {
+      font-size: 30px;
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+
+    .swal2-icon {
+      margin: 1.5em auto 1.5em;
+
+      &.swal2-error {
+        border-color: rgba(241, 65, 108, 0.7) !important;
+
+        .swal2-x-mark-line-left {
+          background-color: rgba(241, 65, 108, 0.4) !important;
+        }
+      }
+    }
+
+    .swal2-title {
+      font-size: 1.2rem
+    }
+
+    .swal2-html-container {
+      font-size: 12px;
+      font-weight: 600;
+      color: #a0a0a0;
+    }
+
+    .swal2-cancel {
+      color: #9a9a9a;
+    }
+
+    .swal2-styled {
+      &:focus {
+        box-shadow: none !important
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .swal2-container {
+    .swal2-popup.swal2-modal {
+      width: 24em;
+    }
+  }
+}

package/src/lib/assets/sass/dropdown.scss

@@ -0,0 +1,167 @@
+.bbsf-dropdown.form-group {
+
+  .bbsf-input-container {
+
+    .form-control {
+      padding: 0px !important;
+      min-height: 45px;
+      height: auto;
+
+      &.is-invalid {
+        background-position: right calc(0.375em + 2rem) center;
+      }
+
+      .ng-select-container {
+        padding: 0.75rem 1rem;
+        cursor: pointer;
+        height: 100%;
+        height: 100%;
+        min-height: 45px;
+
+        .ng-arrow-wrapper {
+          margin-left: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .ng-arrow {
+            border-color: #999 #0000 #0000 #0000;
+            border-style: solid;
+            border-width: 5px 5px 2.5px;
+            margin-top: 5px;
+          }
+        }
+
+        .ng-clear-wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .ng-clear {
+            color: #e66f6f;
+            font-weight: 600;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px !important;
+          }
+        }
+
+        .ng-value-container {
+          align-items: center;
+
+          .ng-value-label {
+            color: #414350;
+            font-weight: 500;
+          }
+        }
+      }
+
+
+      .ng-dropdown-panel {
+        box-shadow: 0px 0px 11px 3px rgb(92 92 92 / 10%);
+        border-radius: $bbsf-rounded;
+        left: 0px;
+        background-color: white;
+
+        &.ng-select-bottom {
+          top: 52px;
+        }
+
+        &.ng-select-top {
+          bottom: 50px;
+        }
+
+        .ng-dropdown-panel-items {
+          .ng-option:last-child {
+            margin-bottom: 0px;
+          }
+
+          .ng-option {
+            padding: 0.75rem 1.25rem;
+            margin-bottom: 0.1rem;
+
+            .bbsf-label {
+              margin-bottom: 0px;
+              cursor: pointer;
+              white-space: break-spaces;
+            }
+
+            &.ng-option-selected, &:hover {
+              background-color: #f6f6f6;
+
+              .bbsf-label {
+                color: $primary;
+              }
+            }
+
+            &.ng-option-selected:after {
+              font-family: 'Font Awesome 5 Free';
+              content: "\f00c";
+              font-weight: 600;
+              position: absolute;
+              right: 4px;
+              top: 50%;
+              color: $primary;
+              font-size: 10px;
+              transform: translate(-14px, -50%);
+            }
+          }
+        }
+      }
+    }
+
+    .ng-select-opened {
+      .ng-select-container {
+        .ng-arrow-wrapper {
+          .ng-arrow {
+            top: -2px;
+            border-width: 0 5px 5px;
+            border-color: #0000 #0000 #999;
+          }
+        }
+      }
+    }
+  }
+
+  .ng-select-disabled {
+    background: #c5c5c5;
+
+    .ng-select-container {
+      cursor: not-allowed !important;
+    }
+  }
+
+  .ng-select-multiple {
+    .ng-select-container.ng-has-value {
+      padding-bottom: 0.65rem !important;
+    }
+
+    .ng-value {
+      background: $primary;
+      border-radius: 3px;
+      padding: 0px 5px;
+      margin-right: .4rem;
+      color: white;
+      font-size: 12px;
+      margin-bottom: 0.1rem;
+
+      .ng-value-label {
+        white-space: break-spaces;
+        color: white !important;
+      }
+    }
+
+    .ng-value-icon {
+      display: inline-block;
+      margin-right: .2rem;
+    }
+  }
+}
+
+.ng-has-value .ng-placeholder {
+  display: none;
+}
+
+.ng-option-selected {
+  position: relative;
+}

package/src/lib/assets/sass/image-upload.scss

@@ -0,0 +1,107 @@
+.bbsf-image-upload {
+  .bbsf-input-container {
+    &.ngx-dz-disabled {
+      cursor: not-allowed;
+      pointer-events: auto;
+    }
+
+    height: 140px;
+    display: flex;
+    justify-content: center;
+    border: 2px dashed #e4e4e4;
+    border-radius: $bbsf-rounded;
+    align-items: center;
+
+    .svg-and-validation {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .bbsf-validation-msg {
+      margin-top: 0.3rem;
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .dropzone-preview {
+      height: unset !important;
+      max-height: 140px;
+      min-height: unset !important;
+
+      img {
+        max-height: 100px;
+      }
+    }
+  }
+
+  .bbsf-cropper-modal {
+    &.modal {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: #0006;
+
+      .modal-content {
+        border: 0px;
+        border-radius: 0.475rem;
+
+        .modal-header {
+          .modal-title {
+            font-size: 18px;
+            color: #2b2b2b;
+          }
+
+          .btn-close {
+            font-size: 10px;
+            font-weight: 600;
+            background-color: #ededed;
+            margin: 0px;
+          }
+        }
+
+        .modal-body {
+          .cropper-btns {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .btn-group {
+              margin-right: 1rem;
+
+              .btn {
+                position: relative;
+                flex: 1 1 auto;
+                color: #535353;
+                background-color: #f5f8fa;
+                font-size: 13px;
+
+                &:hover {
+                  background-color: #eff2f5;
+                }
+
+                &:focus {
+                  box-shadow: none;
+                }
+              }
+            }
+          }
+        }
+
+        .modal-footer {
+          .btn-light {
+            background: #f5f8fa;
+            color: #7e8299;
+
+            &:hover {
+              background: #eff2f5;
+              color: #7e8299;
+            }
+          }
+        }
+      }
+    }
+  }
+}