@brickclay-org/ui 0.0.62 → 0.0.63

package/fesm2022/brickclay-org-ui.mjs

@@ -6669,6 +6669,158 @@ const DOT_POSITION_MAP = {
     'top-left': 'top-0.5 -left-0.5'
 };
 
+class ColumnFilterOption {
+    columnName;
+    selected = true;
+    constructor(columnName, selected = false) {
+        if (columnName) {
+            this.columnName = columnName;
+        }
+        this.selected = selected;
+    }
+}
+
+class BkColumnFilterService {
+    constructor() { }
+    intializeColumnsFilter(key, fields) {
+        var columnsList = fields.map((f) => new ColumnFilterOption(f, true));
+        localStorage.setItem(key, JSON.stringify(columnsList));
+    }
+    getColumnsFilterList(key, fields) {
+        let stored = localStorage.getItem(key);
+        if (!fields || fields.length === 0) {
+            return [];
+        }
+        if (!stored) {
+            this.intializeColumnsFilter(key, fields);
+            stored = localStorage.getItem(key);
+        }
+        let storedColumns = stored ? JSON.parse(stored) : [];
+        // Sync stored columns with current fields
+        storedColumns = this.syncColumnsWithFields(storedColumns, fields);
+        // Update localStorage with synced data
+        localStorage.setItem(key, JSON.stringify(storedColumns));
+        return storedColumns;
+        // return stored ? (JSON.parse(stored) as ColumnFilterOption[]) : [];
+    }
+    syncColumnsWithFields(storedColumns, currentFields) {
+        // Map of existing columns for quick lookup
+        const existingColumnsMap = new Map();
+        storedColumns.forEach(col => existingColumnsMap.set(col.columnName, col));
+        // New list based on current fields
+        const syncedColumns = [];
+        currentFields.forEach(field => {
+            if (existingColumnsMap.has(field)) {
+                // Keep existing column with its selection state
+                syncedColumns.push(existingColumnsMap.get(field));
+            }
+            else {
+                // Add new column as selected by default
+                syncedColumns.push(new ColumnFilterOption(field, true));
+            }
+        });
+        return syncedColumns;
+    }
+    updateColumnFilterList(key, list) {
+        localStorage.removeItem(key);
+        localStorage.setItem(key, JSON.stringify(list));
+    }
+    showColumn(field, columnsFilterList) {
+        return columnsFilterList.find((i) => i.columnName === field)?.selected || false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnFilterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnFilterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class BkColumnSelect {
+    columnFilterService;
+    searchable = false;
+    cacheKey;
+    columns;
+    isOpened = false;
+    formBoxRef;
+    change = new EventEmitter();
+    isOpenedChange = new EventEmitter();
+    columnsFilterList = [];
+    search = '';
+    constructor(columnFilterService) {
+        this.columnFilterService = columnFilterService;
+    }
+    ngOnInit() {
+        this.getColumnsFilterList();
+    }
+    ngOnChanges(changes) {
+        if (changes['columns'] && !changes['columns'].firstChange) {
+            this.getColumnsFilterList();
+        }
+    }
+    getColumnsFilterList() {
+        this.columnsFilterList = this.columnFilterService.getColumnsFilterList(this.cacheKey, this.columns);
+        this.change.emit(this.columnsFilterList);
+    }
+    filterButtonClicked(event) {
+        event.stopPropagation();
+        this.isOpenedChange.emit(!this.isOpened);
+    }
+    onChangeColumnFilter(evt) {
+        this.columnFilterService.updateColumnFilterList(this.cacheKey, this.columnsFilterList);
+        this.change.emit(this.columnsFilterList);
+    }
+    onClick(event) {
+        // Check if the click target is inside the form_box
+        if ((this.isOpened) &&
+            this.formBoxRef.nativeElement.contains(event.target)) {
+            return; // Do nothing if click occurred inside the form_box
+        }
+        // Check if the click target is .ng-value-icon
+        if (event.target instanceof HTMLElement &&
+            event.target.classList.contains('ng-value-icon')) {
+            // Do nothing if click is on .ng-value-icon
+            return;
+        }
+        // Check if the click target is the button
+        if (!(event.target instanceof HTMLElement) ||
+            !event.target.closest('.btn-light-primary-custom')) {
+            // Close the popup if the click is not on the button
+            this.isOpened = false;
+            this.isOpenedChange.emit(this.isOpened);
+        }
+    }
+    get list() {
+        return this.columnsFilterList.filter((x) => x.columnName.toLowerCase().includes(this.search.toLowerCase()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, deps: [{ token: BkColumnFilterService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkColumnSelect, isStandalone: true, selector: "bk-column-select", inputs: { searchable: "searchable", cacheKey: "cacheKey", columns: "columns", isOpened: "isOpened" }, outputs: { change: "change", isOpenedChange: "isOpenedChange" }, host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n  <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"'images/icons/tickets/columns-black.svg'\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"'Columns'\" [buttonClass]=\"'!text-black'\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n    @if(searchable){\r\n      <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n        [iconSrc]=\"'../../assets/images/icons/global/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n    }\r\n    <div class=\"flex flex-col gap-0.5 max-h-[360px] overflow-y-auto\">\r\n      @for (column of list; track $index;let i=$index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox id=\"columnsFilterList-{{i}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n          (change)=\"onChangeColumnFilter($event)\">\r\n\r\n        </bk-checkbox>\r\n\r\n\r\n\r\n        <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{i}}\">\r\n          {{column.columnName}}\r\n        </label>\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"text-sm font-medium text-gray-500 mt-3 text-center\">No Records Found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkButton, selector: "bk-button", inputs: ["variant", "size", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkInput, selector: "bk-input", inputs: ["id", "name", "mask", "autoComplete", "label", "placeholder", "hint", "required", "type", "value", "hasError", "showErrorIcon", "errorMessage", "disabled", "tabIndex", "readOnly", "autoCapitalize", "inputMode", "iconSrc", "iconAlt", "showIcon", "phone", "countryCode", "countryOptions", "iconOrientation", "password", "showPassword", "pattern", "max", "min", "step", "maxlength", "minlength"], outputs: ["input", "change", "focus", "blur", "clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-column-select', imports: [FormsModule, BkButton, BkCheckbox, BkInput], standalone: true, template: "<div class=\"relative\">\r\n\r\n  <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"'images/icons/tickets/columns-black.svg'\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"'Columns'\" [buttonClass]=\"'!text-black'\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n    @if(searchable){\r\n      <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n        [iconSrc]=\"'../../assets/images/icons/global/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n    }\r\n    <div class=\"flex flex-col gap-0.5 max-h-[360px] overflow-y-auto\">\r\n      @for (column of list; track $index;let i=$index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox id=\"columnsFilterList-{{i}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n          (change)=\"onChangeColumnFilter($event)\">\r\n\r\n        </bk-checkbox>\r\n\r\n\r\n\r\n        <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{i}}\">\r\n          {{column.columnName}}\r\n        </label>\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"text-sm font-medium text-gray-500 mt-3 text-center\">No Records Found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: BkColumnFilterService }], propDecorators: { searchable: [{
+                type: Input
+            }], cacheKey: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], isOpened: [{
+                type: Input
+            }], formBoxRef: [{
+                type: ViewChild,
+                args: ['formBox']
+            }], change: [{
+                type: Output
+            }], isOpenedChange: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -6678,5 +6830,5 @@ const DOT_POSITION_MAP = {
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatarProfile, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkUiAvatar, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, getDialogBackdropAnimation, getDialogPanelAnimation };
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatarProfile, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkUiAvatar, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map