npm - mis-crystal-design-system - Versions diffs - 2.5.1 → 2.5.2 - Mend

mis-crystal-design-system 2.5.1 → 2.5.2

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 (70) hide show

package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mis-crystal-design-system-nested-multi-select-dropdown.js","sources":["../../../projects/mis-components/nested-multi-select-dropdown/nested-multi-select-dropdown.component.ts","../../../projects/mis-components/nested-multi-select-dropdown/nested-multi-select-dropdown.module.ts","../../../projects/mis-components/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.ts"],"sourcesContent":["import { OverlayRef, Overlay, ConnectionPositionPair, OverlayConfig } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\n\n@Component({\n selector: \"mis-nested-multi-select-dropdown\",\n templateUrl: \"./nested-multi-select-dropdown.component.html\",\n styleUrls: [\"./nested-multi-select-dropdown.component.scss\"]\n})\nexport class NestedMultiSelectDropdownComponent implements OnInit {\n searchInput: string = \"\";\n isOpen = false;\n localSelectedItems: NestedMultiSelectDropdownItem[] = [];\n localData: NestedMultiSelectDropdownItem[] = [];\n searchData: NestedMultiSelectDropdownItem[] = [];\n selectedCount: number = 0;\n\n @Input() set data(values: NestedMultiSelectDropdownItem[]) {\n // tslint:disable-next-line:no-shadowed-variable\n this.localData = values.map(item => {\n return {\n ...item,\n checked: false,\n children: item.children.map(a => {\n return {\n ...a,\n checked: false\n };\n })\n };\n });\n }\n @Input() label: string = \"Select\";\n @Input() height: string = \"\";\n @Input() width: string = \"\";\n\n @Input() dropdownListHeight: string = \"\";\n @Input() dropdownListWidth: string = \"\";\n @Input() dropdownListPosition: \"Left\" \| \"Right\" = \"Left\";\n\n @Input() searchEnabled: boolean = true;\n @Input() showSelectedCount: boolean = false;\n @Input() noDataMessage: string = \"No Data\";\n @Input() set selectedItems(values: NestedMultiSelectDropdownItem[]) {\n this.handlerSetLocalSelectedItems(values);\n }\n\n @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n @ViewChild(\"select\", { static: false }) selectElement: ElementRef;\n @ViewChild(\"popupContainer\", { static: false }) popupContainer: TemplateRef<Element>;\n private overlayRef: OverlayRef;\n\n constructor(private eRef: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n ngOnInit() {}\n\n @HostListener(\"document:click\", [\"$event\"])\n clickout(event) {\n const isClickedOutside = !this.eRef.nativeElement.contains(event.target);\n if (isClickedOutside) {\n this.onCancel();\n }\n }\n\n handlerSetLocalSelectedItems(values) {\n this.localSelectedItems = values;\n }\n isSearchInputFocused: boolean = false;\n searchInputFocused(isFocused: boolean) {\n this.isSearchInputFocused = isFocused;\n }\n searchInputCanceled(event) {\n event.stopPropagation();\n this.searchInput = \"\";\n this.isSearchInputFocused = false;\n }\n toggleDropdown() {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.handlerSetLocalSelectedItems(this.localSelectedItems);\n this.localData = this.formatValues(this.localData);\n }\n if (this.isOpen) this.openDropdown(this.popupContainer, this.selectElement.nativeElement);\n else this.onCancel();\n }\n private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n const positionsBottom = [\n new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, 0, 4),\n new ConnectionPositionPair({ originX: \"end\", originY: \"bottom\" }, { overlayX: \"end\", overlayY: \"top\" }, 0, 4)\n ];\n const positionsTop = [\n new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" }, 0, -4),\n new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, 0, -4)\n ];\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(origin)\n .withPositions([\n ...(this.dropdownListPosition === \"Right\" ? positionsBottom.reverse() : positionsBottom),\n ...(this.dropdownListPosition === \"Right\" ? positionsTop.reverse() : positionsTop)\n ])\n .withPush(true);\n const configs = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: \"cdk-overlay-transparent-backdrop\",\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n positionStrategy,\n width: origin.clientWidth\n });\n this.overlayRef = this.overlay.create(configs);\n if (this.dropdownListWidth) this.overlayRef.updateSize({ width: this.dropdownListWidth });\n if (this.dropdownListHeight) this.overlayRef.updateSize({ height: this.dropdownListHeight });\n this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n this.overlayRef.backdropClick().subscribe(res => {\n this.onCancel();\n });\n }\n // tslint:disable-next-line:variable-name\n filterByValue(array: NestedMultiSelectDropdownItem[], string: string) {\n return array\n .filter(\n o => o.label.toLowerCase().includes(string.toLowerCase()) \|\| o.children?.some(g => g?.label?.toLowerCase().includes(string.toLowerCase()))\n )\n .map(v => {\n return {\n ...v,\n children: v?.children?.filter(l => l?.label?.toLowerCase().includes(string.toLowerCase()))\n };\n });\n }\n searchInputOnChange(newValue) {\n this.searchInput = newValue;\n if (newValue) {\n this.searchData = this.filterByValue(this.localData, newValue);\n } else {\n this.searchData = [];\n this.searchInput = \"\";\n }\n }\n formatValues(array: NestedMultiSelectDropdownItem[]) {\n const checkedValues = array\n .filter(a => a.checked)\n .sort((a: NestedMultiSelectDropdownItem, b: NestedMultiSelectDropdownItem) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));\n const unCheckedValues = array\n .filter(a => !a.checked)\n .sort((a: NestedMultiSelectDropdownItem, b: NestedMultiSelectDropdownItem) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));\n return [...checkedValues, ...unCheckedValues];\n }\n // tslint:disable-next-line:no-shadowed-variable\n toggleSelectedItems(event, item: NestedMultiSelectDropdownItem, cItem?: any) {\n event.stopPropagation();\n if (!cItem) {\n if (item.checked) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n return {\n ...a,\n checked: false,\n // tslint:disable-next-line:no-shadowed-variable\n children: item.children.map(a => {\n return {\n ...a,\n checked: false\n };\n })\n };\n }\n return a;\n })\n ];\n } else {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n return {\n ...a,\n checked: true,\n // tslint:disable-next-line:no-shadowed-variable\n children: item.children.map(a => {\n return {\n ...a,\n checked: true\n };\n })\n };\n }\n return a;\n })\n ];\n }\n } else {\n if (cItem.checked) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n // tslint:disable-next-line:no-shadowed-variable\n const children = a?.children.map(a => {\n if (cItem?.value === a?.value) {\n return {\n ...a,\n checked: false\n };\n }\n return a;\n });\n return {\n ...a,\n checked: children.every(q => q.checked),\n // tslint:disable-next-line:no-shadowed-variable\n children\n };\n }\n return a;\n })\n ];\n } else {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n // tslint:disable-next-line:no-shadowed-variable\n const children = a?.children.map(a => {\n if (cItem?.value === a?.value) {\n return {\n ...a,\n checked: true\n };\n }\n return a;\n });\n return {\n ...a,\n checked: children.every(q => q.checked),\n // tslint:disable-next-line:no-shadowed-variable\n children\n };\n }\n return a;\n })\n ];\n }\n }\n if (this.searchEnabled) {\n this.searchInputOnChange(this.searchInput);\n }\n }\n\n applyFilters() {\n let localCount = 0;\n this.localData.forEach(a =>\n a?.children?.forEach(b => {\n if (b.checked) {\n localCount += 1;\n }\n })\n );\n this.selectedCount = localCount;\n const w = this.localData\n .filter(r => !(!r.checked && !r?.children?.some(f => f?.checked)))\n .map(a => {\n return {\n ...a,\n children: a?.children?.filter(s => s.checked)\n };\n });\n this.onChange.emit(w);\n this.onCancel();\n }\n onReset() {\n this.isSearchInputFocused = false;\n for (let item of this.localData) {\n for (let child of item.children) {\n child.checked = false;\n }\n item.checked = false;\n }\n this.onChange.emit([]);\n this.isOpen = false;\n this.searchInput = \"\";\n }\n onCancel() {\n this.isSearchInputFocused = false;\n this.isOpen = false;\n this.overlayRef?.detach();\n this.searchInput = \"\";\n }\n}\nexport interface NestedMultiSelectDropdownItem {\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n children: Array<{\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n }>;\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { NestedMultiSelectDropdownComponent } from \"./nested-multi-select-dropdown.component\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\nimport { ButtonModule } from \"mis-crystal-design-system/button\";\n\n@NgModule({\n declarations: [NestedMultiSelectDropdownComponent],\n imports: [CommonModule, FormsModule, CheckboxModule, ButtonModule],\n exports: [NestedMultiSelectDropdownComponent]\n})\nexport class NestedMultiSelectDropdownModule {\n static forRoot(): ModuleWithProviders<NestedMultiSelectDropdownModule> {\n return { ngModule: NestedMultiSelectDropdownModule, providers: [] };\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"mis-crystal-design-system-nested-multi-select-dropdown.js","sources":["../../../projects/mis-components/nested-multi-select-dropdown/nested-multi-select-dropdown.component.ts","../../../projects/mis-components/nested-multi-select-dropdown/nested-multi-select-dropdown.module.ts","../../../projects/mis-components/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.ts"],"sourcesContent":["import { OverlayRef, Overlay, ConnectionPositionPair, OverlayConfig } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Component, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\n\n@Component({\n selector: \"mis-nested-multi-select-dropdown\",\n templateUrl: \"./nested-multi-select-dropdown.component.html\",\n styleUrls: [\"./nested-multi-select-dropdown.component.scss\"]\n})\nexport class NestedMultiSelectDropdownComponent implements OnInit {\n searchInput: string = \"\";\n isOpen = false;\n localSelectedItems: NestedMultiSelectDropdownItem[] = [];\n localData: NestedMultiSelectDropdownItem[] = [];\n searchData: NestedMultiSelectDropdownItem[] = [];\n selectedCount: number = 0;\n\n @Input() set data(values: NestedMultiSelectDropdownItem[]) {\n // tslint:disable-next-line:no-shadowed-variable\n this.localData = values.map(item => {\n return {\n ...item,\n checked: false,\n children: item.children.map(a => {\n return {\n ...a,\n checked: false\n };\n })\n };\n });\n }\n @Input() label: string = \"Select\";\n @Input() height: string = \"\";\n @Input() width: string = \"\";\n\n @Input() dropdownListHeight: string = \"\";\n @Input() dropdownListWidth: string = \"\";\n @Input() dropdownListPosition: \"Left\" \| \"Right\" = \"Left\";\n\n @Input() searchEnabled: boolean = true;\n @Input() showSelectedCount: boolean = false;\n @Input() noDataMessage: string = \"No Data\";\n @Input() set selectedItems(values: NestedMultiSelectDropdownItem[]) {\n this.handlerSetLocalSelectedItems(values);\n }\n\n @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n @ViewChild(\"select\", { static: false }) selectElement: ElementRef;\n @ViewChild(\"popupContainer\", { static: false }) popupContainer: TemplateRef<Element>;\n private overlayRef: OverlayRef;\n\n constructor(private eRef: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n ngOnInit() {}\n\n handlerSetLocalSelectedItems(values) {\n this.localSelectedItems = values;\n }\n isSearchInputFocused: boolean = false;\n searchInputFocused(isFocused: boolean) {\n this.isSearchInputFocused = isFocused;\n }\n searchInputCanceled(event) {\n event.stopPropagation();\n this.searchInput = \"\";\n this.isSearchInputFocused = false;\n }\n toggleDropdown() {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.handlerSetLocalSelectedItems(this.localSelectedItems);\n this.localData = this.formatValues(this.localData);\n }\n if (this.isOpen) this.openDropdown(this.popupContainer, this.selectElement.nativeElement);\n else this.onCancel();\n }\n private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n const positionsBottom = [\n new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, 0, 4),\n new ConnectionPositionPair({ originX: \"end\", originY: \"bottom\" }, { overlayX: \"end\", overlayY: \"top\" }, 0, 4)\n ];\n const positionsTop = [\n new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" }, 0, -4),\n new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, 0, -4)\n ];\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(origin)\n .withPositions([\n ...(this.dropdownListPosition === \"Right\" ? positionsBottom.reverse() : positionsBottom),\n ...(this.dropdownListPosition === \"Right\" ? positionsTop.reverse() : positionsTop)\n ])\n .withPush(true);\n const configs = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: \"cdk-overlay-transparent-backdrop\",\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n positionStrategy,\n width: origin.clientWidth\n });\n this.overlayRef = this.overlay.create(configs);\n if (this.dropdownListWidth) this.overlayRef.updateSize({ width: this.dropdownListWidth });\n if (this.dropdownListHeight) this.overlayRef.updateSize({ height: this.dropdownListHeight });\n this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n this.overlayRef.backdropClick().subscribe(res => {\n this.onCancel();\n });\n }\n // tslint:disable-next-line:variable-name\n filterByValue(array: NestedMultiSelectDropdownItem[], string: string) {\n return array\n .filter(\n o => o.label.toLowerCase().includes(string.toLowerCase()) \|\| o.children?.some(g => g?.label?.toLowerCase().includes(string.toLowerCase()))\n )\n .map(v => {\n return {\n ...v,\n children: v?.children?.filter(l => l?.label?.toLowerCase().includes(string.toLowerCase()))\n };\n });\n }\n searchInputOnChange(newValue) {\n this.searchInput = newValue;\n if (newValue) {\n this.searchData = this.filterByValue(this.localData, newValue);\n } else {\n this.searchData = [];\n this.searchInput = \"\";\n }\n }\n formatValues(array: NestedMultiSelectDropdownItem[]) {\n const checkedValues = array\n .filter(a => a.checked)\n .sort((a: NestedMultiSelectDropdownItem, b: NestedMultiSelectDropdownItem) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));\n const unCheckedValues = array\n .filter(a => !a.checked)\n .sort((a: NestedMultiSelectDropdownItem, b: NestedMultiSelectDropdownItem) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));\n return [...checkedValues, ...unCheckedValues];\n }\n // tslint:disable-next-line:no-shadowed-variable\n toggleSelectedItems(event, item: NestedMultiSelectDropdownItem, cItem?: any) {\n event.stopPropagation();\n if (!cItem) {\n if (item.checked) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n return {\n ...a,\n checked: false,\n // tslint:disable-next-line:no-shadowed-variable\n children: item.children.map(a => {\n return {\n ...a,\n checked: false\n };\n })\n };\n }\n return a;\n })\n ];\n } else {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n return {\n ...a,\n checked: true,\n // tslint:disable-next-line:no-shadowed-variable\n children: item.children.map(a => {\n return {\n ...a,\n checked: true\n };\n })\n };\n }\n return a;\n })\n ];\n }\n } else {\n if (cItem.checked) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n // tslint:disable-next-line:no-shadowed-variable\n const children = a?.children.map(a => {\n if (cItem?.value === a?.value) {\n return {\n ...a,\n checked: false\n };\n }\n return a;\n });\n return {\n ...a,\n checked: children.every(q => q.checked),\n // tslint:disable-next-line:no-shadowed-variable\n children\n };\n }\n return a;\n })\n ];\n } else {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value) {\n // tslint:disable-next-line:no-shadowed-variable\n const children = a?.children.map(a => {\n if (cItem?.value === a?.value) {\n return {\n ...a,\n checked: true\n };\n }\n return a;\n });\n return {\n ...a,\n checked: children.every(q => q.checked),\n // tslint:disable-next-line:no-shadowed-variable\n children\n };\n }\n return a;\n })\n ];\n }\n }\n if (this.searchEnabled) {\n this.searchInputOnChange(this.searchInput);\n }\n }\n\n applyFilters() {\n let localCount = 0;\n this.localData.forEach(a =>\n a?.children?.forEach(b => {\n if (b.checked) {\n localCount += 1;\n }\n })\n );\n this.selectedCount = localCount;\n const w = this.localData\n .filter(r => !(!r.checked && !r?.children?.some(f => f?.checked)))\n .map(a => {\n return {\n ...a,\n children: a?.children?.filter(s => s.checked)\n };\n });\n this.onChange.emit(w);\n this.onCancel();\n }\n onReset() {\n this.isSearchInputFocused = false;\n for (let item of this.localData) {\n for (let child of item.children) {\n child.checked = false;\n }\n item.checked = false;\n }\n this.onChange.emit([]);\n this.isOpen = false;\n this.searchInput = \"\";\n }\n onCancel() {\n this.isSearchInputFocused = false;\n this.isOpen = false;\n this.overlayRef?.detach();\n this.searchInput = \"\";\n }\n}\nexport interface NestedMultiSelectDropdownItem {\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n children: Array<{\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n }>;\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { NestedMultiSelectDropdownComponent } from \"./nested-multi-select-dropdown.component\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\nimport { ButtonModule } from \"mis-crystal-design-system/button\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\n\n@NgModule({\n declarations: [NestedMultiSelectDropdownComponent],\n imports: [CommonModule, FormsModule, OverlayModule, CheckboxModule, ButtonModule],\n exports: [NestedMultiSelectDropdownComponent]\n})\nexport class NestedMultiSelectDropdownModule {\n static forRoot(): ModuleWithProviders<NestedMultiSelectDropdownModule> {\n return { ngModule: NestedMultiSelectDropdownModule, providers: [] };\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2015/mis-crystal-design-system-tooltip.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Component, ViewChild, Directive, ElementRef, ViewContainerRef, Input, HostListener, NgModule } from '@angular/core';
-import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
+import { OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { take } from 'rxjs/operators';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { genPositionPairs } from 'mis-crystal-design-system/utils';
@@ -157,7 +157,7 @@ class ToolTipModule {
 ToolTipModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [ToolTipDirective, ToolTipComponent],
-                imports: [CommonModule],
+                imports: [CommonModule, OverlayModule],
                 exports: [ToolTipDirective, ToolTipComponent],
                 entryComponents: [ToolTipComponent]
             },] }

package/fesm2015/mis-crystal-design-system-tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mis-crystal-design-system-tooltip.js","sources":["../../../projects/mis-components/tooltip/tooltip-container/tooltip.component.ts","../../../projects/mis-components/tooltip/tooltip.directive.ts","../../../projects/mis-components/tooltip/tooltip.module.ts","../../../projects/mis-components/tooltip/mis-crystal-design-system-tooltip.ts"],"sourcesContent":["import { AfterViewInit, Component, ElementRef, Inject, OnInit, ViewChild } from \"@angular/core\";\nimport { ITooltipPositions } from \"../models/tooltip.model\";\n\n@Component({\n selector: \"mis-tooltip\",\n templateUrl: \"./tooltip.component.html\",\n styleUrls: [\"./tooltip.component.scss\"]\n})\nexport class ToolTipComponent implements OnInit, AfterViewInit {\n public toolTipText: string = \"\";\n public toolTipPosition: ITooltipPositions = \"bottom\";\n\n @ViewChild(\"container\") container: ElementRef;\n\n constructor() {}\n ngOnInit() {}\n ngAfterViewInit() {\n if (!this.container?.nativeElement) return;\n if (this.toolTipPosition === \"top\" \|\| this.toolTipPosition === \"bottom\") {\n const eleWidth = this.container.nativeElement.getBoundingClientRect();\n this.container.nativeElement.style.left = eleWidth.width / -2 + \"px\";\n return;\n }\n if (this.toolTipPosition === \"left\") {\n const eleWidth = this.container.nativeElement.getBoundingClientRect();\n this.container.nativeElement.style.left = -eleWidth.width + \"px\";\n }\n }\n}\n","import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnInit, ViewContainerRef, ~~Injector~~ } from \"@angular/core\";\nimport { Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { take } from \"rxjs/operators\";\nimport { ComponentPortal } from \"@angular/cdk/portal\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\nimport { genPositionPairs } from \"mis-crystal-design-system/utils\";\nimport { ITooltipPositions } from \"./models/tooltip.model\";\n\n@Directive({\n selector: \"[misToolTip]\"\n})\nexport class ToolTipDirective implements OnInit, AfterViewInit {\n public isToolTipDisplayed: boolean = false;\n public toolTipText: string = \"\";\n public toolTipPosition: ITooltipPositions = \"bottom\";\n private overlayRef: OverlayRef;\n\n @Input() showOnHover: boolean = true;\n @Input() set showToolTip(value: boolean) {\n this.isToolTipDisplayed = value;\n if (value) this.displayToolTip();\n else this.hideToolTip();\n }\n @Input() set text(value: string) {\n this.toolTipText = value;\n }\n @Input() set position(value: ITooltipPositions) {\n this.toolTipPosition = value;\n }\n\n @HostListener(\"mouseenter\") onMouseEnter() {\n if (this.showOnHover) this.displayToolTip();\n }\n @HostListener(\"mouseleave\") onMouseLeave() {\n if (this.showOnHover) this.hideToolTip();\n }\n\n constructor(private element: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n\n ngOnInit() {}\n ngAfterViewInit() {\n if (this.isToolTipDisplayed) this.displayToolTip();\n else this.hideToolTip();\n }\n\n displayToolTip() {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(this.element)\n .withPositions(\n genPositionPairs(\n {\n positionX: \"center\",\n positionY: this.toolTipPosition === \"top\" ? \"top\" : \"center\",\n offsetX: this.positionTooltip(\"OFFSET_X\"),\n offsetY: this.positionTooltip(\"OFFSET_Y\")\n },\n false\n )\n )\n .withPush(true);\n const config = new OverlayConfig({\n hasBackdrop: false,\n positionStrategy,\n scrollStrategy: this.overlay.scrollStrategies.reposition()\n });\n this.overlayRef = this.overlay.create(config);\n const tempRef = new ComponentPortal(ToolTipComponent, this.viewContainerRef);\n const tooltipRef = this.overlayRef.attach(tempRef);\n tooltipRef.instance.toolTipText = this.toolTipText;\n tooltipRef.instance.toolTipPosition = this.toolTipPosition;\n this.overlayRef\n .backdropClick()\n .pipe(take(1))\n .subscribe(() => {\n this.hideToolTip();\n });\n }\n\n positionTooltip(type: \"OFFSET_X\" \| \"OFFSET_Y\") {\n if (type === \"OFFSET_X\") {\n return this.toolTipPosition === \"right\"\n ? this.element.nativeElement.offsetWidth / 2 + 8\n : this.toolTipPosition === \"left\"\n ? (this.element.nativeElement.offsetWidth / 2 + 8) * -1\n : this.toolTipPosition === \"top\" \|\| this.toolTipPosition === \"bottom\"\n ? 0\n : 8;\n }\n if (type !== \"OFFSET_Y\") return;\n return this.toolTipPosition === \"right\" \|\| this.toolTipPosition === \"left\"\n ? -18\n : this.toolTipPosition === \"top\"\n ? -44\n : this.toolTipPosition === \"bottom\"\n ? this.element.nativeElement.offsetHeight / 2 + 8\n : 8;\n }\n\n hideToolTip() {\n this.overlayRef?.detach();\n this.overlayRef?.dispose();\n }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { ToolTipDirective } from \"./tooltip.directive\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\n\n@NgModule({\n declarations: [ToolTipDirective, ToolTipComponent],\n imports: [CommonModule],\n exports: [ToolTipDirective, ToolTipComponent],\n entryComponents: [ToolTipComponent]\n})\nexport class ToolTipModule {\n static forRoot(): ModuleWithProviders<ToolTipModule> {\n return { ngModule: ToolTipModule, providers: [] };\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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~~gBACvB~~,OAAO,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;gBAC7C,eAAe,EAAE,CAAC,gBAAgB,CAAC;aACpC;;;ACXD;;;;;;"}
1	+ {"version":3,"file":"mis-crystal-design-system-tooltip.js","sources":["../../../projects/mis-components/tooltip/tooltip-container/tooltip.component.ts","../../../projects/mis-components/tooltip/tooltip.directive.ts","../../../projects/mis-components/tooltip/tooltip.module.ts","../../../projects/mis-components/tooltip/mis-crystal-design-system-tooltip.ts"],"sourcesContent":["import { AfterViewInit, Component, ElementRef, Inject, OnInit, ViewChild } from \"@angular/core\";\nimport { ITooltipPositions } from \"../models/tooltip.model\";\n\n@Component({\n selector: \"mis-tooltip\",\n templateUrl: \"./tooltip.component.html\",\n styleUrls: [\"./tooltip.component.scss\"]\n})\nexport class ToolTipComponent implements OnInit, AfterViewInit {\n public toolTipText: string = \"\";\n public toolTipPosition: ITooltipPositions = \"bottom\";\n\n @ViewChild(\"container\") container: ElementRef;\n\n constructor() {}\n ngOnInit() {}\n ngAfterViewInit() {\n if (!this.container?.nativeElement) return;\n if (this.toolTipPosition === \"top\" \|\| this.toolTipPosition === \"bottom\") {\n const eleWidth = this.container.nativeElement.getBoundingClientRect();\n this.container.nativeElement.style.left = eleWidth.width / -2 + \"px\";\n return;\n }\n if (this.toolTipPosition === \"left\") {\n const eleWidth = this.container.nativeElement.getBoundingClientRect();\n this.container.nativeElement.style.left = -eleWidth.width + \"px\";\n }\n }\n}\n","import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnInit, ViewContainerRef } from \"@angular/core\";\nimport { Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { take } from \"rxjs/operators\";\nimport { ComponentPortal } from \"@angular/cdk/portal\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\nimport { genPositionPairs } from \"mis-crystal-design-system/utils\";\nimport { ITooltipPositions } from \"./models/tooltip.model\";\n\n@Directive({\n selector: \"[misToolTip]\"\n})\nexport class ToolTipDirective implements OnInit, AfterViewInit {\n public isToolTipDisplayed: boolean = false;\n public toolTipText: string = \"\";\n public toolTipPosition: ITooltipPositions = \"bottom\";\n private overlayRef: OverlayRef;\n\n @Input() showOnHover: boolean = true;\n @Input() set showToolTip(value: boolean) {\n this.isToolTipDisplayed = value;\n if (value) this.displayToolTip();\n else this.hideToolTip();\n }\n @Input() set text(value: string) {\n this.toolTipText = value;\n }\n @Input() set position(value: ITooltipPositions) {\n this.toolTipPosition = value;\n }\n\n @HostListener(\"mouseenter\") onMouseEnter() {\n if (this.showOnHover) this.displayToolTip();\n }\n @HostListener(\"mouseleave\") onMouseLeave() {\n if (this.showOnHover) this.hideToolTip();\n }\n\n constructor(private element: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n\n ngOnInit() {}\n ngAfterViewInit() {\n if (this.isToolTipDisplayed) this.displayToolTip();\n else this.hideToolTip();\n }\n\n displayToolTip() {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(this.element)\n .withPositions(\n genPositionPairs(\n {\n positionX: \"center\",\n positionY: this.toolTipPosition === \"top\" ? \"top\" : \"center\",\n offsetX: this.positionTooltip(\"OFFSET_X\"),\n offsetY: this.positionTooltip(\"OFFSET_Y\")\n },\n false\n )\n )\n .withPush(true);\n const config = new OverlayConfig({\n hasBackdrop: false,\n positionStrategy,\n scrollStrategy: this.overlay.scrollStrategies.reposition()\n });\n this.overlayRef = this.overlay.create(config);\n const tempRef = new ComponentPortal(ToolTipComponent, this.viewContainerRef);\n const tooltipRef = this.overlayRef.attach(tempRef);\n tooltipRef.instance.toolTipText = this.toolTipText;\n tooltipRef.instance.toolTipPosition = this.toolTipPosition;\n this.overlayRef\n .backdropClick()\n .pipe(take(1))\n .subscribe(() => {\n this.hideToolTip();\n });\n }\n\n positionTooltip(type: \"OFFSET_X\" \| \"OFFSET_Y\") {\n if (type === \"OFFSET_X\") {\n return this.toolTipPosition === \"right\"\n ? this.element.nativeElement.offsetWidth / 2 + 8\n : this.toolTipPosition === \"left\"\n ? (this.element.nativeElement.offsetWidth / 2 + 8) * -1\n : this.toolTipPosition === \"top\" \|\| this.toolTipPosition === \"bottom\"\n ? 0\n : 8;\n }\n if (type !== \"OFFSET_Y\") return;\n return this.toolTipPosition === \"right\" \|\| this.toolTipPosition === \"left\"\n ? -18\n : this.toolTipPosition === \"top\"\n ? -44\n : this.toolTipPosition === \"bottom\"\n ? this.element.nativeElement.offsetHeight / 2 + 8\n : 8;\n }\n\n hideToolTip() {\n this.overlayRef?.detach();\n this.overlayRef?.dispose();\n }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ToolTipDirective } from \"./tooltip.directive\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\n\n@NgModule({\n declarations: [ToolTipDirective, ToolTipComponent],\n imports: [CommonModule, OverlayModule],\n exports: [ToolTipDirective, ToolTipComponent],\n entryComponents: [ToolTipComponent]\n})\nexport class ToolTipModule {\n static forRoot(): ModuleWithProviders<ToolTipModule> {\n return { ngModule: ToolTipModule, providers: [] };\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"MultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mis-multi-select-dropdown","template":"<div\n class=\"container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n >\n <div class=\"label\">\n <p class=\"text\">{{ label }}</p>\n <p ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n {{ localSelectedItems?.length }}\n </p>\n </div>\n <svg\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n</div>\n<ng-template #popupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n [ngClass]=\"{\n 'position-left': dropdownListPosition === 'Left',\n 'position-right': dropdownListPosition === 'Right'\n }\"\n >\n <div ngIf=\"searchEnabled\" class=\"search-container\">\n <svg\n ngIf=\"!isSearchInputFocused\"\n class=\"search-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n fill=\"#6A737D\"\n />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{\n paddingLeft: isSearchInputFocused ? '12px' : '45px',\n border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n paddingRight: isSearchInputFocused ? '45px' : '10px'\n }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg\n ngIf=\"isSearchInputFocused\"\n class=\"cancel-icon\"\n (click)=\"searchInputCanceled($event)\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n fill=\"#6A737D\"\n />\n </svg>\n </div>\n <div class=\"items\">\n <div\n class=\"item\"\n tabindex=\"0\"\n (keyup.enter)=\"toggleSelectedItems($event, item)\"\n (click)=\"toggleSelectedItems($event, item)\"\n ngFor=\"let item of searchInput ? searchData : localData\"\n >\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox [checked]=\"item.checked\" tabindex=\"-1\"></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ item.label }}\n </p>\n </div>\n <div class=\"icon-container\" ngIf=\"item.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n </div>\n </div>\n <div class=\"noData\" ngIf=\"(searchInput ? searchData : localData).length === 0\">\n {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n </div>\n </div>\n <div ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n </div>\n </div>\n </div>\n</ng-template>\n","styles":[".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:focus-visible,.container .dropdown:hover{background-color:#f5f7fc;outline:none}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.2;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"enableSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"hideApplyButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":41,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":44,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":44,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":44,"character":92}]}],"ngOnInit":[{"__symbolic":"method"}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":47,"character":3},"arguments":["document:click",["$event"]]}]}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"formatValues":[{"__symbolic":"method"}],"toggleSelectedItems":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"MultiSelectDropdownItem":{"__symbolic":"interface"},"MultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":26},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":9,"character":39},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":9,"character":55}],"exports":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"MultiSelectDropdownComponent":"./multi-select-dropdown.component","MultiSelectDropdownItem":"./multi-select-dropdown.component","MultiSelectDropdownModule":"./multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/multi-select-dropdown"}
1	+ {"__symbolic":"module","version":4,"metadata":{"MultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mis-multi-select-dropdown","template":"<div\n class=\"container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n >\n <div class=\"label\">\n <p class=\"text\">{{ label }}</p>\n <p ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n {{ localSelectedItems?.length }}\n </p>\n </div>\n <svg\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n</div>\n<ng-template #popupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n [ngClass]=\"{\n 'position-left': dropdownListPosition === 'Left',\n 'position-right': dropdownListPosition === 'Right'\n }\"\n >\n <div ngIf=\"searchEnabled\" class=\"search-container\">\n <svg\n ngIf=\"!isSearchInputFocused\"\n class=\"search-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n fill=\"#6A737D\"\n />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{\n paddingLeft: isSearchInputFocused ? '12px' : '45px',\n border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n paddingRight: isSearchInputFocused ? '45px' : '10px'\n }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg\n ngIf=\"isSearchInputFocused\"\n class=\"cancel-icon\"\n (click)=\"searchInputCanceled($event)\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n fill=\"#6A737D\"\n />\n </svg>\n </div>\n <div class=\"items\">\n <div\n class=\"item\"\n tabindex=\"0\"\n (keyup.enter)=\"toggleSelectedItems($event, item)\"\n (click)=\"toggleSelectedItems($event, item)\"\n ngFor=\"let item of searchInput ? searchData : localData\"\n >\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox [checked]=\"item.checked\" tabindex=\"-1\"></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ item.label }}\n </p>\n </div>\n <div class=\"icon-container\" ngIf=\"item.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n </div>\n </div>\n <div class=\"noData\" ngIf=\"(searchInput ? searchData : localData).length === 0\">\n {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n </div>\n </div>\n <div ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n </div>\n </div>\n </div>\n</ng-template>\n","styles":[".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:focus-visible,.container .dropdown:hover{background-color:#f5f7fc;outline:none}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.2;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"enableSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"hideApplyButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":41,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":44,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":44,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":44,"character":92}]}],"ngOnInit":[{"__symbolic":"method"}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"formatValues":[{"__symbolic":"method"}],"toggleSelectedItems":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"MultiSelectDropdownItem":{"__symbolic":"interface"},"MultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":26},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":10,"character":39},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":10,"character":54},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":10,"character":70}],"exports":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"MultiSelectDropdownComponent":"./multi-select-dropdown.component","MultiSelectDropdownItem":"./multi-select-dropdown.component","MultiSelectDropdownModule":"./multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/multi-select-dropdown"}

