verben-ng-ui 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/esm2022/lib/Verbena-input/verbena-input.component.mjs +1 -1
  2. package/esm2022/lib/components/data-view/data-view.component.mjs +60 -15
  3. package/esm2022/lib/components/drop-down/drop-down.component.mjs +1 -1
  4. package/esm2022/lib/components/notification/notification.component.mjs +49 -69
  5. package/esm2022/lib/components/notification/notification.module.mjs +2 -2
  6. package/esm2022/lib/components/svg/svg.component.mjs +10 -1
  7. package/esm2022/lib/components/table-filter/table-filter.component.mjs +1 -1
  8. package/esm2022/lib/components/tooltip/tooltip.component.mjs +7 -4
  9. package/esm2022/lib/services/notification.services.mjs +89 -0
  10. package/esm2022/public-api.mjs +3 -1
  11. package/fesm2022/verben-ng-ui.mjs +209 -88
  12. package/fesm2022/verben-ng-ui.mjs.map +1 -1
  13. package/lib/components/data-view/data-view.component.d.ts +22 -4
  14. package/lib/components/notification/notification.component.d.ts +14 -15
  15. package/lib/components/tooltip/tooltip.component.d.ts +2 -1
  16. package/lib/services/notification.services.d.ts +37 -0
  17. package/package.json +3 -2
  18. package/public-api.d.ts +1 -0
package/esm2022/lib/Verbena-input/verbena-input.component.mjs CHANGED
@@ -172,7 +172,7 @@ export class VerbenaInputComponent {
172
172
  this.disable = isDisabled;
173
173
  }
