@bnsights/bbsf-controls 1.0.68 → 1.0.70

package/lib/Shared/Models/bread-crumb.d.ts

@@ -0,0 +1,6 @@
+export declare class BreadCrumb {
+    constructor(label: string, active: boolean, route?: string);
+    label: string;
+    active: boolean;
+    route: string;
+}

package/lib/Shared/Models/control-filter-Item.d.ts

@@ -0,0 +1,6 @@
+import { DataType } from "../Enums/Enums";
+export declare class ControlFilterItem {
+    key: DataType;
+    value: any;
+    onChange?: Function;
+}

package/lib/Shared/Models/filter-options.d.ts

@@ -0,0 +1,7 @@
+import { ControlFilterItem } from "./control-filter-Item";
+export declare class FilterOptions {
+    ControlsOptions: ControlFilterItem[];
+    ApplyFunction: Function;
+    RestFunction: Function;
+    ShowLoadingInFiltersBox: boolean;
+}

package/lib/Shared/Models/page-header-options.d.ts

@@ -0,0 +1,71 @@
+import { BreadCrumb } from "./bread-crumb";
+import { FilterOptions } from "./filter-options";
+import { TextBoxOptions } from "./TextBoxOptions";
+export declare class PageHeaderOptions {
+    constructor();
+    TitleKey: string;
+    TitleValue: string;
+    SubTitleKey: string;
+    BreadCrumb: BreadCrumbModel;
+    AddButton: AddButton;
+    EditButton: EditButton;
+    DeleteButton: DeleteButton;
+    ExportButton: ExportButton;
+    GridView: GridViewModel;
+    SearchTextBox: TextBoxModel;
+    FiltersButton: FiltersButton;
+    Filters: FilterOptions;
+    DropDownActions: DropdownActions;
+    Listing: boolean;
+}
+export declare class BreadCrumbModel {
+    Active: boolean;
+    BreadCrumbItems: BreadCrumb[];
+}
+export declare class AddButton {
+    Active: boolean;
+    ButtonTextKey: string;
+    Function: Function;
+}
+export declare class EditButton {
+    Active: boolean;
+    ButtonTextKey: string;
+    Function: Function;
+}
+export declare class DeleteButton {
+    Active: boolean;
+    ButtonTextKey: string;
+    Function: Function;
+}
+export declare class FiltersButton {
+    Active: boolean;
+    ButtonTextKey: string;
+    Function: Function;
+    ShowLoadingInFiltersBox: boolean;
+    constructor();
+}
+export declare class ExportButton {
+    Active: boolean;
+    ButtonTextKey: string;
+    Function: Function;
+}
+export declare class GridViewModel {
+    Active: boolean;
+    ToggleFunction: Function;
+    ShowGridViewByDefault: boolean;
+}
+export declare class TextBoxModel {
+    Active: boolean;
+    TextSearchBoxOptions: TextBoxOptions;
+}
+export declare class DropdownActions {
+    Active: boolean;
+    DropdownActionItems: DropdownActionItem[];
+}
+export declare class DropdownActionItem {
+    constructor(text: string, svg: string, functionName: Function, routerLink?: string);
+    Text: string;
+    SVG: string;
+    Function: Function;
+    RouterLink: string;
+}

package/lib/Shared/components/app-base-component.d.ts

