@bnsights/bbsf-controls 1.0.122 → 1.0.124

package/lib/Shared/Enums/FileType.d.ts

@@ -14,7 +14,7 @@ export declare enum FileType {
     OctetSteam = "application/octet-stream",
     Txt = "text/plain",
     JSON = "application/json",
-    PowerPoint = "application/vnd.ms-powerpoint,applicationapplication/vnd.openxmlformats-officedocument.presentationml.presentation",
+    PowerPoint = "application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation",
     SVG = "image/svg+xml",
     MP4 = "video/mp4",
     AVI = "video/x-msvideo",

package/lib/Shared/Models/FileDTO.d.ts

@@ -16,4 +16,5 @@ export declare class FileDTO {
     bytes?: any;
     fileSizeInMB: number;
     fileURL?: string;
+    isNew: boolean;
 }

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

@@ -24,6 +24,7 @@ export declare class AutocompleteTextBoxComponent implements OnInit {
     group: FormGroup;
     name: string;
     options: AutocompleteOptions;
+    DropdownTemplateVariable: any;
     OnChange: EventEmitter<any>;
     keyword: string;
     autoCompleteTextBoxControl: AbstractControl;
@@ -58,6 +59,7 @@ export declare class AutocompleteTextBoxComponent implements OnInit {
     removeCustomValidation: (customValidation: any) => void;
     addCustomValidation: (customValidation: any) => void;
     isValid: () => void;
+    checkIsAutocomplateInFilter(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteTextBoxComponent, [null, null, null, null, { optional: true; }, null, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteTextBoxComponent, "BBSF-AutocompleteTextBox", never, { "group": { "alias": "group"; "required": false; }; "name": { "alias": "name"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "OnChange": "OnChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteTextBoxComponent, "BBSF-AutocompleteTextBox", never, { "group": { "alias": "group"; "required": false; }; "name": { "alias": "name"; "required": false; }; "options": { "alias": "options"; "required": false; }; "DropdownTemplateVariable": { "alias": "DropdownTemplateVariable"; "required": false; }; }, { "OnChange": "OnChange"; }, never, never, false, never>;
 }

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

@@ -21,6 +21,7 @@ export declare class TagsInputComponent implements OnInit, OnDestroy {
     group: FormGroup;
     name: string;
     options: TagsInputOptions;
+    DropdownTemplateVariable: any;
     onChange: EventEmitter<any>;
     searchKey: any;
     searchKeyValue: string;
@@ -55,6 +56,7 @@ export declare class TagsInputComponent implements OnInit, OnDestroy {
     isValid: () => void;
     onTagsInputBlur(SearchKey: any): void;
     getTagsValue(): any[];
+    checkIsTagInFilter(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TagsInputComponent, [null, null, null, { optional: true; }, null, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TagsInputComponent, "BBSF-TagsInput", never, { "group": { "alias": "group"; "required": false; }; "name": { "alias": "name"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "onChange": "onChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagsInputComponent, "BBSF-TagsInput", never, { "group": { "alias": "group"; "required": false; }; "name": { "alias": "name"; "required": false; }; "options": { "alias": "options"; "required": false; }; "DropdownTemplateVariable": { "alias": "DropdownTemplateVariable"; "required": false; }; }, { "onChange": "onChange"; }, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bnsights/bbsf-controls",
-  "version": "1.0.122",
+  "version": "1.0.124",
   "peerDependencies": {
     "@angular/animations": "^17.0.5",
     "@angular/cdk": "^17.0.2",

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

@@ -190,4 +190,66 @@ input::-webkit-inner-spin-button {
 
 
   }
+}
+
+.owl-dt-control-arrow-button .owl-dt-control-button-content {
+  transform: rotate(180deg)
+}
+
+//alert message in rabic
+.bbsf-control.form-group .bbsf-input-container .form-control.is-invalid[dir=ltr] {
+  background-position: right calc(0.375em + 0.3875rem) center;
+}
+
+//datetime
+.owl-dt-container-row {
+  direction: ltr;
+}
+
+.owl-dt-control-arrow-button svg {
+  transform: rotate(180deg);
+}
+
+//datetime picker
+.owl-dt-control-period-button .owl-dt-control-button-content {
+  padding-right: 0 !important;
+  padding-left: 0.5rem !important;
+}
+
+//autocomplete close button
+.autocomplete-container .input-container .x {
+  left: 10px;
+  right: auto !important;
+}
+
+.autocomplete-container {
+  .suggestions-container {
+    .x {
+      right: 0 !important;
+      left: auto;
+    }
+  }
+}
+
+//autocomplete space between name and cancel btn
+.form-group.bbsf-control.bbsf-autocomplete-textbox .bbsf-input-container .autocomplete-container .suggestions-container.is-visible ul li.item a {
+  margin-left: 0;
+  margin-right: 0.8rem;
+}
+
+.autocomplete-container .suggestions-container .heading .text {
+  margin-right: 0.8rem;
+  margin-left: 0;
+}
+
+//dropdown invalid image
+
+.bbsf-dropdown.form-group .bbsf-input-container .form-control.is-invalid {
+  background-position: left calc(0.375em + 0.8rem) center;
+}
+
+//dropdown close icon
+.bbsf-dropdown.form-group .bbsf-input-container .form-control .ng-select-container .ng-clear-wrapper {
+  margin-right: 0;
+  margin-left: 0;
 }

package/src/lib/assets/sass/autocomplete-textbox.scss

@@ -1,4 +1,3 @@
-
 .form-group.bbsf-control.bbsf-autocomplete-textbox {
   .bbsf-input-container {
     .form-control {
@@ -19,13 +18,13 @@
 
       .is-hidden {
 
-        + .is-visible {
+        +.is-visible {
           box-shadow: none;
         }
       }
 
       .suggestions-container.is-visible {
-        box-shadow: 0px 0px 11px 3px rgb(92 92 92 / 10%);
+        box-shadow: 0;
         border-radius: $bbsf-rounded;
         left: 0px;
         background-color: white;
@@ -34,7 +33,7 @@
 
         ul {
           li.item {
-            padding: 0.75rem 1.25rem;
+            padding: 1rem;
             margin-bottom: 0.1rem;
 
             a {
@@ -42,11 +41,39 @@
               font-size: 13px;
               color: #484848;
               font-weight: 500;
+              margin-inline-start: 0.8rem;
+              line-height: 2rem;
             }
 
             div {
               display: flex;
               align-items: center;
+
+              .auto-complete-card {
+                align-items: start;
+                margin: 0 8px;
+
+                a {
+                  margin: 0;
+                  font-weight: 700;
+                  margin-bottom: 0.8rem;
+                }
+
+                .auto-complete-items {
+                  gap: 0.4rem;
+                  margin-bottom: 0.4rem;
+
+                  &:last-child {
+                    margin-bottom: 0;
+                  }
+
+                  .sub-text {
+                    font-weight: 700;
+                  }
+
+                }
+
+              }
             }
 
             &:hover {
@@ -70,18 +97,30 @@
             }
 
             img {
-              border-radius: 10px;
-              height: 35px;
-              width: 35px;
-              margin-right: 10px;
+              margin: 0;
+              width: 72px;
+              height: 72px;
+              border-radius: 50%;
             }
           }
         }
       }
 
+      .suggestions-container {
+        .x {
+          left: 0;
+          right: auto !important;
+        }
+
+      }
+
       .heading {
         color: #a0a0a0;
 
+        .text {
+          margin-inline-start: 0.8rem;
+        }
+
         .x {
           .material-icons {
             color: #e1505e;
@@ -92,6 +131,9 @@
     }
 
     .input-container {
+      border-radius: 0.4rem;
+      border: 1px solid #e2e5ec;
+      text-align: start;
       height: inherit;
 
       input {
@@ -99,6 +141,10 @@
         background-color: transparent;
         border-radius: $bbsf-rounded;
         height: inherit;
+        font-size: 0.85rem;
+        color: #A1A5B7;
+        border: none !important;
+        max-width: 90%;
 
         &:disabled {
           background-color: #eee !important;
@@ -110,6 +156,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        padding-inline-end: 1.75rem;
 
         i {
           font-size: 12px;
@@ -119,4 +166,4 @@
       }
     }
   }
-}
+}

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

@@ -1,4 +1,3 @@
-
 .bbsf-checkbox {
   .bbsf-input-container {
     display: flex;
@@ -7,6 +6,7 @@
     .label-subtext-container {
       margin-left: 0.55rem;
       width: 100%;
+      margin-top: 0;
 
       .bbsf-label {
         margin-bottom: 0px;
@@ -37,4 +37,4 @@
       cursor: not-allowed;
     }
   }
-}
+}

package/src/lib/assets/sass/datetime-picker.scss

@@ -1,27 +1,34 @@
-
 /* datetime picker*/
-.owl-dt-inline-container, .owl-dt-popup-container {
+.owl-dt-inline-container,
+.owl-dt-popup-container {
   box-shadow: 0 0 9px 6px #efefef;
   border-radius: $bbsf-rounded;
 }
 
-.owl-dt-container, .owl-dt-container * {
+.owl-dt-container,
+.owl-dt-container * {
   box-sizing: border-box;
   color: $label-color;
   font-weight: 600;
   font-size: 14px;
 }
 
-.owl-dt-inline-container, .owl-dt-popup-container {
+.owl-dt-inline-container,
+.owl-dt-popup-container {
   width: 25.5em;
   box-shadow: 0 0 50px 0 rgb(82 63 105 / 10%);
 }
 
-.owl-dt-inline-container .owl-dt-calendar, .owl-dt-popup-container .owl-dt-calendar {
+.owl-dt-inline-container .owl-dt-calendar,
+.owl-dt-popup-container .owl-dt-calendar {
   height: auto;
   padding: 15px 10px;
 }
 
+.owl-dt-calendar-multi-year-view .owl-dt-calendar-table .owl-dt-calendar-header th {
+  text-align: center;
+}
+
 .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th {
   padding-top: 1.2em;
   font-size: .9em;
@@ -31,12 +38,13 @@
   margin: 0px 6px;
 }
 
-.owl-dt-container, .owl-dt-container {
+.owl-dt-container,
+.owl-dt-container {
   fill: #d7d5d5;
 }
 
 .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected) {
-  border-color: rgba(0,0,0,.4);
+  border-color: rgba(0, 0, 0, .4);
   background: #f5f8fa;
   color: #7e8299;
   border-color: transparent;
@@ -51,10 +59,14 @@ button.owl-dt-control.owl-dt-control-button.owl-dt-control-period-button {
   border-radius: 6px;
 }
 
-.owl-dt-control-period-button:hover > .owl-dt-control-button-content {
+.owl-dt-control-period-button:hover>.owl-dt-control-button-content {
   background-color: transparent !important;
 }
 
+.owl-dt-control-period-button .owl-dt-control-button-content {
+  padding-inline-start: 0 !important;
+}
+
 .owl-dt-calendar-table .owl-dt-calendar-cell-selected {
   background: $primary;
   color: #fff;
@@ -65,7 +77,8 @@ button.owl-dt-control.owl-dt-control-button.owl-dt-control-period-button {
   color: rgba(62, 61, 61, 0.85);
 }
 
-.owl-dt-calendar-table .owl-dt-calendar-cell-active:focus > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected), .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected) {
+.owl-dt-calendar-table .owl-dt-calendar-cell-active:focus>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),
+.owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected) {
   background-color: rgb(245, 248, 250);
   color: #7e8299;
 }
@@ -75,7 +88,7 @@ button.owl-dt-control.owl-dt-control-button.owl-dt-control-period-button {
 }
 
 .owl-dt-container-control-button .owl-dt-control-button-content {
-  padding: 15px 10px;
+  padding: 15px 10px 15px 0;
 }
 
 .owl-dt-container-control-button:hover .owl-dt-control-button-content {
@@ -116,13 +129,49 @@ button.owl-dt-control.owl-dt-control-button.owl-dt-control-period-button {
 
 .owl-dt-control-button:first-child {
   color: $primary;
+  background-color: rgb(232 232 232);
+  border: 1px solid rgb(232 232 232);
+  border-radius: 0 0 0 5px;
+
+  span {
+    color: #7E8299;
+  }
 }
 
 .owl-dt-control-button {
   color: $subtext-color;
 }
 
+.owl-dt-timer-divider:after,
+.owl-dt-timer-divider:before {
+  width: 0.2em;
+  height: 0.2em;
+}
+
+.owl-dt-timer-divider:after {
+  bottom: 42%;
+}
+
+.owl-dt-timer-divider:before {
+  top: 42%;
+}
+
+.owl-dt-container-buttons.owl-dt-container-row .owl-dt-control-button:last-child {
+  border-radius: 0 0 5px 0;
+}
+
+.owl-dt-container-row {
+  direction: ltr;
+}
+
 //BBSF datetime picker fix and location container
-.cdk-overlay-container, .pac-container.pac-logo.hdpi {
-  z-index: 1056;
+.cdk-overlay-container,
+.pac-container.pac-logo.hdpi {
+  z-index: 1061;
 }
+
+.cdk-overlay-pane,
+.cdk-overlay-connected-position-bounding-box {
+  z-index: 1061;
+
+}

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

@@ -36,7 +36,8 @@
           display: flex;
           align-items: center;
           justify-content: center;
-          margin-right:30px;
+          margin-inline-end: 0;
+
           .ng-clear {
             color: #e66f6f;
             font-weight: 600;
@@ -48,7 +49,9 @@
 
         .ng-value-container {
           align-items: center;
-          width:100%;
+          width: 100%;
+          margin: auto;
+
           .ng-value-label {
             color: #414350;
             font-weight: 500;
@@ -57,7 +60,7 @@
           .ng-input {
             input {
               padding: 0rem 1rem;
-              width:80%;
+              width: 80%;
             }
           }
         }
@@ -69,6 +72,7 @@
         border-radius: $bbsf-rounded;
         left: 0px;
         background-color: white;
+        padding: 5px;
 
         &.ng-select-bottom {
           top: 52px;
@@ -93,7 +97,8 @@
               white-space: break-spaces;
             }
 
-            &.ng-option-selected, &:hover {
+            &.ng-option-selected,
+            &:hover {
               background-color: #f6f6f6;
 
               .bbsf-label {
@@ -131,7 +136,7 @@
   }
 
   .ng-select-disabled {
-    background: #c5c5c5;
+    background: #e9ecef;
 
     .ng-select-container {
       cursor: not-allowed !important;
@@ -172,3 +177,18 @@
 .ng-option-selected {
   position: relative;
 }
+
+//background drowpdown scrolling
+.bbsf-dropdown.form-group .bbsf-input-container .form-control .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
+.bbsf-dropdown.form-group .bbsf-input-container .form-control .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover {
+  width: 99%;
+}
+
+.ng-dropdown-panel .scroll-host::-webkit-scrollbar {
+  width: 8px;
+}
+
+.ng-dropdown-panel .scroll-host::-webkit-scrollbar-thumb {
+  background-color: #D9D9D9;
+  border-radius: 4px;
+}

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

@@ -1,13 +1,16 @@
 .form-group.bbsf-control.bbsf-file-upload {
   .uploaded-items {
     .btn-group {
+      line-break: anywhere;
+
       .btn-download-file {
-        background: #f7f7f7;
+        background: #F3F3F3;
         display: flex;
         align-items: center;
+        padding: 0.77rem 0.77rem 0.77rem 0 !important;
 
         &:hover {
-          background: initial;
+          background: #F3F3F3;
         }
 
         svg {
@@ -20,12 +23,13 @@
           font-size: 12px;
           color: #4f4f4f;
           font-weight: 600;
-          margin-left: 0.75rem;
+          margin: 0 0.75rem;
         }
       }
 
       .btn-progress-upload {
         position: relative;
+        padding: 0.77rem 0 0.77rem 0.77rem !important;
 
         .upload {
           position: absolute;
@@ -42,6 +46,12 @@
       }
     }
 
+    .btn-download-file {
+      &:hover {
+        background: #F3F3F3;
+      }
+    }
+
     .btn-danger {
       display: flex;
       align-items: center;

package/src/lib/assets/sass/html-editor.scss

@@ -1,5 +1,5 @@
-
-.form-group.bbsf-control.bbsf-htmleditor, .form-group.bbsf-control.bbsf-multilang-htmleditor {
+.form-group.bbsf-control.bbsf-htmleditor,
+.form-group.bbsf-control.bbsf-multilang-htmleditor {
   .bbsf-input-container {
     .angular-editor {
       .angular-editor-toolbar {
@@ -7,7 +7,7 @@
         font-size: 12px;
         border: 1px solid #e1e1e1;
         padding: 15px 10px;
-        border-radius: 0.5rem;
+        border-radius: .31rem .31rem 0 0;
 
         .angular-editor-button {
           border-radius: 0.2rem;
@@ -27,10 +27,15 @@
       .angular-editor-wrapper {
         .angular-editor-textarea {
           border: 1px solid #dedede;
-          margin-top: 10px;
-          border-radius: 0.5rem;
+          margin-top: 0;
+          border-radius: 0 0 .31rem .31rem;
+          padding: 1.23rem;
         }
       }
     }
   }
 }
+
+.angular-editor-toolbar[_ngcontent-kfh-c324] .angular-editor-toolbar-set[_ngcontent-kfh-c324] .foreground[_ngcontent-kfh-c324] [_ngcontent-kfh-c324]:after {
+  display: none;
+}