package/multi-select-dropdown/multi-select-dropdown.component.d.ts CHANGED Viewed

@@ -31,7 +31,6 @@ export declare class MultiSelectDropdownComponent implements OnInit {
     private overlayRef;
     constructor(eRef: ElementRef, overlay: Overlay, viewContainerRef: ViewContainerRef);
     ngOnInit(): void;
-    clickout(event: any): void;
     handlerSetLocalSelectedItems(values: any): void;
     searchInputFocused(isFocused: boolean): void;
     searchInputCanceled(event: any): void;

package/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"NestedMultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-nested-multi-select-dropdown","template":"<div\n class=\"container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n >\n <div class=\"label\">\n <p class=\"text\">{{ label }}</p>\n <p ngIf=\"showSelectedCount && selectedCount > 0\" class=\"count\">\n {{ selectedCount }}\n </p>\n </div>\n <svg\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n</div>\n<ng-template #popupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n [ngClass]=\"{\n 'position-left': dropdownListPosition === 'Left',\n 'position-right': dropdownListPosition === 'Right'\n }\"\n >\n <div ngIf=\"searchEnabled\" class=\"search-container\">\n <svg\n ngIf=\"!isSearchInputFocused\"\n class=\"search-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n fill=\"#6A737D\"\n />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{\n paddingLeft: isSearchInputFocused ? '12px' : '45px',\n border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n paddingRight: isSearchInputFocused ? '45px' : '10px'\n }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg\n ngIf=\"isSearchInputFocused\"\n class=\"cancel-icon\"\n (click)=\"searchInputCanceled($event)\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n fill=\"#6A737D\"\n />\n </svg>\n </div>\n <div class=\"items\">\n <div\n tabindex=\"0\"\n (keyup.enter)=\"toggleSelectedItems($event, item)\"\n (click)=\"toggleSelectedItems($event, item)\"\n ngFor=\"let item of searchInput ? searchData : localData\"\n >\n <div class=\"item\">\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox [checked]=\"item.checked\"></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ item.label }}\n </p>\n </div>\n <div class=\"icon-container\" ngIf=\"item.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n </div>\n </div>\n <div ngIf=\"item?.children?.length > 0\" class=\"items sub\" style=\"padding-right: 0\">\n <div\n class=\"item\"\n tabindex=\"0\"\n (keyup.enter)=\"toggleSelectedItems($event, item, cItem)\"\n (click)=\"toggleSelectedItems($event, item, cItem)\"\n ngFor=\"let cItem of item?.children\"\n >\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox [checked]=\"cItem.checked\"></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ cItem.label }}\n </p>\n </div>\n <div class=\"icon-container\" ngIf=\"cItem.icon\">\n <img class=\"icon\" [src]=\"cItem.icon\" alt=\"no img\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"noData\" ngIf=\"(searchInput ? searchData : localData).length === 0\">\n {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n </div>\n </div>\n <div *ngIf=\"localData.length !== 0\" class=\"actions-container\">\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n </div>\n </div>\n </div>\n</ng-template>\n","styles":["::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#9aa7b4}.container{position:relative;display:flex;justify-content:center;align-items:center;height:32px;width:256px;flex-wrap:wrap;font-family:Lato,sans-serif}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:focus-visible,.container .dropdown:hover{background-color:#f5f7fc;outline:none}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":49,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":53,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":53,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":53,"character":92}]}],"ngOnInit":[{"__symbolic":"method"}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":56,"character":3},"arguments":["document:click",["$event"]]}]}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"formatValues":[{"__symbolic":"method"}],"toggleSelectedItems":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"NestedMultiSelectDropdownItem":{"__symbolic":"interface"},"NestedMultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NestedMultiSelectDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":26},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":9,"character":39},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":9,"character":55}],"exports":[{"__symbolic":"reference","name":"NestedMultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NestedMultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"NestedMultiSelectDropdownComponent":"./nested-multi-select-dropdown.component","NestedMultiSelectDropdownItem":"./nested-multi-select-dropdown.component","NestedMultiSelectDropdownModule":"./nested-multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/nested-multi-select-dropdown"}
1	+ {"__symbolic":"module","version":4,"metadata":{"NestedMultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-nested-multi-select-dropdown","template":"<div\n class=\"container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n >\n <div class=\"label\">\n <p class=\"text\">{{ label }}</p>\n <p ngIf=\"showSelectedCount && selectedCount > 0\" class=\"count\">\n {{ selectedCount }}\n </p>\n </div>\n <svg\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n</div>\n<ng-template #popupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n [ngClass]=\"{\n 'position-left': dropdownListPosition === 'Left',\n 'position-right': dropdownListPosition === 'Right'\n }\"\n >\n <div ngIf=\"searchEnabled\" class=\"search-container\">\n <svg\n ngIf=\"!isSearchInputFocused\"\n class=\"search-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n fill=\"#6A737D\"\n />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{\n paddingLeft: isSearchInputFocused ? '12px' : '45px',\n border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n paddingRight: isSearchInputFocused ? '45px' : '10px'\n }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg\n ngIf=\"isSearchInputFocused\"\n class=\"cancel-icon\"\n (click)=\"searchInputCanceled($event)\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n fill=\"#6A737D\"\n />\n </svg>\n </div>\n <div class=\"items\">\n <div\n tabindex=\"0\"\n (keyup.enter)=\"toggleSelectedItems($event, item)\"\n (click)=\"toggleSelectedItems($event, item)\"\n ngFor=\"let item of searchInput ? searchData : localData\"\n >\n <div class=\"item\">\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox [checked]=\"item.checked\"></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ item.label }}\n </p>\n </div>\n <div class=\"icon-container\" ngIf=\"item.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n </div>\n </div>\n <div ngIf=\"item?.children?.length > 0\" class=\"items sub\" style=\"padding-right: 0\">\n <div\n class=\"item\"\n tabindex=\"0\"\n (keyup.enter)=\"toggleSelectedItems($event, item, cItem)\"\n (click)=\"toggleSelectedItems($event, item, cItem)\"\n ngFor=\"let cItem of item?.children\"\n >\n <div class=\"checkbox-container-wrapper\">\n <div class=\"checkbox-container\">\n <mis-checkbox [checked]=\"cItem.checked\"></mis-checkbox>\n </div>\n <p class=\"label\">\n {{ cItem.label }}\n </p>\n </div>\n <div class=\"icon-container\" ngIf=\"cItem.icon\">\n <img class=\"icon\" [src]=\"cItem.icon\" alt=\"no img\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"noData\" ngIf=\"(searchInput ? searchData : localData).length === 0\">\n {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n </div>\n </div>\n <div *ngIf=\"localData.length !== 0\" class=\"actions-container\">\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n </div>\n <div style=\"width: calc(50% - 4px)\">\n <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n </div>\n </div>\n </div>\n</ng-template>\n","styles":["::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#9aa7b4}.container{position:relative;display:flex;justify-content:center;align-items:center;height:32px;width:256px;flex-wrap:wrap;font-family:Lato,sans-serif}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:focus-visible,.container .dropdown:hover{background-color:#f5f7fc;outline:none}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":49,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":53,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":53,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":53,"character":92}]}],"ngOnInit":[{"__symbolic":"method"}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"formatValues":[{"__symbolic":"method"}],"toggleSelectedItems":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"NestedMultiSelectDropdownItem":{"__symbolic":"interface"},"NestedMultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NestedMultiSelectDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":26},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":10,"character":39},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":10,"character":54},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":10,"character":70}],"exports":[{"__symbolic":"reference","name":"NestedMultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NestedMultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"NestedMultiSelectDropdownComponent":"./nested-multi-select-dropdown.component","NestedMultiSelectDropdownItem":"./nested-multi-select-dropdown.component","NestedMultiSelectDropdownModule":"./nested-multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/nested-multi-select-dropdown"}

package/nested-multi-select-dropdown/nested-multi-select-dropdown.component.d.ts CHANGED Viewed

@@ -27,7 +27,6 @@ export declare class NestedMultiSelectDropdownComponent implements OnInit {
     private overlayRef;
     constructor(eRef: ElementRef, overlay: Overlay, viewContainerRef: ViewContainerRef);
     ngOnInit(): void;
-    clickout(event: any): void;
     handlerSetLocalSelectedItems(values: any): void;
     isSearchInputFocused: boolean;
     searchInputFocused(isFocused: boolean): void;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mis-crystal-design-system",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/core": "*",

package/tooltip/mis-crystal-design-system-tooltip.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"ToolTipDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"[misToolTip]"}]}],"members":{"showOnHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"showToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":30,"character":3},"arguments":["mouseenter"]}]}],"onMouseLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":33,"character":3},"arguments":["mouseleave"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":31},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":37,"character":60},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":37,"character":95}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"displayToolTip":[{"__symbolic":"method"}],"positionTooltip":[{"__symbolic":"method"}],"hideToolTip":[{"__symbolic":"method"}]}},"ToolTipComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mis-tooltip","template":"<div id=\"tooltip-container\" *ngIf=\"toolTipText.length > 0\" #container>\n <div id=\"tooltip\">\n <div id=\"tooltip-text\">{{ toolTipText }}</div>\n <span\n id=\"arrow\"\n [ngClass]=\"{\n 'arrow-left': toolTipPosition === 'left',\n 'arrow-right': toolTipPosition === 'right',\n 'arrow-top': toolTipPosition === 'top',\n 'arrow-bottom': toolTipPosition === 'bottom'\n }\"\n ></span>\n </div>\n</div>\n","styles":["#tooltip-container{position:absolute;z-index:1}#tooltip{position:relative;display:block;padding:8px 12px;border-radius:8px;color:#fff;background:#181f33;font-family:Lato,sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px}#tooltip-text{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#arrow{position:absolute;height:12px;width:12px;background:#181f33;z-index:1}.arrow-top{bottom:-6px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%) rotate(-45deg);-webkit-transform:translateX(-50%) rotate(-45deg)}.arrow-bottom{top:-6px}.arrow-left{right:-6px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%) rotate(-45deg);-webkit-transform:translateY(-50%) rotate(-45deg)}.arrow-right{left:-6px}"]}]}],"members":{"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ToolTipModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ToolTipDirective"},{"__symbolic":"reference","name":"ToolTipComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12}],"exports":[{"__symbolic":"reference","name":"ToolTipDirective"},{"__symbolic":"reference","name":"ToolTipComponent"}],"entryComponents":[{"__symbolic":"reference","name":"ToolTipComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ToolTipModule"},"providers":[]}}}},"ITooltipPositions":{"__symbolic":"interface"}},"origins":{"ToolTipDirective":"./tooltip.directive","ToolTipComponent":"./tooltip-container/tooltip.component","ToolTipModule":"./tooltip.module","ITooltipPositions":"./models/tooltip.model"},"importAs":"mis-crystal-design-system/tooltip"}
1	+ {"__symbolic":"module","version":4,"metadata":{"ToolTipDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"[misToolTip]"}]}],"members":{"showOnHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"showToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":30,"character":3},"arguments":["mouseenter"]}]}],"onMouseLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":33,"character":3},"arguments":["mouseleave"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":31},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":37,"character":60},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":37,"character":95}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"displayToolTip":[{"__symbolic":"method"}],"positionTooltip":[{"__symbolic":"method"}],"hideToolTip":[{"__symbolic":"method"}]}},"ToolTipComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mis-tooltip","template":"<div id=\"tooltip-container\" *ngIf=\"toolTipText.length > 0\" #container>\n <div id=\"tooltip\">\n <div id=\"tooltip-text\">{{ toolTipText }}</div>\n <span\n id=\"arrow\"\n [ngClass]=\"{\n 'arrow-left': toolTipPosition === 'left',\n 'arrow-right': toolTipPosition === 'right',\n 'arrow-top': toolTipPosition === 'top',\n 'arrow-bottom': toolTipPosition === 'bottom'\n }\"\n ></span>\n </div>\n</div>\n","styles":["#tooltip-container{position:absolute;z-index:1}#tooltip{position:relative;display:block;padding:8px 12px;border-radius:8px;color:#fff;background:#181f33;font-family:Lato,sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px}#tooltip-text{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#arrow{position:absolute;height:12px;width:12px;background:#181f33;z-index:1}.arrow-top{bottom:-6px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%) rotate(-45deg);-webkit-transform:translateX(-50%) rotate(-45deg)}.arrow-bottom{top:-6px}.arrow-left{right:-6px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%) rotate(-45deg);-webkit-transform:translateY(-50%) rotate(-45deg)}.arrow-right{left:-6px}"]}]}],"members":{"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ToolTipModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ToolTipDirective"},{"__symbolic":"reference","name":"ToolTipComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":8,"character":26}],"exports":[{"__symbolic":"reference","name":"ToolTipDirective"},{"__symbolic":"reference","name":"ToolTipComponent"}],"entryComponents":[{"__symbolic":"reference","name":"ToolTipComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ToolTipModule"},"providers":[]}}}},"ITooltipPositions":{"__symbolic":"interface"}},"origins":{"ToolTipDirective":"./tooltip.directive","ToolTipComponent":"./tooltip-container/tooltip.component","ToolTipModule":"./tooltip.module","ITooltipPositions":"./models/tooltip.model"},"importAs":"mis-crystal-design-system/tooltip"}