@@ -0,0 +1,47 @@
+import { Injector } from '@angular/core';
+import { UtilityService } from '@bnsights/bbsf-utilities';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AbstractControl, FormGroup } from '@angular/forms';
+import { FilterItem } from '../Models/FilterItem';
+import { CustomValidation } from '../Models/CustomValidation';
+import { EnglishArabicDTO } from '../Models/EnglishArabicDTO';
+export declare abstract class AppBaseComponent {
+    utilityService: UtilityService;
+    modalService: NgbModal;
+    private controlUtility;
+    private titleService;
+    private auhService;
+    private configurationService;
+    private environmentService;
+    exportLabel: string;
+    filtersLabel: string;
+    addLabel: string;
+    userName: string;
+    pageTitle: string;
+    PageCount: number;
+    constructor(injector: Injector);
+    updatePageTitle(title: string | undefined): void;
+    l(key: string): string;
+    getConfigurationValue(key: string): any;
+    getLanguageModeValue(): any;
+    stopBlockUI(): void;
+    startBlockUI(): void;
+    openModal(modal: any, size?: string): void;
+    download(fileDTO: any, fileName: string): void;
+    private base64toBlob;
+    private calculatePageTitle;
+    getPagingFiltersValues(form: FormGroup, filters: FilterItem[]): any;
+    removeControl(controlName: string, form: FormGroup): void;
+    copyToClipboard(val: string): void;
+    addRequiredRule(control: AbstractControl, controlOptions: any): void;
+    removeRequiredRule(control: AbstractControl, controlOptions: any): void;
+    validateDates(form: FormGroup, fromDateControl: string, toDateControl: string, validationMessageKey: string): CustomValidation;
+    onSuccessAddHandler: (success: any) => void;
+    onSuccessEditHandler: (success: any) => void;
+    onSuccessDeleteHandler: (success: any) => void;
+    recalculatePageTitle(): void;
+    isEnglish(): boolean;
+    calculateInitials(name: string): string;
+    getCurrentUserInitials(): string;
+    getCurrentFailOver(val: EnglishArabicDTO): string;
+}

package/lib/controls/page-header-component/page-header-component.component.d.ts

