mis-crystal-design-system 4.0.23 → 4.0.24
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-mobile-filter.umd.js +2 -1
- package/bundles/mis-crystal-design-system-mobile-filter.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-mobile-filter.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-mobile-filter.umd.min.js.map +1 -1
- package/esm2015/mobile-filter/mobile-filter.component.js +3 -2
- package/fesm2015/mis-crystal-design-system-mobile-filter.js +2 -1
- package/fesm2015/mis-crystal-design-system-mobile-filter.js.map +1 -1
- package/mobile-filter/mis-crystal-design-system-mobile-filter.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -46,12 +46,13 @@
|
|
|
46
46
|
MobileFilterComponent.decorators = [
|
|
47
47
|
{ type: core.Component, args: [{
|
|
48
48
|
selector: 'mis-mobile-filter',
|
|
49
|
-
template: "<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img (click)=\"closeFilters.emit();\" [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" (click)=\"currentSelectedItem = filter.key\">\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[
|
|
49
|
+
template: "<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img (click)=\"closeFilters.emit();\" [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" (click)=\"currentSelectedItem = filter.key\">\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[filter.key]?.name }}</span>\n <span class=\"selectedNumber\" *ngIf=\"localFilterOptions[filter.key]['multiSelect'] && localFilterOptions[filter.key]['noOfSelectedItems'] > 0\">{{ localFilterOptions[filter.key]['noOfSelectedItems'] }}</span>\n <div class=\"highlightor\" *ngIf=\"filter.key === currentSelectedItem\"></div>\n </div>\n </ng-container>\n </div>\n <div class=\"filter-options-container\">\n <div class=\"filter-options-title\">\n <span>{{ localFilterOptions[currentSelectedItem]?.name }}</span>\n </div>\n <div class=\"filter-options\">\n <ng-container *ngFor=\"let option of localFilterOptions[currentSelectedItem]?.options; let i = index\">\n <div class=\"filter-option display-flex\" (click)=\"toggleFilter(option.value, option.selected)\" >\n <mis-checkbox *ngIf=\"localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\"></mis-checkbox>\n <input type=\"radio\" *ngIf=\"!localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\">\n <span [ngStyle]=\"{'color': option.selected ? '#181F33' : '#6A737D'}\">{{ option.label }}</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"footer display-flex\">\n <button\n mis-button\n size=\"md\"\n type=\"text\"\n (click)=\"clearFilters.emit()\">\n {{clearBtnName}}\n </button>\n <button\n mis-button\n size=\"md\"\n type=\"primary\"\n (click)=\"applyFilters.emit(localFilterOptions)\"\n >\n {{applyBtnName}}\n </button>\n </div>\n</div>\n",
|
|
50
50
|
styles: [".display-flex{display:flex}.filters-container{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;cursor:default}.filters-container *{font-family:Lato}.filters-container .head{height:56px;border-bottom:1px solid #e0e0e0;justify-content:flex-start;align-items:center;padding:0 16px;gap:12px}.filters-container .head img{cursor:pointer}.filters-container .head span{font-weight:700;font-size:17px;line-height:24px;letter-spacing:.2px}.filters-container .body{height:calc(100vh - 129px)}.filters-container .body .filters{width:120px;border-right:1px solid #e0e0e0;flex-shrink:0}.filters-container .body .filters .filter{height:56px;padding:0 16px;border-bottom:1px solid #e0e0e0;align-items:center;font-size:15px;justify-content:space-between;position:relative}.filters-container .body .filters .filter .filterName{color:#6a737d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filters .filter .selectedNumber{background-color:#f5f5f5;height:24px;width:auto;font-size:14px;min-width:24px;border-radius:50%;text-align:center;line-height:24px;padding:0 8px}.filters-container .body .filters .filter .highlightor{position:absolute;left:0;height:100%;width:4px;background-color:#0937b2}.filters-container .body .filter-options-container{padding:16px 16px 0 12px;width:calc(100% - 56px);overflow-x:hidden}.filters-container .body .filter-options-container *{color:#181f33}.filters-container .body .filter-options-container .filter-options-title{text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.25px}.filters-container .body .filter-options-container .filter-options-title span{color:#6a737d}.filters-container .body .filter-options-container .filter-options{margin-top:16px;overflow-y:scroll;height:calc(100% - 32px)}.filters-container .body .filter-options-container .filter-options .filter-option{height:48px;border-bottom:1px solid #e0e0e0;align-items:center;padding-left:16px;gap:13px;font-size:15px}.filters-container .body .filter-options-container .filter-options .filter-option span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filter-options-container .filter-options .filter-option input[type=radio]{accent-color:#0937b2;width:20px;height:20px}.filters-container .footer{height:73px;border-top:1px solid #e0e0e0;padding:0 16px;align-items:center;justify-content:space-between}.filters-container .footer button{width:160px}"]
|
|
51
51
|
},] }
|
|
52
52
|
];
|
|
53
53
|
MobileFilterComponent.ctorParameters = function () { return []; };
|
|
54
54
|
MobileFilterComponent.propDecorators = {
|
|
55
|
+
currentSelectedItem: [{ type: core.Input }],
|
|
55
56
|
filterOptions: [{ type: core.Input }],
|
|
56
57
|
backIcon: [{ type: core.Input }],
|
|
57
58
|
headerName: [{ type: core.Input }],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-mobile-filter.umd.js","sources":["../../../projects/mis-components/mobile-filter/mobile-filter.component.ts","../../../projects/mis-components/mobile-filter/mobile-filter.module.ts","../../../projects/mis-components/mobile-filter/mis-crystal-design-system-mobile-filter.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n selector: 'mis-mobile-filter',\n templateUrl: './mobile-filter.component.html',\n styleUrls: ['./mobile-filter.component.scss']\n})\nexport class MobileFilterComponent implements OnInit {\n\n localFilterOptions: IFilterOptions;\n currentSelectedItem: string = 'Sort';\n\n @Input() set filterOptions(options) {\n this.localFilterOptions = options;\n };\n\n @Input() backIcon: string = '';\n\n @Input() headerName: string = 'Filters';\n @Input() applyBtnName: string = 'Apply';\n @Input() clearBtnName: string = 'Clear Filters';\n\n @Output() closeFilters = new EventEmitter();\n @Output() clearFilters = new EventEmitter();\n @Output() applyFilters = new EventEmitter<IFilterOptions>();\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n originalOrder() { // used in template for keyvalue pipe sorting\n return 0;\n }\n\n toggleFilter(data, isSelectedItem) {\n const isMultiSelect = this.localFilterOptions[this.currentSelectedItem].multiSelect;\n this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = 0;\n this.localFilterOptions[this.currentSelectedItem].options = this.localFilterOptions[this.currentSelectedItem].options.map(option => {\n const isSelectedValue = option.value === data;\n (isMultiSelect && option.selected) && (this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems +=1);\n return {\n ...option,\n selected: isSelectedValue ? (isMultiSelect ? !option.selected : true) : (isMultiSelect ? option.selected : false)\n }\n });\n\n // changing number of selected items for multiselect filters\n const noOfSelectedItems = this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems;\n isMultiSelect ? this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = isSelectedItem ? noOfSelectedItems - 1 : noOfSelectedItems + 1 : null;\n \n }\n}\n\nexport interface IFilterOptions {\n [filterName: string]: {\n name: string;\n options: {label: string, value: string, selected: boolean, capacities?: number[], amenities?: string[]}[], // capacities & amenities are for floor\n multiSelect: boolean,\n noOfSelectedItems?: number\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { MobileFilterComponent } from \"./mobile-filter.component\";\nimport { ButtonModule } from \"mis-crystal-design-system/button\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\n\n@NgModule({\n declarations: [MobileFilterComponent],\n imports: [CommonModule, ButtonModule, CheckboxModule],\n exports: [MobileFilterComponent]\n})\nexport class MobileFilterModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["EventEmitter","Component","Input","Output","NgModule","CommonModule","ButtonModule","CheckboxModule"],"mappings":";;;;;;;QA0BE;
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-mobile-filter.umd.js","sources":["../../../projects/mis-components/mobile-filter/mobile-filter.component.ts","../../../projects/mis-components/mobile-filter/mobile-filter.module.ts","../../../projects/mis-components/mobile-filter/mis-crystal-design-system-mobile-filter.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n selector: 'mis-mobile-filter',\n templateUrl: './mobile-filter.component.html',\n styleUrls: ['./mobile-filter.component.scss']\n})\nexport class MobileFilterComponent implements OnInit {\n\n localFilterOptions: IFilterOptions;\n @Input() currentSelectedItem: string = 'Sort';\n\n @Input() set filterOptions(options) {\n this.localFilterOptions = options;\n };\n\n @Input() backIcon: string = '';\n\n @Input() headerName: string = 'Filters';\n @Input() applyBtnName: string = 'Apply';\n @Input() clearBtnName: string = 'Clear Filters';\n\n @Output() closeFilters = new EventEmitter();\n @Output() clearFilters = new EventEmitter();\n @Output() applyFilters = new EventEmitter<IFilterOptions>();\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n originalOrder() { // used in template for keyvalue pipe sorting\n return 0;\n }\n\n toggleFilter(data, isSelectedItem) {\n const isMultiSelect = this.localFilterOptions[this.currentSelectedItem].multiSelect;\n this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = 0;\n this.localFilterOptions[this.currentSelectedItem].options = this.localFilterOptions[this.currentSelectedItem].options.map(option => {\n const isSelectedValue = option.value === data;\n (isMultiSelect && option.selected) && (this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems +=1);\n return {\n ...option,\n selected: isSelectedValue ? (isMultiSelect ? !option.selected : true) : (isMultiSelect ? option.selected : false)\n }\n });\n\n // changing number of selected items for multiselect filters\n const noOfSelectedItems = this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems;\n isMultiSelect ? this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = isSelectedItem ? noOfSelectedItems - 1 : noOfSelectedItems + 1 : null;\n \n }\n}\n\nexport interface IFilterOptions {\n [filterName: string]: {\n name: string;\n options: {label: string, value: string, selected: boolean, capacities?: number[], amenities?: string[]}[], // capacities & amenities are for floor\n multiSelect: boolean,\n noOfSelectedItems?: number\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { MobileFilterComponent } from \"./mobile-filter.component\";\nimport { ButtonModule } from \"mis-crystal-design-system/button\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\n\n@NgModule({\n declarations: [MobileFilterComponent],\n imports: [CommonModule, ButtonModule, CheckboxModule],\n exports: [MobileFilterComponent]\n})\nexport class MobileFilterModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["EventEmitter","Component","Input","Output","NgModule","CommonModule","ButtonModule","CheckboxModule"],"mappings":";;;;;;;QA0BE;YAhBS,wBAAmB,GAAW,MAAM,CAAC;YAMrC,aAAQ,GAAW,EAAE,CAAC;YAEtB,eAAU,GAAW,SAAS,CAAC;YAC/B,iBAAY,GAAW,OAAO,CAAC;YAC/B,iBAAY,GAAW,eAAe,CAAC;YAEtC,iBAAY,GAAG,IAAIA,iBAAY,EAAE,CAAC;YAClC,iBAAY,GAAG,IAAIA,iBAAY,EAAE,CAAC;YAClC,iBAAY,GAAG,IAAIA,iBAAY,EAAkB,CAAC;SAE3C;QAdjB,sBAAa,gDAAa;iBAA1B,UAA2B,OAAO;gBAChC,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC;aACnC;;;WAAA;QAAA,CAAC;QAcF,wCAAQ,GAAR;SACC;QAED,6CAAa,GAAb;YACE,OAAO,CAAC,CAAC;SACV;QAED,4CAAY,GAAZ,UAAa,IAAI,EAAE,cAAc;YAAjC,iBAgBC;YAfC,IAAM,aAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,WAAW,CAAC;YACpF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,iBAAiB,GAAG,CAAC,CAAC;YACxE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,UAAA,MAAM;gBAC9H,IAAM,eAAe,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC;gBAC9C,CAAC,aAAa,IAAI,MAAM,CAAC,QAAQ,MAAM,KAAI,CAAC,kBAAkB,CAAC,KAAI,CAAC,mBAAmB,CAAC,CAAC,iBAAiB,IAAG,CAAC,CAAC,CAAC;gBAChH,uCACK,MAAM,KACT,QAAQ,EAAE,eAAe,IAAI,aAAa,GAAG,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI,KAAK,aAAa,GAAG,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,IAClH;aACF,CAAC,CAAC;;YAGH,IAAM,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,iBAAiB,CAAC;YAC9F,aAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,iBAAiB,GAAG,cAAc,GAAG,iBAAiB,GAAG,CAAC,GAAG,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC;SAE7J;;;;gBAjDFC,cAAS,SAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,8+EAA6C;;iBAE9C;;;;sCAIEC,UAAK;gCAELA,UAAK;2BAILA,UAAK;6BAELA,UAAK;+BACLA,UAAK;+BACLA,UAAK;+BAELC,WAAM;+BACNA,WAAM;+BACNA,WAAM;;;;QCbT;;;;;gBALCC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,qBAAqB,CAAC;oBACrC,OAAO,EAAE,CAACC,mBAAY,EAAEC,mBAAY,EAAEC,uBAAc,CAAC;oBACrD,OAAO,EAAE,CAAC,qBAAqB,CAAC;iBACjC;;;ICVD;;;;;;;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/core"),require("mis-crystal-design-system/button"),require("mis-crystal-design-system/checkbox")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/mobile-filter",["exports","@angular/common","@angular/core","mis-crystal-design-system/button","mis-crystal-design-system/checkbox"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"]["mobile-filter"]={}),e.ng.common,e.ng.core,e["mis-crystal-design-system"].button,e["mis-crystal-design-system"].checkbox)}(this,(function(e,t,i,n,o){"use strict";var l=function(){function e(){this.currentSelectedItem="Sort",this.backIcon="",this.headerName="Filters",this.applyBtnName="Apply",this.clearBtnName="Clear Filters",this.closeFilters=new i.EventEmitter,this.clearFilters=new i.EventEmitter,this.applyFilters=new i.EventEmitter}return Object.defineProperty(e.prototype,"filterOptions",{set:function(e){this.localFilterOptions=e},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.originalOrder=function(){return 0},e.prototype.toggleFilter=function(e,t){var i=this,n=this.localFilterOptions[this.currentSelectedItem].multiSelect;this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems=0,this.localFilterOptions[this.currentSelectedItem].options=this.localFilterOptions[this.currentSelectedItem].options.map((function(t){var o=t.value===e;return n&&t.selected&&(i.localFilterOptions[i.currentSelectedItem].noOfSelectedItems+=1),Object.assign(Object.assign({},t),{selected:o?!n||!t.selected:!!n&&t.selected})}));var o=this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems;n&&(this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems=t?o-1:o+1)},e}();l.decorators=[{type:i.Component,args:[{selector:"mis-mobile-filter",template:'<div class="filters-container">\n <div class="head display-flex">\n <img (click)="closeFilters.emit();" [src]="backIcon" alt="">\n <span>{{headerName}}</span>\n </div>\n <div class="body display-flex">\n <div class="filters">\n <ng-container *ngFor="let filter of localFilterOptions | keyvalue : originalOrder">\n <div class="filter display-flex" (click)="currentSelectedItem = filter.key">\n <span class="filterName" [ngStyle]="{\'color\': filter.key === currentSelectedItem ? \'#0937B2\' : \'#181F33\'}">{{ localFilterOptions[
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/core"),require("mis-crystal-design-system/button"),require("mis-crystal-design-system/checkbox")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/mobile-filter",["exports","@angular/common","@angular/core","mis-crystal-design-system/button","mis-crystal-design-system/checkbox"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"]["mobile-filter"]={}),e.ng.common,e.ng.core,e["mis-crystal-design-system"].button,e["mis-crystal-design-system"].checkbox)}(this,(function(e,t,i,n,o){"use strict";var l=function(){function e(){this.currentSelectedItem="Sort",this.backIcon="",this.headerName="Filters",this.applyBtnName="Apply",this.clearBtnName="Clear Filters",this.closeFilters=new i.EventEmitter,this.clearFilters=new i.EventEmitter,this.applyFilters=new i.EventEmitter}return Object.defineProperty(e.prototype,"filterOptions",{set:function(e){this.localFilterOptions=e},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.originalOrder=function(){return 0},e.prototype.toggleFilter=function(e,t){var i=this,n=this.localFilterOptions[this.currentSelectedItem].multiSelect;this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems=0,this.localFilterOptions[this.currentSelectedItem].options=this.localFilterOptions[this.currentSelectedItem].options.map((function(t){var o=t.value===e;return n&&t.selected&&(i.localFilterOptions[i.currentSelectedItem].noOfSelectedItems+=1),Object.assign(Object.assign({},t),{selected:o?!n||!t.selected:!!n&&t.selected})}));var o=this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems;n&&(this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems=t?o-1:o+1)},e}();l.decorators=[{type:i.Component,args:[{selector:"mis-mobile-filter",template:'<div class="filters-container">\n <div class="head display-flex">\n <img (click)="closeFilters.emit();" [src]="backIcon" alt="">\n <span>{{headerName}}</span>\n </div>\n <div class="body display-flex">\n <div class="filters">\n <ng-container *ngFor="let filter of localFilterOptions | keyvalue : originalOrder">\n <div class="filter display-flex" (click)="currentSelectedItem = filter.key">\n <span class="filterName" [ngStyle]="{\'color\': filter.key === currentSelectedItem ? \'#0937B2\' : \'#181F33\'}">{{ localFilterOptions[filter.key]?.name }}</span>\n <span class="selectedNumber" *ngIf="localFilterOptions[filter.key][\'multiSelect\'] && localFilterOptions[filter.key][\'noOfSelectedItems\'] > 0">{{ localFilterOptions[filter.key][\'noOfSelectedItems\'] }}</span>\n <div class="highlightor" *ngIf="filter.key === currentSelectedItem"></div>\n </div>\n </ng-container>\n </div>\n <div class="filter-options-container">\n <div class="filter-options-title">\n <span>{{ localFilterOptions[currentSelectedItem]?.name }}</span>\n </div>\n <div class="filter-options">\n <ng-container *ngFor="let option of localFilterOptions[currentSelectedItem]?.options; let i = index">\n <div class="filter-option display-flex" (click)="toggleFilter(option.value, option.selected)" >\n <mis-checkbox *ngIf="localFilterOptions[currentSelectedItem].multiSelect" [checked]="option.selected"></mis-checkbox>\n <input type="radio" *ngIf="!localFilterOptions[currentSelectedItem].multiSelect" [checked]="option.selected">\n <span [ngStyle]="{\'color\': option.selected ? \'#181F33\' : \'#6A737D\'}">{{ option.label }}</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class="footer display-flex">\n <button\n mis-button\n size="md"\n type="text"\n (click)="clearFilters.emit()">\n {{clearBtnName}}\n </button>\n <button\n mis-button\n size="md"\n type="primary"\n (click)="applyFilters.emit(localFilterOptions)"\n >\n {{applyBtnName}}\n </button>\n </div>\n</div>\n',styles:[".display-flex{display:flex}.filters-container{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;cursor:default}.filters-container *{font-family:Lato}.filters-container .head{height:56px;border-bottom:1px solid #e0e0e0;justify-content:flex-start;align-items:center;padding:0 16px;gap:12px}.filters-container .head img{cursor:pointer}.filters-container .head span{font-weight:700;font-size:17px;line-height:24px;letter-spacing:.2px}.filters-container .body{height:calc(100vh - 129px)}.filters-container .body .filters{width:120px;border-right:1px solid #e0e0e0;flex-shrink:0}.filters-container .body .filters .filter{height:56px;padding:0 16px;border-bottom:1px solid #e0e0e0;align-items:center;font-size:15px;justify-content:space-between;position:relative}.filters-container .body .filters .filter .filterName{color:#6a737d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filters .filter .selectedNumber{background-color:#f5f5f5;height:24px;width:auto;font-size:14px;min-width:24px;border-radius:50%;text-align:center;line-height:24px;padding:0 8px}.filters-container .body .filters .filter .highlightor{position:absolute;left:0;height:100%;width:4px;background-color:#0937b2}.filters-container .body .filter-options-container{padding:16px 16px 0 12px;width:calc(100% - 56px);overflow-x:hidden}.filters-container .body .filter-options-container *{color:#181f33}.filters-container .body .filter-options-container .filter-options-title{text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.25px}.filters-container .body .filter-options-container .filter-options-title span{color:#6a737d}.filters-container .body .filter-options-container .filter-options{margin-top:16px;overflow-y:scroll;height:calc(100% - 32px)}.filters-container .body .filter-options-container .filter-options .filter-option{height:48px;border-bottom:1px solid #e0e0e0;align-items:center;padding-left:16px;gap:13px;font-size:15px}.filters-container .body .filter-options-container .filter-options .filter-option span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filter-options-container .filter-options .filter-option input[type=radio]{accent-color:#0937b2;width:20px;height:20px}.filters-container .footer{height:73px;border-top:1px solid #e0e0e0;padding:0 16px;align-items:center;justify-content:space-between}.filters-container .footer button{width:160px}"]}]}],l.ctorParameters=function(){return[]},l.propDecorators={currentSelectedItem:[{type:i.Input}],filterOptions:[{type:i.Input}],backIcon:[{type:i.Input}],headerName:[{type:i.Input}],applyBtnName:[{type:i.Input}],clearBtnName:[{type:i.Input}],closeFilters:[{type:i.Output}],clearFilters:[{type:i.Output}],applyFilters:[{type:i.Output}]};var r=function(){};r.decorators=[{type:i.NgModule,args:[{declarations:[l],imports:[t.CommonModule,n.ButtonModule,o.CheckboxModule],exports:[l]}]}],e.MobileFilterComponent=l,e.MobileFilterModule=r,Object.defineProperty(e,"__esModule",{value:!0})}));
|
|
2
2
|
//# sourceMappingURL=mis-crystal-design-system-mobile-filter.umd.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../projects/mis-components/mobile-filter/mobile-filter.component.ts","../../../projects/mis-components/mobile-filter/mobile-filter.module.ts"],"names":["MobileFilterComponent","this","currentSelectedItem","backIcon","headerName","applyBtnName","clearBtnName","closeFilters","EventEmitter","clearFilters","applyFilters","Object","defineProperty","prototype","options","localFilterOptions","ngOnInit","originalOrder","toggleFilter","data","isSelectedItem","_this","isMultiSelect","multiSelect","noOfSelectedItems","map","option","isSelectedValue","value","selected","assign","Component","args","selector","template","Input","Output","NgModule","declarations","imports","CommonModule","ButtonModule","CheckboxModule","exports"],"mappings":"wvBA0BE,SAAAA,
|
|
1
|
+
{"version":3,"sources":["../../../projects/mis-components/mobile-filter/mobile-filter.component.ts","../../../projects/mis-components/mobile-filter/mobile-filter.module.ts"],"names":["MobileFilterComponent","this","currentSelectedItem","backIcon","headerName","applyBtnName","clearBtnName","closeFilters","EventEmitter","clearFilters","applyFilters","Object","defineProperty","prototype","options","localFilterOptions","ngOnInit","originalOrder","toggleFilter","data","isSelectedItem","_this","isMultiSelect","multiSelect","noOfSelectedItems","map","option","isSelectedValue","value","selected","assign","Component","args","selector","template","Input","Output","NgModule","declarations","imports","CommonModule","ButtonModule","CheckboxModule","exports"],"mappings":"wvBA0BE,SAAAA,IAhBSC,KAAAC,oBAA8B,OAM9BD,KAAAE,SAAmB,GAEnBF,KAAAG,WAAqB,UACrBH,KAAAI,aAAuB,QACvBJ,KAAAK,aAAuB,gBAEtBL,KAAAM,aAAe,IAAIC,EAAAA,aACnBP,KAAAQ,aAAe,IAAID,EAAAA,aACnBP,KAAAS,aAAe,IAAIF,EAAAA,oBAZ7BG,OAAAC,eAAaZ,EAAAa,UAAA,gBAAa,KAA1B,SAA2BC,GACzBb,KAAKc,mBAAqBD,mCAe5Bd,EAAAa,UAAAG,SAAA,aAGAhB,EAAAa,UAAAI,cAAA,WACE,OAAO,GAGTjB,EAAAa,UAAAK,aAAA,SAAaC,EAAMC,GAAnB,IAAAC,EAAApB,KACQqB,EAAgBrB,KAAKc,mBAAmBd,KAAKC,qBAAqBqB,YACxEtB,KAAKc,mBAAmBd,KAAKC,qBAAqBsB,kBAAoB,EACtEvB,KAAKc,mBAAmBd,KAAKC,qBAAqBY,QAAUb,KAAKc,mBAAmBd,KAAKC,qBAAqBY,QAAQW,KAAI,SAAAC,GACxH,IAAMC,EAAkBD,EAAOE,QAAUT,EAEzC,OADCG,GAAiBI,EAAOG,WAAcR,EAAKN,mBAAmBM,EAAKnB,qBAAqBsB,mBAAoB,GAC7Gb,OAAAmB,OAAAnB,OAAAmB,OAAA,GACKJ,GAAM,CACTG,SAAUF,GAAmBL,IAAiBI,EAAOG,WAAoBP,GAAgBI,EAAOG,cAKpG,IAAML,EAAoBvB,KAAKc,mBAAmBd,KAAKC,qBAAqBsB,kBAC5EF,IAAgBrB,KAAKc,mBAAmBd,KAAKC,qBAAqBsB,kBAAoBJ,EAAiBI,EAAoB,EAAIA,EAAoB,6BA/CtJO,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,oBACVC,SAAA,45JAMCC,EAAAA,6BAEAA,EAAAA,wBAIAA,EAAAA,0BAEAA,EAAAA,4BACAA,EAAAA,4BACAA,EAAAA,4BAEAC,EAAAA,6BACAA,EAAAA,6BACAA,EAAAA,gBCbH,iCALCC,EAAAA,SAAQL,KAAA,CAAC,CACRM,aAAc,CAACtC,GACfuC,QAAS,CAACC,EAAAA,aAAcC,EAAAA,aAAcC,EAAAA,gBACtCC,QAAS,CAAC3C","sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n selector: 'mis-mobile-filter',\n templateUrl: './mobile-filter.component.html',\n styleUrls: ['./mobile-filter.component.scss']\n})\nexport class MobileFilterComponent implements OnInit {\n\n localFilterOptions: IFilterOptions;\n @Input() currentSelectedItem: string = 'Sort';\n\n @Input() set filterOptions(options) {\n this.localFilterOptions = options;\n };\n\n @Input() backIcon: string = '';\n\n @Input() headerName: string = 'Filters';\n @Input() applyBtnName: string = 'Apply';\n @Input() clearBtnName: string = 'Clear Filters';\n\n @Output() closeFilters = new EventEmitter();\n @Output() clearFilters = new EventEmitter();\n @Output() applyFilters = new EventEmitter<IFilterOptions>();\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n originalOrder() { // used in template for keyvalue pipe sorting\n return 0;\n }\n\n toggleFilter(data, isSelectedItem) {\n const isMultiSelect = this.localFilterOptions[this.currentSelectedItem].multiSelect;\n this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = 0;\n this.localFilterOptions[this.currentSelectedItem].options = this.localFilterOptions[this.currentSelectedItem].options.map(option => {\n const isSelectedValue = option.value === data;\n (isMultiSelect && option.selected) && (this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems +=1);\n return {\n ...option,\n selected: isSelectedValue ? (isMultiSelect ? !option.selected : true) : (isMultiSelect ? option.selected : false)\n }\n });\n\n // changing number of selected items for multiselect filters\n const noOfSelectedItems = this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems;\n isMultiSelect ? this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = isSelectedItem ? noOfSelectedItems - 1 : noOfSelectedItems + 1 : null;\n \n }\n}\n\nexport interface IFilterOptions {\n [filterName: string]: {\n name: string;\n options: {label: string, value: string, selected: boolean, capacities?: number[], amenities?: string[]}[], // capacities & amenities are for floor\n multiSelect: boolean,\n noOfSelectedItems?: number\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { MobileFilterComponent } from \"./mobile-filter.component\";\nimport { ButtonModule } from \"mis-crystal-design-system/button\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\n\n@NgModule({\n declarations: [MobileFilterComponent],\n imports: [CommonModule, ButtonModule, CheckboxModule],\n exports: [MobileFilterComponent]\n})\nexport class MobileFilterModule {\n}\n"]}
|
|
@@ -35,12 +35,13 @@ export class MobileFilterComponent {
|
|
|
35
35
|
MobileFilterComponent.decorators = [
|
|
36
36
|
{ type: Component, args: [{
|
|
37
37
|
selector: 'mis-mobile-filter',
|
|
38
|
-
template: "<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img (click)=\"closeFilters.emit();\" [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" (click)=\"currentSelectedItem = filter.key\">\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[
|
|
38
|
+
template: "<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img (click)=\"closeFilters.emit();\" [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" (click)=\"currentSelectedItem = filter.key\">\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[filter.key]?.name }}</span>\n <span class=\"selectedNumber\" *ngIf=\"localFilterOptions[filter.key]['multiSelect'] && localFilterOptions[filter.key]['noOfSelectedItems'] > 0\">{{ localFilterOptions[filter.key]['noOfSelectedItems'] }}</span>\n <div class=\"highlightor\" *ngIf=\"filter.key === currentSelectedItem\"></div>\n </div>\n </ng-container>\n </div>\n <div class=\"filter-options-container\">\n <div class=\"filter-options-title\">\n <span>{{ localFilterOptions[currentSelectedItem]?.name }}</span>\n </div>\n <div class=\"filter-options\">\n <ng-container *ngFor=\"let option of localFilterOptions[currentSelectedItem]?.options; let i = index\">\n <div class=\"filter-option display-flex\" (click)=\"toggleFilter(option.value, option.selected)\" >\n <mis-checkbox *ngIf=\"localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\"></mis-checkbox>\n <input type=\"radio\" *ngIf=\"!localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\">\n <span [ngStyle]=\"{'color': option.selected ? '#181F33' : '#6A737D'}\">{{ option.label }}</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"footer display-flex\">\n <button\n mis-button\n size=\"md\"\n type=\"text\"\n (click)=\"clearFilters.emit()\">\n {{clearBtnName}}\n </button>\n <button\n mis-button\n size=\"md\"\n type=\"primary\"\n (click)=\"applyFilters.emit(localFilterOptions)\"\n >\n {{applyBtnName}}\n </button>\n </div>\n</div>\n",
|
|
39
39
|
styles: [".display-flex{display:flex}.filters-container{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;cursor:default}.filters-container *{font-family:Lato}.filters-container .head{height:56px;border-bottom:1px solid #e0e0e0;justify-content:flex-start;align-items:center;padding:0 16px;gap:12px}.filters-container .head img{cursor:pointer}.filters-container .head span{font-weight:700;font-size:17px;line-height:24px;letter-spacing:.2px}.filters-container .body{height:calc(100vh - 129px)}.filters-container .body .filters{width:120px;border-right:1px solid #e0e0e0;flex-shrink:0}.filters-container .body .filters .filter{height:56px;padding:0 16px;border-bottom:1px solid #e0e0e0;align-items:center;font-size:15px;justify-content:space-between;position:relative}.filters-container .body .filters .filter .filterName{color:#6a737d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filters .filter .selectedNumber{background-color:#f5f5f5;height:24px;width:auto;font-size:14px;min-width:24px;border-radius:50%;text-align:center;line-height:24px;padding:0 8px}.filters-container .body .filters .filter .highlightor{position:absolute;left:0;height:100%;width:4px;background-color:#0937b2}.filters-container .body .filter-options-container{padding:16px 16px 0 12px;width:calc(100% - 56px);overflow-x:hidden}.filters-container .body .filter-options-container *{color:#181f33}.filters-container .body .filter-options-container .filter-options-title{text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.25px}.filters-container .body .filter-options-container .filter-options-title span{color:#6a737d}.filters-container .body .filter-options-container .filter-options{margin-top:16px;overflow-y:scroll;height:calc(100% - 32px)}.filters-container .body .filter-options-container .filter-options .filter-option{height:48px;border-bottom:1px solid #e0e0e0;align-items:center;padding-left:16px;gap:13px;font-size:15px}.filters-container .body .filter-options-container .filter-options .filter-option span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filter-options-container .filter-options .filter-option input[type=radio]{accent-color:#0937b2;width:20px;height:20px}.filters-container .footer{height:73px;border-top:1px solid #e0e0e0;padding:0 16px;align-items:center;justify-content:space-between}.filters-container .footer button{width:160px}"]
|
|
40
40
|
},] }
|
|
41
41
|
];
|
|
42
42
|
MobileFilterComponent.ctorParameters = () => [];
|
|
43
43
|
MobileFilterComponent.propDecorators = {
|
|
44
|
+
currentSelectedItem: [{ type: Input }],
|
|
44
45
|
filterOptions: [{ type: Input }],
|
|
45
46
|
backIcon: [{ type: Input }],
|
|
46
47
|
headerName: [{ type: Input }],
|
|
@@ -50,4 +51,4 @@ MobileFilterComponent.propDecorators = {
|
|
|
50
51
|
clearFilters: [{ type: Output }],
|
|
51
52
|
applyFilters: [{ type: Output }]
|
|
52
53
|
};
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
54
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9iaWxlLWZpbHRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9taXMtY29tcG9uZW50cy9tb2JpbGUtZmlsdGVyL21vYmlsZS1maWx0ZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFPL0UsTUFBTSxPQUFPLHFCQUFxQjtJQW1CaEM7UUFoQlMsd0JBQW1CLEdBQVcsTUFBTSxDQUFDO1FBTXJDLGFBQVEsR0FBVyxFQUFFLENBQUM7UUFFdEIsZUFBVSxHQUFXLFNBQVMsQ0FBQztRQUMvQixpQkFBWSxHQUFXLE9BQU8sQ0FBQztRQUMvQixpQkFBWSxHQUFXLGVBQWUsQ0FBQztRQUV0QyxpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDbEMsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ2xDLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQWtCLENBQUM7SUFFNUMsQ0FBQztJQWRqQixJQUFhLGFBQWEsQ0FBQyxPQUFPO1FBQ2hDLElBQUksQ0FBQyxrQkFBa0IsR0FBRyxPQUFPLENBQUM7SUFDcEMsQ0FBQztJQUFBLENBQUM7SUFjRixRQUFRO0lBQ1IsQ0FBQztJQUVELGFBQWE7UUFDWCxPQUFPLENBQUMsQ0FBQztJQUNYLENBQUM7SUFFRCxZQUFZLENBQUMsSUFBSSxFQUFFLGNBQWM7UUFDL0IsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLFdBQVcsQ0FBQztRQUNwRixJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUMsaUJBQWlCLEdBQUcsQ0FBQyxDQUFDO1FBQ3hFLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDakksTUFBTSxlQUFlLEdBQUcsTUFBTSxDQUFDLEtBQUssS0FBSyxJQUFJLENBQUM7WUFDOUMsQ0FBQyxhQUFhLElBQUksTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLGlCQUFpQixJQUFHLENBQUMsQ0FBQyxDQUFDO1lBQ2hILHVDQUNLLE1BQU0sS0FDVCxRQUFRLEVBQUUsZUFBZSxDQUFDLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxJQUNsSDtRQUNILENBQUMsQ0FBQyxDQUFDO1FBRUgsNERBQTREO1FBQzVELE1BQU0saUJBQWlCLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLGlCQUFpQixDQUFDO1FBQzlGLGFBQWEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLGlCQUFpQixHQUFHLGNBQWMsQ0FBQyxDQUFDLENBQUMsaUJBQWlCLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxpQkFBaUIsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUU5SixDQUFDOzs7WUFqREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxtQkFBbUI7Z0JBQzdCLDgrRUFBNkM7O2FBRTlDOzs7O2tDQUlFLEtBQUs7NEJBRUwsS0FBSzt1QkFJTCxLQUFLO3lCQUVMLEtBQUs7MkJBQ0wsS0FBSzsyQkFDTCxLQUFLOzJCQUVMLE1BQU07MkJBQ04sTUFBTTsyQkFDTixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdtaXMtbW9iaWxlLWZpbHRlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9tb2JpbGUtZmlsdGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbW9iaWxlLWZpbHRlci5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIE1vYmlsZUZpbHRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgbG9jYWxGaWx0ZXJPcHRpb25zOiBJRmlsdGVyT3B0aW9ucztcbiAgQElucHV0KCkgY3VycmVudFNlbGVjdGVkSXRlbTogc3RyaW5nID0gJ1NvcnQnO1xuXG4gIEBJbnB1dCgpIHNldCBmaWx0ZXJPcHRpb25zKG9wdGlvbnMpIHtcbiAgICB0aGlzLmxvY2FsRmlsdGVyT3B0aW9ucyA9IG9wdGlvbnM7XG4gIH07XG5cbiAgQElucHV0KCkgYmFja0ljb246IHN0cmluZyA9ICcnO1xuXG4gIEBJbnB1dCgpIGhlYWRlck5hbWU6IHN0cmluZyA9ICdGaWx0ZXJzJztcbiAgQElucHV0KCkgYXBwbHlCdG5OYW1lOiBzdHJpbmcgPSAnQXBwbHknO1xuICBASW5wdXQoKSBjbGVhckJ0bk5hbWU6IHN0cmluZyA9ICdDbGVhciBGaWx0ZXJzJztcblxuICBAT3V0cHV0KCkgY2xvc2VGaWx0ZXJzID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgY2xlYXJGaWx0ZXJzID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgYXBwbHlGaWx0ZXJzID0gbmV3IEV2ZW50RW1pdHRlcjxJRmlsdGVyT3B0aW9ucz4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICB9XG5cbiAgb3JpZ2luYWxPcmRlcigpIHsgIC8vIHVzZWQgaW4gdGVtcGxhdGUgZm9yIGtleXZhbHVlIHBpcGUgc29ydGluZ1xuICAgIHJldHVybiAwO1xuICB9XG5cbiAgdG9nZ2xlRmlsdGVyKGRhdGEsIGlzU2VsZWN0ZWRJdGVtKSB7XG4gICAgY29uc3QgaXNNdWx0aVNlbGVjdCA9IHRoaXMubG9jYWxGaWx0ZXJPcHRpb25zW3RoaXMuY3VycmVudFNlbGVjdGVkSXRlbV0ubXVsdGlTZWxlY3Q7XG4gICAgdGhpcy5sb2NhbEZpbHRlck9wdGlvbnNbdGhpcy5jdXJyZW50U2VsZWN0ZWRJdGVtXS5ub09mU2VsZWN0ZWRJdGVtcyA9IDA7XG4gICAgdGhpcy5sb2NhbEZpbHRlck9wdGlvbnNbdGhpcy5jdXJyZW50U2VsZWN0ZWRJdGVtXS5vcHRpb25zID0gdGhpcy5sb2NhbEZpbHRlck9wdGlvbnNbdGhpcy5jdXJyZW50U2VsZWN0ZWRJdGVtXS5vcHRpb25zLm1hcChvcHRpb24gPT4ge1xuICAgICAgY29uc3QgaXNTZWxlY3RlZFZhbHVlID0gb3B0aW9uLnZhbHVlID09PSBkYXRhO1xuICAgICAgKGlzTXVsdGlTZWxlY3QgJiYgb3B0aW9uLnNlbGVjdGVkKSAmJiAodGhpcy5sb2NhbEZpbHRlck9wdGlvbnNbdGhpcy5jdXJyZW50U2VsZWN0ZWRJdGVtXS5ub09mU2VsZWN0ZWRJdGVtcyArPTEpO1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgLi4ub3B0aW9uLFxuICAgICAgICBzZWxlY3RlZDogaXNTZWxlY3RlZFZhbHVlID8gKGlzTXVsdGlTZWxlY3QgPyAhb3B0aW9uLnNlbGVjdGVkIDogdHJ1ZSkgOiAoaXNNdWx0aVNlbGVjdCA/IG9wdGlvbi5zZWxlY3RlZCA6IGZhbHNlKVxuICAgICAgfVxuICAgIH0pO1xuXG4gICAgLy8gY2hhbmdpbmcgbnVtYmVyIG9mIHNlbGVjdGVkIGl0ZW1zIGZvciBtdWx0aXNlbGVjdCBmaWx0ZXJzXG4gICAgY29uc3Qgbm9PZlNlbGVjdGVkSXRlbXMgPSB0aGlzLmxvY2FsRmlsdGVyT3B0aW9uc1t0aGlzLmN1cnJlbnRTZWxlY3RlZEl0ZW1dLm5vT2ZTZWxlY3RlZEl0ZW1zO1xuICAgIGlzTXVsdGlTZWxlY3QgPyB0aGlzLmxvY2FsRmlsdGVyT3B0aW9uc1t0aGlzLmN1cnJlbnRTZWxlY3RlZEl0ZW1dLm5vT2ZTZWxlY3RlZEl0ZW1zID0gaXNTZWxlY3RlZEl0ZW0gPyBub09mU2VsZWN0ZWRJdGVtcyAtIDEgOiBub09mU2VsZWN0ZWRJdGVtcyArIDEgOiBudWxsO1xuICAgIFxuICB9XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSUZpbHRlck9wdGlvbnMge1xuICBbZmlsdGVyTmFtZTogc3RyaW5nXToge1xuICAgICAgbmFtZTogc3RyaW5nO1xuICAgICAgb3B0aW9uczoge2xhYmVsOiBzdHJpbmcsIHZhbHVlOiBzdHJpbmcsIHNlbGVjdGVkOiBib29sZWFuLCBjYXBhY2l0aWVzPzogbnVtYmVyW10sIGFtZW5pdGllcz86IHN0cmluZ1tdfVtdLCAgICAvLyBjYXBhY2l0aWVzICYgYW1lbml0aWVzIGFyZSBmb3IgZmxvb3JcbiAgICAgIG11bHRpU2VsZWN0OiBib29sZWFuLFxuICAgICAgbm9PZlNlbGVjdGVkSXRlbXM/OiBudW1iZXJcbiAgfVxufVxuIl19
|
|
@@ -39,12 +39,13 @@ class MobileFilterComponent {
|
|
|
39
39
|
MobileFilterComponent.decorators = [
|
|
40
40
|
{ type: Component, args: [{
|
|
41
41
|
selector: 'mis-mobile-filter',
|
|
42
|
-
template: "<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img (click)=\"closeFilters.emit();\" [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" (click)=\"currentSelectedItem = filter.key\">\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[
|
|
42
|
+
template: "<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img (click)=\"closeFilters.emit();\" [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" (click)=\"currentSelectedItem = filter.key\">\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[filter.key]?.name }}</span>\n <span class=\"selectedNumber\" *ngIf=\"localFilterOptions[filter.key]['multiSelect'] && localFilterOptions[filter.key]['noOfSelectedItems'] > 0\">{{ localFilterOptions[filter.key]['noOfSelectedItems'] }}</span>\n <div class=\"highlightor\" *ngIf=\"filter.key === currentSelectedItem\"></div>\n </div>\n </ng-container>\n </div>\n <div class=\"filter-options-container\">\n <div class=\"filter-options-title\">\n <span>{{ localFilterOptions[currentSelectedItem]?.name }}</span>\n </div>\n <div class=\"filter-options\">\n <ng-container *ngFor=\"let option of localFilterOptions[currentSelectedItem]?.options; let i = index\">\n <div class=\"filter-option display-flex\" (click)=\"toggleFilter(option.value, option.selected)\" >\n <mis-checkbox *ngIf=\"localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\"></mis-checkbox>\n <input type=\"radio\" *ngIf=\"!localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\">\n <span [ngStyle]=\"{'color': option.selected ? '#181F33' : '#6A737D'}\">{{ option.label }}</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"footer display-flex\">\n <button\n mis-button\n size=\"md\"\n type=\"text\"\n (click)=\"clearFilters.emit()\">\n {{clearBtnName}}\n </button>\n <button\n mis-button\n size=\"md\"\n type=\"primary\"\n (click)=\"applyFilters.emit(localFilterOptions)\"\n >\n {{applyBtnName}}\n </button>\n </div>\n</div>\n",
|
|
43
43
|
styles: [".display-flex{display:flex}.filters-container{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;cursor:default}.filters-container *{font-family:Lato}.filters-container .head{height:56px;border-bottom:1px solid #e0e0e0;justify-content:flex-start;align-items:center;padding:0 16px;gap:12px}.filters-container .head img{cursor:pointer}.filters-container .head span{font-weight:700;font-size:17px;line-height:24px;letter-spacing:.2px}.filters-container .body{height:calc(100vh - 129px)}.filters-container .body .filters{width:120px;border-right:1px solid #e0e0e0;flex-shrink:0}.filters-container .body .filters .filter{height:56px;padding:0 16px;border-bottom:1px solid #e0e0e0;align-items:center;font-size:15px;justify-content:space-between;position:relative}.filters-container .body .filters .filter .filterName{color:#6a737d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filters .filter .selectedNumber{background-color:#f5f5f5;height:24px;width:auto;font-size:14px;min-width:24px;border-radius:50%;text-align:center;line-height:24px;padding:0 8px}.filters-container .body .filters .filter .highlightor{position:absolute;left:0;height:100%;width:4px;background-color:#0937b2}.filters-container .body .filter-options-container{padding:16px 16px 0 12px;width:calc(100% - 56px);overflow-x:hidden}.filters-container .body .filter-options-container *{color:#181f33}.filters-container .body .filter-options-container .filter-options-title{text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.25px}.filters-container .body .filter-options-container .filter-options-title span{color:#6a737d}.filters-container .body .filter-options-container .filter-options{margin-top:16px;overflow-y:scroll;height:calc(100% - 32px)}.filters-container .body .filter-options-container .filter-options .filter-option{height:48px;border-bottom:1px solid #e0e0e0;align-items:center;padding-left:16px;gap:13px;font-size:15px}.filters-container .body .filter-options-container .filter-options .filter-option span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filter-options-container .filter-options .filter-option input[type=radio]{accent-color:#0937b2;width:20px;height:20px}.filters-container .footer{height:73px;border-top:1px solid #e0e0e0;padding:0 16px;align-items:center;justify-content:space-between}.filters-container .footer button{width:160px}"]
|
|
44
44
|
},] }
|
|
45
45
|
];
|
|
46
46
|
MobileFilterComponent.ctorParameters = () => [];
|
|
47
47
|
MobileFilterComponent.propDecorators = {
|
|
48
|
+
currentSelectedItem: [{ type: Input }],
|
|
48
49
|
filterOptions: [{ type: Input }],
|
|
49
50
|
backIcon: [{ type: Input }],
|
|
50
51
|
headerName: [{ type: Input }],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-mobile-filter.js","sources":["../../../projects/mis-components/mobile-filter/mobile-filter.component.ts","../../../projects/mis-components/mobile-filter/mobile-filter.module.ts","../../../projects/mis-components/mobile-filter/mis-crystal-design-system-mobile-filter.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n selector: 'mis-mobile-filter',\n templateUrl: './mobile-filter.component.html',\n styleUrls: ['./mobile-filter.component.scss']\n})\nexport class MobileFilterComponent implements OnInit {\n\n localFilterOptions: IFilterOptions;\n currentSelectedItem: string = 'Sort';\n\n @Input() set filterOptions(options) {\n this.localFilterOptions = options;\n };\n\n @Input() backIcon: string = '';\n\n @Input() headerName: string = 'Filters';\n @Input() applyBtnName: string = 'Apply';\n @Input() clearBtnName: string = 'Clear Filters';\n\n @Output() closeFilters = new EventEmitter();\n @Output() clearFilters = new EventEmitter();\n @Output() applyFilters = new EventEmitter<IFilterOptions>();\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n originalOrder() { // used in template for keyvalue pipe sorting\n return 0;\n }\n\n toggleFilter(data, isSelectedItem) {\n const isMultiSelect = this.localFilterOptions[this.currentSelectedItem].multiSelect;\n this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = 0;\n this.localFilterOptions[this.currentSelectedItem].options = this.localFilterOptions[this.currentSelectedItem].options.map(option => {\n const isSelectedValue = option.value === data;\n (isMultiSelect && option.selected) && (this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems +=1);\n return {\n ...option,\n selected: isSelectedValue ? (isMultiSelect ? !option.selected : true) : (isMultiSelect ? option.selected : false)\n }\n });\n\n // changing number of selected items for multiselect filters\n const noOfSelectedItems = this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems;\n isMultiSelect ? this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = isSelectedItem ? noOfSelectedItems - 1 : noOfSelectedItems + 1 : null;\n \n }\n}\n\nexport interface IFilterOptions {\n [filterName: string]: {\n name: string;\n options: {label: string, value: string, selected: boolean, capacities?: number[], amenities?: string[]}[], // capacities & amenities are for floor\n multiSelect: boolean,\n noOfSelectedItems?: number\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { MobileFilterComponent } from \"./mobile-filter.component\";\nimport { ButtonModule } from \"mis-crystal-design-system/button\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\n\n@NgModule({\n declarations: [MobileFilterComponent],\n imports: [CommonModule, ButtonModule, CheckboxModule],\n exports: [MobileFilterComponent]\n})\nexport class MobileFilterModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAOa,qBAAqB;IAmBhC;
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-mobile-filter.js","sources":["../../../projects/mis-components/mobile-filter/mobile-filter.component.ts","../../../projects/mis-components/mobile-filter/mobile-filter.module.ts","../../../projects/mis-components/mobile-filter/mis-crystal-design-system-mobile-filter.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n selector: 'mis-mobile-filter',\n templateUrl: './mobile-filter.component.html',\n styleUrls: ['./mobile-filter.component.scss']\n})\nexport class MobileFilterComponent implements OnInit {\n\n localFilterOptions: IFilterOptions;\n @Input() currentSelectedItem: string = 'Sort';\n\n @Input() set filterOptions(options) {\n this.localFilterOptions = options;\n };\n\n @Input() backIcon: string = '';\n\n @Input() headerName: string = 'Filters';\n @Input() applyBtnName: string = 'Apply';\n @Input() clearBtnName: string = 'Clear Filters';\n\n @Output() closeFilters = new EventEmitter();\n @Output() clearFilters = new EventEmitter();\n @Output() applyFilters = new EventEmitter<IFilterOptions>();\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n originalOrder() { // used in template for keyvalue pipe sorting\n return 0;\n }\n\n toggleFilter(data, isSelectedItem) {\n const isMultiSelect = this.localFilterOptions[this.currentSelectedItem].multiSelect;\n this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = 0;\n this.localFilterOptions[this.currentSelectedItem].options = this.localFilterOptions[this.currentSelectedItem].options.map(option => {\n const isSelectedValue = option.value === data;\n (isMultiSelect && option.selected) && (this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems +=1);\n return {\n ...option,\n selected: isSelectedValue ? (isMultiSelect ? !option.selected : true) : (isMultiSelect ? option.selected : false)\n }\n });\n\n // changing number of selected items for multiselect filters\n const noOfSelectedItems = this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems;\n isMultiSelect ? this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = isSelectedItem ? noOfSelectedItems - 1 : noOfSelectedItems + 1 : null;\n \n }\n}\n\nexport interface IFilterOptions {\n [filterName: string]: {\n name: string;\n options: {label: string, value: string, selected: boolean, capacities?: number[], amenities?: string[]}[], // capacities & amenities are for floor\n multiSelect: boolean,\n noOfSelectedItems?: number\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { MobileFilterComponent } from \"./mobile-filter.component\";\nimport { ButtonModule } from \"mis-crystal-design-system/button\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\n\n@NgModule({\n declarations: [MobileFilterComponent],\n imports: [CommonModule, ButtonModule, CheckboxModule],\n exports: [MobileFilterComponent]\n})\nexport class MobileFilterModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAOa,qBAAqB;IAmBhC;QAhBS,wBAAmB,GAAW,MAAM,CAAC;QAMrC,aAAQ,GAAW,EAAE,CAAC;QAEtB,eAAU,GAAW,SAAS,CAAC;QAC/B,iBAAY,GAAW,OAAO,CAAC;QAC/B,iBAAY,GAAW,eAAe,CAAC;QAEtC,iBAAY,GAAG,IAAI,YAAY,EAAE,CAAC;QAClC,iBAAY,GAAG,IAAI,YAAY,EAAE,CAAC;QAClC,iBAAY,GAAG,IAAI,YAAY,EAAkB,CAAC;KAE3C;IAdjB,IAAa,aAAa,CAAC,OAAO;QAChC,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC;KACnC;;IAcD,QAAQ;KACP;IAED,aAAa;QACX,OAAO,CAAC,CAAC;KACV;IAED,YAAY,CAAC,IAAI,EAAE,cAAc;QAC/B,MAAM,aAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,WAAW,CAAC;QACpF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,iBAAiB,GAAG,CAAC,CAAC;QACxE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM;YAC9H,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC;YAC9C,CAAC,aAAa,IAAI,MAAM,CAAC,QAAQ,MAAM,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,iBAAiB,IAAG,CAAC,CAAC,CAAC;YAChH,uCACK,MAAM,KACT,QAAQ,EAAE,eAAe,IAAI,aAAa,GAAG,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI,KAAK,aAAa,GAAG,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,IAClH;SACF,CAAC,CAAC;;QAGH,MAAM,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,iBAAiB,CAAC;QAC9F,aAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,iBAAiB,GAAG,cAAc,GAAG,iBAAiB,GAAG,CAAC,GAAG,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC;KAE7J;;;YAjDF,SAAS,SAAC;gBACT,QAAQ,EAAE,mBAAmB;gBAC7B,8+EAA6C;;aAE9C;;;;kCAIE,KAAK;4BAEL,KAAK;uBAIL,KAAK;yBAEL,KAAK;2BACL,KAAK;2BACL,KAAK;2BAEL,MAAM;2BACN,MAAM;2BACN,MAAM;;;MCbI,kBAAkB;;;YAL9B,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,qBAAqB,CAAC;gBACrC,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,cAAc,CAAC;gBACrD,OAAO,EAAE,CAAC,qBAAqB,CAAC;aACjC;;;ACVD;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"__symbolic":"module","version":4,"metadata":{"MobileFilterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MobileFilterComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":8,"character":26},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":8,"character":40}],"exports":[{"__symbolic":"reference","name":"MobileFilterComponent"}]}]}],"members":{}},"MobileFilterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"mis-mobile-filter","template":"<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img (click)=\"closeFilters.emit();\" [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" (click)=\"currentSelectedItem = filter.key\">\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"MobileFilterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MobileFilterComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":8,"character":26},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":8,"character":40}],"exports":[{"__symbolic":"reference","name":"MobileFilterComponent"}]}]}],"members":{}},"MobileFilterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"mis-mobile-filter","template":"<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img (click)=\"closeFilters.emit();\" [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" (click)=\"currentSelectedItem = filter.key\">\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[filter.key]?.name }}</span>\n <span class=\"selectedNumber\" *ngIf=\"localFilterOptions[filter.key]['multiSelect'] && localFilterOptions[filter.key]['noOfSelectedItems'] > 0\">{{ localFilterOptions[filter.key]['noOfSelectedItems'] }}</span>\n <div class=\"highlightor\" *ngIf=\"filter.key === currentSelectedItem\"></div>\n </div>\n </ng-container>\n </div>\n <div class=\"filter-options-container\">\n <div class=\"filter-options-title\">\n <span>{{ localFilterOptions[currentSelectedItem]?.name }}</span>\n </div>\n <div class=\"filter-options\">\n <ng-container *ngFor=\"let option of localFilterOptions[currentSelectedItem]?.options; let i = index\">\n <div class=\"filter-option display-flex\" (click)=\"toggleFilter(option.value, option.selected)\" >\n <mis-checkbox *ngIf=\"localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\"></mis-checkbox>\n <input type=\"radio\" *ngIf=\"!localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\">\n <span [ngStyle]=\"{'color': option.selected ? '#181F33' : '#6A737D'}\">{{ option.label }}</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"footer display-flex\">\n <button\n mis-button\n size=\"md\"\n type=\"text\"\n (click)=\"clearFilters.emit()\">\n {{clearBtnName}}\n </button>\n <button\n mis-button\n size=\"md\"\n type=\"primary\"\n (click)=\"applyFilters.emit(localFilterOptions)\"\n >\n {{applyBtnName}}\n </button>\n </div>\n</div>\n","styles":[".display-flex{display:flex}.filters-container{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;cursor:default}.filters-container *{font-family:Lato}.filters-container .head{height:56px;border-bottom:1px solid #e0e0e0;justify-content:flex-start;align-items:center;padding:0 16px;gap:12px}.filters-container .head img{cursor:pointer}.filters-container .head span{font-weight:700;font-size:17px;line-height:24px;letter-spacing:.2px}.filters-container .body{height:calc(100vh - 129px)}.filters-container .body .filters{width:120px;border-right:1px solid #e0e0e0;flex-shrink:0}.filters-container .body .filters .filter{height:56px;padding:0 16px;border-bottom:1px solid #e0e0e0;align-items:center;font-size:15px;justify-content:space-between;position:relative}.filters-container .body .filters .filter .filterName{color:#6a737d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filters .filter .selectedNumber{background-color:#f5f5f5;height:24px;width:auto;font-size:14px;min-width:24px;border-radius:50%;text-align:center;line-height:24px;padding:0 8px}.filters-container .body .filters .filter .highlightor{position:absolute;left:0;height:100%;width:4px;background-color:#0937b2}.filters-container .body .filter-options-container{padding:16px 16px 0 12px;width:calc(100% - 56px);overflow-x:hidden}.filters-container .body .filter-options-container *{color:#181f33}.filters-container .body .filter-options-container .filter-options-title{text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.25px}.filters-container .body .filter-options-container .filter-options-title span{color:#6a737d}.filters-container .body .filter-options-container .filter-options{margin-top:16px;overflow-y:scroll;height:calc(100% - 32px)}.filters-container .body .filter-options-container .filter-options .filter-option{height:48px;border-bottom:1px solid #e0e0e0;align-items:center;padding-left:16px;gap:13px;font-size:15px}.filters-container .body .filter-options-container .filter-options .filter-option span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filter-options-container .filter-options .filter-option input[type=radio]{accent-color:#0937b2;width:20px;height:20px}.filters-container .footer{height:73px;border-top:1px solid #e0e0e0;padding:0 16px;align-items:center;justify-content:space-between}.filters-container .footer button{width:160px}"]}]}],"members":{"currentSelectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"filterOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"backIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"headerName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"applyBtnName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"clearBtnName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"closeFilters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"clearFilters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"applyFilters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"originalOrder":[{"__symbolic":"method"}],"toggleFilter":[{"__symbolic":"method"}]}},"IFilterOptions":{"__symbolic":"interface"}},"origins":{"MobileFilterModule":"./mobile-filter.module","MobileFilterComponent":"./mobile-filter.component","IFilterOptions":"./mobile-filter.component"},"importAs":"mis-crystal-design-system/mobile-filter"}
|