@bnsights/bbsf-controls 1.0.65 → 1.0.66

package/lib/controls/ImageUpload/ImageUpload.component.d.ts

@@ -6,6 +6,7 @@ import { ImageUploadOptions } from '../../Shared/Models/ImageUploadOptions';
 import { CropperComponent } from 'angular-cropperjs';
 import { ControlValidationService, UtilityService } from '@bnsights/bbsf-utilities';
 import { GlobalSettings } from '../../Shared/services/GlobalSettings.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 export declare class ImageUploaderComponent implements OnInit {
     private zone;
     private controlUtility;
@@ -14,6 +15,7 @@ export declare class ImageUploaderComponent implements OnInit {
     UtilityService: UtilityService;
     private controlValidationService;
     private globalSettings;
+    private modalService;
     static controlContainerstatic: any;
     fileInput: ElementRef;
     files: File[];
@@ -42,7 +44,7 @@ export declare class ImageUploaderComponent implements OnInit {
     validationRules: any[];
     validationRulesasync: any[];
     maxFileSize: number;
-    constructor(zone: NgZone, controlUtility: ControlUtility, controlContainer: ControlContainer, ImageUplaoderControlHost: FormGroupDirective, UtilityService: UtilityService, controlValidationService: ControlValidationService, globalSettings: GlobalSettings);
+    constructor(zone: NgZone, controlUtility: ControlUtility, controlContainer: ControlContainer, ImageUplaoderControlHost: FormGroupDirective, UtilityService: UtilityService, controlValidationService: ControlValidationService, globalSettings: GlobalSettings, modalService: NgbModal);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     showImageUploader(element: HTMLElement): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bnsights/bbsf-controls",
-  "version": "1.0.65",
+  "version": "1.0.66",
   "peerDependencies": {
     "@angular/common": "~12.2.12",
     "@angular/core": "~12.2.12"

package/src/lib/assets/Style-rtl.scss

@@ -0,0 +1,144 @@
+
+/*bbsf controls*/
+.bbsf-control.form-group {
+  .bbsf-horizontal {
+    .bbsf-label {
+      margin-left: 1rem;
+      margin-right: 0px;
+    }
+  }
+
+  .bbsf-input-container {
+    position: relative;
+
+    &.p-40px {
+      input {
+        padding-left: 40px;
+        padding-right: 1rem;
+
+        &[dir = "ltr"] {
+          padding-left: 1rem !important;
+          padding-right: 40px !important;
+        }
+      }
+    }
+    /* input with icon*/
+    .bbsf-left-icon {
+      left: auto;
+      right: 0px;
+      margin-left: 0 !important;
+      margin-right: 1.5rem;
+
+      + input {
+        padding-right: 3.7rem;
+        padding-left: 0rem;
+      }
+    }
+
+    .bbsf-right-icon {
+      left: 0px;
+      right: auto;
+      margin-left: 1.5rem;
+      margin-right: 0;
+
+      + input {
+        padding-right: 0;
+        padding-left: 3.7rem;
+      }
+    }
+    //copy to clipboard
+    .copy-clipboard {
+      left: 0px;
+      right: auto;
+      border-top-left-radius: $rounded;
+      border-bottom-left-radius: $rounded;
+      border-top-right-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+
+    .form-control {
+      &[dir = "ltr"] {
+        + .copy-clipboard {
+          right: 0px !important;
+          left: auto !important;
+          border-top-right-radius: $rounded;
+          border-bottom-right-radius: $rounded;
+          border-top-left-radius: 0px;
+          border-bottom-left-radius: 0px;
+        }
+      }
+
+      &.is-invalid {
+        background-position: left calc(0.375em + 0.1875rem) center;
+      }
+    }
+  }
+}
+
+//checkbox
+.bbsf-checkbox {
+  .bbsf-input-container {
+    .label-subtext-container {
+      margin-top: -4px;
+      margin-right: 0.55rem;
+      margin-left: 0;
+    }
+  }
+}
+
+//dropdown
+.bbsf-dropdown {
+
+  .bbsf-input-container {
+
+    .form-control {
+      &.is-invalid {
+        background-position: left calc(0.375em + 2rem) center;
+      }
+
+      .ng-select-container {
+
+        .ng-arrow-wrapper {
+          margin-right: 10px;
+          margin-left: 0px;
+        }
+      }
+
+      .ng-dropdown-panel {
+
+        .ng-dropdown-panel-items {
+          .ng-option {
+            &.ng-option-selected:after {
+              left: 4px;
+              right: 94%;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ng-select-multiple {
+    .ng-value {
+      margin-left: .4rem;
+      margin-right: 0;
+    }
+
+    .ng-value-icon {
+      margin-left: .2rem;
+      margin-right: 0;
+    }
+  }
+}
+//tags input
+.bbsf-control.form-group.bbsf-tags-input {
+  .user-initials {
+    margin-left: 10px;
+    margin-right: 0px;
+  }
+
+  .tags-input__tag-remove-btn {
+    margin-right: 3px;
+    margin-left: 0px;
+  }
+}

package/src/lib/assets/{Style.css → Style.scss}

@@ -1,16 +1,26 @@
 
-
-@import'~ng-pick-datetime/assets/style/picker.min.css';
-@import'~@ng-select/ng-select/themes/default.theme.css';
-@import'~angular2-multiselect-dropdown/themes/default.theme.css';
+@import"sass/variables.scss" ;
+@import "sass/base.scss";
+@import"sass/textarea.scss";
+@import"sass/checkbox.scss";
+@import"sass/dropdown.scss";
+@import"sass/image-upload.scss";
+@import"sass/tags-input.scss";
+@import"sass/paging.scss";
+@import"sass/repeater.scss";
+
+@import "fontawesome/fontawesome.scss";
+
+/*@import'~ng-pick-datetime/assets/style/picker.min.css';*/
+/*@import'~angular2-multiselect-dropdown/themes/default.theme.css';
 @import'~intl-tel-input/build/css/intlTelInput.css';
 @import'~froala-editor/css/froala_editor.pkgd.min.css';
 @import'~@angular/material/prebuilt-themes/deeppurple-amber.css';
-
 @import'~froala-editor/css/froala_style.min.css';
 @import'~cropperjs/dist/cropper.css';
 @import'~ngx-toastr/toastr.css';
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
+@import 'fontawesome/fontawesome.css';
 
 .allow-dropdown {
   display: block !important;
@@ -67,13 +77,13 @@ i.fa.fa-search {
 
 .dropdown[_nghost-ng-cli-universal-c7] {
   z-index: 10000000 !important;
-}
+}*/
 
 
 /* [_nghost-ng-cli-universal-c2]{
   overflow: visible !important ;
 } */
-ngx-tags-input {
+/*ngx-tags-input {
   overflow: visible !important;
 }
 
@@ -81,11 +91,11 @@ ngx-tags-input {
   display: block !important;
 }
 
-typeahead-container {
+typeahead-container {*/
   /* transform: none !important;
   overflow: visible !important;
   width: -webkit-fill-available; */
-}
+/*}
 
   typeahead-container.dropdown {
     transform: translate3d(0, 29px, 0px) !important;
@@ -112,10 +122,10 @@ section.ta-results.list-group {
 
   .b-auto-complete-textbox .ta-item.list-group-item i {
     display: none !important;
-  }
+  }*/
 
 /* Checkbox Control */
-.b-checkbox .kt-checkbox {
+/*.b-checkbox .kt-checkbox {
   cursor: inherit;
 }
 
@@ -134,10 +144,10 @@ section.ta-results.list-group {
 
   .b-checkbox input:disabled ~ span:hover {
     cursor: not-allowed !important;
-  }
+  }*/
 
 /* Toggle Slide Control */
-.b-toggle-slide .mat-slide-toggle.mat-disabled .mat-slide-toggle-label,
+/*.b-toggle-slide .mat-slide-toggle.mat-disabled .mat-slide-toggle-label,
 .b-toggle-slide .mat-slide-toggle.mat-disabled .mat-slide-toggle-thumb-container {
   cursor: not-allowed;
 }
@@ -149,11 +159,11 @@ section.ta-results.list-group {
 .b-toggle-slide .mat-slide-toggle .mat-slide-toggle-thumb {
   background-color: #fff;
   opacity: 1;
-}
+}*/
 
 
 /* File uplod container */
-.dragndrop {
+/*.dragndrop {
   padding: 30px;
   border: 3px dashed #ccc;
   font-size: 18px;
@@ -174,17 +184,7 @@ section.ta-results.list-group {
   background-color: rgba(255,234,234,.8);
 }
 
-.form-group label {
-  font-size: 1rem;
-  color: #3F4254;
-  font-weight: 500;
-}
 
-.form-control {
-  color: #5e6278;
-  border-radius: 6px !important;
-  border-color: #e2e5ec !important;
-}
 
 .Required-text {
   font-weight: 500;
@@ -198,21 +198,13 @@ section.ta-results.list-group {
 .input-group:not(.has-validation) > .form-control:not(:last-child), .input-group:not(.has-validation) > .custom-select:not(:last-child), .input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
-}
+}*/
 
-.input-group-text {
-  background-color: #f5f8fa;
-  border-color: #f5f8fa;
-}
-
-.form-control {
-  border-color: #f2f3f4;
-}
 
 /* datetime picker*/
 
 
-.owl-dt-container, .owl-dt-container * {
+/*.owl-dt-container, .owl-dt-container * {
   box-sizing: border-box;
   color: #797979;
   font-weight: 600;
@@ -310,15 +302,15 @@ button.owl-dt-control.owl-dt-control-button.owl-dt-control-period-button {
 
 .owl-dt-container-info-label {
   color: #bbb9b9;
-}
+}*/
 /*end datetime picker*/
 
-.b-label {
+/*.b-label {
   padding: 15px 0px;
-}
+}*/
 
 /*html editor*/
-.note-btn i {
+/*.note-btn i {
   vertical-align: initial;
   line-height: initial;
   padding-right: 0;
@@ -328,11 +320,11 @@ button.owl-dt-control.owl-dt-control-button.owl-dt-control-period-button {
 
 .note-toolbar {
   padding: 10px !important;
-}
+}*/
 
 /*calendar*/
 
-body {
+/*body {
   --fc-event-border-color: #009ef7;
   --fc-event-bg-color: #009ef7;
   --fc-event-text-color: #ffffff;
@@ -610,9 +602,9 @@ body {
   border-radius: 5px;
   color: #3698fd;
   font-weight: 500;
-}
+}*/
 /*toggle slide*/
-.mat-slide-toggle {
+/*.mat-slide-toggle {
   padding-left: 10px !important;
 }
 
@@ -651,9 +643,9 @@ body {
   left: calc(50% - 17.5px) !important;
   height: 30px !important;
   width: 30px !important;
-}
+}*/
 /*dropdown*/
-.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+/*.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
   padding: 12px 10px;
 }
 
@@ -794,8 +786,8 @@ span.ng-value-label {
 .ng-dropdown-panel.ng-select-bottom, .ng-select.ng-select-opened > .ng-select-container {
   border: 1px solid #e2e5ec;
 }
-/*controls*/
-.bnsights-control.form-control, .ng-select .ng-select-container, input-group {
+
+ .ng-select .ng-select-container, input-group {
   transition: color .2s ease,background-color .2s ease;
   padding: .75rem 1rem;
   font-size: 1rem;
@@ -805,11 +797,6 @@ span.ng-value-label {
 }
 
 
-textarea.bnsights-control.form-control {
-  /* height: 92px !important; */
-  resize: none;
-}
-
 .ng-dropdown-panel {
   border: 0;
   box-shadow: 0 0 30px rgb(0 0 0 / 30%);
@@ -833,11 +820,11 @@ textarea.bnsights-control.form-control {
   display: flex;
   align-items: center;
   justify-content: center;
-}
+}*/
 
 
 /* Toggle Slide Control */
-.b-toggle-slide .mat-slide-toggle.mat-disabled .mat-slide-toggle-label,
+/*.b-toggle-slide .mat-slide-toggle.mat-disabled .mat-slide-toggle-label,
 .b-toggle-slide .mat-slide-toggle.mat-disabled .mat-slide-toggle-thumb-container {
   cursor: not-allowed;
 }
@@ -886,11 +873,11 @@ textarea.bnsights-control.form-control {
 
 .page-item .page-link {
   cursor: pointer;
-}
+}*/
 
 /*radio button*/
 
-input[type="radio"] {
+/*input[type="radio"] {
   -webkit-appearance: none;
   appearance: none;
   margin: 0;
@@ -923,10 +910,10 @@ input[type="radio"] {
   display: flex;
   align-items: center;
   padding-bottom: 15px !important;
-}
+}*/
 
 /*phone*/
-input#phone {
+/*input#phone {
   transition: color .2s ease,background-color .2s ease;
   min-height: calc(1.5em +1.65rem +2px );
   padding-bottom: 0.75rem;
@@ -955,11 +942,11 @@ input#country-search-box {
 
 li.iti__country:hover {
   text-decoration: none;
-}
+}*/
 
 
 /*html editor*/
-.angular-editor .angular-editor-wrapper .angular-editor-textarea {
+/*.angular-editor .angular-editor-wrapper .angular-editor-textarea {
   min-height: 150px !important;
   border-radius: 4px;
   margin-top: 0px !important
@@ -988,21 +975,21 @@ li.iti__country:hover {
 .ae-font .ae-picker-label:before {
   width: 0px !important;
   height: 0px !important;
-}
+}*/
 
 
 /*paging select*/
-.b-pages select {
+/*.b-pages select {
   word-wrap: normal;
   border-radius: 4px;
   border: 0px;
   margin-right: 10px;
   padding: 2px 4px;
-}
+}*/
 
 
 /*textbox with icon*/
-.svg.svg-icon-grey {
+/*.svg.svg-icon-grey {
   z-index: 4;
   position: absolute;
 }
@@ -1043,14 +1030,7 @@ body, html {
   font-size: 13px;
 }
 
-.input-group-text {
-  height: 100%;
-}
 
-.form-control:focus {
-  border-color: #93a5b9;
-  box-shadow: none !important;
-}
 
 .form-check.form-check-custom {
   padding-left: 0px;
@@ -1094,9 +1074,9 @@ input[type=radio] {
 
 ng-autocomplete.ng-autocomplete.bnsights-control {
   padding: 0px !important;
-}
+}*/
 /*tags input*/
-.tags-input .badge {
+/*.tags-input .badge {
   background: #e4e4e4;
   color: #3e3e3e;
 }
@@ -1110,11 +1090,6 @@ ng-autocomplete.ng-autocomplete.bnsights-control {
 }
 
 
-ng-autocomplete.ng-autocomplete.bnsights-control.form-control {
-  width: 100%;
-  border-radius: 0.475rem;
-}
-
 button.swal2-cancel {
   color: #7e8299 !important;
 }
@@ -1134,14 +1109,69 @@ button.swal2-cancel {
   }
 }
 
-/* .ng-select .ng-select-container, .bnsights-control.form-control, .ng-select .ng-select-container, input-group {
-  height: 40px;
-} */
 
 .cdk-overlay-container {
   z-index: 1060 !important;
-}
+}*/
 /*table with control remove margin*/
-.table-w-control .b-control .form-group {
+/*.table-w-control .b-control .form-group {
   margin-bottom: 0px;
-}
+}*/
+
+/*///////////////////////////////////////////////////*/
+
+/*textbox copy copy clipboard*/
+/*.copy-clipboard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f4f6fa;
+  margin-left: -5px;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  height: auto;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  color: #666666;
+  border: 1px solid #e9ecef;
+  border-radius: 0.25rem;
+}*/
+
+
+
+/* textarea form control*/
+/*textarea.form-control {
+  resize: none;
+}*/
+
+/* Autocomplete form control*/
+/*ng-autocomplete.ng-autocomplete.form-control {
+  width: 100%;
+  border-radius: 0.475rem;
+}*/
+
+/* vertical form control*/
+/*.form-group .b-horizontal {
+  display: flex;
+  align-items: center;
+}
+  .form-group .b-horizontal label {
+    margin-right: 1rem;
+    white-space: nowrap;
+    margin-bottom: 0px;
+  }
+.input-container {
+  display: flex;
+  width: 100%;
+
+}
+
+@media only screen and (max-width: 768px) {
+  .form-group .b-horizontal {
+    display: block;
+  }
+    .form-group .b-horizontal label {
+      margin-right: 0;
+      margin-bottom: 1rem;
+    }
+}*/