@@ -0,0 +1,17 @@
+import { OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
+import { UtilityService } from '@bnsights/bbsf-utilities';
+import { DataType } from '../../Shared/Enums/Enums';
+import { PageHeaderOptions } from '../../Shared/Models/page-header-options';
+export declare class PageHeaderComponentComponent implements OnInit {
+    private router;
+    utilityService: UtilityService;
+    EN: boolean;
+    group: FormGroup;
+    options: PageHeaderOptions;
+    DataTypeEnum: typeof DataType;
+    constructor(router: Router, utilityService: UtilityService);
+    translate(key: string): string;
+    ngOnInit(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bnsights/bbsf-controls",
-  "version": "1.0.68",
+  "version": "1.0.70",
   "peerDependencies": {
     "@angular/common": "~12.2.12",
     "@angular/core": "~12.2.12"
@@ -21,9 +21,8 @@
     "@angular/platform-browser": "~12.2.12",
     "@angular/platform-browser-dynamic": "~12.2.12",
     "@angular/router": "~12.2.12",
-    "@bnsights/bbsf-utilities": "1.0.26",
+    "@bnsights/bbsf-utilities": "1.0.28",
     "@fortawesome/fontawesome-free": "^5.15.2",
-    "google-libphonenumber": "^3.2.17",
     "@fullcalendar/angular": "^5.5.0",
     "@fullcalendar/core": "^5.5.0",
     "@fullcalendar/daygrid": "^5.5.0",
@@ -39,6 +38,7 @@
     "@ngx-translate/http-loader": "^6.0.0",
     "@sweetalert2/ngx-sweetalert2": "10.0.0",
     "@syncfusion/ej2-angular-popups": "^18.4.44",
+    "@types/file-saver": "^2.0.5",
     "angular-cropperjs": "^1.0.2",
     "angular-froala-wysiwyg": "^3.2.6-1",
     "angular-ng-autocomplete": "2.0.5",
@@ -50,6 +50,7 @@
     "font-awesome": "^4.7.0",
     "froala-editor": "^3.2.6-1",
     "fullcalendar": "^5.5.1",
+    "google-libphonenumber": "^3.2.17",
     "intl-tel-input": "^17.0.12",
     "jquery": "^3.5.1",
     "ng-block-ui": "^3.0.2",

package/public-api.d.ts

@@ -27,6 +27,8 @@ export * from './lib/controls/Repeater/repeater-table/repeater-table.component';
 export * from './lib/controls/Repeater/repeater-field-builder/repeater-field-builder.component';
 export * from './lib/controls/Repeater/repeater-item-field/repeater-item-field.component';
 export * from './lib/controls/Recaptcha/Recaptcha.component';
+export * from './lib/controls/page-header-component/page-header-component.component';
+export * from './lib/Shared/Components/app-base-component';
 export * from './lib/Shared/services/validationErrorMassage.service';
 export * from './lib/Shared/services/ControlUtility';
 export * from './lib/Shared/services/OnPagingFiltersChange.service';
@@ -82,6 +84,10 @@ export * from './lib/Shared/Models/FormOptions';
 export * from './lib/Shared/Models/ConfirmationModalOptions';
 export * from './lib/Shared/Models/RepeaterField';
 export * from './lib/Shared/Models/RepeaterOptions';
+export * from './lib/Shared/Models/page-header-options';
+export * from './lib/Shared/Models/filter-options';
+export * from './lib/Shared/Models/control-filter-Item';
+export * from './lib/Shared/Models/bread-crumb';
 export * from './lib/Shared/Directives/template-name.directive';
 export * from './lib/shared/Pipes/bbsf-date-time.pipe';
 export * from './lib/shared/Pipes/bbsf-date.pipe';

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

@@ -60,12 +60,7 @@
 
     .form-control {
 
-      &.is-invalid {
-        background-position: left calc(0.375em + 2rem) center;
-      }
-
       &[dir = "ltr"] {
-
         + .copy-clipboard {
           right: 0px !important;
           left: auto !important;
@@ -78,75 +73,77 @@
 
       &.is-invalid {
         background-position: left calc(0.375em + 0.1875rem) center;
+
+        &[dir = "ltr"] {
+          background-position: right calc(0.375em + 0.3875rem) center;
+          }
+        }
       }
     }
   }
-}
-
-//checkbox
-.bbsf-checkbox {
-  .bbsf-input-container {
-    .label-subtext-container {
-      margin-top: -4px;
-      margin-right: 0.55rem;
-      margin-left: 0;
+  //checkbox
+  .bbsf-checkbox {
+    .bbsf-input-container {
+      .label-subtext-container {
+        margin-top: -4px;
+        margin-right: 0.55rem;
+        margin-left: 0;
+      }
     }
   }
-}
+  //dropdown
+  .bbsf-dropdown.form-group {
 
-//dropdown
-.bbsf-dropdown.form-group {
+    .bbsf-input-container {
 
-  .bbsf-input-container {
-
-    .form-control {
-      &.is-invalid {
-        background-position: left calc(0.375em + 2rem) center;
-      }
+      .form-control {
+        &.is-invalid {
+          background-position: left calc(0.375em + 2rem) center;
+        }
 
-      .ng-select-container {
+        .ng-select-container {
 
-        .ng-arrow-wrapper {
-          margin-right: 10px;
-          margin-left: 0px;
+          .ng-arrow-wrapper {
+            margin-right: 10px;
+            margin-left: 0px;
+          }
         }
-      }
 
-      .ng-dropdown-panel {
+        .ng-dropdown-panel {
 
-        .ng-dropdown-panel-items {
-          .ng-option {
-            &.ng-option-selected:after {
-              left: 30px;
-              right: initial;
+          .ng-dropdown-panel-items {
+            .ng-option {
+              &.ng-option-selected:after {
+                left: 30px;
+                right: initial;
+              }
             }
           }
         }
       }
     }
-  }
 
-  .ng-select-multiple {
-    .ng-value {
-      margin-left: .4rem;
-      margin-right: 0;
-    }
+    .ng-select-multiple {
+      .ng-value {
+        margin-left: .4rem;
+        margin-right: 0;
+      }
 
-    .ng-value-icon {
-      margin-left: .2rem;
-      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
+  .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;
+    .tags-input__tag-remove-btn {
+      margin-right: 3px;
+      margin-left: 0px;
+    }
   }
-}

package/src/lib/assets/Style.scss

@@ -8,7 +8,11 @@
 @import"sass/paging.scss";
 @import"sass/repeater.scss";
 @import"sass/confirmation-modal.scss";
+@import "sass/datetime-picker.scss";
+
 //fontawesome
 @import "fontawesome/fontawesome.scss";
 //toaster
 @import'~ngx-toastr/toastr.css';
+//date picker
+@import'~ng-pick-datetime/assets/style/picker.min.css';

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

@@ -1,4 +1,7 @@
 /*form control*/
+.bbsf-multilang-form-group {
+  margin-bottom: 1.75rem;
+}
 .bbsf-control.form-group {
   margin-bottom: 1.75rem;
 
@@ -28,6 +31,7 @@
       border-color: $light-gray;
       padding: 0.75rem 1rem;
       font-size: 13px;
+      font-size: 13px;
       border-radius: $bbsf-rounded;
       height: 45px;
 
@@ -36,7 +40,7 @@
       }
 
       &.is-invalid {
-        background-position:right calc(0.375em + 0.3875rem) center;
+        background-position: right calc(0.375em + 0.3875rem) center;
 
         &[dir = "rtl"] {
           background-position: left calc(0.375em + 0.3875rem) center;

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

@@ -0,0 +1,123 @@
+
+/* datetime picker*/
+.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 * {
+  box-sizing: border-box;
+  color: $label-color;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.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 {
+  height: auto;
+  padding: 15px 10px;
+}
+
+.owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th {
+  padding-top: 1.2em;
+  font-size: .9em;
+}
+
+.owl-dt-control-period-button .owl-dt-control-button-arrow {
+  margin: 0px 6px;
+}
+
+.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);
+  background: #f5f8fa;
+  color: #7e8299;
+  border-color: transparent;
+}
+
+button.owl-dt-control.owl-dt-control-button.owl-dt-control-period-button:hover {
+  background-color: #f5f8fa;
+}
+
+button.owl-dt-control.owl-dt-control-button.owl-dt-control-period-button {
+  padding: 5px;
+  border-radius: 6px;
+}
+
+.owl-dt-control-period-button:hover > .owl-dt-control-button-content {
+  background-color: transparent !important;
+}
+
+.owl-dt-calendar-table .owl-dt-calendar-cell-selected {
+  background: $primary;
+  color: #fff;
+  border-color: transparent;
+}
+
+.owl-dt-calendar-table .owl-dt-calendar-cell {
+  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) {
+  background-color: rgb(245, 248, 250);
+  color: #7e8299;
+}
+
+.owl-dt-container-buttons {
+  height: auto;
+}
+
+.owl-dt-container-control-button .owl-dt-control-button-content {
+  padding: 15px 10px;
+}
+
+.owl-dt-container-control-button:hover .owl-dt-control-button-content {
+  background-color: #f5f8fa;
+}
+
+.owl-dt-container-control-button:last-child:hover .owl-dt-control-button-content {
+  background-color: rgba(0, 158, 247, 0.11);
+}
+
+.owl-dt-container-info {
+  padding: 0px;
+}
+
+.owl-dt-container-info .owl-dt-container-range .owl-dt-container-range-content {
+  padding: 15px 5px;
+}
+
+.owl-dt-timer-content .owl-dt-timer-input {
+  font-size: 12px;
+}
+
+.owl-dt-calendar-table .owl-dt-calendar-cell-in-range {
+  background: #f1faff;
+}
+
+.owl-dt-container-info-label {
+  color: #bbb9b9;
+}
+
+.owl-dt-timer-hour12 {
+  color: $primary;
+}
+
+.owl-dt-timer-hour12 .owl-dt-timer-hour12-box {
+  border-color: $primary;
+}
+
+.owl-dt-control-button:first-child {
+  color: $primary;
+}
+
+.owl-dt-control-button {
+  color: $subtext-color;
+}