174
174
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: VerbenaInputComponent, deps: [{ token: forwardRef(() => NgControl), optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
175
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: VerbenaInputComponent, selector: "verbena-input", inputs: { label: "label", placeHolder: "placeHolder", required: "required", svgPosition: "svgPosition", minLength: "minLength", maxLength: "maxLength", type: "type", bgColor: "bgColor", border: "border", borderRadius: "borderRadius", textColor: "textColor", value: "value", labelPosition: "labelPosition", labelColor: "labelColor", disable: "disable", min: "min", max: "max", showBorder: "showBorder", showErrorMessage: "showErrorMessage", errorMessageColor: "errorMessageColor", errorBorderColor: "errorBorderColor", errorPosition: "errorPosition", svg: "svg", svgWidth: "svgWidth", svgHeight: "svgHeight", svgColor: "svgColor", capitalization: "capitalization", inputContainerClass: "inputContainerClass", inputFieldClass: "inputFieldClass", inputWrapperClass: "inputWrapperClass", customErrorMessages: "customErrorMessages" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"input-container {{ inputContainerClass }}\"\n [ngStyle]=\"{\n 'display': 'flex',\n 'flex-direction': 'column',\n\n }\"\n>\n <div\n [ngStyle]=\"{\n 'display': 'flex',\n 'justify-content': labelPosition,\n 'color': labelColor,\n 'padding': '0'\n }\"\n class=\"input-field\"\n >\n <label [for]=\"label\">{{ label }}</label>\n </div>\n\n <div class=\"input-wrapper {{ inputWrapperClass }}\">\n <input\n [ngClass]=\"{'ng-invalid': isInvalid}\"\n [id]=\"label\"\n [attr.type]=\"type\"\n [attr.placeholder]=\"placeHolder\"\n\n [attr.minlength]=\"minLength?.toString()\"\n [attr.maxlength]=\"maxLength?.toString()\"\n (input)=\"onInput($event)\"\n [(ngModel)]=\"value\"\n [ngStyle]=\"{\n 'background-color': bgColor,\n 'border': isInvalid && errorBorderColor? '1px solid ' + errorBorderColor : border ,\n 'border-radius': borderRadius,\n 'color': textColor\n }\"\n class=\"input-field verben-input\"\n />\n\n <!-- Conditional red dot for error when showErrorMessage is false -->\n <verben-tooltip *ngIf=\"errorMessage && !showErrorMessage\"\n [tooltipContent]=\"tooltipTemplate\"\n customClass=\"error-tooltip\">\n <div class=\"error-dot\"\n [ngStyle]=\"{ 'background-color': errorBorderColor }\">\n </div>\n </verben-tooltip>\n\n <!-- Tooltip template for error message -->\n <ng-template #tooltipTemplate>\n {{ errorMessage }}\n </ng-template>\n\n <!-- Conditional error message display -->\n <span *ngIf=\"errorMessage && showErrorMessage\"\n [ngStyle]=\"{ 'color': errorMessageColor }\"\n [ngClass]=\"{'verben-error-message': true,\n 'top-error': errorPosition === 'top',\n 'left-error': errorPosition === 'left',\n 'right-error': errorPosition === 'right'}\"\n class=\"verben-error-message \"\n >\n\n {{ errorMessage }}\n\n </span>\n </div>\n</div>\n", styles: ["*{font-family:sans-serif;font-size:.9rem}.w-100{width:100%}.h-100{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.input-container{display:flex;flex-direction:column;gap:5px;position:relative}.input-field{width:100%;padding:6px}.error-message-text{font-size:12px;margin:0}.error-top{position:absolute;top:0;left:50%}.error-bottom{position:relative;margin-top:5px}.error-left{position:absolute;left:-10px}.error-right{position:absolute;right:-10px;top:0}.input-wrapper{position:relative}.input-field{width:100%;padding:8px}.error-dot{position:absolute;top:0%;right:-10px;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;cursor:pointer}.error-message{position:absolute;z-index:1;left:0;right:0;bottom:-20px}.top-error .error-message{position:absolute!important;top:-20px!important;bottom:initial!important}.left-error{position:absolute!important;bottom:50%!important;right:calc(100% + 10px)!important;width:max-content;left:initial!important;transform:translateY(50%);top:-100px}.right-error .error-message{position:absolute!important;bottom:50%!important;left:calc(100% + 10px)!important;width:max-content;right:initial!important;transform:translateY(50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.TooltipComponent, selector: "verben-tooltip", inputs: ["tooltipContent", "customClass", "backgroundColor", "textColor", "padding", "borderRadius", "border", "width", "top", "bottom", "left", "right"] }] });
175
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: VerbenaInputComponent, selector: "verbena-input", inputs: { label: "label", placeHolder: "placeHolder", required: "required", svgPosition: "svgPosition", minLength: "minLength", maxLength: "maxLength", type: "type", bgColor: "bgColor", border: "border", borderRadius: "borderRadius", textColor: "textColor", value: "value", labelPosition: "labelPosition", labelColor: "labelColor", disable: "disable", min: "min", max: "max", showBorder: "showBorder", showErrorMessage: "showErrorMessage", errorMessageColor: "errorMessageColor", errorBorderColor: "errorBorderColor", errorPosition: "errorPosition", svg: "svg", svgWidth: "svgWidth", svgHeight: "svgHeight", svgColor: "svgColor", capitalization: "capitalization", inputContainerClass: "inputContainerClass", inputFieldClass: "inputFieldClass", inputWrapperClass: "inputWrapperClass", customErrorMessages: "customErrorMessages" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"input-container {{ inputContainerClass }}\"\n [ngStyle]=\"{\n 'display': 'flex',\n 'flex-direction': 'column',\n\n }\"\n>\n <div\n [ngStyle]=\"{\n 'display': 'flex',\n 'justify-content': labelPosition,\n 'color': labelColor,\n 'padding': '0'\n }\"\n class=\"input-field\"\n >\n <label [for]=\"label\">{{ label }}</label>\n </div>\n\n <div class=\"input-wrapper {{ inputWrapperClass }}\">\n <input\n [ngClass]=\"{'ng-invalid': isInvalid}\"\n [id]=\"label\"\n [attr.type]=\"type\"\n [attr.placeholder]=\"placeHolder\"\n\n [attr.minlength]=\"minLength?.toString()\"\n [attr.maxlength]=\"maxLength?.toString()\"\n (input)=\"onInput($event)\"\n [(ngModel)]=\"value\"\n [ngStyle]=\"{\n 'background-color': bgColor,\n 'border': isInvalid && errorBorderColor? '1px solid ' + errorBorderColor : border ,\n 'border-radius': borderRadius,\n 'color': textColor\n }\"\n class=\"input-field verben-input\"\n />\n\n <!-- Conditional red dot for error when showErrorMessage is false -->\n <verben-tooltip *ngIf=\"errorMessage && !showErrorMessage\"\n [tooltipContent]=\"tooltipTemplate\"\n customClass=\"error-tooltip\">\n <div class=\"error-dot\"\n [ngStyle]=\"{ 'background-color': errorBorderColor }\">\n </div>\n </verben-tooltip>\n\n <!-- Tooltip template for error message -->\n <ng-template #tooltipTemplate>\n {{ errorMessage }}\n </ng-template>\n\n <!-- Conditional error message display -->\n <span *ngIf=\"errorMessage && showErrorMessage\"\n [ngStyle]=\"{ 'color': errorMessageColor }\"\n [ngClass]=\"{'verben-error-message': true,\n 'top-error': errorPosition === 'top',\n 'left-error': errorPosition === 'left',\n 'right-error': errorPosition === 'right'}\"\n class=\"verben-error-message \"\n >\n\n {{ errorMessage }}\n\n </span>\n </div>\n</div>\n", styles: ["*{font-family:sans-serif;font-size:.9rem}.w-100{width:100%}.h-100{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.input-container{display:flex;flex-direction:column;gap:5px;position:relative}.input-field{width:100%;padding:6px}.error-message-text{font-size:12px;margin:0}.error-top{position:absolute;top:0;left:50%}.error-bottom{position:relative;margin-top:5px}.error-left{position:absolute;left:-10px}.error-right{position:absolute;right:-10px;top:0}.input-wrapper{position:relative}.input-field{width:100%;padding:8px}.error-dot{position:absolute;top:0%;right:-10px;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;cursor:pointer}.error-message{position:absolute;z-index:1;left:0;right:0;bottom:-20px}.top-error .error-message{position:absolute!important;top:-20px!important;bottom:initial!important}.left-error{position:absolute!important;bottom:50%!important;right:calc(100% + 10px)!important;width:max-content;left:initial!important;transform:translateY(50%);top:-100px}.right-error .error-message{position:absolute!important;bottom:50%!important;left:calc(100% + 10px)!important;width:max-content;right:initial!important;transform:translateY(50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.TooltipComponent, selector: "verben-tooltip", inputs: ["tooltipContent", "customClass", "backgroundColor", "textColor", "padding", "borderRadius", "zIndex", "border", "width", "top", "bottom", "left", "right"] }] });
176
176
  }
177
177
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: VerbenaInputComponent, decorators: [{
178
178
  type: Component,
package/esm2022/lib/components/data-view/data-view.component.mjs CHANGED
@@ -8,10 +8,20 @@ import * as i5 from "./data-view-click-outside.directive";
8
8
  export class DataViewComponent {
9
9
  buttonClass;
10
10
  iconClass;
11
- activeIconClass;
12
- gridIcon = 'grid-3';
13
- listIcon = 'list-view';
14
- // Grouped view state input
11
+ activeIconClass = "";
12
+ columnCustomClass = '';
13
+ filterCustomClass = '';
14
+ sortCustomClass = '';
15
+ exportCustomClass = '';
16
+ selectCustomClass = '';
17
+ zIndex = 5;
18
+ createCustomClass = '';
19
+ tableIcon = 'grid-3';
20
+ cardIcon = 'list-view';
21
+ cardClass = '';
22
+ tableClass = '';
23
+ searchKey = 'search';
24
+ searchValue = '';
15
25
  viewState = {
16
26
  isSearch: true,
17
27
  isColumn: true,
@@ -19,13 +29,15 @@ export class DataViewComponent {
19
29
  isSort: true,
20
30
  isExport: true,
21
31
  isSelect: true,
22
- isCreate: true
32
+ isCreate: true,
33
+ isToggle: true
23
34
  };
24
35
  searchTemplate;
25
36
  columnTemplate;
26
37
  filterTemplate;
27
38
  sortTemplate;
28
39
  exportTemplate;
40
+ createTemplate;
29
41
  selectedColumnCount = 0;
30
42
  selectedSortCount = 0;
31
43
  selectedFilterTableCount = 0;
@@ -36,18 +48,23 @@ export class DataViewComponent {
36
48
  showExportChild = false;
37
49
  create = false;
38
50
  showSelected = false;
51
+ isTableView = false;
39
52
  viewChange = new EventEmitter();
40
53
  stateChange = new EventEmitter();
41
- isGridView = false;
54
+ onSearchChange = new EventEmitter();
42
55
  ngOnInit() { }
43
56
  toggleView() {
44
- this.isGridView = !this.isGridView;
45
- this.viewChange.emit(this.isGridView);
57
+ this.isTableView = !this.isTableView;
58
+ this.viewChange.emit(this.isTableView);
46
59
  }
47
60
  onSearch(event) {
48
- this.stateChange.emit({ key: 'search', value: event.target.value });
61
+ this.searchValue = event.target.value;
62
+ console.log({ key: this.searchKey, value: event.target.value });
63
+ this.onSearchChange.emit({ key: this.searchKey, value: this.searchValue });
64
+ }
65
+ onClearSearch() {
66
+ this.searchValue = "";
49
67
  }
50
- // Generalized toggle method for managing UI components
51
68
  toggleChildView(viewType) {
52
69
  switch (viewType) {
53
70
  case 'column':
@@ -112,20 +129,42 @@ export class DataViewComponent {
112
129
  }
113
130
  }
114
131
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
115
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: DataViewComponent, selector: "verben-data-view", inputs: { buttonClass: "buttonClass", iconClass: "iconClass", activeIconClass: "activeIconClass", gridIcon: "gridIcon", listIcon: "listIcon", viewState: "viewState", searchTemplate: "searchTemplate", columnTemplate: "columnTemplate", filterTemplate: "filterTemplate", sortTemplate: "sortTemplate", exportTemplate: "exportTemplate", selectedColumnCount: "selectedColumnCount", selectedSortCount: "selectedSortCount", selectedFilterTableCount: "selectedFilterTableCount", inputWidth: "inputWidth", showColumnChild: "showColumnChild", showSortChild: "showSortChild", showFilterChild: "showFilterChild", showExportChild: "showExportChild", create: "create", showSelected: "showSelected" }, outputs: { viewChange: "viewChange", stateChange: "stateChange" }, ngImport: i0, template: "<div class=\"toolbar flex gap justify-between items-center\" [style.margin]=\"'0px 35px'\">\n <div class=\"flex items-center gap\">\n <div class=\"toggle-button-container\">\n <button type=\"button\" (click)=\"toggleView()\" [ngClass]=\"buttonClass\">\n <verben-svg\n [icon]=\"gridIcon\"\n [class.active]=\"!isGridView\"\n [ngClass]=\"!isGridView ? activeIconClass : iconClass\"\n ></verben-svg>\n <verben-svg\n [icon]=\"listIcon\"\n [class.active]=\"isGridView\"\n [ngClass]=\"isGridView ? activeIconClass : iconClass\"\n [width]=\"25\"\n [height]=\"25\"\n ></verben-svg>\n </button>\n </div>\n <!-- Search Input -->\n <div [style.width]=\"inputWidth\" class=\"search-input\" *ngIf=\"viewState.isSearch\">\n <verbena-input\n [type]=\"'text'\"\n [placeHolder]=\"'Search...'\"\n (input)=\"onSearch($event)\"\n [borderRadius]=\"'10px'\"\n [border]=\"'0'\"\n />\n </div>\n </div>\n\n <div class=\"flex items-center relative gap\" [style.margin-left]=\"'10px'\">\n <!-- Column Section -->\n <ng-container\n [appOutSideClick]=\"showColumnChild\"\n (outSideClick)=\"showColumnChild = false\"\n *ngIf=\"viewState.isColumn && isGridView\"\n >\n <ng-container *ngIf=\"columnTemplate; else defaultColumn\"></ng-container>\n <ng-template #defaultColumn>\n <span\n class=\"flex gap text-xs items-center pd rounded cursor-pointer\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('column')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'column'\"></verben-svg>\n <span>Columns <sup>({{ selectedColumnCount }})</sup></span>\n </span>\n <div class=\"data-view-element\">\n <ng-content *ngIf=\"showColumnChild\" select=\"[column-content]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Filter Section -->\n <ng-container\n [appOutSideClick]=\"showFilterChild\"\n (outSideClick)=\"showFilterChild = false\"\n *ngIf=\"viewState.isFilter\"\n >\n <ng-container *ngIf=\"filterTemplate; else defaultFilter\"></ng-container>\n <ng-template #defaultFilter>\n <span\n class=\"flex gap text-xs items-center pd rounded cursor-pointer\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('filter')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'filter'\"></verben-svg>\n <span>Filter <sup>({{ selectedFilterTableCount }})</sup></span>\n </span>\n <div class=\"data-view-element\">\n <ng-content *ngIf=\"showFilterChild\" select=\"[filter-content]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Sort Section -->\n <ng-container\n [appOutSideClick]=\"showSortChild\"\n (outSideClick)=\"showSortChild = false\"\n *ngIf=\"viewState.isSort\"\n >\n <ng-container *ngIf=\"sortTemplate; else defaultSort\"></ng-container>\n <ng-template #defaultSort>\n <span\n class=\"flex gap text-xs items-center pd rounded cursor-pointer\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('sort')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'sort'\"></verben-svg>\n <span>Sort <sup>({{ selectedSortCount }})</sup></span>\n </span>\n <div class=\"data-view-element\">\n <ng-content *ngIf=\"showSortChild\" select=\"[sort-content]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Export Section -->\n <ng-container\n [appOutSideClick]=\"showExportChild\"\n (outSideClick)=\"showExportChild = false\"\n *ngIf=\"viewState.isExport\"\n >\n <ng-container *ngIf=\"exportTemplate; else defaultExport\"></ng-container>\n <ng-template #defaultExport>\n <span\n class=\"flex gap text-xs items-center pd rounded cursor-pointer\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('export')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'export'\"></verben-svg>\n Export\n </span>\n <div class=\"data-view-element\">\n <ng-content *ngIf=\"showExportChild\" select=\"[export-content]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Select Section -->\n <div *ngIf=\"viewState.isSelect\">\n <span\n class=\"flex gap text-xs items-center pd rounded cursor-pointer\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('select')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'select'\"></verben-svg>\n <span>Select</span>\n <verben-svg [width]=\"6\" [icon]=\"'chevron-down'\"></verben-svg>\n </span>\n </div>\n\n <!-- Create Button -->\n <div *ngIf=\"viewState.isCreate\">\n <verbena-button\n class=\"text-sm font-semibold\"\n [bgColor]=\"'#FFE681'\"\n [pd]=\"'6px'\"\n [borderRadius]=\"'4px'\"\n [textColor]=\"'#000'\"\n [svg]=\"'add'\"\n [svgPosition]=\"'right'\"\n [text]=\"'Create New'\"\n (click)=\"toggleChildView('create')\"\n >\n </verbena-button>\n </div>\n </div>\n</div>\n\n<!-- Grid and List View Handling -->\n<div *ngIf=\"isGridView; else listViewTemplate\">\n <div class=\"grid-view\">\n <ng-content select=\"[grid-content]\"></ng-content>\n </div>\n</div>\n<ng-template #listViewTemplate>\n <div class=\"list-view\">\n <ng-content select=\"[list-content]\"></ng-content>\n </div>\n</ng-template>\n", styles: [".toggle-button-container button{display:flex;justify-content:space-between;align-content:center;border:none;background-color:transparent;cursor:pointer;border:1px solid gray;padding:0;border-radius:6px;overflow:hidden;height:35px}.toggle-button-container verben-svg{transition:background-color .5s ease;padding:6px;position:relative}.toggle-button-container verben-svg.active{background-color:#d3d3d3}.flex{display:flex}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.text-xs{font-size:12px}.gap{gap:7px}.pd{padding:5px 8px}.rounded-sm{border-radius:10px}.cursor-pointer{cursor:pointer}.search-input{width:30%}sup{color:#3479e9;font-weight:500}.data-view-element{position:absolute;top:50px;left:0}.relative{position:relative}.z-10{z-index:100}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "component", type: i4.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "directive", type: i5.OutSideClickDirective, selector: "[appOutSideClick]", inputs: ["appOutSideClick"], outputs: ["outSideClick"] }] });
132
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: DataViewComponent, selector: "verben-data-view", inputs: { buttonClass: "buttonClass", iconClass: "iconClass", activeIconClass: "activeIconClass", columnCustomClass: "columnCustomClass", filterCustomClass: "filterCustomClass", sortCustomClass: "sortCustomClass", exportCustomClass: "exportCustomClass", selectCustomClass: "selectCustomClass", zIndex: "zIndex", createCustomClass: "createCustomClass", tableIcon: "tableIcon", cardIcon: "cardIcon", cardClass: "cardClass", tableClass: "tableClass", searchKey: "searchKey", searchValue: "searchValue", viewState: "viewState", searchTemplate: "searchTemplate", columnTemplate: "columnTemplate", filterTemplate: "filterTemplate", sortTemplate: "sortTemplate", exportTemplate: "exportTemplate", createTemplate: "createTemplate", selectedColumnCount: "selectedColumnCount", selectedSortCount: "selectedSortCount", selectedFilterTableCount: "selectedFilterTableCount", inputWidth: "inputWidth", showColumnChild: "showColumnChild", showSortChild: "showSortChild", showFilterChild: "showFilterChild", showExportChild: "showExportChild", create: "create", showSelected: "showSelected", isTableView: "isTableView" }, outputs: { viewChange: "viewChange", stateChange: "stateChange", onSearchChange: "onSearchChange" }, ngImport: i0, template: "<div\n class=\"toolbar flex gap justify-between items-center\"\n [style.margin]=\"'0px 35px'\"\n>\n <div class=\"flex items-center gap\">\n <div *ngIf=\"viewState.isToggle\" class=\"toggle-button-container\">\n <button type=\"button\" (click)=\"toggleView()\" [ngClass]=\"buttonClass\">\n <verben-svg\n [icon]=\"tableIcon\"\n [class.active]=\"!isTableView\"\n [ngClass]=\"!isTableView ? activeIconClass : iconClass\"\n ></verben-svg>\n <verben-svg\n [icon]=\"cardIcon\"\n [class.active]=\"isTableView\"\n [ngClass]=\"isTableView ? activeIconClass : iconClass\"\n [width]=\"25\"\n\n [height]=\"25\"\n ></verben-svg>\n </button>\n </div>\n <!-- Search Input -->\n <div\n [style.width]=\"inputWidth\"\n class=\"search-input\"\n *ngIf=\"viewState.isSearch\"\n >\n <verbena-input\n [type]=\"'text'\"\n [placeHolder]=\"'Search...'\"\n (input)=\"onSearch($event)\"\n [bgColor]=\"'transparent'\"\n [border]=\"'0'\"\n [value]=\"searchValue\"\n />\n <verben-svg\n *ngIf=\"searchValue.length>0\"\n [icon]=\"'close'\"\n [width]=\"15\"\n (click)=\"onClearSearch()\"\n class=\"close-icon-class\"\n [height]=\"15\"\n ></verben-svg>\n </div>\n </div>\n\n <div class=\"flex items-center relative gap\" [style.margin-left]=\"'10px'\">\n <!-- Column Section -->\n <ng-container\n [appOutSideClick]=\"showColumnChild\"\n (outSideClick)=\"showColumnChild = false\"\n *ngIf=\"viewState.isColumn && isTableView\"\n >\n <ng-container *ngIf=\"columnTemplate; else defaultColumn\"></ng-container>\n <ng-template #defaultColumn>\n <span\n [ngClass]=\"[\n 'flex gap text-xs items-center pd rounded cursor-pointer',\n columnCustomClass ? columnCustomClass : ''\n ]\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('column')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'column'\"></verben-svg>\n <span\n >Columns <sup>({{ selectedColumnCount }})</sup></span\n >\n </span>\n <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n <ng-content\n *ngIf=\"showColumnChild\"\n select=\"[column-content]\"\n ></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Filter Section -->\n <ng-container\n [appOutSideClick]=\"showFilterChild\"\n (outSideClick)=\"showFilterChild = false\"\n *ngIf=\"viewState.isFilter\"\n >\n <ng-container *ngIf=\"filterTemplate; else defaultFilter\"></ng-container>\n <ng-template #defaultFilter>\n <span\n [ngClass]=\"[\n 'flex gap text-xs items-center pd rounded cursor-pointer',\n filterCustomClass ? filterCustomClass : ''\n ]\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('filter')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'filter'\"></verben-svg>\n <span\n >Filter <sup>({{ selectedFilterTableCount }})</sup></span\n >\n </span>\n <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n <ng-content\n *ngIf=\"showFilterChild\"\n select=\"[filter-content]\"\n ></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Sort Section -->\n <ng-container\n [appOutSideClick]=\"showSortChild\"\n (outSideClick)=\"showSortChild = false\"\n *ngIf=\"viewState.isSort\"\n >\n <ng-container *ngIf=\"sortTemplate; else defaultSort\"></ng-container>\n <ng-template #defaultSort>\n <span\n [ngClass]=\"[\n 'flex gap text-xs items-center pd rounded cursor-pointer',\n sortCustomClass ? sortCustomClass : ''\n ]\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('sort')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'sort'\"></verben-svg>\n <span\n >Sort <sup>({{ selectedSortCount }})</sup></span\n >\n </span>\n <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n <ng-content\n *ngIf=\"showSortChild\"\n select=\"[sort-content]\"\n ></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Export Section -->\n <ng-container\n [appOutSideClick]=\"showExportChild\"\n (outSideClick)=\"showExportChild = false\"\n *ngIf=\"viewState.isExport\"\n >\n <ng-container *ngIf=\"exportTemplate; else defaultExport\"></ng-container>\n <ng-template #defaultExport>\n <span\n [ngClass]=\"[\n 'flex gap text-xs items-center pd rounded cursor-pointer',\n exportCustomClass ? exportCustomClass : ''\n ]\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('export')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'export'\"></verben-svg>\n Export\n </span>\n <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n <ng-content\n *ngIf=\"showExportChild\"\n select=\"[export-content]\"\n ></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Select Section -->\n <div *ngIf=\"viewState.isSelect\">\n <span\n [ngClass]=\"[\n 'flex gap text-xs items-center pd rounded cursor-pointer',\n selectCustomClass ? selectCustomClass : ''\n ]\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('select')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'select'\"></verben-svg>\n <span>Select</span>\n <verben-svg [width]=\"6\" [icon]=\"'chevron-down'\"></verben-svg>\n </span>\n </div>\n\n <!-- Create Button -->\n \n <div [appOutSideClick]=\"create\"\n (outSideClick)=\"create = false\" *ngIf=\"viewState.isCreate\">\n <verbena-button\n class=\"text-sm font-semibold\"\n [bgColor]=\"'#FFE681'\"\n [buttonClass]=\"createCustomClass\"\n [pd]=\"'6px'\"\n [borderRadius]=\"'4px'\"\n [textColor]=\"'#000'\"\n [svg]=\"'add'\"\n [svgPosition]=\"'right'\"\n [text]=\"'Create New'\"\n (click)=\"toggleChildView('create')\"\n >\n </verbena-button>\n <ng-container *ngIf=\"createTemplate; else defaultCreate\"></ng-container>\n <ng-template #defaultCreate>\n \n <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n <ng-content\n *ngIf=\"create\"\n select=\"[create-content]\"\n ></ng-content>\n </div>\n </ng-template>\n </div>\n </div>\n</div>\n\n<!-- Grid and List View Handling -->\n<div *ngIf=\"isTableView; else listViewTemplate\">\n <div [class]=\"tableClass\">\n <ng-content select=\"[table-content]\"></ng-content>\n </div>\n</div>\n<ng-template #listViewTemplate>\n <div [class]=\"cardClass\">\n <ng-content select=\"[card-content]\"></ng-content>\n </div>\n</ng-template>\n", styles: [".toggle-button-container button{display:flex;justify-content:space-between;align-content:center;border:none;background-color:transparent;cursor:pointer;border:1px solid gray;padding:0;border-radius:6px;overflow:hidden;height:35px}.toggle-button-container verben-svg{transition:background-color .5s ease;padding:6px;position:relative}.toggle-button-container verben-svg.active{background-color:#d3d3d3}.flex{display:flex}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.text-xs{font-size:12px}.gap{gap:7px}.pd{padding:5px 8px}.rounded-sm{border-radius:10px}.cursor-pointer{cursor:pointer}.search-input{position:relative;background-color:#f9f9f9;border-radius:10px}sup{color:#3479e9;font-weight:500}.data-view-element{position:absolute;top:80px;left:0}.relative{position:relative}.z-10{z-index:100000000000}.close-icon-class{position:absolute;right:10px;cursor:pointer;top:13px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "component", type: i4.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "directive", type: i5.OutSideClickDirective, selector: "[appOutSideClick]", inputs: ["appOutSideClick"], outputs: ["outSideClick"] }] });
116
133
  }
117
134
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataViewComponent, decorators: [{
118
135
  type: Component,
119
- args: [{ selector: 'verben-data-view', template: "<div class=\"toolbar flex gap justify-between items-center\" [style.margin]=\"'0px 35px'\">\n <div class=\"flex items-center gap\">\n <div class=\"toggle-button-container\">\n <button type=\"button\" (click)=\"toggleView()\" [ngClass]=\"buttonClass\">\n <verben-svg\n [icon]=\"gridIcon\"\n [class.active]=\"!isGridView\"\n [ngClass]=\"!isGridView ? activeIconClass : iconClass\"\n ></verben-svg>\n <verben-svg\n [icon]=\"listIcon\"\n [class.active]=\"isGridView\"\n [ngClass]=\"isGridView ? activeIconClass : iconClass\"\n [width]=\"25\"\n [height]=\"25\"\n ></verben-svg>\n </button>\n </div>\n <!-- Search Input -->\n <div [style.width]=\"inputWidth\" class=\"search-input\" *ngIf=\"viewState.isSearch\">\n <verbena-input\n [type]=\"'text'\"\n [placeHolder]=\"'Search...'\"\n (input)=\"onSearch($event)\"\n [borderRadius]=\"'10px'\"\n [border]=\"'0'\"\n />\n </div>\n </div>\n\n <div class=\"flex items-center relative gap\" [style.margin-left]=\"'10px'\">\n <!-- Column Section -->\n <ng-container\n [appOutSideClick]=\"showColumnChild\"\n (outSideClick)=\"showColumnChild = false\"\n *ngIf=\"viewState.isColumn && isGridView\"\n >\n <ng-container *ngIf=\"columnTemplate; else defaultColumn\"></ng-container>\n <ng-template #defaultColumn>\n <span\n class=\"flex gap text-xs items-center pd rounded cursor-pointer\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('column')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'column'\"></verben-svg>\n <span>Columns <sup>({{ selectedColumnCount }})</sup></span>\n </span>\n <div class=\"data-view-element\">\n <ng-content *ngIf=\"showColumnChild\" select=\"[column-content]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Filter Section -->\n <ng-container\n [appOutSideClick]=\"showFilterChild\"\n (outSideClick)=\"showFilterChild = false\"\n *ngIf=\"viewState.isFilter\"\n >\n <ng-container *ngIf=\"filterTemplate; else defaultFilter\"></ng-container>\n <ng-template #defaultFilter>\n <span\n class=\"flex gap text-xs items-center pd rounded cursor-pointer\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('filter')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'filter'\"></verben-svg>\n <span>Filter <sup>({{ selectedFilterTableCount }})</sup></span>\n </span>\n <div class=\"data-view-element\">\n <ng-content *ngIf=\"showFilterChild\" select=\"[filter-content]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Sort Section -->\n <ng-container\n [appOutSideClick]=\"showSortChild\"\n (outSideClick)=\"showSortChild = false\"\n *ngIf=\"viewState.isSort\"\n >\n <ng-container *ngIf=\"sortTemplate; else defaultSort\"></ng-container>\n <ng-template #defaultSort>\n <span\n class=\"flex gap text-xs items-center pd rounded cursor-pointer\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('sort')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'sort'\"></verben-svg>\n <span>Sort <sup>({{ selectedSortCount }})</sup></span>\n </span>\n <div class=\"data-view-element\">\n <ng-content *ngIf=\"showSortChild\" select=\"[sort-content]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Export Section -->\n <ng-container\n [appOutSideClick]=\"showExportChild\"\n (outSideClick)=\"showExportChild = false\"\n *ngIf=\"viewState.isExport\"\n >\n <ng-container *ngIf=\"exportTemplate; else defaultExport\"></ng-container>\n <ng-template #defaultExport>\n <span\n class=\"flex gap text-xs items-center pd rounded cursor-pointer\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('export')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'export'\"></verben-svg>\n Export\n </span>\n <div class=\"data-view-element\">\n <ng-content *ngIf=\"showExportChild\" select=\"[export-content]\"></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Select Section -->\n <div *ngIf=\"viewState.isSelect\">\n <span\n class=\"flex gap text-xs items-center pd rounded cursor-pointer\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('select')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'select'\"></verben-svg>\n <span>Select</span>\n <verben-svg [width]=\"6\" [icon]=\"'chevron-down'\"></verben-svg>\n </span>\n </div>\n\n <!-- Create Button -->\n <div *ngIf=\"viewState.isCreate\">\n <verbena-button\n class=\"text-sm font-semibold\"\n [bgColor]=\"'#FFE681'\"\n [pd]=\"'6px'\"\n [borderRadius]=\"'4px'\"\n [textColor]=\"'#000'\"\n [svg]=\"'add'\"\n [svgPosition]=\"'right'\"\n [text]=\"'Create New'\"\n (click)=\"toggleChildView('create')\"\n >\n </verbena-button>\n </div>\n </div>\n</div>\n\n<!-- Grid and List View Handling -->\n<div *ngIf=\"isGridView; else listViewTemplate\">\n <div class=\"grid-view\">\n <ng-content select=\"[grid-content]\"></ng-content>\n </div>\n</div>\n<ng-template #listViewTemplate>\n <div class=\"list-view\">\n <ng-content select=\"[list-content]\"></ng-content>\n </div>\n</ng-template>\n", styles: [".toggle-button-container button{display:flex;justify-content:space-between;align-content:center;border:none;background-color:transparent;cursor:pointer;border:1px solid gray;padding:0;border-radius:6px;overflow:hidden;height:35px}.toggle-button-container verben-svg{transition:background-color .5s ease;padding:6px;position:relative}.toggle-button-container verben-svg.active{background-color:#d3d3d3}.flex{display:flex}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.text-xs{font-size:12px}.gap{gap:7px}.pd{padding:5px 8px}.rounded-sm{border-radius:10px}.cursor-pointer{cursor:pointer}.search-input{width:30%}sup{color:#3479e9;font-weight:500}.data-view-element{position:absolute;top:50px;left:0}.relative{position:relative}.z-10{z-index:100}\n"] }]
136
+ args: [{ selector: 'verben-data-view', template: "<div\n class=\"toolbar flex gap justify-between items-center\"\n [style.margin]=\"'0px 35px'\"\n>\n <div class=\"flex items-center gap\">\n <div *ngIf=\"viewState.isToggle\" class=\"toggle-button-container\">\n <button type=\"button\" (click)=\"toggleView()\" [ngClass]=\"buttonClass\">\n <verben-svg\n [icon]=\"tableIcon\"\n [class.active]=\"!isTableView\"\n [ngClass]=\"!isTableView ? activeIconClass : iconClass\"\n ></verben-svg>\n <verben-svg\n [icon]=\"cardIcon\"\n [class.active]=\"isTableView\"\n [ngClass]=\"isTableView ? activeIconClass : iconClass\"\n [width]=\"25\"\n\n [height]=\"25\"\n ></verben-svg>\n </button>\n </div>\n <!-- Search Input -->\n <div\n [style.width]=\"inputWidth\"\n class=\"search-input\"\n *ngIf=\"viewState.isSearch\"\n >\n <verbena-input\n [type]=\"'text'\"\n [placeHolder]=\"'Search...'\"\n (input)=\"onSearch($event)\"\n [bgColor]=\"'transparent'\"\n [border]=\"'0'\"\n [value]=\"searchValue\"\n />\n <verben-svg\n *ngIf=\"searchValue.length>0\"\n [icon]=\"'close'\"\n [width]=\"15\"\n (click)=\"onClearSearch()\"\n class=\"close-icon-class\"\n [height]=\"15\"\n ></verben-svg>\n </div>\n </div>\n\n <div class=\"flex items-center relative gap\" [style.margin-left]=\"'10px'\">\n <!-- Column Section -->\n <ng-container\n [appOutSideClick]=\"showColumnChild\"\n (outSideClick)=\"showColumnChild = false\"\n *ngIf=\"viewState.isColumn && isTableView\"\n >\n <ng-container *ngIf=\"columnTemplate; else defaultColumn\"></ng-container>\n <ng-template #defaultColumn>\n <span\n [ngClass]=\"[\n 'flex gap text-xs items-center pd rounded cursor-pointer',\n columnCustomClass ? columnCustomClass : ''\n ]\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('column')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'column'\"></verben-svg>\n <span\n >Columns <sup>({{ selectedColumnCount }})</sup></span\n >\n </span>\n <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n <ng-content\n *ngIf=\"showColumnChild\"\n select=\"[column-content]\"\n ></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Filter Section -->\n <ng-container\n [appOutSideClick]=\"showFilterChild\"\n (outSideClick)=\"showFilterChild = false\"\n *ngIf=\"viewState.isFilter\"\n >\n <ng-container *ngIf=\"filterTemplate; else defaultFilter\"></ng-container>\n <ng-template #defaultFilter>\n <span\n [ngClass]=\"[\n 'flex gap text-xs items-center pd rounded cursor-pointer',\n filterCustomClass ? filterCustomClass : ''\n ]\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('filter')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'filter'\"></verben-svg>\n <span\n >Filter <sup>({{ selectedFilterTableCount }})</sup></span\n >\n </span>\n <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n <ng-content\n *ngIf=\"showFilterChild\"\n select=\"[filter-content]\"\n ></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Sort Section -->\n <ng-container\n [appOutSideClick]=\"showSortChild\"\n (outSideClick)=\"showSortChild = false\"\n *ngIf=\"viewState.isSort\"\n >\n <ng-container *ngIf=\"sortTemplate; else defaultSort\"></ng-container>\n <ng-template #defaultSort>\n <span\n [ngClass]=\"[\n 'flex gap text-xs items-center pd rounded cursor-pointer',\n sortCustomClass ? sortCustomClass : ''\n ]\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('sort')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'sort'\"></verben-svg>\n <span\n >Sort <sup>({{ selectedSortCount }})</sup></span\n >\n </span>\n <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n <ng-content\n *ngIf=\"showSortChild\"\n select=\"[sort-content]\"\n ></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Export Section -->\n <ng-container\n [appOutSideClick]=\"showExportChild\"\n (outSideClick)=\"showExportChild = false\"\n *ngIf=\"viewState.isExport\"\n >\n <ng-container *ngIf=\"exportTemplate; else defaultExport\"></ng-container>\n <ng-template #defaultExport>\n <span\n [ngClass]=\"[\n 'flex gap text-xs items-center pd rounded cursor-pointer',\n exportCustomClass ? exportCustomClass : ''\n ]\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('export')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'export'\"></verben-svg>\n Export\n </span>\n <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n <ng-content\n *ngIf=\"showExportChild\"\n select=\"[export-content]\"\n ></ng-content>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Select Section -->\n <div *ngIf=\"viewState.isSelect\">\n <span\n [ngClass]=\"[\n 'flex gap text-xs items-center pd rounded cursor-pointer',\n selectCustomClass ? selectCustomClass : ''\n ]\"\n [style.background-color]=\"'#D9D9D940'\"\n (click)=\"toggleChildView('select')\"\n >\n <verben-svg [width]=\"15\" [icon]=\"'select'\"></verben-svg>\n <span>Select</span>\n <verben-svg [width]=\"6\" [icon]=\"'chevron-down'\"></verben-svg>\n </span>\n </div>\n\n <!-- Create Button -->\n \n <div [appOutSideClick]=\"create\"\n (outSideClick)=\"create = false\" *ngIf=\"viewState.isCreate\">\n <verbena-button\n class=\"text-sm font-semibold\"\n [bgColor]=\"'#FFE681'\"\n [buttonClass]=\"createCustomClass\"\n [pd]=\"'6px'\"\n [borderRadius]=\"'4px'\"\n [textColor]=\"'#000'\"\n [svg]=\"'add'\"\n [svgPosition]=\"'right'\"\n [text]=\"'Create New'\"\n (click)=\"toggleChildView('create')\"\n >\n </verbena-button>\n <ng-container *ngIf=\"createTemplate; else defaultCreate\"></ng-container>\n <ng-template #defaultCreate>\n \n <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n <ng-content\n *ngIf=\"create\"\n select=\"[create-content]\"\n ></ng-content>\n </div>\n </ng-template>\n </div>\n </div>\n</div>\n\n<!-- Grid and List View Handling -->\n<div *ngIf=\"isTableView; else listViewTemplate\">\n <div [class]=\"tableClass\">\n <ng-content select=\"[table-content]\"></ng-content>\n </div>\n</div>\n<ng-template #listViewTemplate>\n <div [class]=\"cardClass\">\n <ng-content select=\"[card-content]\"></ng-content>\n </div>\n</ng-template>\n", styles: [".toggle-button-container button{display:flex;justify-content:space-between;align-content:center;border:none;background-color:transparent;cursor:pointer;border:1px solid gray;padding:0;border-radius:6px;overflow:hidden;height:35px}.toggle-button-container verben-svg{transition:background-color .5s ease;padding:6px;position:relative}.toggle-button-container verben-svg.active{background-color:#d3d3d3}.flex{display:flex}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.text-xs{font-size:12px}.gap{gap:7px}.pd{padding:5px 8px}.rounded-sm{border-radius:10px}.cursor-pointer{cursor:pointer}.search-input{position:relative;background-color:#f9f9f9;border-radius:10px}sup{color:#3479e9;font-weight:500}.data-view-element{position:absolute;top:80px;left:0}.relative{position:relative}.z-10{z-index:100000000000}.close-icon-class{position:absolute;right:10px;cursor:pointer;top:13px}\n"] }]
120
137
  }], propDecorators: { buttonClass: [{
121
138
  type: Input
122
139
  }], iconClass: [{
123
140
  type: Input
124
141
  }], activeIconClass: [{
125
142
  type: Input
126
- }], gridIcon: [{
143
+ }], columnCustomClass: [{
144
+ type: Input
145
+ }], filterCustomClass: [{
146
+ type: Input
147
+ }], sortCustomClass: [{
148
+ type: Input
149
+ }], exportCustomClass: [{
150
+ type: Input
151
+ }], selectCustomClass: [{
152
+ type: Input
153
+ }], zIndex: [{
154
+ type: Input
155
+ }], createCustomClass: [{
156
+ type: Input
157
+ }], tableIcon: [{
127
158
  type: Input
128
- }], listIcon: [{
159
+ }], cardIcon: [{
160
+ type: Input
161
+ }], cardClass: [{
162
+ type: Input
163
+ }], tableClass: [{
164
+ type: Input
165
+ }], searchKey: [{
166
+ type: Input
167
+ }], searchValue: [{
129
168
  type: Input
130
169
  }], viewState: [{
131
170
  type: Input
@@ -139,6 +178,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
139
178
  type: Input
140
179
  }], exportTemplate: [{
141
180
  type: Input
181
+ }], createTemplate: [{
182
+ type: Input
142
183
  }], selectedColumnCount: [{
143
184
  type: Input
144
185
  }], selectedSortCount: [{
@@ -159,9 +200,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
159
200
  type: Input
160
201
  }], showSelected: [{
161
202
  type: Input
203
+ }], isTableView: [{
204
+ type: Input
162
205
  }], viewChange: [{
163
206
  type: Output
164
207
  }], stateChange: [{
165
208
  type: Output
209
+ }], onSearchChange: [{
210
+ type: Output
166
211
  }] } });
167
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZlcmJlbi1uZy11aS9zcmMvbGliL2NvbXBvbmVudHMvZGF0YS12aWV3L2RhdGEtdmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2RhdGEtdmlldy9kYXRhLXZpZXcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztBQWlCdkIsTUFBTSxPQUFPLGlCQUFpQjtJQUNuQixXQUFXLENBQVU7SUFDckIsU0FBUyxDQUFVO0lBQ25CLGVBQWUsQ0FBVTtJQUN6QixRQUFRLEdBQVcsUUFBUSxDQUFDO0lBQzVCLFFBQVEsR0FBVyxXQUFXLENBQUM7SUFFeEMsMkJBQTJCO0lBQ2xCLFNBQVMsR0FBYztRQUM5QixRQUFRLEVBQUUsSUFBSTtRQUNkLFFBQVEsRUFBRSxJQUFJO1FBQ2QsUUFBUSxFQUFFLElBQUk7UUFDZCxNQUFNLEVBQUUsSUFBSTtRQUNaLFFBQVEsRUFBRSxJQUFJO1FBQ2QsUUFBUSxFQUFFLElBQUk7UUFDZCxRQUFRLEVBQUMsSUFBSTtLQUNkLENBQUM7SUFFTyxjQUFjLENBQVE7SUFDdEIsY0FBYyxDQUFRO0lBQ3RCLGNBQWMsQ0FBUTtJQUN0QixZQUFZLENBQVE7SUFDcEIsY0FBYyxDQUFRO0lBRXRCLG1CQUFtQixHQUFZLENBQUMsQ0FBQztJQUNqQyxpQkFBaUIsR0FBVyxDQUFDLENBQUM7SUFDOUIsd0JBQXdCLEdBQVcsQ0FBQyxDQUFDO0lBQ3JDLFVBQVUsR0FBUyxPQUFPLENBQUM7SUFDNUIsZUFBZSxHQUFZLEtBQUssQ0FBQztJQUNoQyxhQUFhLEdBQVksS0FB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SztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmludGVyZmFjZSBWaWV3U3RhdGUge1xuICBpc1NlYXJjaD86IGJvb2xlYW47XG4gIGlzQ29sdW1uPzogYm9vbGVhbjtcbiAgaXNGaWx0ZXI/OiBib29sZWFuO1xuICBpc1NvcnQ/OiBib29sZWFuO1xuICBpc0V4cG9ydD86IGJvb2xlYW47XG4gIGlzU2VsZWN0PzogYm9vbGVhbjtcbiAgaXNDcmVhdGU/OmJvb2xlYW5cbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndmVyYmVuLWRhdGEtdmlldycsXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRhLXZpZXcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kYXRhLXZpZXcuY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBEYXRhVmlld0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGJ1dHRvbkNsYXNzPzogc3RyaW5nO1xuICBASW5wdXQoKSBpY29uQ2xhc3M/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGFjdGl2ZUljb25DbGFzcz86IHN0cmluZztcbiAgQElucHV0KCkgZ3JpZEljb246IHN0cmluZyA9ICdncmlkLTMnO1xuICBASW5wdXQoKSBsaXN0SWNvbjogc3RyaW5nID0gJ2xpc3Qtdmlldyc7XG5cbiAgLy8gR3JvdXBlZCB2aWV3IHN0YXRlIGlucHV0XG4gIEBJbnB1dCgpIHZpZXdTdGF0ZTogVmlld1N0YXRlID0ge1xuICAgIGlzU2VhcmNoOiB0cnVlLFxuICAgIGlzQ29sdW1uOiB0cnVlLFxuICAgIGlzRmlsdGVyOiB0cnVlLFxuICAgIGlzU29ydDogdHJ1ZSxcbiAgICBpc0V4cG9ydDogdHJ1ZSxcbiAgICBpc1NlbGVjdDogdHJ1ZSxcbiAgICBpc0NyZWF0ZTp0cnVlXG4gIH07XG5cbiAgQElucHV0KCkgc2VhcmNoVGVtcGxhdGU/OiBOb2RlO1xuICBASW5wdXQoKSBjb2x1bW5UZW1wbGF0ZT86IE5vZGU7XG4gIEBJbnB1dCgpIGZpbHRlclRlbXBsYXRlPzogTm9kZTtcbiAgQElucHV0KCkgc29ydFRlbXBsYXRlPzogTm9kZTtcbiAgQElucHV0KCkgZXhwb3J0VGVtcGxhdGU/OiBOb2RlO1xuXG4gIEBJbnB1dCgpIHNlbGVjdGVkQ29sdW1uQ291bnQ/OiBudW1iZXIgPSAwO1xuICBASW5wdXQoKSBzZWxlY3RlZFNvcnRDb3VudDogbnVtYmVyID0gMDtcbiAgQElucHV0KCkgc2VsZWN0ZWRGaWx0ZXJUYWJsZUNvdW50OiBudW1iZXIgPSAwO1xuICBASW5wdXQoKSBpbnB1dFdpZHRoOiBzdHJpbmc9XCIzNTBweFwiO1xuICBASW5wdXQoKXNob3dDb2x1bW5DaGlsZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBzaG93U29ydENoaWxkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNob3dGaWx0ZXJDaGlsZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBzaG93RXhwb3J0Q2hpbGQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgY3JlYXRlOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNob3dTZWxlY3RlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSB2aWV3Q2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuICBAT3V0cHV0KCkgc3RhdGVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHsga2V5OiBzdHJpbmc7IHZhbHVlOiBib29sZWFuIH0+KCk7XG5cbiAgaXNHcmlkVmlldzogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge31cblxuICB0b2dnbGVWaWV3KCk6IHZvaWQge1xuICAgIHRoaXMuaXNHcmlkVmlldyA9ICF0aGlzLmlzR3JpZFZpZXc7XG4gICAgdGhpcy52aWV3Q2hhbmdlLmVtaXQodGhpcy5pc0dyaWRWaWV3KTtcbiAgfVxuXG4gIG9uU2VhcmNoKGV2ZW50OiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLnN0YXRlQ2hhbmdlLmVtaXQoeyBrZXk6ICdzZWFyY2gnLCB2YWx1ZTogZXZlbnQudGFyZ2V0LnZhbHVlIH0pO1xuICB9XG5cbiAgLy8gR2VuZXJhbGl6ZWQgdG9nZ2xlIG1ldGhvZCBmb3IgbWFuYWdpbmcgVUkgY29tcG9uZW50c1xuICB0b2dnbGVDaGlsZFZpZXcodmlld1R5cGU6IHN0cmluZyk6IHZvaWQge1xuICAgIHN3aXRjaCAodmlld1R5cGUpIHtcbiAgICAgIGNhc2UgJ2NvbHVtbic6XG4gICAgICAgIHRoaXMuc2hvd0NvbHVtbkNoaWxkID0gIXRoaXMuc2hvd0NvbHVtbkNoaWxkO1xuICAgICAgICB0aGlzLnJlc2V0Q2hpbGRWaWV3c0V4Y2VwdCgnY29sdW1uJyk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnZmlsdGVyJzpcbiAgICAgICAgdGhpcy5zaG93RmlsdGVyQ2hpbGQgPSAhdGhpcy5zaG93RmlsdGVyQ2hpbGQ7XG4gICAgICAgIHRoaXMucmVzZXRDaGlsZFZpZXdzRXhjZXB0KCdmaWx0ZXInKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdzb3J0JzpcbiAgICAgICAgdGhpcy5zaG93U29ydENoaWxkID0gIXRoaXMuc2hvd1NvcnRDaGlsZDtcbiAgICAgICAgdGhpcy5yZXNldENoaWxkVmlld3NFeGNlcHQoJ3NvcnQnKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdzZWxlY3QnOlxuICAgICAgICB0aGlzLnNob3dTZWxlY3RlZCA9ICF0aGlzLnNob3dTZWxlY3RlZDtcbiAgICAgICAgdGhpcy5yZXNldENoaWxkVmlld3NFeGNlcHQoJ3NlbGVjdCcpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ2V4cG9ydCc6XG4gICAgICAgIHRoaXMuc2hvd0V4cG9ydENoaWxkID0gIXRoaXMuc2hvd0V4cG9ydENoaWxkO1xuICAgICAgICB0aGlzLnJlc2V0Q2hpbGRWaWV3c0V4Y2VwdCgnZXhwb3J0Jyk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgICBjYXNlICdjcmVhdGUnOlxuICAgICAgICAgIHRoaXMuY3JlYXRlID0gIXRoaXMuY3JlYXRlO1xuICAgICAgICAgIHRoaXMucmVzZXRDaGlsZFZpZXdzRXhjZXB0KCdjcmVhdGUnKTtcbiAgICAgICAgICBicmVhaztcbiAgICB9XG4gICAgdGhpcy5zdGF0ZUNoYW5nZS5lbWl0KHsga2V5OiB2aWV3VHlwZSwgdmFsdWU6IHRoaXMuZ2V0Q2hpbGRWaWV3U3RhdGUodmlld1R5cGUpIH0pO1xuICB9XG5cbiAgLy8gUmVzZXQgb3RoZXIgY2hpbGQgdmlld3Mgd2hlbiBvbmUgaXMgdG9nZ2xlZFxuICByZXNldENoaWxkVmlld3NFeGNlcHQodmlld1R5cGU6IHN0cmluZyk6IHZvaWQge1xuICAgIGlmICh2aWV3VHlwZSAhPT0gJ2NvbHVtbicpIHRoaXMuc2hvd0NvbHVtbkNoaWxkID0gZmFsc2U7XG4gICAgaWYgKHZpZXdUeXBlICE9PSAnZmlsdGVyJykgdGhpcy5zaG93RmlsdGVyQ2hpbGQgPSBmYWxzZTtcbiAgICBpZiAodmlld1R5cGUgIT09ICdzb3J0JykgdGhpcy5zaG93U29ydENoaWxkID0gZmFsc2U7XG4gICAgaWYgKHZpZXdUeXBlICE9PSAnc2VsZWN0JykgdGhpcy5zaG93U2VsZWN0ZWQgPSBmYWxzZTtcbiAgICBpZiAodmlld1R5cGUgIT09ICdleHBvcnQnKSB0aGlzLnNob3dFeHBvcnRDaGlsZCA9IGZhbHNlO1xuICAgIGlmICh2aWV3VHlwZSAhPT0gJ2NyZWF0ZScpIHRoaXMuY3JlYXRlID0gZmFsc2U7XG4gIH1cblxuICAvLyBIZWxwZXIgbWV0aG9kIHRvIGdldCB0aGUgc3RhdGUgb2YgYSBzcGVjaWZpYyBjaGlsZCB2aWV3XG4gIGdldENoaWxkVmlld1N0YXRlKHZpZXdUeXBlOiBzdHJpbmcpOiBib29sZWFuIHtcbiAgICBzd2l0Y2ggKHZpZXdUeXBlKSB7XG4gICAgICBjYXNlICdjb2x1bW4nOlxuICAgICAgICByZXR1cm4gdGhpcy5zaG93Q29sdW1uQ2hpbGQ7XG4gICAgICBjYXNlICdmaWx0ZXInOlxuICAgICAgICByZXR1cm4gdGhpcy5zaG93RmlsdGVyQ2hpbGQ7XG4gICAgICBjYXNlICdzb3J0JzpcbiAgICAgICAgcmV0dXJuIHRoaXMuc2hvd1NvcnRDaGlsZDtcbiAgICAgIGNhc2UgJ3NlbGVjdCc6XG4gICAgICAgIHJldHVybiB0aGlzLnNob3dTZWxlY3RlZDtcbiAgICAgIGNhc2UgJ2V4cG9ydCc6XG4gICAgICAgIHJldHVybiB0aGlzLnNob3dFeHBvcnRDaGlsZDtcbiAgICAgICAgY2FzZSAnY3JlYXRlJzpcbiAgICAgICAgcmV0dXJuIHRoaXMuY3JlYXRlO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInRvb2xiYXIgZmxleCBnYXAganVzdGlmeS1iZXR3ZWVuIGl0ZW1zLWNlbnRlclwiIFtzdHlsZS5tYXJnaW5dPVwiJzBweCAzNXB4J1wiPlxuICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgZ2FwXCI+XG4gICAgPGRpdiBjbGFzcz1cInRvZ2dsZS1idXR0b24tY29udGFpbmVyXCI+XG4gICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwidG9nZ2xlVmlldygpXCIgW25nQ2xhc3NdPVwiYnV0dG9uQ2xhc3NcIj5cbiAgICAgICAgPHZlcmJlbi1zdmdcbiAgICAgICAgICBbaWNvbl09XCJncmlkSWNvblwiXG4gICAgICAgICAgW2NsYXNzLmFjdGl2ZV09XCIhaXNHcmlkVmlld1wiXG4gICAgICAgICAgW25nQ2xhc3NdPVwiIWlzR3JpZFZpZXcgPyBhY3RpdmVJY29uQ2xhc3MgOiBpY29uQ2xhc3NcIlxuICAgICAgICA+PC92ZXJiZW4tc3ZnPlxuICAgICAgICA8dmVyYmVuLXN2Z1xuICAgICAgICAgIFtpY29uXT1cImxpc3RJY29uXCJcbiAgICAgICAgICBbY2xhc3MuYWN0aXZlXT1cImlzR3JpZFZpZXdcIlxuICAgICAgICAgIFtuZ0NsYXNzXT1cImlzR3JpZFZpZXcgPyBhY3RpdmVJY29uQ2xhc3MgOiBpY29uQ2xhc3NcIlxuICAgICAgICAgIFt3aWR0aF09XCIyNVwiXG4gICAgICAgICAgW2hlaWdodF09XCIyNVwiXG4gICAgICAgID48L3ZlcmJlbi1zdmc+XG4gICAgICA8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgICA8IS0tIFNlYXJjaCBJbnB1dCAtLT5cbiAgICA8ZGl2IFtzdHlsZS53aWR0aF09XCJpbnB1dFdpZHRoXCIgY2xhc3M9XCJzZWFyY2gtaW5wdXRcIiAqbmdJZj1cInZpZXdTdGF0ZS5pc1NlYXJjaFwiPlxuICAgICAgPHZlcmJlbmEtaW5wdXRcbiAgICAgICAgW3R5cGVdPVwiJ3RleHQnXCJcbiAgICAgICAgW3BsYWNlSG9sZGVyXT1cIidTZWFyY2guLi4nXCJcbiAgICAgICAgKGlucHV0KT1cIm9uU2VhcmNoKCRldmVudClcIlxuICAgICAgICBbYm9yZGVyUmFkaXVzXT1cIicxMHB4J1wiXG4gICAgICAgIFtib3JkZXJdPVwiJzAnXCJcbiAgICAgIC8+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciByZWxhdGl2ZSBnYXBcIiBbc3R5bGUubWFyZ2luLWxlZnRdPVwiJzEwcHgnXCI+XG4gICAgPCEtLSBDb2x1bW4gU2VjdGlvbiAtLT5cbiAgICA8bmctY29udGFpbmVyXG4gICAgICBbYXBwT3V0U2lkZUNsaWNrXT1cInNob3dDb2x1bW5DaGlsZFwiXG4gICAgICAob3V0U2lkZUNsaWNrKT1cInNob3dDb2x1bW5DaGlsZCA9IGZhbHNlXCJcbiAgICAgICpuZ0lmPVwidmlld1N0YXRlLmlzQ29sdW1uICYmIGlzR3JpZFZpZXdcIlxuICAgID5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjb2x1bW5UZW1wbGF0ZTsgZWxzZSBkZWZhdWx0Q29sdW1uXCI+PC9uZy1jb250YWluZXI+XG4gICAgICA8bmctdGVtcGxhdGUgI2RlZmF1bHRDb2x1bW4+XG4gICAgICAgIDxzcGFuXG4gICAgICAgICAgY2xhc3M9XCJmbGV4IGdhcCB0ZXh0LXhzIGl0ZW1zLWNlbnRlciBwZCByb3VuZGVkIGN1cnNvci1wb2ludGVyXCJcbiAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCInI0Q5RDlEOTQwJ1wiXG4gICAgICAgICAgKGNsaWNrKT1cInRvZ2dsZUNoaWxkVmlldygnY29sdW1uJylcIlxuICAgICAgICA+XG4gICAgICAgICAgPHZlcmJlbi1zdmcgW3dpZHRoXT1cIjE1XCIgW2ljb25dPVwiJ2NvbHVtbidcIj48L3ZlcmJlbi1zdmc+XG4gICAgICAgICAgPHNwYW4+Q29sdW1ucyA8c3VwPih7eyBzZWxlY3RlZENvbHVtbkNvdW50IH19KTwvc3VwPjwvc3Bhbj5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGF0YS12aWV3LWVsZW1lbnRcIj5cbiAgICAgICAgICA8bmctY29udGVudCAqbmdJZj1cInNob3dDb2x1bW5DaGlsZFwiIHNlbGVjdD1cIltjb2x1bW4tY29udGVudF1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDwhLS0gRmlsdGVyIFNlY3Rpb24gLS0+XG4gICAgPG5nLWNvbnRhaW5lclxuICAgICAgW2FwcE91dFNpZGVDbGlja109XCJzaG93RmlsdGVyQ2hpbGRcIlxuICAgICAgKG91dFNpZGVDbGljayk9XCJzaG93RmlsdGVyQ2hpbGQgPSBmYWxzZVwiXG4gICAgICAqbmdJZj1cInZpZXdTdGF0ZS5pc0ZpbHRlclwiXG4gICAgPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZpbHRlclRlbXBsYXRlOyBlbHNlIGRlZmF1bHRGaWx0ZXJcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDxuZy10ZW1wbGF0ZSAjZGVmYXVsdEZpbHRlcj5cbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBjbGFzcz1cImZsZXggZ2FwIHRleHQteHMgaXRlbXMtY2VudGVyIHBkIHJvdW5kZWQgY3Vyc29yLXBvaW50ZXJcIlxuICAgICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cIicjRDlEOUQ5NDAnXCJcbiAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlQ2hpbGRWaWV3KCdmaWx0ZXInKVwiXG4gICAgICAgID5cbiAgICAgICAgICA8dmVyYmVuLXN2ZyBbd2lkdGhdPVwiMTVcIiBbaWNvbl09XCInZmlsdGVyJ1wiPjwvdmVyYmVuLXN2Zz5cbiAgICAgICAgICA8c3Bhbj5GaWx0ZXIgPHN1cD4oe3sgc2VsZWN0ZWRGaWx0ZXJUYWJsZUNvdW50IH19KTwvc3VwPjwvc3Bhbj5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGF0YS12aWV3LWVsZW1lbnRcIj5cbiAgICAgICAgICA8bmctY29udGVudCAqbmdJZj1cInNob3dGaWx0ZXJDaGlsZFwiIHNlbGVjdD1cIltmaWx0ZXItY29udGVudF1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDwhLS0gU29ydCBTZWN0aW9uIC0tPlxuICAgIDxuZy1jb250YWluZXJcbiAgICAgIFthcHBPdXRTaWRlQ2xpY2tdPVwic2hvd1NvcnRDaGlsZFwiXG4gICAgICAob3V0U2lkZUNsaWNrKT1cInNob3dTb3J0Q2hpbGQgPSBmYWxzZVwiXG4gICAgICAqbmdJZj1cInZpZXdTdGF0ZS5pc1NvcnRcIlxuICAgID5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJzb3J0VGVtcGxhdGU7IGVsc2UgZGVmYXVsdFNvcnRcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDxuZy10ZW1wbGF0ZSAjZGVmYXVsdFNvcnQ+XG4gICAgICAgIDxzcGFuXG4gICAgICAgICAgY2xhc3M9XCJmbGV4IGdhcCB0ZXh0LXhzIGl0ZW1zLWNlbnRlciBwZCByb3VuZGVkIGN1cnNvci1wb2ludGVyXCJcbiAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCInI0Q5RDlEOTQwJ1wiXG4gICAgICAgICAgKGNsaWNrKT1cInRvZ2dsZUNoaWxkVmlldygnc29ydCcpXCJcbiAgICAgICAgPlxuICAgICAgICAgIDx2ZXJiZW4tc3ZnIFt3aWR0aF09XCIxNVwiIFtpY29uXT1cIidzb3J0J1wiPjwvdmVyYmVuLXN2Zz5cbiAgICAgICAgICA8c3Bhbj5Tb3J0IDxzdXA+KHt7IHNlbGVjdGVkU29ydENvdW50IH19KTwvc3VwPjwvc3Bhbj5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGF0YS12aWV3LWVsZW1lbnRcIj5cbiAgICAgICAgICA8bmctY29udGVudCAqbmdJZj1cInNob3dTb3J0Q2hpbGRcIiBzZWxlY3Q9XCJbc29ydC1jb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgPCEtLSBFeHBvcnQgU2VjdGlvbiAtLT5cbiAgICA8bmctY29udGFpbmVyXG4gICAgICBbYXBwT3V0U2lkZUNsaWNrXT1cInNob3dFeHBvcnRDaGlsZFwiXG4gICAgICAob3V0U2lkZUNsaWNrKT1cInNob3dFeHBvcnRDaGlsZCA9IGZhbHNlXCJcbiAgICAgICpuZ0lmPVwidmlld1N0YXRlLmlzRXhwb3J0XCJcbiAgICA+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZXhwb3J0VGVtcGxhdGU7IGVsc2UgZGVmYXVsdEV4cG9ydFwiPjwvbmctY29udGFpbmVyPlxuICAgICAgPG5nLXRlbXBsYXRlICNkZWZhdWx0RXhwb3J0PlxuICAgICAgICA8c3BhblxuICAgICAgICAgIGNsYXNzPVwiZmxleCBnYXAgdGV4dC14cyBpdGVtcy1jZW50ZXIgcGQgcm91bmRlZCBjdXJzb3ItcG9pbnRlclwiXG4gICAgICAgICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiJyNEOUQ5RDk0MCdcIlxuICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVDaGlsZFZpZXcoJ2V4cG9ydCcpXCJcbiAgICAgICAgPlxuICAgICAgICAgIDx2ZXJiZW4tc3ZnIFt3aWR0aF09XCIxNVwiIFtpY29uXT1cIidleHBvcnQnXCI+PC92ZXJiZW4tc3ZnPlxuICAgICAgICAgIEV4cG9ydFxuICAgICAgICA8L3NwYW4+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkYXRhLXZpZXctZWxlbWVudFwiPlxuICAgICAgICAgIDxuZy1jb250ZW50ICpuZ0lmPVwic2hvd0V4cG9ydENoaWxkXCIgc2VsZWN0PVwiW2V4cG9ydC1jb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgPCEtLSBTZWxlY3QgU2VjdGlvbiAtLT5cbiAgICA8ZGl2ICpuZ0lmPVwidmlld1N0YXRlLmlzU2VsZWN0XCI+XG4gICAgICA8c3BhblxuICAgICAgICBjbGFzcz1cImZsZXggZ2FwIHRleHQteHMgaXRlbXMtY2VudGVyIHBkIHJvdW5kZWQgY3Vyc29yLXBvaW50ZXJcIlxuICAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCInI0Q5RDlEOTQwJ1wiXG4gICAgICAgIChjbGljayk9XCJ0b2dnbGVDaGlsZFZpZXcoJ3NlbGVjdCcpXCJcbiAgICAgID5cbiAgICAgICAgPHZlcmJlbi1zdmcgW3dpZHRoXT1cIjE1XCIgW2ljb25dPVwiJ3NlbGVjdCdcIj48L3ZlcmJlbi1zdmc+XG4gICAgICAgIDxzcGFuPlNlbGVjdDwvc3Bhbj5cbiAgICAgICAgPHZlcmJlbi1zdmcgW3dpZHRoXT1cIjZcIiBbaWNvbl09XCInY2hldnJvbi1kb3duJ1wiPjwvdmVyYmVuLXN2Zz5cbiAgICAgIDwvc3Bhbj5cbiAgICA8L2Rpdj5cblxuICAgIDwhLS0gQ3JlYXRlIEJ1dHRvbiAtLT5cbiAgICA8ZGl2ICpuZ0lmPVwidmlld1N0YXRlLmlzQ3JlYXRlXCI+XG4gICAgICA8dmVyYmVuYS1idXR0b25cbiAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGZvbnQtc2VtaWJvbGRcIlxuICAgICAgICBbYmdDb2xvcl09XCInI0ZGRTY4MSdcIlxuICAgICAgICBbcGRdPVwiJzZweCdcIlxuICAgICAgICBbYm9yZGVyUmFkaXVzXT1cIic0cHgnXCJcbiAgICAgICAgW3RleHRDb2xvcl09XCInIzAwMCdcIlxuICAgICAgICBbc3ZnXT1cIidhZGQnXCJcbiAgICAgICAgW3N2Z1Bvc2l0aW9uXT1cIidyaWdodCdcIlxuICAgICAgICBbdGV4dF09XCInQ3JlYXRlIE5ldydcIlxuICAgICAgICAoY2xpY2spPVwidG9nZ2xlQ2hpbGRWaWV3KCdjcmVhdGUnKVwiXG4gICAgICA+XG4gICAgPC92ZXJiZW5hLWJ1dHRvbj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cblxuPCEtLSBHcmlkIGFuZCBMaXN0IFZpZXcgSGFuZGxpbmcgLS0+XG48ZGl2ICpuZ0lmPVwiaXNHcmlkVmlldzsgZWxzZSBsaXN0Vmlld1RlbXBsYXRlXCI+XG4gIDxkaXYgY2xhc3M9XCJncmlkLXZpZXdcIj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbZ3JpZC1jb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L2Rpdj5cbjxuZy10ZW1wbGF0ZSAjbGlzdFZpZXdUZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cImxpc3Qtdmlld1wiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltsaXN0LWNvbnRlbnRdXCI+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
212
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZlcmJlbi1uZy11aS9zcmMvbGliL2NvbXBvbmVudHMvZGF0YS12aWV3L2RhdGEtdmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2RhdGEtdmlldy9kYXRhLXZpZXcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztBQWtCdkIsTUFBTSxPQUFPLGlCQUFpQjtJQUNuQixXQUFXLENBQVU7SUFDckIsU0FBUyxDQUFVO0lBQ25CLGVBQWUsR0FBVSxFQUFFLENBQUE7SUFDM0IsaUJBQWlCLEdBQVMsRUFBRSxDQUFBO0lBQzVCLGlCQUFpQixHQUFTLEVBQUUsQ0FBQTtJQUM1QixlQUFlLEdBQVMsRUFBRSxDQUFBO0lBQzFCLGlCQUFpQixHQUFTLEVBQUUsQ0FBQTtJQUM1QixpQkFBaUIsR0FBUyxFQUFFLENBQUE7SUFDNUIsTUFBTSxHQUFTLENBQUMsQ0FBQTtJQUNoQixpQkFBaUIsR0FBUSxFQUFFLENBQUE7SUFDM0IsU0FBUyxHQUFXLFFBQVEsQ0FBQztJQUM3QixRQUFRLEdBQVcsV0FBVyxDQUFDO0lBQy9CLFNBQVMsR0FBVyxFQUFFLENBQUM7SUFDdkIsVUFBVSxHQUFXLEVBQUUsQ0FBQztJQUN4QixTQUFTLEdBQVEsUUFBUSxDQUFDO0lBQzFCLFdBQVcsR0FBUSxFQUFFLENBQUM7SUFDdEIsU0FBUyxHQUFjO1FBQzlCLFFBQVEsRUFBRSxJQUFJO1FBQ2QsUUFBUSxFQUFFLElBQUk7UUFDZCxRQUFRLEVBQUUsSUFBSTtRQUNkLE1BQU0sRUFBRSxJQUFJO1FBQ1osUUFBUSxF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QXZCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU07Z0JBQ0csV0FBVztzQkFBcEIsTUFBTTtnQkFDRyxjQUFjO3NCQUF2QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmludGVyZmFjZSBWaWV3U3RhdGUge1xuICBpc1NlYXJjaD86IGJvb2xlYW47XG4gIGlzQ29sdW1uPzogYm9vbGVhbjtcbiAgaXNGaWx0ZXI/OiBib29sZWFuO1xuICBpc1NvcnQ/OiBib29sZWFuO1xuICBpc0V4cG9ydD86IGJvb2xlYW47XG4gIGlzU2VsZWN0PzogYm9vbGVhbjtcbiAgaXNDcmVhdGU/OmJvb2xlYW5cbiAgaXNUb2dnbGU/OmJvb2xlYW5cbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndmVyYmVuLWRhdGEtdmlldycsXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRhLXZpZXcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kYXRhLXZpZXcuY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBEYXRhVmlld0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGJ1dHRvbkNsYXNzPzogc3RyaW5nO1xuICBASW5wdXQoKSBpY29uQ2xhc3M/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGFjdGl2ZUljb25DbGFzcz86IHN0cmluZz1cIlwiXG4gIEBJbnB1dCgpIGNvbHVtbkN1c3RvbUNsYXNzPzpzdHJpbmc9JydcbiAgQElucHV0KCkgZmlsdGVyQ3VzdG9tQ2xhc3M/OnN0cmluZz0nJ1xuICBASW5wdXQoKSBzb3J0Q3VzdG9tQ2xhc3M/OnN0cmluZz0nJ1xuICBASW5wdXQoKSBleHBvcnRDdXN0b21DbGFzcz86c3RyaW5nPScnXG4gIEBJbnB1dCgpIHNlbGVjdEN1c3RvbUNsYXNzPzpzdHJpbmc9JydcbiAgQElucHV0KCkgekluZGV4PzpudW1iZXI9NVxuICBASW5wdXQoKSBjcmVhdGVDdXN0b21DbGFzczpzdHJpbmc9JydcbiAgQElucHV0KCkgdGFibGVJY29uOiBzdHJpbmcgPSAnZ3JpZC0zJztcbiAgQElucHV0KCkgY2FyZEljb246IHN0cmluZyA9ICdsaXN0LXZpZXcnO1xuICBASW5wdXQoKSBjYXJkQ2xhc3M6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSB0YWJsZUNsYXNzOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgc2VhcmNoS2V5OnN0cmluZz0nc2VhcmNoJztcbiAgQElucHV0KCkgc2VhcmNoVmFsdWU6c3RyaW5nPScnO1xuICBASW5wdXQoKSB2aWV3U3RhdGU6IFZpZXdTdGF0ZSA9IHtcbiAgICBpc1NlYXJjaDogdHJ1ZSxcbiAgICBpc0NvbHVtbjogdHJ1ZSxcbiAgICBpc0ZpbHRlcjogdHJ1ZSxcbiAgICBpc1NvcnQ6IHRydWUsXG4gICAgaXNFeHBvcnQ6IHRydWUsXG4gICAgaXNTZWxlY3Q6IHRydWUsXG4gICAgaXNDcmVhdGU6dHJ1ZSxcbiAgICBpc1RvZ2dsZTp0cnVlXG4gIH07XG5cbiAgQElucHV0KCkgc2VhcmNoVGVtcGxhdGU/OiBOb2RlO1xuICBASW5wdXQoKSBjb2x1bW5UZW1wbGF0ZT86IE5vZGU7XG4gIEBJbnB1dCgpIGZpbHRlclRlbXBsYXRlPzogTm9kZTtcbiAgQElucHV0KCkgc29ydFRlbXBsYXRlPzogTm9kZTtcbiAgQElucHV0KCkgZXhwb3J0VGVtcGxhdGU/OiBOb2RlO1xuICBASW5wdXQoKSBjcmVhdGVUZW1wbGF0ZT86IE5vZGU7XG4gIEBJbnB1dCgpIHNlbGVjdGVkQ29sdW1uQ291bnQ/OiBudW1iZXIgPSAwO1xuICBASW5wdXQoKSBzZWxlY3RlZFNvcnRDb3VudDogbnVtYmVyID0gMDtcbiAgQElucHV0KCkgc2VsZWN0ZWRGaWx0ZXJUYWJsZUNvdW50OiBudW1iZXIgPSAwO1xuICBASW5wdXQoKSBpbnB1dFdpZHRoOiBzdHJpbmc9XCIzNTBweFwiO1xuICBASW5wdXQoKXNob3dDb2x1bW5DaGlsZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBzaG93U29ydENoaWxkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNob3dGaWx0ZXJDaGlsZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBzaG93RXhwb3J0Q2hpbGQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgY3JlYXRlOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNob3dTZWxlY3RlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBpc1RhYmxlVmlldzogYm9vbGVhbiA9IGZhbHNlO1xuICBAT3V0cHV0KCkgdmlld0NoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcbiAgQE91dHB1dCgpIHN0YXRlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjx7IGtleTogc3RyaW5nOyB2YWx1ZTogYm9vbGVhbiB9PigpO1xuICBAT3V0cHV0KCkgb25TZWFyY2hDaGFuZ2U9bmV3IEV2ZW50RW1pdHRlcjx7IGtleTogc3RyaW5nOyB2YWx1ZTogc3RyaW5nIH0+KClcbiAgbmdPbkluaXQoKTogdm9pZCB7fVxuXG4gIHRvZ2dsZVZpZXcoKTogdm9pZCB7XG4gICAgdGhpcy5pc1RhYmxlVmlldyA9ICF0aGlzLmlzVGFibGVWaWV3O1xuICAgIHRoaXMudmlld0NoYW5nZS5lbWl0KHRoaXMuaXNUYWJsZVZpZXcpO1xuICB9XG5cbiAgb25TZWFyY2goZXZlbnQ6YW55KTogdm9pZCB7XG4gICAgdGhpcy5zZWFyY2hWYWx1ZT1ldmVudC50YXJnZXQudmFsdWVcbiAgICBjb25zb2xlLmxvZyh7a2V5OnRoaXMuc2VhcmNoS2V5LCB2YWx1ZTpldmVudC50YXJnZXQudmFsdWV9KTtcbiAgICB0aGlzLm9uU2VhcmNoQ2hhbmdlLmVtaXQoe2tleTp0aGlzLnNlYXJjaEtleSwgdmFsdWU6dGhpcy5zZWFyY2hWYWx1ZX0pO1xuICB9XG4gIFxub25DbGVhclNlYXJjaCgpe1xuIHRoaXMuc2VhcmNoVmFsdWU9XCJcIlxufVxuICB0b2dnbGVDaGlsZFZpZXcodmlld1R5cGU6IHN0cmluZyk6IHZvaWQge1xuICAgIHN3aXRjaCAodmlld1R5cGUpIHtcbiAgICAgIGNhc2UgJ2NvbHVtbic6XG4gICAgICAgIHRoaXMuc2hvd0NvbHVtbkNoaWxkID0gIXRoaXMuc2hvd0NvbHVtbkNoaWxkO1xuICAgICAgICB0aGlzLnJlc2V0Q2hpbGRWaWV3c0V4Y2VwdCgnY29sdW1uJyk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnZmlsdGVyJzpcbiAgICAgICAgdGhpcy5zaG93RmlsdGVyQ2hpbGQgPSAhdGhpcy5zaG93RmlsdGVyQ2hpbGQ7XG4gICAgICAgIHRoaXMucmVzZXRDaGlsZFZpZXdzRXhjZXB0KCdmaWx0ZXInKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdzb3J0JzpcbiAgICAgICAgdGhpcy5zaG93U29ydENoaWxkID0gIXRoaXMuc2hvd1NvcnRDaGlsZDtcbiAgICAgICAgdGhpcy5yZXNldENoaWxkVmlld3NFeGNlcHQoJ3NvcnQnKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdzZWxlY3QnOlxuICAgICAgICB0aGlzLnNob3dTZWxlY3RlZCA9ICF0aGlzLnNob3dTZWxlY3RlZDtcbiAgICAgICAgdGhpcy5yZXNldENoaWxkVmlld3NFeGNlcHQoJ3NlbGVjdCcpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ2V4cG9ydCc6XG4gICAgICAgIHRoaXMuc2hvd0V4cG9ydENoaWxkID0gIXRoaXMuc2hvd0V4cG9ydENoaWxkO1xuICAgICAgICB0aGlzLnJlc2V0Q2hpbGRWaWV3c0V4Y2VwdCgnZXhwb3J0Jyk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgICBjYXNlICdjcmVhdGUnOlxuICAgICAgICAgIHRoaXMuY3JlYXRlID0gIXRoaXMuY3JlYXRlO1xuICAgICAgICAgIHRoaXMucmVzZXRDaGlsZFZpZXdzRXhjZXB0KCdjcmVhdGUnKTtcbiAgICAgICAgICBicmVhaztcbiAgICB9XG4gICAgdGhpcy5zdGF0ZUNoYW5nZS5lbWl0KHsga2V5OiB2aWV3VHlwZSwgdmFsdWU6IHRoaXMuZ2V0Q2hpbGRWaWV3U3RhdGUodmlld1R5cGUpIH0pO1xuICB9XG5cbiAgLy8gUmVzZXQgb3RoZXIgY2hpbGQgdmlld3Mgd2hlbiBvbmUgaXMgdG9nZ2xlZFxuICByZXNldENoaWxkVmlld3NFeGNlcHQodmlld1R5cGU6IHN0cmluZyk6IHZvaWQge1xuICAgIGlmICh2aWV3VHlwZSAhPT0gJ2NvbHVtbicpIHRoaXMuc2hvd0NvbHVtbkNoaWxkID0gZmFsc2U7XG4gICAgaWYgKHZpZXdUeXBlICE9PSAnZmlsdGVyJykgdGhpcy5zaG93RmlsdGVyQ2hpbGQgPSBmYWxzZTtcbiAgICBpZiAodmlld1R5cGUgIT09ICdzb3J0JykgdGhpcy5zaG93U29ydENoaWxkID0gZmFsc2U7XG4gICAgaWYgKHZpZXdUeXBlICE9PSAnc2VsZWN0JykgdGhpcy5zaG93U2VsZWN0ZWQgPSBmYWxzZTtcbiAgICBpZiAodmlld1R5cGUgIT09ICdleHBvcnQnKSB0aGlzLnNob3dFeHBvcnRDaGlsZCA9IGZhbHNlO1xuICAgIGlmICh2aWV3VHlwZSAhPT0gJ2NyZWF0ZScpIHRoaXMuY3JlYXRlID0gZmFsc2U7XG4gIH1cblxuICAvLyBIZWxwZXIgbWV0aG9kIHRvIGdldCB0aGUgc3RhdGUgb2YgYSBzcGVjaWZpYyBjaGlsZCB2aWV3XG4gIGdldENoaWxkVmlld1N0YXRlKHZpZXdUeXBlOiBzdHJpbmcpOiBib29sZWFuIHtcbiAgICBzd2l0Y2ggKHZpZXdUeXBlKSB7XG4gICAgICBjYXNlICdjb2x1bW4nOlxuICAgICAgICByZXR1cm4gdGhpcy5zaG93Q29sdW1uQ2hpbGQ7XG4gICAgICBjYXNlICdmaWx0ZXInOlxuICAgICAgICByZXR1cm4gdGhpcy5zaG93RmlsdGVyQ2hpbGQ7XG4gICAgICBjYXNlICdzb3J0JzpcbiAgICAgICAgcmV0dXJuIHRoaXMuc2hvd1NvcnRDaGlsZDtcbiAgICAgIGNhc2UgJ3NlbGVjdCc6XG4gICAgICAgIHJldHVybiB0aGlzLnNob3dTZWxlY3RlZDtcbiAgICAgIGNhc2UgJ2V4cG9ydCc6XG4gICAgICAgIHJldHVybiB0aGlzLnNob3dFeHBvcnRDaGlsZDtcbiAgICAgICAgY2FzZSAnY3JlYXRlJzpcbiAgICAgICAgcmV0dXJuIHRoaXMuY3JlYXRlO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cInRvb2xiYXIgZmxleCBnYXAganVzdGlmeS1iZXR3ZWVuIGl0ZW1zLWNlbnRlclwiXG4gIFtzdHlsZS5tYXJnaW5dPVwiJzBweCAzNXB4J1wiXG4+XG4gIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBnYXBcIj5cbiAgICA8ZGl2ICpuZ0lmPVwidmlld1N0YXRlLmlzVG9nZ2xlXCIgY2xhc3M9XCJ0b2dnbGUtYnV0dG9uLWNvbnRhaW5lclwiPlxuICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cInRvZ2dsZVZpZXcoKVwiIFtuZ0NsYXNzXT1cImJ1dHRvbkNsYXNzXCI+XG4gICAgICAgIDx2ZXJiZW4tc3ZnXG4gICAgICAgICAgW2ljb25dPVwidGFibGVJY29uXCJcbiAgICAgICAgICBbY2xhc3MuYWN0aXZlXT1cIiFpc1RhYmxlVmlld1wiXG4gICAgICAgICAgW25nQ2xhc3NdPVwiIWlzVGFibGVWaWV3ID8gYWN0aXZlSWNvbkNsYXNzIDogaWNvbkNsYXNzXCJcbiAgICAgICAgPjwvdmVyYmVuLXN2Zz5cbiAgICAgICAgPHZlcmJlbi1zdmdcbiAgICAgICAgICBbaWNvbl09XCJjYXJkSWNvblwiXG4gICAgICAgICAgW2NsYXNzLmFjdGl2ZV09XCJpc1RhYmxlVmlld1wiXG4gICAgICAgICAgW25nQ2xhc3NdPVwiaXNUYWJsZVZpZXcgPyBhY3RpdmVJY29uQ2xhc3MgOiBpY29uQ2xhc3NcIlxuICAgICAgICAgIFt3aWR0aF09XCIyNVwiXG5cbiAgICAgICAgICBbaGVpZ2h0XT1cIjI1XCJcbiAgICAgICAgPjwvdmVyYmVuLXN2Zz5cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICAgIDwhLS0gU2VhcmNoIElucHV0IC0tPlxuICAgIDxkaXZcbiAgICAgIFtzdHlsZS53aWR0aF09XCJpbnB1dFdpZHRoXCJcbiAgICAgIGNsYXNzPVwic2VhcmNoLWlucHV0XCJcbiAgICAgICpuZ0lmPVwidmlld1N0YXRlLmlzU2VhcmNoXCJcbiAgICA+XG4gICAgICA8dmVyYmVuYS1pbnB1dFxuICAgICAgICBbdHlwZV09XCIndGV4dCdcIlxuICAgICAgICBbcGxhY2VIb2xkZXJdPVwiJ1NlYXJjaC4uLidcIlxuICAgICAgICAoaW5wdXQpPVwib25TZWFyY2goJGV2ZW50KVwiXG4gICAgICAgICBbYmdDb2xvcl09XCIndHJhbnNwYXJlbnQnXCJcbiAgICAgICAgW2JvcmRlcl09XCInMCdcIlxuICAgICAgICBbdmFsdWVdPVwic2VhcmNoVmFsdWVcIlxuICAgICAgLz5cbiAgICAgIDx2ZXJiZW4tc3ZnXG4gICAgICAqbmdJZj1cInNlYXJjaFZhbHVlLmxlbmd0aD4wXCJcbiAgICAgICAgICBbaWNvbl09XCInY2xvc2UnXCJcbiAgICAgICAgICBbd2lkdGhdPVwiMTVcIlxuICAgICAgICAgIChjbGljayk9XCJvbkNsZWFyU2VhcmNoKClcIlxuICAgICAgICAgIGNsYXNzPVwiY2xvc2UtaWNvbi1jbGFzc1wiXG4gICAgICAgICAgW2hlaWdodF09XCIxNVwiXG4gICAgICAgID48L3ZlcmJlbi1zdmc+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciByZWxhdGl2ZSBnYXBcIiBbc3R5bGUubWFyZ2luLWxlZnRdPVwiJzEwcHgnXCI+XG4gICAgPCEtLSBDb2x1bW4gU2VjdGlvbiAtLT5cbiAgICA8bmctY29udGFpbmVyXG4gICAgICBbYXBwT3V0U2lkZUNsaWNrXT1cInNob3dDb2x1bW5DaGlsZFwiXG4gICAgICAob3V0U2lkZUNsaWNrKT1cInNob3dDb2x1bW5DaGlsZCA9IGZhbHNlXCJcbiAgICAgICpuZ0lmPVwidmlld1N0YXRlLmlzQ29sdW1uICYmIGlzVGFibGVWaWV3XCJcbiAgICA+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY29sdW1uVGVtcGxhdGU7IGVsc2UgZGVmYXVsdENvbHVtblwiPjwvbmctY29udGFpbmVyPlxuICAgICAgPG5nLXRlbXBsYXRlICNkZWZhdWx0Q29sdW1uPlxuICAgICAgICA8c3BhblxuICAgICAgICAgIFtuZ0NsYXNzXT1cIltcbiAgICAgICAgICAgICdmbGV4IGdhcCB0ZXh0LXhzIGl0ZW1zLWNlbnRlciBwZCByb3VuZGVkIGN1cnNvci1wb2ludGVyJyxcbiAgICAgICAgICAgIGNvbHVtbkN1c3RvbUNsYXNzID8gY29sdW1uQ3VzdG9tQ2xhc3MgOiAnJ1xuICAgICAgICAgIF1cIlxuICAgICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cIicjRDlEOUQ5NDAnXCJcbiAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlQ2hpbGRWaWV3KCdjb2x1bW4nKVwiXG4gICAgICAgID5cbiAgICAgICAgICA8dmVyYmVuLXN2ZyBbd2lkdGhdPVwiMTVcIiBbaWNvbl09XCInY29sdW1uJ1wiPjwvdmVyYmVuLXN2Zz5cbiAgICAgICAgICA8c3BhblxuICAgICAgICAgICAgPkNvbHVtbnMgPHN1cD4oe3sgc2VsZWN0ZWRDb2x1bW5Db3VudCB9fSk8L3N1cD48L3NwYW5cbiAgICAgICAgICA+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPGRpdiBbc3R5bGUuei1pbmRleF09XCJ6SW5kZXhcIiBjbGFzcz1cImRhdGEtdmlldy1lbGVtZW50XCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnRcbiAgICAgICAgICAgICpuZ0lmPVwic2hvd0NvbHVtbkNoaWxkXCJcbiAgICAgICAgICAgIHNlbGVjdD1cIltjb2x1bW4tY29udGVudF1cIlxuICAgICAgICAgID48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDwhLS0gRmlsdGVyIFNlY3Rpb24gLS0+XG4gICAgPG5nLWNvbnRhaW5lclxuICAgICAgW2FwcE91dFNpZGVDbGlja109XCJzaG93RmlsdGVyQ2hpbGRcIlxuICAgICAgKG91dFNpZGVDbGljayk9XCJzaG93RmlsdGVyQ2hpbGQgPSBmYWxzZVwiXG4gICAgICAqbmdJZj1cInZpZXdTdGF0ZS5pc0ZpbHRlclwiXG4gICAgPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZpbHRlclRlbXBsYXRlOyBlbHNlIGRlZmF1bHRGaWx0ZXJcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDxuZy10ZW1wbGF0ZSAjZGVmYXVsdEZpbHRlcj5cbiAgICAgICAgPHNwYW5cbiAgICAgICAgW25nQ2xhc3NdPVwiW1xuICAgICAgICAnZmxleCBnYXAgdGV4dC14cyBpdGVtcy1jZW50ZXIgcGQgcm91bmRlZCBjdXJzb3ItcG9pbnRlcicsXG4gICAgICAgIGZpbHRlckN1c3RvbUNsYXNzID8gZmlsdGVyQ3VzdG9tQ2xhc3MgOiAnJ1xuICAgICAgXVwiXG4gICAgICAgICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiJyNEOUQ5RDk0MCdcIlxuICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVDaGlsZFZpZXcoJ2ZpbHRlcicpXCJcbiAgICAgICAgPlxuICAgICAgICAgIDx2ZXJiZW4tc3ZnIFt3aWR0aF09XCIxNVwiIFtpY29uXT1cIidmaWx0ZXInXCI+PC92ZXJiZW4tc3ZnPlxuICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICA+RmlsdGVyIDxzdXA+KHt7IHNlbGVjdGVkRmlsdGVyVGFibGVDb3VudCB9fSk8L3N1cD48L3NwYW5cbiAgICAgICAgICA+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPGRpdiBbc3R5bGUuei1pbmRleF09XCJ6SW5kZXhcIiBjbGFzcz1cImRhdGEtdmlldy1lbGVtZW50XCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnRcbiAgICAgICAgICAgICpuZ0lmPVwic2hvd0ZpbHRlckNoaWxkXCJcbiAgICAgICAgICAgIHNlbGVjdD1cIltmaWx0ZXItY29udGVudF1cIlxuICAgICAgICAgID48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDwhLS0gU29ydCBTZWN0aW9uIC0tPlxuICAgIDxuZy1jb250YWluZXJcbiAgICAgIFthcHBPdXRTaWRlQ2xpY2tdPVwic2hvd1NvcnRDaGlsZFwiXG4gICAgICAob3V0U2lkZUNsaWNrKT1cInNob3dTb3J0Q2hpbGQgPSBmYWxzZVwiXG4gICAgICAqbmdJZj1cInZpZXdTdGF0ZS5pc1NvcnRcIlxuICAgID5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJzb3J0VGVtcGxhdGU7IGVsc2UgZGVmYXVsdFNvcnRcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDxuZy10ZW1wbGF0ZSAjZGVmYXVsdFNvcnQ+XG4gICAgICAgIDxzcGFuXG4gICAgICAgIFtuZ0NsYXNzXT1cIltcbiAgICAgICAgJ2ZsZXggZ2FwIHRleHQteHMgaXRlbXMtY2VudGVyIHBkIHJvdW5kZWQgY3Vyc29yLXBvaW50ZXInLFxuICAgICAgc29ydEN1c3RvbUNsYXNzID8gc29ydEN1c3RvbUNsYXNzIDogJydcbiAgICAgIF1cIlxuICAgICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cIicjRDlEOUQ5NDAnXCJcbiAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlQ2hpbGRWaWV3KCdzb3J0JylcIlxuICAgICAgICA+XG4gICAgICAgICAgPHZlcmJlbi1zdmcgW3dpZHRoXT1cIjE1XCIgW2ljb25dPVwiJ3NvcnQnXCI+PC92ZXJiZW4tc3ZnPlxuICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICA+U29ydCA8c3VwPih7eyBzZWxlY3RlZFNvcnRDb3VudCB9fSk8L3N1cD48L3NwYW5cbiAgICAgICAgICA+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPGRpdiBbc3R5bGUuei1pbmRleF09XCJ6SW5kZXhcIiBjbGFzcz1cImRhdGEtdmlldy1lbGVtZW50XCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnRcbiAgICAgICAgICAgICpuZ0lmPVwic2hvd1NvcnRDaGlsZFwiXG4gICAgICAgICAgICBzZWxlY3Q9XCJbc29ydC1jb250ZW50XVwiXG4gICAgICAgICAgPjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgPCEtLSBFeHBvcnQgU2VjdGlvbiAtLT5cbiAgICA8bmctY29udGFpbmVyXG4gICAgICBbYXBwT3V0U2lkZUNsaWNrXT1cInNob3dFeHBvcnRDaGlsZFwiXG4gICAgICAob3V0U2lkZUNsaWNrKT1cInNob3dFeHBvcnRDaGlsZCA9IGZhbHNlXCJcbiAgICAgICpuZ0lmPVwidmlld1N0YXRlLmlzRXhwb3J0XCJcbiAgICA+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZXhwb3J0VGVtcGxhdGU7IGVsc2UgZGVmYXVsdEV4cG9ydFwiPjwvbmctY29udGFpbmVyPlxuICAgICAgPG5nLXRlbXBsYXRlICNkZWZhdWx0RXhwb3J0PlxuICAgICAgICA8c3BhblxuICAgICAgICBbbmdDbGFzc109XCJbXG4gICAgICAgICdmbGV4IGdhcCB0ZXh0LXhzIGl0ZW1zLWNlbnRlciBwZCByb3VuZGVkIGN1cnNvci1wb2ludGVyJyxcbiAgICAgICAgZXhwb3J0Q3VzdG9tQ2xhc3MgPyBleHBvcnRDdXN0b21DbGFzcyA6ICcnXG4gICAgICBdXCJcbiAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCInI0Q5RDlEOTQwJ1wiXG4gICAgICAgICAgKGNsaWNrKT1cInRvZ2dsZUNoaWxkVmlldygnZXhwb3J0JylcIlxuICAgICAgICA+XG4gICAgICAgICAgPHZlcmJlbi1zdmcgW3dpZHRoXT1cIjE1XCIgW2ljb25dPVwiJ2V4cG9ydCdcIj48L3ZlcmJlbi1zdmc+XG4gICAgICAgICAgRXhwb3J0XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPGRpdiBbc3R5bGUuei1pbmRleF09XCJ6SW5kZXhcIiBjbGFzcz1cImRhdGEtdmlldy1lbGVtZW50XCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnRcbiAgICAgICAgICAgICpuZ0lmPVwic2hvd0V4cG9ydENoaWxkXCJcbiAgICAgICAgICAgIHNlbGVjdD1cIltleHBvcnQtY29udGVudF1cIlxuICAgICAgICAgID48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDwhLS0gU2VsZWN0IFNlY3Rpb24gLS0+XG4gICAgPGRpdiAqbmdJZj1cInZpZXdTdGF0ZS5pc1NlbGVjdFwiPlxuICAgICAgPHNwYW5cbiAgICAgIFtuZ0NsYXNzXT1cIltcbiAgICAgICdmbGV4IGdhcCB0ZXh0LXhzIGl0ZW1zLWNlbnRlciBwZCByb3VuZGVkIGN1cnNvci1wb2ludGVyJyxcbiAgICAgIHNlbGVjdEN1c3RvbUNsYXNzID8gc2VsZWN0Q3VzdG9tQ2xhc3MgOiAnJ1xuICAgIF1cIlxuICAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCInI0Q5RDlEOTQwJ1wiXG4gICAgICAgIChjbGljayk9XCJ0b2dnbGVDaGlsZFZpZXcoJ3NlbGVjdCcpXCJcbiAgICAgID5cbiAgICAgICAgPHZlcmJlbi1zdmcgW3dpZHRoXT1cIjE1XCIgW2ljb25dPVwiJ3NlbGVjdCdcIj48L3ZlcmJlbi1zdmc+XG4gICAgICAgIDxzcGFuPlNlbGVjdDwvc3Bhbj5cbiAgICAgICAgPHZlcmJlbi1zdmcgW3dpZHRoXT1cIjZcIiBbaWNvbl09XCInY2hldnJvbi1kb3duJ1wiPjwvdmVyYmVuLXN2Zz5cbiAgICAgIDwvc3Bhbj5cbiAgICA8L2Rpdj5cblxuICAgIDwhLS0gQ3JlYXRlIEJ1dHRvbiAtLT5cbiAgICAgXG4gICAgPGRpdiAgIFthcHBPdXRTaWRlQ2xpY2tdPVwiY3JlYXRlXCJcbiAgICAob3V0U2lkZUNsaWNrKT1cImNyZWF0ZSA9IGZhbHNlXCIgKm5nSWY9XCJ2aWV3U3RhdGUuaXNDcmVhdGVcIj5cbiAgICAgIDx2ZXJiZW5hLWJ1dHRvblxuICAgICAgICBjbGFzcz1cInRleHQtc20gZm9udC1zZW1pYm9sZFwiXG4gICAgICAgIFtiZ0NvbG9yXT1cIicjRkZFNjgxJ1wiXG4gICAgICAgIFtidXR0b25DbGFzc109XCJjcmVhdGVDdXN0b21DbGFzc1wiXG4gICAgICAgIFtwZF09XCInNnB4J1wiXG4gICAgICAgIFtib3JkZXJSYWRpdXNdPVwiJzRweCdcIlxuICAgICAgICBbdGV4dENvbG9yXT1cIicjMDAwJ1wiXG4gICAgICAgIFtzdmddPVwiJ2FkZCdcIlxuICAgICAgICBbc3ZnUG9zaXRpb25dPVwiJ3JpZ2h0J1wiXG4gICAgICAgIFt0ZXh0XT1cIidDcmVhdGUgTmV3J1wiXG4gICAgICAgIChjbGljayk9XCJ0b2dnbGVDaGlsZFZpZXcoJ2NyZWF0ZScpXCJcbiAgICAgID5cbiAgICAgIDwvdmVyYmVuYS1idXR0b24+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY3JlYXRlVGVtcGxhdGU7IGVsc2UgZGVmYXVsdENyZWF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgPG5nLXRlbXBsYXRlICNkZWZhdWx0Q3JlYXRlPlxuICAgICAgXG4gICAgICAgIDxkaXYgW3N0eWxlLnotaW5kZXhdPVwiekluZGV4XCIgY2xhc3M9XCJkYXRhLXZpZXctZWxlbWVudFwiPlxuICAgICAgICAgIDxuZy1jb250ZW50XG4gICAgICAgICAgICAqbmdJZj1cImNyZWF0ZVwiXG4gICAgICAgICAgICBzZWxlY3Q9XCJbY3JlYXRlLWNvbnRlbnRdXCJcbiAgICAgICAgICA+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG5cbjwhLS0gR3JpZCBhbmQgTGlzdCBWaWV3IEhhbmRsaW5nIC0tPlxuPGRpdiAqbmdJZj1cImlzVGFibGVWaWV3OyBlbHNlIGxpc3RWaWV3VGVtcGxhdGVcIj5cbiAgPGRpdiBbY2xhc3NdPVwidGFibGVDbGFzc1wiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlt0YWJsZS1jb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L2Rpdj5cbjxuZy10ZW1wbGF0ZSAjbGlzdFZpZXdUZW1wbGF0ZT5cbiAgPGRpdiBbY2xhc3NdPVwiY2FyZENsYXNzXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2NhcmQtY29udGVudF1cIj48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
package/esm2022/lib/components/drop-down/drop-down.component.mjs CHANGED
@@ -660,7 +660,7 @@ export class DropDownComponent {
660
660
  }
661
661
  }
662
662
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DropDownComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
663
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: DropDownComponent, isStandalone: true, selector: "verben-drop-down", inputs: { options: "options", width: "width", showHorizontalLine: "showHorizontalLine", horizontalLineColor: "horizontalLineColor", optionLabel: "optionLabel", optionSubLabel: "optionSubLabel", optionValue: "optionValue", placeholder: "placeholder", invalidMessage: "invalidMessage", errorPosition: "errorPosition", loadMoreCaption: "loadMoreCaption", display: "display", showClear: "showClear", lazyLoad: "lazyLoad", styleClass: "styleClass", group: "group", multiselect: "multiselect", filter: "filter", avoidDuplication: "avoidDuplication", filterBy: "filterBy", debounceTime: "debounceTime", minChar: "minChar", disabled: "disabled", required: "required", load: "load", asyncLabel: "asyncLabel", search: "search" }, outputs: { optionsChange: "optionsChange", onChange: "onChange", onClick: "onClick", onClear: "onClear" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "document:click": "onClickOutside($event)" }, properties: { "class.focused": "this.isFocused" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, static: true }], ngImport: i0, template: "<div #dropdownContainer [ngClass]=\"styleClass\" [style.width]=\"width\" class=\"drop-down\">\n <div\n [ngClass]=\"{'right-error': errorPosition == 'right', 'left-error': errorPosition == 'left', 'top-error': errorPosition == 'top'}\"\n class=\"drop-down-input-wrapper\">\n <div (click)=\"onDropdownClick($event)\" [class.focused]=\"isFocused\"\n [ngClass]=\"{'ng-invalid': isInvalid, 'disabled': disabled}\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" tabindex=\"0\"\n class=\"drop-down-input verben-input flex\">\n <div class=\"drop-down-main-content\">\n <ng-container\n *ngIf=\"(selectedItemTemplate && selectedOption) || (selectedItemTemplate && selectedOptions.length > 0); else defaultItem\">\n <div *ngIf=\"!multiselect\">\n <ng-container\n *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOption }\"></ng-container>\n </div>\n <div *ngIf=\"multiselect\">\n <ng-container\n *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOptions }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-template #defaultItem>\n <div *ngIf=\"!multiselect\" class=\"default-item flex\">\n <div class=\"dropdown-label place-holder\" *ngIf=\"!this.selectedOption\">{{placeholder}}</div>\n <div *ngIf=\"this.selectedOption\" class=\"item-label dropdown-label\">\n {{this.selectedOptionLabel}}</div>\n </div>\n <div *ngIf=\"multiselect\" class=\"default-item multi-select flex\">\n <div class=\"dropdown-label place-holder\" *ngIf=\"this.selectedOptions.length == 0\">{{placeholder}}</div>\n <verben-tooltip customClass=\"custom-tooltip-width\" border=\"1px solid #334155\" backgroundColor=\"white\"\n [tooltipContent]=\"multiselectTooltip\">\n <div *ngIf=\"this.selectedOptions.length > 0\" class=\"item-label dropdown-label\">\n <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container-two chip\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\"\n class=\"multiselect-item-chip multi-select flex\">\n <span>{{item}}</span>\n <verben-svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\"\n icon=\"close-circle-full\" [width]=\"15\" [height]=\"15\"></verben-svg>\n <!-- <svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\" width=\"10\" height=\"10\"\n viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg> -->\n </span>\n </div>\n <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container-two normal\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n </span>\n </div>\n </div>\n </verben-tooltip>\n <ng-template #multiselectTooltip>\n <div class=\"multi-select-full-view\">\n <div *ngIf=\"this.selectedOptions.length > 0\" class=\"item-label dropdown-label\">\n <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container-two-tooltip chip\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\"\n class=\"multiselect-item-chip multi-select flex\">\n <span>{{item}}</span>\n <verben-svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\"\n icon=\"close-circle-full\" [width]=\"15\" [height]=\"15\"></verben-svg>\n <!-- <svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\" width=\"10\" height=\"10\"\n viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg> -->\n </span>\n </div>\n <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container-two-tooltip-normal\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n </span>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </div>\n <span\n *ngIf=\"(showClear && this.selectedOption && !multiselect) || (showClear && this.selectedOptions.length > 0 && multiselect)\"\n (click)=\"this.clearSelection($event); $event.stopPropagation()\"\n class=\"drop-down-icon-item drop-down-clear-button\">\n <verben-svg icon=\"close-no-circle\" stroke=\"#94a3b8\" [width]=\"13\" [height]=\"13\"></verben-svg>\n <!-- <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.84375 0.84375L8.15625 8.15625\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M0.84375 8.15625L8.15625 0.84375\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg> -->\n </span>\n <span class=\"drop-down-icon-item drop-down-expand-button\">\n <verben-svg icon=\"chevron-down\" fill=\"#94a3b8\" [width]=\"15\" [height]=\"8\"></verben-svg>\n <!-- <svg width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00507 4.88027C6.20205 4.62775 6.30683 4.4622 6.44095 4.32704C7.74334 3.01731 9.05202 1.71387 10.3576 0.406242C10.5713 0.192495 10.7882 0.00913367 11.1193 0.0101814C11.4692 0.0112292 11.7228 0.15792 11.8884 0.456537C12.057 0.760394 12.0309 1.06111 11.8349 1.34296C11.7658 1.4425 11.6767 1.52737 11.5908 1.61433C9.98873 3.21639 8.37305 4.80483 6.793 6.42784C6.29111 6.94335 5.68759 6.92344 5.21399 6.43832C3.63184 4.8174 2.01826 3.22687 0.414109 1.62691C0.116539 1.32934 -0.116067 1.0192 0.0620561 0.565507C0.271612 0.031139 0.883519 -0.167941 1.35502 0.157919C1.49647 0.255363 1.61592 0.387385 1.73955 0.509975C3.02204 1.79036 4.30452 3.07075 5.58386 4.35533C5.70645 4.47792 5.80284 4.62671 6.00611 4.88132L6.00507 4.88027Z\"\n fill=\"currentColor\" />\n </svg> -->\n </span>\n </div>\n <div *ngIf=\"this.isInvalid && this.invalidMessage\" class=\"verben-error-message error-message\">{{invalidMessage}}\n </div>\n </div>\n <div class=\"drop-down-menu-item-wrapper\" *ngIf=\"isExpanded\">\n <div *ngIf=\"multiselect && this.selectedOptions.length > 0\">\n <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container chip flex\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item-chip flex\">\n <span>{{item}}</span>\n <verben-svg (click)=\"onMultiselectItemClosed(i, $event)\" icon=\"close-circle-full\" [width]=\"15\"\n [height]=\"15\"></verben-svg>\n <!-- <svg (click)=\"onMultiselectItemClosed(i, $event)\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> -->\n </span>\n </div>\n <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container normal\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n </span>\n </div>\n </div>\n <div *ngIf=\"allowSelectAll || filter\" class=\"actions-section flex\">\n <input *ngIf=\"allowSelectAll\" (click)=\"onSelectAll($event)\" type=\"checkbox\" [(ngModel)]=\"selectedAll\"\n class=\"custom-checkbox\" />\n <span class=\"select-all-caption\" *ngIf=\"allowSelectAll && !filter\">Select All</span>\n <div *ngIf=\"filter\" [ngClass]=\"{'focused': isInputFocused}\" tabindex=\"0\" (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\" class=\"search-section flex\">\n <span class=\"search-icon flex\">\n <verben-svg icon=\"search\" stroke=\"#64748b\" [width]=\"15\" [height]=\"15\"></verben-svg>\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <circle cx=\"9\" cy=\"9\" r=\"8\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"></circle>\n <line x1=\"14\" y1=\"14\" x2=\"19\" y2=\"19\" stroke=\"currentColor\" stroke-width=\"2\"></line>\n </svg> -->\n </span>\n <span *ngIf=\"this.selectedContexts[this.selectedContexts.length - 1]\" class=\"search-context\">\n {{this.getOptionLabel(this.selectedContexts[this.selectedContexts.length - 1])}}\n </span>\n <div class=\"search-input-container\">\n <input (input)=\"onSearch($event)\" [(ngModel)]=\"searchContext\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\"\n placeholder=\"Search...\" class=\"search-input\" />\n </div>\n </div>\n </div>\n <div *ngIf=\"showHorizontalLine\" class=\"colored-underline-section\">\n <hr [style.background-color]=\"horizontalLineColor\" class=\"colored-underline\" />\n </div>\n <div class=\"drop-down-menu-item\">\n <drop-down-item [itemTemplate]=\"itemTemplate\" [groupTemplate]=\"groupTemplate\" [activeItem]=\"selectedOption\"\n [activeItems]=\"selectedOptions\" [multiselect]=\"multiselect\" [optionValue]=\"optionValue\"\n [optionLabel]=\"optionLabel\" [optionSubLabel]=\"optionSubLabel\" [loadMoreCaption]=\"loadMoreCaption\"\n [options]=\"options\" [group]=\"group\" [onExpand]=\"expandMenu.bind(this)\"\n [onLoadMore]=\"loadMoreMenuItems.bind(this)\" [onSelect]=\"onSelect.bind(this)\"></drop-down-item>\n <div *ngIf=\"lazyLoad\">\n <div class=\"see-more-container flex justify-end\">\n <span class=\"see-more-caption\" (click)=\"loadMore()\">{{loadMoreCaption}}</span>\n </div>\n </div>\n <div *ngIf=\"isLoading\" class=\"loading-overlay\">\n <div class=\"loader\"></div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["*{font-family:sans-serif;font-size:.9rem}.w-100{width:100%}.h-100{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.error-message{position:absolute;z-index:1;left:0;right:0;bottom:-20px}.top-error .error-message{top:-20px!important;bottom:initial!important}.left-error .error-message{bottom:50%!important;right:calc(100% + 10px)!important;width:max-content;left:initial!important;transform:translateY(50%)}.right-error .error-message{bottom:50%!important;left:calc(100% + 10px)!important;width:max-content;right:initial!important;transform:translateY(50%)}.drop-down{position:relative;cursor:pointer}.drop-down-menu-item-wrapper{min-width:calc(100% - 4px);position:absolute;margin-top:3px;left:0;right:0;z-index:1;background:#fff;color:#334155;border:1px solid #e2e8f0;border-radius:5px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.drop-down-menu-item{max-height:200px;overflow-y:auto;padding:4px;box-sizing:content-box}.drop-down-input-wrapper{position:relative}.drop-down-input{align-items:center;min-height:39px}.drop-down-input.disabled .dropdown-label{color:#64748b}.drop-down-main-content{flex:1 1 0;padding:8px;min-width:0}.drop-down-icon-item.drop-down-clear-button{padding:8px 5px}.drop-down-icon-item>svg{width:.8rem;height:.8rem;display:flex}.drop-down-icon-item.drop-down-clear-button>svg{color:#94a3b8}.drop-down-icon-item.drop-down-expand-button{padding:8px 8px 8px 5px}.drop-down-icon-item.drop-down-expand-button>svg{color:#94a3b8}.drop-down-input.disabled .drop-down-icon-item>svg{color:#64748b}.dropdown-label{color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-label.place-holder{color:#64748b}.default-item{align-items:center}.default-item>div{flex:1 1 0;width:100%}.see-more-container{padding:5px}.see-more-caption{font-size:12px;color:#3b82f6}.actions-section{gap:5px;margin:10px;align-items:center}.select-all-caption{font-weight:600}.search-section{flex:1 1 0;border:1px solid transparent;padding:2px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}.search-context{max-width:45px;border-radius:5px;padding:3px 5px;background-color:#3479e980;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.colored-underline{height:4px;border:none}.multiselect-items-container{padding:10px}.multiselect-items-container.normal{max-width:100%;overflow-x:auto;white-space:nowrap}.multiselect-items-container.chip{max-width:100%;overflow-x:auto;white-space:nowrap;gap:5px}.multiselect-items-container-two.normal{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiselect-items-container-two.chip{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:5px}.multiselect-items-container-two-tooltip{display:grid;flex-wrap:wrap;gap:10px 5px;grid-template-columns:repeat(2,1fr)}.multiselect-items-container-two-tooltip-normal{display:flex;flex-wrap:wrap}.multiselect-items-container-two-tooltip .multiselect-item-chip{justify-content:space-between}.multiselect-item-chip{align-items:center;gap:5px;border-radius:5px;padding:1px 5px;background-color:#3479e980}.multiselect-item-chip.multi-select{margin-right:5px;display:inline-flex}.multiselect-item-chip>span{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiselect-item-chip>svg{width:12px;height:12px}verben-tooltip{width:100%}::ng-deep .custom-tooltip-width{max-width:300px;max-height:500px;overflow-y:auto}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#4d4b4b80;z-index:10;display:flex;justify-content:center;align-items:center;pointer-events:none}.loader{width:50px;padding:8px;aspect-ratio:1;border-radius:50%;background:#3b82f6;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}@keyframes l3{to{transform:rotate(1turn)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropDownItemComponent, selector: "drop-down-item", inputs: ["itemTemplate", "groupTemplate", "activeItem", "activeItems", "optionValue", "optionLabel", "optionSubLabel", "loadMoreCaption", "multiselect", "options", "group", "onExpand", "onLoadMore", "onSelect"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SvgModule }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: i4.TooltipComponent, selector: "verben-tooltip", inputs: ["tooltipContent", "customClass", "backgroundColor", "textColor", "padding", "borderRadius", "border", "width", "top", "bottom", "left", "right"] }] });
663
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: DropDownComponent, isStandalone: true, selector: "verben-drop-down", inputs: { options: "options", width: "width", showHorizontalLine: "showHorizontalLine", horizontalLineColor: "horizontalLineColor", optionLabel: "optionLabel", optionSubLabel: "optionSubLabel", optionValue: "optionValue", placeholder: "placeholder", invalidMessage: "invalidMessage", errorPosition: "errorPosition", loadMoreCaption: "loadMoreCaption", display: "display", showClear: "showClear", lazyLoad: "lazyLoad", styleClass: "styleClass", group: "group", multiselect: "multiselect", filter: "filter", avoidDuplication: "avoidDuplication", filterBy: "filterBy", debounceTime: "debounceTime", minChar: "minChar", disabled: "disabled", required: "required", load: "load", asyncLabel: "asyncLabel", search: "search" }, outputs: { optionsChange: "optionsChange", onChange: "onChange", onClick: "onClick", onClear: "onClear" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "document:click": "onClickOutside($event)" }, properties: { "class.focused": "this.isFocused" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, static: true }], ngImport: i0, template: "<div #dropdownContainer [ngClass]=\"styleClass\" [style.width]=\"width\" class=\"drop-down\">\n <div\n [ngClass]=\"{'right-error': errorPosition == 'right', 'left-error': errorPosition == 'left', 'top-error': errorPosition == 'top'}\"\n class=\"drop-down-input-wrapper\">\n <div (click)=\"onDropdownClick($event)\" [class.focused]=\"isFocused\"\n [ngClass]=\"{'ng-invalid': isInvalid, 'disabled': disabled}\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" tabindex=\"0\"\n class=\"drop-down-input verben-input flex\">\n <div class=\"drop-down-main-content\">\n <ng-container\n *ngIf=\"(selectedItemTemplate && selectedOption) || (selectedItemTemplate && selectedOptions.length > 0); else defaultItem\">\n <div *ngIf=\"!multiselect\">\n <ng-container\n *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOption }\"></ng-container>\n </div>\n <div *ngIf=\"multiselect\">\n <ng-container\n *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOptions }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-template #defaultItem>\n <div *ngIf=\"!multiselect\" class=\"default-item flex\">\n <div class=\"dropdown-label place-holder\" *ngIf=\"!this.selectedOption\">{{placeholder}}</div>\n <div *ngIf=\"this.selectedOption\" class=\"item-label dropdown-label\">\n {{this.selectedOptionLabel}}</div>\n </div>\n <div *ngIf=\"multiselect\" class=\"default-item multi-select flex\">\n <div class=\"dropdown-label place-holder\" *ngIf=\"this.selectedOptions.length == 0\">{{placeholder}}</div>\n <verben-tooltip customClass=\"custom-tooltip-width\" border=\"1px solid #334155\" backgroundColor=\"white\"\n [tooltipContent]=\"multiselectTooltip\">\n <div *ngIf=\"this.selectedOptions.length > 0\" class=\"item-label dropdown-label\">\n <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container-two chip\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\"\n class=\"multiselect-item-chip multi-select flex\">\n <span>{{item}}</span>\n <verben-svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\"\n icon=\"close-circle-full\" [width]=\"15\" [height]=\"15\"></verben-svg>\n <!-- <svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\" width=\"10\" height=\"10\"\n viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg> -->\n </span>\n </div>\n <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container-two normal\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n </span>\n </div>\n </div>\n </verben-tooltip>\n <ng-template #multiselectTooltip>\n <div class=\"multi-select-full-view\">\n <div *ngIf=\"this.selectedOptions.length > 0\" class=\"item-label dropdown-label\">\n <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container-two-tooltip chip\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\"\n class=\"multiselect-item-chip multi-select flex\">\n <span>{{item}}</span>\n <verben-svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\"\n icon=\"close-circle-full\" [width]=\"15\" [height]=\"15\"></verben-svg>\n <!-- <svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\" width=\"10\" height=\"10\"\n viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg> -->\n </span>\n </div>\n <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container-two-tooltip-normal\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n </span>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </div>\n <span\n *ngIf=\"(showClear && this.selectedOption && !multiselect) || (showClear && this.selectedOptions.length > 0 && multiselect)\"\n (click)=\"this.clearSelection($event); $event.stopPropagation()\"\n class=\"drop-down-icon-item drop-down-clear-button\">\n <verben-svg icon=\"close-no-circle\" stroke=\"#94a3b8\" [width]=\"13\" [height]=\"13\"></verben-svg>\n <!-- <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.84375 0.84375L8.15625 8.15625\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M0.84375 8.15625L8.15625 0.84375\" stroke=\"currentColor\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg> -->\n </span>\n <span class=\"drop-down-icon-item drop-down-expand-button\">\n <verben-svg icon=\"chevron-down\" fill=\"#94a3b8\" [width]=\"15\" [height]=\"8\"></verben-svg>\n <!-- <svg width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00507 4.88027C6.20205 4.62775 6.30683 4.4622 6.44095 4.32704C7.74334 3.01731 9.05202 1.71387 10.3576 0.406242C10.5713 0.192495 10.7882 0.00913367 11.1193 0.0101814C11.4692 0.0112292 11.7228 0.15792 11.8884 0.456537C12.057 0.760394 12.0309 1.06111 11.8349 1.34296C11.7658 1.4425 11.6767 1.52737 11.5908 1.61433C9.98873 3.21639 8.37305 4.80483 6.793 6.42784C6.29111 6.94335 5.68759 6.92344 5.21399 6.43832C3.63184 4.8174 2.01826 3.22687 0.414109 1.62691C0.116539 1.32934 -0.116067 1.0192 0.0620561 0.565507C0.271612 0.031139 0.883519 -0.167941 1.35502 0.157919C1.49647 0.255363 1.61592 0.387385 1.73955 0.509975C3.02204 1.79036 4.30452 3.07075 5.58386 4.35533C5.70645 4.47792 5.80284 4.62671 6.00611 4.88132L6.00507 4.88027Z\"\n fill=\"currentColor\" />\n </svg> -->\n </span>\n </div>\n <div *ngIf=\"this.isInvalid && this.invalidMessage\" class=\"verben-error-message error-message\">{{invalidMessage}}\n </div>\n </div>\n <div class=\"drop-down-menu-item-wrapper\" *ngIf=\"isExpanded\">\n <div *ngIf=\"multiselect && this.selectedOptions.length > 0\">\n <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container chip flex\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item-chip flex\">\n <span>{{item}}</span>\n <verben-svg (click)=\"onMultiselectItemClosed(i, $event)\" icon=\"close-circle-full\" [width]=\"15\"\n [height]=\"15\"></verben-svg>\n <!-- <svg (click)=\"onMultiselectItemClosed(i, $event)\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> -->\n </span>\n </div>\n <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container normal\">\n <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n </span>\n </div>\n </div>\n <div *ngIf=\"allowSelectAll || filter\" class=\"actions-section flex\">\n <input *ngIf=\"allowSelectAll\" (click)=\"onSelectAll($event)\" type=\"checkbox\" [(ngModel)]=\"selectedAll\"\n class=\"custom-checkbox\" />\n <span class=\"select-all-caption\" *ngIf=\"allowSelectAll && !filter\">Select All</span>\n <div *ngIf=\"filter\" [ngClass]=\"{'focused': isInputFocused}\" tabindex=\"0\" (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\" class=\"search-section flex\">\n <span class=\"search-icon flex\">\n <verben-svg icon=\"search\" stroke=\"#64748b\" [width]=\"15\" [height]=\"15\"></verben-svg>\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <circle cx=\"9\" cy=\"9\" r=\"8\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"></circle>\n <line x1=\"14\" y1=\"14\" x2=\"19\" y2=\"19\" stroke=\"currentColor\" stroke-width=\"2\"></line>\n </svg> -->\n </span>\n <span *ngIf=\"this.selectedContexts[this.selectedContexts.length - 1]\" class=\"search-context\">\n {{this.getOptionLabel(this.selectedContexts[this.selectedContexts.length - 1])}}\n </span>\n <div class=\"search-input-container\">\n <input (input)=\"onSearch($event)\" [(ngModel)]=\"searchContext\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\"\n placeholder=\"Search...\" class=\"search-input\" />\n </div>\n </div>\n </div>\n <div *ngIf=\"showHorizontalLine\" class=\"colored-underline-section\">\n <hr [style.background-color]=\"horizontalLineColor\" class=\"colored-underline\" />\n </div>\n <div class=\"drop-down-menu-item\">\n <drop-down-item [itemTemplate]=\"itemTemplate\" [groupTemplate]=\"groupTemplate\" [activeItem]=\"selectedOption\"\n [activeItems]=\"selectedOptions\" [multiselect]=\"multiselect\" [optionValue]=\"optionValue\"\n [optionLabel]=\"optionLabel\" [optionSubLabel]=\"optionSubLabel\" [loadMoreCaption]=\"loadMoreCaption\"\n [options]=\"options\" [group]=\"group\" [onExpand]=\"expandMenu.bind(this)\"\n [onLoadMore]=\"loadMoreMenuItems.bind(this)\" [onSelect]=\"onSelect.bind(this)\"></drop-down-item>\n <div *ngIf=\"lazyLoad\">\n <div class=\"see-more-container flex justify-end\">\n <span class=\"see-more-caption\" (click)=\"loadMore()\">{{loadMoreCaption}}</span>\n </div>\n </div>\n <div *ngIf=\"isLoading\" class=\"loading-overlay\">\n <div class=\"loader\"></div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["*{font-family:sans-serif;font-size:.9rem}.w-100{width:100%}.h-100{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.error-message{position:absolute;z-index:1;left:0;right:0;bottom:-20px}.top-error .error-message{top:-20px!important;bottom:initial!important}.left-error .error-message{bottom:50%!important;right:calc(100% + 10px)!important;width:max-content;left:initial!important;transform:translateY(50%)}.right-error .error-message{bottom:50%!important;left:calc(100% + 10px)!important;width:max-content;right:initial!important;transform:translateY(50%)}.drop-down{position:relative;cursor:pointer}.drop-down-menu-item-wrapper{min-width:calc(100% - 4px);position:absolute;margin-top:3px;left:0;right:0;z-index:1;background:#fff;color:#334155;border:1px solid #e2e8f0;border-radius:5px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.drop-down-menu-item{max-height:200px;overflow-y:auto;padding:4px;box-sizing:content-box}.drop-down-input-wrapper{position:relative}.drop-down-input{align-items:center;min-height:39px}.drop-down-input.disabled .dropdown-label{color:#64748b}.drop-down-main-content{flex:1 1 0;padding:8px;min-width:0}.drop-down-icon-item.drop-down-clear-button{padding:8px 5px}.drop-down-icon-item>svg{width:.8rem;height:.8rem;display:flex}.drop-down-icon-item.drop-down-clear-button>svg{color:#94a3b8}.drop-down-icon-item.drop-down-expand-button{padding:8px 8px 8px 5px}.drop-down-icon-item.drop-down-expand-button>svg{color:#94a3b8}.drop-down-input.disabled .drop-down-icon-item>svg{color:#64748b}.dropdown-label{color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-label.place-holder{color:#64748b}.default-item{align-items:center}.default-item>div{flex:1 1 0;width:100%}.see-more-container{padding:5px}.see-more-caption{font-size:12px;color:#3b82f6}.actions-section{gap:5px;margin:10px;align-items:center}.select-all-caption{font-weight:600}.search-section{flex:1 1 0;border:1px solid transparent;padding:2px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}.search-context{max-width:45px;border-radius:5px;padding:3px 5px;background-color:#3479e980;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.colored-underline{height:4px;border:none}.multiselect-items-container{padding:10px}.multiselect-items-container.normal{max-width:100%;overflow-x:auto;white-space:nowrap}.multiselect-items-container.chip{max-width:100%;overflow-x:auto;white-space:nowrap;gap:5px}.multiselect-items-container-two.normal{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiselect-items-container-two.chip{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:5px}.multiselect-items-container-two-tooltip{display:grid;flex-wrap:wrap;gap:10px 5px;grid-template-columns:repeat(2,1fr)}.multiselect-items-container-two-tooltip-normal{display:flex;flex-wrap:wrap}.multiselect-items-container-two-tooltip .multiselect-item-chip{justify-content:space-between}.multiselect-item-chip{align-items:center;gap:5px;border-radius:5px;padding:1px 5px;background-color:#3479e980}.multiselect-item-chip.multi-select{margin-right:5px;display:inline-flex}.multiselect-item-chip>span{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiselect-item-chip>svg{width:12px;height:12px}verben-tooltip{width:100%}::ng-deep .custom-tooltip-width{max-width:300px;max-height:500px;overflow-y:auto}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#4d4b4b80;z-index:10;display:flex;justify-content:center;align-items:center;pointer-events:none}.loader{width:50px;padding:8px;aspect-ratio:1;border-radius:50%;background:#3b82f6;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}@keyframes l3{to{transform:rotate(1turn)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropDownItemComponent, selector: "drop-down-item", inputs: ["itemTemplate", "groupTemplate", "activeItem", "activeItems", "optionValue", "optionLabel", "optionSubLabel", "loadMoreCaption", "multiselect", "options", "group", "onExpand", "onLoadMore", "onSelect"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SvgModule }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: i4.TooltipComponent, selector: "verben-tooltip", inputs: ["tooltipContent", "customClass", "backgroundColor", "textColor", "padding", "borderRadius", "zIndex", "border", "width", "top", "bottom", "left", "right"] }] });
664
664
  }
665
665
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DropDownComponent, decorators: [{
666
666
  type: Component,