mis-crystal-design-system 4.0.24 → 4.0.26-test
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.
- package/bundles/mis-crystal-design-system-dynamic-form.umd.js +1 -1
- package/bundles/mis-crystal-design-system-dynamic-form.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-dynamic-form.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-dynamic-form.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-input-stepper.umd.js +83 -0
- package/bundles/mis-crystal-design-system-input-stepper.umd.js.map +1 -0
- package/bundles/mis-crystal-design-system-input-stepper.umd.min.js +2 -0
- package/bundles/mis-crystal-design-system-input-stepper.umd.min.js.map +1 -0
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js +2 -1
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.min.js +2 -2
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-slider.umd.js +73 -0
- package/bundles/mis-crystal-design-system-slider.umd.js.map +1 -0
- package/bundles/mis-crystal-design-system-slider.umd.min.js +2 -0
- package/bundles/mis-crystal-design-system-slider.umd.min.js.map +1 -0
- package/bundles/mis-crystal-design-system-snackbar.umd.js +106 -0
- package/bundles/mis-crystal-design-system-snackbar.umd.js.map +1 -0
- package/bundles/mis-crystal-design-system-snackbar.umd.min.js +2 -0
- package/bundles/mis-crystal-design-system-snackbar.umd.min.js.map +1 -0
- package/dynamic-form/mis-crystal-design-system-dynamic-form.metadata.json +1 -1
- package/esm2015/dynamic-form/dynamic-form.component.js +2 -2
- package/esm2015/input-stepper/index.js +2 -0
- package/esm2015/input-stepper/input-stepper/input-stepper.component.js +47 -0
- package/esm2015/input-stepper/input-stepper.module.js +19 -0
- package/esm2015/input-stepper/mis-crystal-design-system-input-stepper.js +5 -0
- package/esm2015/input-stepper/public_api.js +3 -0
- package/esm2015/multi-select-dropdown/multi-select-dropdown.component.js +3 -2
- package/esm2015/slider/index.js +2 -0
- package/esm2015/slider/mis-crystal-design-system-slider.js +5 -0
- package/esm2015/slider/public_api.js +3 -0
- package/esm2015/slider/slider.component.js +38 -0
- package/esm2015/slider/slider.module.js +20 -0
- package/esm2015/snackbar/index.js +2 -0
- package/esm2015/snackbar/mis-crystal-design-system-snackbar.js +5 -0
- package/esm2015/snackbar/public_api.js +4 -0
- package/esm2015/snackbar/snackbar/snackbar.component.js +26 -0
- package/esm2015/snackbar/snackbar.module.js +20 -0
- package/esm2015/snackbar/snackbar.service.js +48 -0
- package/fesm2015/mis-crystal-design-system-dynamic-form.js +1 -1
- package/fesm2015/mis-crystal-design-system-dynamic-form.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-input-stepper.js +71 -0
- package/fesm2015/mis-crystal-design-system-input-stepper.js.map +1 -0
- package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js +2 -1
- package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-slider.js +62 -0
- package/fesm2015/mis-crystal-design-system-slider.js.map +1 -0
- package/fesm2015/mis-crystal-design-system-snackbar.js +93 -0
- package/fesm2015/mis-crystal-design-system-snackbar.js.map +1 -0
- package/input-stepper/index.d.ts +1 -0
- package/input-stepper/input-stepper/input-stepper.component.d.ts +13 -0
- package/input-stepper/input-stepper.module.d.ts +2 -0
- package/input-stepper/mis-crystal-design-system-input-stepper.d.ts +4 -0
- package/input-stepper/mis-crystal-design-system-input-stepper.metadata.json +1 -0
- package/input-stepper/package.json +11 -0
- package/input-stepper/public_api.d.ts +2 -0
- package/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.metadata.json +1 -1
- package/multi-select-dropdown/multi-select-dropdown.component.d.ts +1 -0
- package/package.json +1 -1
- package/slider/index.d.ts +1 -0
- package/slider/mis-crystal-design-system-slider.d.ts +4 -0
- package/slider/mis-crystal-design-system-slider.metadata.json +1 -0
- package/slider/package.json +11 -0
- package/slider/public_api.d.ts +2 -0
- package/slider/slider.component.d.ts +13 -0
- package/slider/slider.module.d.ts +2 -0
- package/snackbar/index.d.ts +1 -0
- package/snackbar/mis-crystal-design-system-snackbar.d.ts +4 -0
- package/snackbar/mis-crystal-design-system-snackbar.metadata.json +1 -0
- package/snackbar/package.json +11 -0
- package/snackbar/public_api.d.ts +3 -0
- package/snackbar/snackbar/snackbar.component.d.ts +8 -0
- package/snackbar/snackbar.module.d.ts +2 -0
- package/snackbar/snackbar.service.d.ts +19 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-multi-select-dropdown.js","sources":["../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.component.ts","../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.module.ts","../../../projects/mis-components/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.ts"],"sourcesContent":["import { Component, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { OverlayRef, Overlay, ConnectionPositionPair, OverlayConfig } from \"@angular/cdk/overlay\";\n@Component({\n selector: \"mis-multi-select-dropdown\",\n templateUrl: \"./multi-select-dropdown.component.html\",\n styleUrls: [\"./multi-select-dropdown.component.scss\"]\n})\nexport class MultiSelectDropdownComponent implements OnInit {\n searchInput: string = \"\";\n isOpen = false;\n localSelectedItems: MultiSelectDropdownItem[] = [];\n localData: MultiSelectDropdownItem[] = [];\n searchData: MultiSelectDropdownItem[] = [];\n isSearchInputFocused: boolean = false;\n SELECT_ALL_ENUM = \"SELECT_ALL_ENABLED\";\n @Input() set data(values: MultiSelectDropdownItem[]) {\n this.localData = values.map(item => {\n return { ...item, checked: false };\n });\n }\n @Input() label: string = \"Select\";\n @Input() height: string = \"\";\n @Input() width: string = \"\";\n @Input() dropdownListHeight: string = \"\";\n @Input() dropdownListWidth: string = \"\";\n @Input() dropdownListPosition: \"Left\" | \"Right\" = \"Left\";\n @Input() enableSelectAll: boolean = false;\n @Input() searchEnabled: boolean = true;\n @Input() showSelectedCount: boolean = false;\n @Input() noDataMessage: string = \"No Data\";\n @Input() options: OPTIONS = {\n sortLabels: true\n };\n @Input() set selectedItems(values: MultiSelectDropdownItem[]) {\n this.handlerSetLocalSelectedItems(values);\n }\n @Input() hideApplyButton: boolean = false;\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, private ngZone: NgZone) {}\n ngOnInit() {}\n\n handlerSetLocalSelectedItems(values) {\n this.localSelectedItems = values;\n this.localData = this.localData.map(item => {\n if (item.value === this.SELECT_ALL_ENUM && values.length === this.localData.length-1) {\n return { ...item, checked: true };\n }\n if (values.some(base => base.value === item.value)) {\n return { ...item, checked: true };\n } else {\n if(item.value !== this.SELECT_ALL_ENUM || !this.hideApplyButton){\n return { ...item, checked: false };\n }else{\n return item;\n }\n }\n });\n this.localData = this.formatValues(this.localData);\n }\n\n searchInputFocused(isFocused: boolean) {\n this.isSearchInputFocused = isFocused;\n }\n\n searchInputCanceled(event) {\n event.stopPropagation();\n this.searchInput = \"\";\n this.isSearchInputFocused = false;\n }\n\n toggleDropdown() {\n this.ngZone.run(() => {\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 }\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\n filterByValue(array: MultiSelectDropdownItem[], string: string) {\n return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));\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\n formatValues(array: MultiSelectDropdownItem[]) {\n let sortedArray = array;\n if (this.options.sortLabels) {\n const checkedValues = array\n .filter(a => a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));\n const unCheckedValues = array\n .filter(a => !a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));\n sortedArray = [...checkedValues, ...unCheckedValues].filter(t => t.value !== this.SELECT_ALL_ENUM);\n }\n if (!sortedArray.some(option => option.value === this.SELECT_ALL_ENUM) && this.enableSelectAll && sortedArray.length > 0) {\n sortedArray.unshift({\n label: \"Select all\",\n value: this.SELECT_ALL_ENUM,\n checked: sortedArray.every(y => y.checked)\n });\n }\n return sortedArray;\n }\n\n toggleSelectedItems(event, item: MultiSelectDropdownItem) {\n event.stopPropagation();\n if (this.enableSelectAll && item.value === this.SELECT_ALL_ENUM) {\n this.localData = this.localData.map(t => ({\n ...t,\n checked: !item.checked\n }));\n if (this.hideApplyButton) {\n this.applyFilters();\n }\n return;\n }\n if (item.checked) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value || a.value === this.SELECT_ALL_ENUM) {\n return {\n ...a,\n checked: false\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 };\n }\n return a;\n })\n ];\n if (this.enableSelectAll && this.localData.filter(r => r.value !== this.SELECT_ALL_ENUM).every(t => t.checked)) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === this.SELECT_ALL_ENUM) {\n return {\n ...a,\n checked: true\n };\n }\n return a;\n })\n ];\n }\n }\n if (this.searchEnabled) {\n this.searchInputOnChange(this.searchInput);\n }\n if (this.hideApplyButton) {\n this.applyFilters();\n }\n }\n\n applyFilters() {\n this.onChange.emit(\n this.localData\n .filter(a => {\n return a.checked && a.value !== this.SELECT_ALL_ENUM;\n })\n .map(item => {\n const { checked, ...data } = item;\n return data;\n })\n );\n if (!this.hideApplyButton) {\n this.onCancel();\n }\n }\n\n onReset() {\n this.isSearchInputFocused = false;\n this.onChange.emit([]);\n this.isOpen = false;\n this.searchInput = \"\";\n }\n\n onCancel() {\n this.isSearchInputFocused = false;\n this.localData = this.localData.map(a => {\n if (this.localSelectedItems.some(b => b.value === a.value && String(b.checked) !== String(a.checked))) {\n return a;\n } else {\n if(a.value !== this.SELECT_ALL_ENUM && this.hideApplyButton){\n return {\n ...a,\n checked: false\n };\n }\n return a;\n }\n });\n this.isOpen = false;\n this.searchInput = \"\";\n this.overlayRef?.detach();\n this.searchInput = \"\";\n }\n}\nexport interface MultiSelectDropdownItem {\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n}\nexport interface OPTIONS {\n sortLabels: boolean;\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { MultiSelectDropdownComponent } from \"./multi-select-dropdown.component\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ButtonModule } from \"mis-crystal-design-system/button\";\n\n@NgModule({\n declarations: [MultiSelectDropdownComponent],\n imports: [CommonModule, FormsModule, OverlayModule, CheckboxModule, ButtonModule],\n exports: [MultiSelectDropdownComponent]\n})\nexport class MultiSelectDropdownModule {\n static forRoot(): ModuleWithProviders<MultiSelectDropdownModule> {\n return { ngModule: MultiSelectDropdownModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;MAQa,4BAA4B;IAoCvC,YAAoB,IAAgB,EAAU,OAAgB,EAAU,gBAAkC,EAAU,MAAc;QAA9G,SAAI,GAAJ,IAAI,CAAY;QAAU,YAAO,GAAP,OAAO,CAAS;QAAU,qBAAgB,GAAhB,gBAAgB,CAAkB;QAAU,WAAM,GAAN,MAAM,CAAQ;QAnClI,gBAAW,GAAW,EAAE,CAAC;QACzB,WAAM,GAAG,KAAK,CAAC;QACf,uBAAkB,GAA8B,EAAE,CAAC;QACnD,cAAS,GAA8B,EAAE,CAAC;QAC1C,eAAU,GAA8B,EAAE,CAAC;QAC3C,yBAAoB,GAAY,KAAK,CAAC;QACtC,oBAAe,GAAG,oBAAoB,CAAC;QAM9B,UAAK,GAAW,QAAQ,CAAC;QACzB,WAAM,GAAW,EAAE,CAAC;QACpB,UAAK,GAAW,EAAE,CAAC;QACnB,uBAAkB,GAAW,EAAE,CAAC;QAChC,sBAAiB,GAAW,EAAE,CAAC;QAC/B,yBAAoB,GAAqB,MAAM,CAAC;QAChD,oBAAe,GAAY,KAAK,CAAC;QACjC,kBAAa,GAAY,IAAI,CAAC;QAC9B,sBAAiB,GAAY,KAAK,CAAC;QACnC,kBAAa,GAAW,SAAS,CAAC;QAClC,YAAO,GAAY;YAC1B,UAAU,EAAE,IAAI;SACjB,CAAC;QAIO,oBAAe,GAAY,KAAK,CAAC;QAChC,aAAQ,GAAsB,IAAI,YAAY,EAAE,CAAC;KAM2E;IA5BtI,IAAa,IAAI,CAAC,MAAiC;QACjD,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI;YAC9B,uCAAY,IAAI,KAAE,OAAO,EAAE,KAAK,IAAG;SACpC,CAAC,CAAC;KACJ;IAcD,IAAa,aAAa,CAAC,MAAiC;QAC1D,IAAI,CAAC,4BAA4B,CAAC,MAAM,CAAC,CAAC;KAC3C;IASD,QAAQ,MAAK;IAEb,4BAA4B,CAAC,MAAM;QACjC,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC;QACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;YACtC,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,IAAK,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,GAAC,CAAC,EAAE;gBACrF,uCAAY,IAAI,KAAE,OAAO,EAAE,IAAI,IAAG;aACnC;YACD,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE;gBAClD,uCAAY,IAAI,KAAE,OAAO,EAAE,IAAI,IAAG;aACnC;iBAAM;gBACL,IAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,eAAe,EAAC;oBAC9D,uCAAY,IAAI,KAAE,OAAO,EAAE,KAAK,IAAG;iBACpC;qBAAI;oBACD,OAAO,IAAI,CAAC;iBACf;aACF;SACF,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACpD;IAED,kBAAkB,CAAC,SAAkB;QACnC,IAAI,CAAC,oBAAoB,GAAG,SAAS,CAAC;KACvC;IAED,mBAAmB,CAAC,KAAK;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;KACnC;IAED,cAAc;QACZ,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;YACd,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAC3B,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBAC3D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aACpD;YACD,IAAI,IAAI,CAAC,MAAM;gBAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;;gBACrF,IAAI,CAAC,QAAQ,EAAE,CAAC;SACtB,CAAC,CAAA;KACH;IAEO,YAAY,CAAC,QAA8B,EAAE,MAAmB;QACtE,MAAM,eAAe,GAAG;YACtB,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;YACjH,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;SAC9G,CAAC;QACF,MAAM,YAAY,GAAG;YACnB,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YAClH,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;SAC/G,CAAC;QACF,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO;aAClC,QAAQ,EAAE;aACV,mBAAmB,CAAC,MAAM,CAAC;aAC3B,aAAa,CAAC;YACb,IAAI,IAAI,CAAC,oBAAoB,KAAK,OAAO,GAAG,eAAe,CAAC,OAAO,EAAE,GAAG,eAAe,CAAC;YACxF,IAAI,IAAI,CAAC,oBAAoB,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,EAAE,GAAG,YAAY,CAAC;SACnF,CAAC;aACD,QAAQ,CAAC,IAAI,CAAC,CAAC;QAClB,MAAM,OAAO,GAAG,IAAI,aAAa,CAAC;YAChC,WAAW,EAAE,IAAI;YACjB,aAAa,EAAE,kCAAkC;YACjD,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE;YAC1D,gBAAgB;YAChB,KAAK,EAAE,MAAM,CAAC,WAAW;SAC1B,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC/C,IAAI,IAAI,CAAC,iBAAiB;YAAE,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;QAC1F,IAAI,IAAI,CAAC,kBAAkB;YAAE,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;QAC7F,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,cAAc,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,GAAG;YAC3C,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB,CAAC,CAAC;KACJ;IAED,aAAa,CAAC,KAAgC,EAAE,MAAc;QAC5D,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;KAChF;IAED,mBAAmB,CAAC,QAAQ;QAC1B,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;QAC5B,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;SAChE;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;SACvB;KACF;IAED,YAAY,CAAC,KAAgC;QAC3C,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;YAC3B,MAAM,aAAa,GAAG,KAAK;iBACxB,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC;iBACtB,IAAI,CAAC,CAAC,CAA0B,EAAE,CAA0B,MAAM,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAC1H,MAAM,eAAe,GAAG,KAAK;iBAC1B,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;iBACvB,IAAI,CAAC,CAAC,CAA0B,EAAE,CAA0B,MAAM,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAC1H,WAAW,GAAG,CAAC,GAAG,aAAa,EAAE,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC;SACpG;QACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,eAAe,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YACxH,WAAW,CAAC,OAAO,CAAC;gBAClB,KAAK,EAAE,YAAY;gBACnB,KAAK,EAAE,IAAI,CAAC,eAAe;gBAC3B,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC;aAC3C,CAAC,CAAC;SACJ;QACD,OAAO,WAAW,CAAC;KACpB;IAED,mBAAmB,CAAC,KAAK,EAAE,IAA6B;QACtD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,EAAE;YAC/D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,qCAChC,CAAC,KACJ,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,IACtB,CAAC,CAAC;YACJ,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;YACD,OAAO;SACR;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,SAAS,GAAG;gBACf,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;oBACrB,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,EAAE;wBAC9D,uCACK,CAAC,KACJ,OAAO,EAAE,KAAK,IACd;qBACH;oBACD,OAAO,CAAC,CAAC;iBACV,CAAC;aACH,CAAC;SACH;aAAM;YACL,IAAI,CAAC,SAAS,GAAG;gBACf,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;oBACrB,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;wBAC1B,uCACK,CAAC,KACJ,OAAO,EAAE,IAAI,IACb;qBACH;oBACD,OAAO,CAAC,CAAC;iBACV,CAAC;aACH,CAAC;YACF,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE;gBAC9G,IAAI,CAAC,SAAS,GAAG;oBACf,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;wBACrB,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,EAAE;4BACpC,uCACK,CAAC,KACJ,OAAO,EAAE,IAAI,IACb;yBACH;wBACD,OAAO,CAAC,CAAC;qBACV,CAAC;iBACH,CAAC;aACH;SACF;QACD,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5C;QACD,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAED,YAAY;QACV,IAAI,CAAC,QAAQ,CAAC,IAAI,CAChB,IAAI,CAAC,SAAS;aACX,MAAM,CAAC,CAAC;YACP,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC;SACtD,CAAC;aACD,GAAG,CAAC,IAAI;YACP,MAAM,EAAE,OAAO,KAAc,IAAI,EAAb,IAAI,UAAK,IAAI,EAA3B,WAAoB,CAAO,CAAC;YAClC,OAAO,IAAI,CAAC;SACb,CAAC,CACL,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAED,OAAO;QACL,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;QAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;KACvB;IAED,QAAQ;;QACN,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;QAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;YACnC,IAAI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE;gBACrG,OAAO,CAAC,CAAC;aACV;iBAAM;gBACL,IAAG,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAC;oBAC1D,uCACK,CAAC,KACJ,OAAO,EAAE,KAAK,IACd;iBACH;gBACD,OAAO,CAAC,CAAC;aACV;SACF,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,GAAG;QAC1B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;KACvB;;;YA7PF,SAAS,SAAC;gBACT,QAAQ,EAAE,2BAA2B;gBACrC,6uKAAqD;;aAEtD;;;YAPmB,UAAU;YAET,OAAO;YAFyE,gBAAgB;YAAhE,MAAM;;;mBAgBxD,KAAK;oBAKL,KAAK;qBACL,KAAK;oBACL,KAAK;iCACL,KAAK;gCACL,KAAK;mCACL,KAAK;8BACL,KAAK;4BACL,KAAK;gCACL,KAAK;4BACL,KAAK;sBACL,KAAK;4BAGL,KAAK;8BAGL,KAAK;uBACL,MAAM;4BAEN,SAAS,SAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;6BACrC,SAAS,SAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;;MC5BnC,yBAAyB;IACpC,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,yBAAyB,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAC/D;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,4BAA4B,CAAC;gBAC5C,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,CAAC;gBACjF,OAAO,EAAE,CAAC,4BAA4B,CAAC;aACxC;;;ACZD;;;;;;"}
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-multi-select-dropdown.js","sources":["../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.component.ts","../../../projects/mis-components/multi-select-dropdown/multi-select-dropdown.module.ts","../../../projects/mis-components/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.ts"],"sourcesContent":["import { Component, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { OverlayRef, Overlay, ConnectionPositionPair, OverlayConfig } from \"@angular/cdk/overlay\";\n@Component({\n selector: \"mis-multi-select-dropdown\",\n templateUrl: \"./multi-select-dropdown.component.html\",\n styleUrls: [\"./multi-select-dropdown.component.scss\"]\n})\nexport class MultiSelectDropdownComponent implements OnInit {\n searchInput: string = \"\";\n isOpen = false;\n localSelectedItems: MultiSelectDropdownItem[] = [];\n localData: MultiSelectDropdownItem[] = [];\n searchData: MultiSelectDropdownItem[] = [];\n isSearchInputFocused: boolean = false;\n SELECT_ALL_ENUM = \"SELECT_ALL_ENABLED\";\n @Input() set data(values: MultiSelectDropdownItem[]) {\n this.localData = values.map(item => {\n return { ...item, checked: false };\n });\n }\n @Input() label: string = \"Select\";\n @Input() height: string = \"\";\n @Input() width: string = \"\";\n @Input() dropdownListHeight: string = \"\";\n @Input() dropdownListWidth: string = \"\";\n @Input() dropdownListPosition: \"Left\" | \"Right\" = \"Left\";\n @Input() enableSelectAll: boolean = false;\n @Input() searchEnabled: boolean = true;\n @Input() showSelectedCount: boolean = false;\n @Input() noDataMessage: string = \"No Data\";\n @Input() options: OPTIONS = {\n sortLabels: true\n };\n @Input() set selectedItems(values: MultiSelectDropdownItem[]) {\n this.handlerSetLocalSelectedItems(values);\n }\n @Input() hideApplyButton: boolean = false;\n @Input() customLabelTemplate : TemplateRef<any>;\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, private ngZone: NgZone) {}\n ngOnInit() {}\n\n handlerSetLocalSelectedItems(values) {\n this.localSelectedItems = values;\n this.localData = this.localData.map(item => {\n if (item.value === this.SELECT_ALL_ENUM && values.length === this.localData.length-1) {\n return { ...item, checked: true };\n }\n if (values.some(base => base.value === item.value)) {\n return { ...item, checked: true };\n } else {\n if(item.value !== this.SELECT_ALL_ENUM || !this.hideApplyButton){\n return { ...item, checked: false };\n }else{\n return item;\n }\n }\n });\n this.localData = this.formatValues(this.localData);\n }\n\n searchInputFocused(isFocused: boolean) {\n this.isSearchInputFocused = isFocused;\n }\n\n searchInputCanceled(event) {\n event.stopPropagation();\n this.searchInput = \"\";\n this.isSearchInputFocused = false;\n }\n\n toggleDropdown() {\n this.ngZone.run(() => {\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 }\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\n filterByValue(array: MultiSelectDropdownItem[], string: string) {\n return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));\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\n formatValues(array: MultiSelectDropdownItem[]) {\n let sortedArray = array;\n if (this.options.sortLabels) {\n const checkedValues = array\n .filter(a => a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));\n const unCheckedValues = array\n .filter(a => !a.checked)\n .sort((a: MultiSelectDropdownItem, b: MultiSelectDropdownItem) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));\n sortedArray = [...checkedValues, ...unCheckedValues].filter(t => t.value !== this.SELECT_ALL_ENUM);\n }\n if (!sortedArray.some(option => option.value === this.SELECT_ALL_ENUM) && this.enableSelectAll && sortedArray.length > 0) {\n sortedArray.unshift({\n label: \"Select all\",\n value: this.SELECT_ALL_ENUM,\n checked: sortedArray.every(y => y.checked)\n });\n }\n return sortedArray;\n }\n\n toggleSelectedItems(event, item: MultiSelectDropdownItem) {\n event.stopPropagation();\n if (this.enableSelectAll && item.value === this.SELECT_ALL_ENUM) {\n this.localData = this.localData.map(t => ({\n ...t,\n checked: !item.checked\n }));\n if (this.hideApplyButton) {\n this.applyFilters();\n }\n return;\n }\n if (item.checked) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === item.value || a.value === this.SELECT_ALL_ENUM) {\n return {\n ...a,\n checked: false\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 };\n }\n return a;\n })\n ];\n if (this.enableSelectAll && this.localData.filter(r => r.value !== this.SELECT_ALL_ENUM).every(t => t.checked)) {\n this.localData = [\n ...this.localData.map(a => {\n if (a.value === this.SELECT_ALL_ENUM) {\n return {\n ...a,\n checked: true\n };\n }\n return a;\n })\n ];\n }\n }\n if (this.searchEnabled) {\n this.searchInputOnChange(this.searchInput);\n }\n if (this.hideApplyButton) {\n this.applyFilters();\n }\n }\n\n applyFilters() {\n this.onChange.emit(\n this.localData\n .filter(a => {\n return a.checked && a.value !== this.SELECT_ALL_ENUM;\n })\n .map(item => {\n const { checked, ...data } = item;\n return data;\n })\n );\n if (!this.hideApplyButton) {\n this.onCancel();\n }\n }\n\n onReset() {\n this.isSearchInputFocused = false;\n this.onChange.emit([]);\n this.isOpen = false;\n this.searchInput = \"\";\n }\n\n onCancel() {\n this.isSearchInputFocused = false;\n this.localData = this.localData.map(a => {\n if (this.localSelectedItems.some(b => b.value === a.value && String(b.checked) !== String(a.checked))) {\n return a;\n } else {\n if(a.value !== this.SELECT_ALL_ENUM && this.hideApplyButton){\n return {\n ...a,\n checked: false\n };\n }\n return a;\n }\n });\n this.isOpen = false;\n this.searchInput = \"\";\n this.overlayRef?.detach();\n this.searchInput = \"\";\n }\n}\nexport interface MultiSelectDropdownItem {\n label: string;\n value: string;\n checked?: boolean;\n icon?: string;\n}\nexport interface OPTIONS {\n sortLabels: boolean;\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { MultiSelectDropdownComponent } from \"./multi-select-dropdown.component\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ButtonModule } from \"mis-crystal-design-system/button\";\n\n@NgModule({\n declarations: [MultiSelectDropdownComponent],\n imports: [CommonModule, FormsModule, OverlayModule, CheckboxModule, ButtonModule],\n exports: [MultiSelectDropdownComponent]\n})\nexport class MultiSelectDropdownModule {\n static forRoot(): ModuleWithProviders<MultiSelectDropdownModule> {\n return { ngModule: MultiSelectDropdownModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
|
|
2
|
+
import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
3
|
+
import { CommonModule } from '@angular/common';
|
|
4
|
+
|
|
5
|
+
class SliderComponent {
|
|
6
|
+
constructor(formBuilder) {
|
|
7
|
+
this.formBuilder = formBuilder;
|
|
8
|
+
this.min = 0;
|
|
9
|
+
this.max = 100;
|
|
10
|
+
this.value = 0;
|
|
11
|
+
this.valueChange = new EventEmitter();
|
|
12
|
+
}
|
|
13
|
+
ngOnInit() {
|
|
14
|
+
this.sliderForm = this.formBuilder.group({
|
|
15
|
+
sliderFormControl: [this.value]
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
onInputChange(value) {
|
|
19
|
+
this.value = value;
|
|
20
|
+
this.sliderForm.patchValue({ sliderFormControl: value });
|
|
21
|
+
this.valueChange.emit(this.value);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
SliderComponent.decorators = [
|
|
25
|
+
{ type: Component, args: [{
|
|
26
|
+
selector: 'mis-slider',
|
|
27
|
+
template: "<form [formGroup]=\"sliderForm\">\n <div class=\"slider\">\n <input type=\"range\" [min]=\"min\" [max]=\"max\" formControlName=\"sliderFormControl\" (input)=\"onInputChange($event.target.value)\" />\n </div>\n </form>\n \n\n ",
|
|
28
|
+
styles: [".slider{width:100%;display:flex;align-items:center;input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;background:#cbddfb;outline:none;border-radius:5px;&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:#0937b2;cursor:pointer;border-radius:50%}&::-moz-range-thumb{width:15px;height:15px;background:#0937b2;cursor:pointer;border-radius:50%}}span{margin-left:10px}}"]
|
|
29
|
+
},] }
|
|
30
|
+
];
|
|
31
|
+
SliderComponent.ctorParameters = () => [
|
|
32
|
+
{ type: FormBuilder }
|
|
33
|
+
];
|
|
34
|
+
SliderComponent.propDecorators = {
|
|
35
|
+
min: [{ type: Input }],
|
|
36
|
+
max: [{ type: Input }],
|
|
37
|
+
value: [{ type: Input }],
|
|
38
|
+
valueChange: [{ type: Output }]
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
class SliderModule {
|
|
42
|
+
}
|
|
43
|
+
SliderModule.decorators = [
|
|
44
|
+
{ type: NgModule, args: [{
|
|
45
|
+
declarations: [
|
|
46
|
+
SliderComponent
|
|
47
|
+
],
|
|
48
|
+
imports: [
|
|
49
|
+
CommonModule,
|
|
50
|
+
FormsModule,
|
|
51
|
+
ReactiveFormsModule
|
|
52
|
+
],
|
|
53
|
+
exports: [SliderComponent]
|
|
54
|
+
},] }
|
|
55
|
+
];
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Generated bundle index. Do not edit.
|
|
59
|
+
*/
|
|
60
|
+
|
|
61
|
+
export { SliderComponent, SliderModule };
|
|
62
|
+
//# sourceMappingURL=mis-crystal-design-system-slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-slider.js","sources":["../../../projects/mis-components/slider/slider.component.ts","../../../projects/mis-components/slider/slider.module.ts","../../../projects/mis-components/slider/mis-crystal-design-system-slider.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\n\n@Component({\n selector: 'mis-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.css']\n})\nexport class SliderComponent implements OnInit {\n\n @Input() min?:number = 0;\n @Input() max?:number = 100;\n @Input() value: number = 0;\n @Output() valueChange = new EventEmitter<number>()\n\n sliderForm: FormGroup;\n\n constructor(private formBuilder: FormBuilder) { }\n\n ngOnInit(): void {\n this.sliderForm = this.formBuilder.group({\n sliderFormControl: [this.value]\n });\n }\n\n onInputChange(value: number) {\n this.value = value;\n this.sliderForm.patchValue({sliderFormControl: value})\n this.valueChange.emit(this.value);\n }\n\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SliderComponent } from './slider.component';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n\n\n@NgModule({\n declarations: [\n SliderComponent\n ],\n imports: [\n CommonModule,\n FormsModule,\n ReactiveFormsModule\n ],\n exports: [SliderComponent]\n})\nexport class SliderModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,eAAe;IAS1B,YAAoB,WAAwB;QAAxB,gBAAW,GAAX,WAAW,CAAa;QAPnC,QAAG,GAAW,CAAC,CAAC;QAChB,QAAG,GAAW,GAAG,CAAC;QAClB,UAAK,GAAW,CAAC,CAAC;QACjB,gBAAW,GAAG,IAAI,YAAY,EAAU,CAAA;KAID;IAEjD,QAAQ;QACN,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;YACvC,iBAAiB,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;SAChC,CAAC,CAAC;KACJ;IAED,aAAa,CAAC,KAAa;QACzB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAC,iBAAiB,EAAE,KAAK,EAAC,CAAC,CAAA;QACtD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC;;;YA1BF,SAAS,SAAC;gBACT,QAAQ,EAAE,YAAY;gBACtB,2PAAsC;;aAEvC;;;YANQ,WAAW;;;kBASjB,KAAK;kBACL,KAAK;oBACL,KAAK;0BACL,MAAM;;;MCKI,YAAY;;;YAXxB,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,eAAe;iBAChB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,WAAW;oBACX,mBAAmB;iBACpB;gBACD,OAAO,EAAE,CAAC,eAAe,CAAC;aAC3B;;;ACjBD;;;;;;"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
|
|
2
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
3
|
+
import { EventEmitter, Component, Output, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule } from '@angular/core';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
5
|
+
|
|
6
|
+
// snackbar.component.ts
|
|
7
|
+
class SnackbarComponent {
|
|
8
|
+
constructor(input) {
|
|
9
|
+
this.input = input;
|
|
10
|
+
this.triggerAction = new EventEmitter();
|
|
11
|
+
}
|
|
12
|
+
triggerActionFunction() {
|
|
13
|
+
this.triggerAction.emit(true);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
SnackbarComponent.decorators = [
|
|
17
|
+
{ type: Component, args: [{
|
|
18
|
+
selector: 'mis-snackbar',
|
|
19
|
+
template: "<div class=\"snackbar-container\">\n <div class=\"messages\" *ngIf=\"!input.config.hasComponent\">\n\n <span class=\"message\">\n <img *ngIf=\"input.config.iconUrl\" [src]=\"input.config.iconUrl\" alt=\"\">\n {{ input.config.message }}\n </span>\n <div class=\"snackbar-action\" *ngIf=\"input.config.actionString\">\n <button (click)=\"triggerActionFunction()\">{{ input.config.actionString }}</button>\n </div>\n </div>\n <div class=\"component-container\" *ngIf=\"input.config.hasComponent\">\n <ng-content></ng-content>\n </div>\n</div>\n",
|
|
20
|
+
styles: [".snackbar-container{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background-color:#181f33;color:#fff;border-radius:8px;padding:8px 12px;max-width:400px;width:90%;z-index:1000;box-shadow:0 4px 8px rgba(0,0,0,.2)}.messages{display:flex;align-items:center;justify-content:space-between}.message{flex:1;padding-right:10px;font-size:16px;font-weight:700}.snackbar-action button{background-color:#181f33;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:16px!important;transition:background-color .3s ease}.snackbar-action button:hover{background-color:#0056b3}.component-container{margin-top:10px}@media (max-width:768px){.snackbar-container{left:10px;right:10px;transform:none;width:auto;max-width:none}}"]
|
|
21
|
+
},] }
|
|
22
|
+
];
|
|
23
|
+
SnackbarComponent.ctorParameters = () => [
|
|
24
|
+
{ type: SnackbarService }
|
|
25
|
+
];
|
|
26
|
+
SnackbarComponent.propDecorators = {
|
|
27
|
+
triggerAction: [{ type: Output }]
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
class SnackbarService {
|
|
31
|
+
constructor(overlay) {
|
|
32
|
+
this.overlay = overlay;
|
|
33
|
+
}
|
|
34
|
+
openSnackbar(config) {
|
|
35
|
+
this.config = config;
|
|
36
|
+
const overlayConfig = new OverlayConfig({
|
|
37
|
+
hasBackdrop: false,
|
|
38
|
+
positionStrategy: this.overlay.position().global().centerHorizontally().bottom("48px")
|
|
39
|
+
});
|
|
40
|
+
this.snackbarRef = this.overlay.create(overlayConfig);
|
|
41
|
+
const snackbarPortal = new ComponentPortal(SnackbarComponent);
|
|
42
|
+
const componentRef = this.snackbarRef.attach(snackbarPortal);
|
|
43
|
+
// componentRef.instance.config = config;
|
|
44
|
+
config.duration = config.duration || 3000;
|
|
45
|
+
setTimeout(() => {
|
|
46
|
+
this.closeSnackbar();
|
|
47
|
+
}, config.duration);
|
|
48
|
+
componentRef.instance.triggerAction.subscribe(() => {
|
|
49
|
+
if (config.onActionClick) {
|
|
50
|
+
config.onActionClick();
|
|
51
|
+
}
|
|
52
|
+
this.closeSnackbar();
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
closeSnackbar() {
|
|
56
|
+
if (this.snackbarRef) {
|
|
57
|
+
this.snackbarRef.dispose();
|
|
58
|
+
this.snackbarRef = null;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
SnackbarService.ɵprov = ɵɵdefineInjectable({ factory: function SnackbarService_Factory() { return new SnackbarService(ɵɵinject(Overlay)); }, token: SnackbarService, providedIn: "root" });
|
|
63
|
+
SnackbarService.decorators = [
|
|
64
|
+
{ type: Injectable, args: [{
|
|
65
|
+
providedIn: "root"
|
|
66
|
+
},] }
|
|
67
|
+
];
|
|
68
|
+
SnackbarService.ctorParameters = () => [
|
|
69
|
+
{ type: Overlay }
|
|
70
|
+
];
|
|
71
|
+
|
|
72
|
+
class SnackbarModule {
|
|
73
|
+
}
|
|
74
|
+
SnackbarModule.decorators = [
|
|
75
|
+
{ type: NgModule, args: [{
|
|
76
|
+
declarations: [
|
|
77
|
+
SnackbarComponent
|
|
78
|
+
],
|
|
79
|
+
imports: [
|
|
80
|
+
CommonModule
|
|
81
|
+
],
|
|
82
|
+
exports: [SnackbarComponent],
|
|
83
|
+
entryComponents: [SnackbarComponent],
|
|
84
|
+
providers: [SnackbarService]
|
|
85
|
+
},] }
|
|
86
|
+
];
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Generated bundle index. Do not edit.
|
|
90
|
+
*/
|
|
91
|
+
|
|
92
|
+
export { SnackbarComponent, SnackbarModule, SnackbarService };
|
|
93
|
+
//# sourceMappingURL=mis-crystal-design-system-snackbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-snackbar.js","sources":["../../../projects/mis-components/snackbar/snackbar/snackbar.component.ts","../../../projects/mis-components/snackbar/snackbar.service.ts","../../../projects/mis-components/snackbar/snackbar.module.ts","../../../projects/mis-components/snackbar/mis-crystal-design-system-snackbar.ts"],"sourcesContent":["// snackbar.component.ts\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { SnackbarService } from '../snackbar.service';\n\n@Component({\n selector: 'mis-snackbar',\n templateUrl: \"./snackbar.component.html\",\n styleUrls: [\"./snackbar.component.css\"],\n})\nexport class SnackbarComponent {\n @Output() triggerAction = new EventEmitter<any>();\n constructor(public input: SnackbarService){}\n triggerActionFunction(){\n this.triggerAction.emit(true)\n }\n}\n","export interface ISnackBarConfig {\n message: string;\n actionString: string;\n hasComponent: boolean;\n iconUrl?: string;\n component?: ComponentRef<any>;\n duration?: number;\n onActionClick?: () => void;\n}\nimport { Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { ComponentPortal } from \"@angular/cdk/portal\";\nimport { ComponentRef, Injectable } from \"@angular/core\"; // Assuming you have defined ISnackBarConfig interface\nimport { SnackbarComponent } from \"./snackbar/snackbar.component\";\n\n@Injectable({\n providedIn: \"root\"\n})\nexport class SnackbarService {\n config: ISnackBarConfig;\n private snackbarRef: OverlayRef;\n\n constructor(private overlay: Overlay) {}\n\n openSnackbar(config: ISnackBarConfig): void {\n this.config = config;\n const overlayConfig = new OverlayConfig({\n hasBackdrop: false,\n positionStrategy: this.overlay.position().global().centerHorizontally().bottom(\"48px\")\n });\n\n this.snackbarRef = this.overlay.create(overlayConfig);\n\n const snackbarPortal = new ComponentPortal(SnackbarComponent);\n const componentRef = this.snackbarRef.attach(snackbarPortal);\n\n // componentRef.instance.config = config;\n\n config.duration = config.duration || 3000;\n setTimeout(() => {\n this.closeSnackbar();\n }, config.duration);\n\n componentRef.instance.triggerAction.subscribe(() => {\n if (config.onActionClick) {\n config.onActionClick();\n }\n this.closeSnackbar();\n });\n }\n\n closeSnackbar(): void {\n if (this.snackbarRef) {\n this.snackbarRef.dispose();\n this.snackbarRef = null;\n }\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SnackbarComponent } from './snackbar/snackbar.component';\nimport { SnackbarService } from './snackbar.service';\n\n\n\n@NgModule({\n declarations: [\n SnackbarComponent\n ],\n imports: [\n CommonModule\n ],\n exports: [SnackbarComponent],\n entryComponents: [SnackbarComponent],\n providers: [SnackbarService]\n})\nexport class SnackbarModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;MASa,iBAAiB;IAE5B,YAAmB,KAAsB;QAAtB,UAAK,GAAL,KAAK,CAAiB;QAD/B,kBAAa,GAAG,IAAI,YAAY,EAAO,CAAC;KACN;IAC5C,qBAAqB;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC9B;;;YAVF,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;gBACxB,2kBAAwC;;aAEzC;;;YANQ,eAAe;;;4BAQrB,MAAM;;;MCOI,eAAe;IAI1B,YAAoB,OAAgB;QAAhB,YAAO,GAAP,OAAO,CAAS;KAAI;IAExC,YAAY,CAAC,MAAuB;QAClC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,MAAM,aAAa,GAAG,IAAI,aAAa,CAAC;YACtC,WAAW,EAAE,KAAK;YAClB,gBAAgB,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,kBAAkB,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;SACvF,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QAEtD,MAAM,cAAc,GAAG,IAAI,eAAe,CAAC,iBAAiB,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;;QAI7D,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC;QAC1C,UAAU,CAAC;YACT,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;QAEpB,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC;YAC5C,IAAI,MAAM,CAAC,aAAa,EAAE;gBACxB,MAAM,CAAC,aAAa,EAAE,CAAC;aACxB;YACD,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,CAAC,CAAC;KACJ;IAED,aAAa;QACX,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;KACF;;;;YAzCF,UAAU,SAAC;gBACV,UAAU,EAAE,MAAM;aACnB;;;YAPQ,OAAO;;;MCSH,cAAc;;;YAX1B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,iBAAiB;iBAClB;gBACD,OAAO,EAAE;oBACP,YAAY;iBACb;gBACD,OAAO,EAAE,CAAC,iBAAiB,CAAC;gBAC5B,eAAe,EAAE,CAAC,iBAAiB,CAAC;gBACpC,SAAS,EAAE,CAAC,eAAe,CAAC;aAC7B;;;ACjBD;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./public_api";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { EventEmitter } from '@angular/core';
|
|
2
|
+
export declare class InputStepperComponent {
|
|
3
|
+
value: number;
|
|
4
|
+
width?: string;
|
|
5
|
+
minLimit: number;
|
|
6
|
+
maxLimit: number;
|
|
7
|
+
valueChange: EventEmitter<number>;
|
|
8
|
+
constructor();
|
|
9
|
+
increment(): void;
|
|
10
|
+
decrement(): void;
|
|
11
|
+
onInputChange(newValue: string): void;
|
|
12
|
+
private emitValueChange;
|
|
13
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"InputStepperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"mis-input-stepper","template":"<div class=\"nudger\" [ngStyle]=\"{'max-width': width }\">\n <button (click)=\"decrement()\" [ngClass]=\"{'disabled': value === minLimit}\">-</button>\n <input type=\"text\" [value]=\"value\" (input)=\"onInputChange($event.target.value)\">\n <button (click)=\"increment()\" [ngClass]=\"{'disabled': value === maxLimit}\">+</button>\n</div>\n ","styles":[".nudger{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid #0937b2;border-radius:4px}button{padding:.5em 1em;cursor:pointer;border:none;transition:background-color .3s;color:#0937b2}button,button:hover{background-color:#fff}input{width:40%;text-align:center;padding:.5em 1em;color:#0937b2;border:none}@media screen and (max-width:600px){.nudger{max-width:150px}}.disabled{opacity:.6;cursor:not-allowed}"]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"minLimit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"maxLimit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"increment":[{"__symbolic":"method"}],"decrement":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}],"emitValueChange":[{"__symbolic":"method"}]}},"InputStepperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"InputStepperComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4}],"exports":[{"__symbolic":"reference","name":"InputStepperComponent"}]}]}],"members":{}}},"origins":{"InputStepperComponent":"./input-stepper/input-stepper.component","InputStepperModule":"./input-stepper.module"},"importAs":"mis-crystal-design-system/input-stepper"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"main": "../bundles/mis-crystal-design-system-input-stepper.umd.js",
|
|
3
|
+
"module": "../fesm2015/mis-crystal-design-system-input-stepper.js",
|
|
4
|
+
"es2015": "../fesm2015/mis-crystal-design-system-input-stepper.js",
|
|
5
|
+
"esm2015": "../esm2015/input-stepper/mis-crystal-design-system-input-stepper.js",
|
|
6
|
+
"fesm2015": "../fesm2015/mis-crystal-design-system-input-stepper.js",
|
|
7
|
+
"typings": "mis-crystal-design-system-input-stepper.d.ts",
|
|
8
|
+
"metadata": "mis-crystal-design-system-input-stepper.metadata.json",
|
|
9
|
+
"sideEffects": false,
|
|
10
|
+
"name": "mis-crystal-design-system/input-stepper"
|
|
11
|
+
}
|
|
@@ -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},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":44,"character":126}]}],"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"}
|
|
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 <ng-container *ngIf=\"!customLabelTemplate\">\n <p class=\"text\">{{ label }}</p>\n <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n {{ localSelectedItems?.length }}\n </p>\n </ng-container>\n <ng-container *ngIf=\"customLabelTemplate\">\n <ng-container *ngTemplateOutlet=\"customLabelTemplate\">\n </ng-container>\n </ng-container>\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}}]}],"customLabelTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":41,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":42,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":45,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":45,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":45,"character":92},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":45,"character":126}]}],"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"}
|
|
@@ -26,6 +26,7 @@ export declare class MultiSelectDropdownComponent implements OnInit {
|
|
|
26
26
|
options: OPTIONS;
|
|
27
27
|
set selectedItems(values: MultiSelectDropdownItem[]);
|
|
28
28
|
hideApplyButton: boolean;
|
|
29
|
+
customLabelTemplate: TemplateRef<any>;
|
|
29
30
|
onChange: EventEmitter<any>;
|
|
30
31
|
selectElement: ElementRef;
|
|
31
32
|
popupContainer: TemplateRef<Element>;
|
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./public_api";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"SliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mis-slider","template":"<form [formGroup]=\"sliderForm\">\n <div class=\"slider\">\n <input type=\"range\" [min]=\"min\" [max]=\"max\" formControlName=\"sliderFormControl\" (input)=\"onInputChange($event.target.value)\" />\n </div>\n </form>\n \n\n ","styles":[".slider{width:100%;display:flex;align-items:center;input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;background:#cbddfb;outline:none;border-radius:5px;&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:#0937b2;cursor:pointer;border-radius:50%}&::-moz-range-thumb{width:15px;height:15px;background:#0937b2;cursor:pointer;border-radius:50%}}span{margin-left:10px}}"]}]}],"members":{"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":17,"character":35}]}],"ngOnInit":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}]}},"SliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SliderComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":14,"character":4}],"exports":[{"__symbolic":"reference","name":"SliderComponent"}]}]}],"members":{}}},"origins":{"SliderComponent":"./slider.component","SliderModule":"./slider.module"},"importAs":"mis-crystal-design-system/slider"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"main": "../bundles/mis-crystal-design-system-slider.umd.js",
|
|
3
|
+
"module": "../fesm2015/mis-crystal-design-system-slider.js",
|
|
4
|
+
"es2015": "../fesm2015/mis-crystal-design-system-slider.js",
|
|
5
|
+
"esm2015": "../esm2015/slider/mis-crystal-design-system-slider.js",
|
|
6
|
+
"fesm2015": "../fesm2015/mis-crystal-design-system-slider.js",
|
|
7
|
+
"typings": "mis-crystal-design-system-slider.d.ts",
|
|
8
|
+
"metadata": "mis-crystal-design-system-slider.metadata.json",
|
|
9
|
+
"sideEffects": false,
|
|
10
|
+
"name": "mis-crystal-design-system/slider"
|
|
11
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { EventEmitter, OnInit } from '@angular/core';
|
|
2
|
+
import { FormBuilder, FormGroup } from '@angular/forms';
|
|
3
|
+
export declare class SliderComponent implements OnInit {
|
|
4
|
+
private formBuilder;
|
|
5
|
+
min?: number;
|
|
6
|
+
max?: number;
|
|
7
|
+
value: number;
|
|
8
|
+
valueChange: EventEmitter<number>;
|
|
9
|
+
sliderForm: FormGroup;
|
|
10
|
+
constructor(formBuilder: FormBuilder);
|
|
11
|
+
ngOnInit(): void;
|
|
12
|
+
onInputChange(value: number): void;
|
|
13
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./public_api";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"ISnackBarConfig":{"__symbolic":"interface"},"SnackbarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":14,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":21,"character":31}]}],"openSnackbar":[{"__symbolic":"method"}],"closeSnackbar":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"SnackbarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SnackbarComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4}],"exports":[{"__symbolic":"reference","name":"SnackbarComponent"}],"entryComponents":[{"__symbolic":"reference","name":"SnackbarComponent"}],"providers":[{"__symbolic":"reference","name":"SnackbarService"}]}]}],"members":{}},"SnackbarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-snackbar","template":"<div class=\"snackbar-container\">\n <div class=\"messages\" *ngIf=\"!input.config.hasComponent\">\n\n <span class=\"message\">\n <img *ngIf=\"input.config.iconUrl\" [src]=\"input.config.iconUrl\" alt=\"\">\n {{ input.config.message }}\n </span>\n <div class=\"snackbar-action\" *ngIf=\"input.config.actionString\">\n <button (click)=\"triggerActionFunction()\">{{ input.config.actionString }}</button>\n </div>\n </div>\n <div class=\"component-container\" *ngIf=\"input.config.hasComponent\">\n <ng-content></ng-content>\n </div>\n</div>\n","styles":[".snackbar-container{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background-color:#181f33;color:#fff;border-radius:8px;padding:8px 12px;max-width:400px;width:90%;z-index:1000;box-shadow:0 4px 8px rgba(0,0,0,.2)}.messages{display:flex;align-items:center;justify-content:space-between}.message{flex:1;padding-right:10px;font-size:16px;font-weight:700}.snackbar-action button{background-color:#181f33;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:16px!important;transition:background-color .3s ease}.snackbar-action button:hover{background-color:#0056b3}.component-container{margin-top:10px}@media (max-width:768px){.snackbar-container{left:10px;right:10px;transform:none;width:auto;max-width:none}}"]}]}],"members":{"triggerAction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":10,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"SnackbarService"}]}],"triggerActionFunction":[{"__symbolic":"method"}]}}},"origins":{"ISnackBarConfig":"./snackbar.service","SnackbarService":"./snackbar.service","SnackbarModule":"./snackbar.module","SnackbarComponent":"./snackbar/snackbar.component"},"importAs":"mis-crystal-design-system/snackbar"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"main": "../bundles/mis-crystal-design-system-snackbar.umd.js",
|
|
3
|
+
"module": "../fesm2015/mis-crystal-design-system-snackbar.js",
|
|
4
|
+
"es2015": "../fesm2015/mis-crystal-design-system-snackbar.js",
|
|
5
|
+
"esm2015": "../esm2015/snackbar/mis-crystal-design-system-snackbar.js",
|
|
6
|
+
"fesm2015": "../fesm2015/mis-crystal-design-system-snackbar.js",
|
|
7
|
+
"typings": "mis-crystal-design-system-snackbar.d.ts",
|
|
8
|
+
"metadata": "mis-crystal-design-system-snackbar.metadata.json",
|
|
9
|
+
"sideEffects": false,
|
|
10
|
+
"name": "mis-crystal-design-system/snackbar"
|
|
11
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { EventEmitter } from '@angular/core';
|
|
2
|
+
import { SnackbarService } from '../snackbar.service';
|
|
3
|
+
export declare class SnackbarComponent {
|
|
4
|
+
input: SnackbarService;
|
|
5
|
+
triggerAction: EventEmitter<any>;
|
|
6
|
+
constructor(input: SnackbarService);
|
|
7
|
+
triggerActionFunction(): void;
|
|
8
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface ISnackBarConfig {
|
|
2
|
+
message: string;
|
|
3
|
+
actionString: string;
|
|
4
|
+
hasComponent: boolean;
|
|
5
|
+
iconUrl?: string;
|
|
6
|
+
component?: ComponentRef<any>;
|
|
7
|
+
duration?: number;
|
|
8
|
+
onActionClick?: () => void;
|
|
9
|
+
}
|
|
10
|
+
import { Overlay } from "@angular/cdk/overlay";
|
|
11
|
+
import { ComponentRef } from "@angular/core";
|
|
12
|
+
export declare class SnackbarService {
|
|
13
|
+
private overlay;
|
|
14
|
+
config: ISnackBarConfig;
|
|
15
|
+
private snackbarRef;
|
|
16
|
+
constructor(overlay: Overlay);
|
|
17
|
+
openSnackbar(config: ISnackBarConfig): void;
|
|
18
|
+
closeSnackbar(): void;
|
|
19
|
+
}
|