mis-crystal-design-system 4.0.19 → 4.0.21

package/mobile-filter/mis-crystal-design-system-mobile-filter.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

package/mobile-filter/mis-crystal-design-system-mobile-filter.metadata.json

@@ -0,0 +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'}\">{{ filter.key }}</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>{{ currentSelectedItem }}</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":{"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"}]}}},"origins":{"MobileFilterModule":"./mobile-filter.module","MobileFilterComponent":"./mobile-filter.component"},"importAs":"mis-crystal-design-system/mobile-filter"}

package/mobile-filter/mobile-filter.component.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter, OnInit } from '@angular/core';
+export declare class MobileFilterComponent implements OnInit {
+    localFilterOptions: IFilterOptions;
+    currentSelectedItem: string;
+    set filterOptions(options: any);
+    backIcon: string;
+    headerName: string;
+    applyBtnName: string;
+    clearBtnName: string;
+    closeFilters: EventEmitter<any>;
+    clearFilters: EventEmitter<any>;
+    applyFilters: EventEmitter<IFilterOptions>;
+    constructor();
+    ngOnInit(): void;
+    originalOrder(): number;
+    toggleFilter(data: any, isSelectedItem: any): void;
+}
+export interface IFilterOptions {
+    [filterName: string]: {
+        options: {
+            label: string;
+            value: string;
+            selected: boolean;
+            capacities?: number[];
+            amenities?: string[];
+        }[];
+        multiSelect: boolean;
+        noOfSelectedItems?: number;
+    };
+}

package/mobile-filter/mobile-filter.module.d.ts

@@ -0,0 +1,2 @@
+export declare class MobileFilterModule {
+}

package/mobile-filter/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "../bundles/mis-crystal-design-system-mobile-filter.umd.js",
+  "module": "../fesm2015/mis-crystal-design-system-mobile-filter.js",
+  "es2015": "../fesm2015/mis-crystal-design-system-mobile-filter.js",
+  "esm2015": "../esm2015/mobile-filter/mis-crystal-design-system-mobile-filter.js",
+  "fesm2015": "../fesm2015/mis-crystal-design-system-mobile-filter.js",
+  "typings": "mis-crystal-design-system-mobile-filter.d.ts",
+  "metadata": "mis-crystal-design-system-mobile-filter.metadata.json",
+  "sideEffects": false,
+  "name": "mis-crystal-design-system/mobile-filter"
+}

package/mobile-filter/public_api.d.ts

@@ -0,0 +1,2 @@
+export { MobileFilterModule } from './mobile-filter.module';
+export { MobileFilterComponent } from './mobile-filter.component';

package/package.json

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

package/timepicker/mis-crystal-design-system-timepicker.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"TimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"mis-timepicker","template":"<div class=\"timepicker-container\" [ngStyle]=\"{ height: height }\">\n  <input\n    type=\"text\"\n    [(ngModel)]=\"chosenTime\"\n    (ngModelChange)=\"onTimeChange(chosenTime)\"\n    [ngClass]=\"{ invalid: isInvalid || !rangeValidity }\"\n    [ngStyle]=\"{ width: inputWidth }\"\n    (click)=\"openDropdown()\"\n    misToolTip\n    [showToolTip]=\"showTooltip && (isInvalid || !rangeValidity)\"\n    [text]=\"'Invalid Time'\"\n    [position]=\"'top'\"\n    [showOnHover]=\"false\"\n    #input\n    cdkOverlayOrigin\n    class=\"h7\"\n  />\n\n  <ng-template #dropdownContainer libDropdownScroll libTimepicker [originEl]=\"input\" [openStatus]=\"openStatus\" (statusEmitter)=\"closeDropdown()\">\n    <div *ngIf=\"openStatus\" class=\"timepicker-dropdown\" [ngStyle]=\"{ width: dropdownWidth || inputWidth }\">\n      <ul #dropdown>\n        <li #timeInterval (click)=\"onTimeSelect(interval)\" *ngFor=\"let interval of timeIntervals; index as i\" [ngClass]=\"{ highlight: i === isHighlighted }\">\n          {{ interval }}\n          <div class=\"ic-ui-check-24 selected-icon\" *ngIf=\"interval === chosenTime\"></div>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n","styles":[".h1{font-size:40px;line-height:48px}.h1,.h2{font-weight:400;letter-spacing:0}.h2{font-size:32px;line-height:40px}.h3{font-size:28px;line-height:36px}.h3,.h4{font-weight:400;letter-spacing:0}.h4{font-size:24px;line-height:32px}.h5-b{font-weight:700;letter-spacing:.25px}.h5,.h5-b{font-size:20px;line-height:28px}.h5{font-weight:400;letter-spacing:.15px}.h6-b{font-weight:700}.h6,.h6-b{font-size:16px;letter-spacing:0;line-height:24px}.h6,.p{font-weight:400}.p{font-size:16px;letter-spacing:0;line-height:180%}.h7-b{font-weight:700;letter-spacing:.25px}.h7,.h7-b{font-size:14px;line-height:20px}.h7{font-weight:400;letter-spacing:.2px}.h8-b{font-weight:700;letter-spacing:.25px}.h8,.h8-b{font-size:12px;line-height:18px}.h8{letter-spacing:.2px}.h8,.h9{font-weight:400}.h9{font-size:10px;letter-spacing:0;line-height:15px}.btn-lg-b{font-weight:700;letter-spacing:.5px}.btn-lg,.btn-lg-b{font-size:16px;line-height:24px}.btn-lg{font-weight:400;letter-spacing:.2px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;line-height:24px}.btn-link,.display-1{font-weight:400;letter-spacing:0}.display-1{font-size:48px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}*{box-sizing:border-box;font-family:Lato}.timepicker-container{display:inline-block;position:relative}input{text-align:center;border:none;border-bottom:1px solid #e0e0e0;outline:none;height:100%;width:100px;padding:4px 16px}input:hover{background:#f5f7fc}input:active,input:focus{background:#e6ebf7;border-bottom:1px solid #0937b2}.timepicker-dropdown{position:absolute;top:calc(100% + 4px);left:0;max-height:200px;overflow-y:auto;border:1px solid #e0e0e0;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:4px;padding:8px;background:#fff}.timepicker-dropdown::-webkit-scrollbar{display:none}.timepicker-dropdown ul{margin:0;padding:0}.timepicker-dropdown li{text-align:start;list-style:none;padding:6px 12px;cursor:pointer;font-size:14px;color:#181f33;display:flex;justify-content:space-between;align-items:center}.timepicker-dropdown li:hover{background:#f5f7fc;border-radius:6px}.timepicker-dropdown li .selected-icon{font-weight:900}.highlight{background-color:#f5f7fc;border-radius:6px}.invalid{background:#fae1ea!important;border-bottom:1px solid #b00020!important}"]}]}],"members":{"clockFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"timezone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"inputWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"dropdownWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"interval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"dateAsEpoch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"firstInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"rangeValidity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"showTooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"givenTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"minTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"triggerChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"timeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":3}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":38,"character":3},"arguments":["input",{"static":true}]}]}],"timepickerDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":39,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}],"timeIntervalRefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":42,"character":3},"arguments":["timeInterval"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"emitTime":[{"__symbolic":"method"}],"getMoment":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"checkTimeValidity":[{"__symbolic":"method"}],"onTimeSelect":[{"__symbolic":"method"}],"onTimeChange":[{"__symbolic":"method"}],"calculateClosestInterval":[{"__symbolic":"method"}],"populateDropdown":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TimePickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TimePickerComponent"},{"__symbolic":"reference","name":"ɵa"}],"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":"mis-crystal-design-system/tooltip","name":"ToolTipModule","line":10,"character":39},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":10,"character":54}],"exports":[{"__symbolic":"reference","name":"TimePickerComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"TimePickerModule"},"providers":[]}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"[libTimepicker]"}]}],"members":{"originEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3},"arguments":["originEl"]}]}],"statusEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"createOverlayOnInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3},"arguments":["openStatus"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":47,"context":{"typeName":"Element"},"module":"./timepicker.directive"}]},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":18,"character":74},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":109}]}],"createOverlay":[{"__symbolic":"method"}],"destroyOverlay":[{"__symbolic":"method"}]}}},"origins":{"TimePickerComponent":"./timepicker.component","TimePickerModule":"./timepicker.module","ɵa":"./timepicker.directive"},"importAs":"mis-crystal-design-system/timepicker"}
+{"__symbolic":"module","version":4,"metadata":{"TimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"mis-timepicker","template":"<div class=\"timepicker-container\" [ngStyle]=\"{ height: height }\">\n  <input\n    type=\"text\"\n    [(ngModel)]=\"chosenTime\"\n    (ngModelChange)=\"onTimeChange(chosenTime)\"\n    [ngClass]=\"{ invalid: isInvalid || !rangeValidity }\"\n    [ngStyle]=\"{ width: inputWidth }\"\n    (click)=\"openDropdown()\"\n    misToolTip\n    [showToolTip]=\"showTooltip && (isInvalid || !rangeValidity)\"\n    [text]=\"'Invalid Time'\"\n    [position]=\"'top'\"\n    [showOnHover]=\"false\"\n    #input\n    cdkOverlayOrigin\n    class=\"h7\"\n  />\n\n  <ng-template #dropdownContainer libDropdownScroll libTimepicker [originEl]=\"input\" [openStatus]=\"openStatus\" (statusEmitter)=\"closeDropdown()\">\n    <div *ngIf=\"openStatus\" class=\"timepicker-dropdown\" [ngStyle]=\"{ width: dropdownWidth || inputWidth }\">\n      <ul #dropdown>\n        <li #timeInterval (click)=\"onTimeSelect(interval)\" *ngFor=\"let interval of timeIntervals; index as i\" [ngClass]=\"{ highlight: i === isHighlighted }\">\n          {{ interval }}\n          <div class=\"ic-ui-check-24 selected-icon\" *ngIf=\"interval === chosenTime\"></div>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n","styles":[".h1{font-size:40px;line-height:48px}.h1,.h2{font-weight:400;letter-spacing:0}.h2{font-size:32px;line-height:40px}.h3{font-size:28px;line-height:36px}.h3,.h4{font-weight:400;letter-spacing:0}.h4{font-size:24px;line-height:32px}.h5-b{font-weight:700;letter-spacing:.25px}.h5,.h5-b{font-size:20px;line-height:28px}.h5{font-weight:400;letter-spacing:.15px}.h6-b{font-weight:700}.h6,.h6-b{font-size:16px;letter-spacing:0;line-height:24px}.h6,.p{font-weight:400}.p{font-size:16px;letter-spacing:0;line-height:180%}.h7-b{font-weight:700;letter-spacing:.25px}.h7,.h7-b{font-size:14px;line-height:20px}.h7{font-weight:400;letter-spacing:.2px}.h8-b{font-weight:700;letter-spacing:.25px}.h8,.h8-b{font-size:12px;line-height:18px}.h8{letter-spacing:.2px}.h8,.h9{font-weight:400}.h9{font-size:10px;letter-spacing:0;line-height:15px}.btn-lg-b{font-weight:700;letter-spacing:.5px}.btn-lg,.btn-lg-b{font-size:16px;line-height:24px}.btn-lg{font-weight:400;letter-spacing:.2px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;line-height:24px}.btn-link,.display-1{font-weight:400;letter-spacing:0}.display-1{font-size:48px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}*{box-sizing:border-box;font-family:Lato}.timepicker-container{display:inline-block;position:relative}input{text-align:center;border:none;border-bottom:1px solid #e0e0e0;outline:none;height:100%;width:100px;padding:4px 16px}input:hover{background:#f5f7fc}input:active,input:focus{background:#e6ebf7;border-bottom:1px solid #0937b2}.timepicker-dropdown{position:absolute;top:calc(100% + 4px);left:0;max-height:200px;overflow-y:auto;border:1px solid #e0e0e0;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:4px;padding:8px;background:#fff}.timepicker-dropdown::-webkit-scrollbar{display:none}.timepicker-dropdown ul{margin:0;padding:0}.timepicker-dropdown li{text-align:start;list-style:none;padding:6px 12px;cursor:pointer;font-size:14px;color:#181f33;display:flex;justify-content:space-between;align-items:center}.timepicker-dropdown li:hover{background:#f5f7fc;border-radius:6px}.timepicker-dropdown li .selected-icon{font-weight:900}.highlight{background-color:#f5f7fc;border-radius:6px}.invalid{background:#fae1ea!important;border-bottom:1px solid #b00020!important}"]}]}],"members":{"clockFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"timezone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"inputWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"dropdownWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"interval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"dateAsEpoch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"firstInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"rangeValidity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"showTooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"givenTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"minTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"triggerChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"timeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["input",{"static":true}]}]}],"timepickerDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":41,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}],"tooltipDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":42,"character":3},"arguments":[{"__symbolic":"reference","module":"mis-crystal-design-system/tooltip","name":"ToolTipDirective","line":42,"character":13}]}]}],"timeIntervalRefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":45,"character":3},"arguments":["timeInterval"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"emitTime":[{"__symbolic":"method"}],"getMoment":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"checkTimeValidity":[{"__symbolic":"method"}],"onTimeSelect":[{"__symbolic":"method"}],"onTimeChange":[{"__symbolic":"method"}],"calculateClosestInterval":[{"__symbolic":"method"}],"populateDropdown":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TimePickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TimePickerComponent"},{"__symbolic":"reference","name":"ɵa"}],"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":"mis-crystal-design-system/tooltip","name":"ToolTipModule","line":10,"character":39},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":10,"character":54}],"exports":[{"__symbolic":"reference","name":"TimePickerComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"TimePickerModule"},"providers":[]}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"[libTimepicker]"}]}],"members":{"originEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3},"arguments":["originEl"]}]}],"statusEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"createOverlayOnInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3},"arguments":["openStatus"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":47,"context":{"typeName":"Element"},"module":"./timepicker.directive"}]},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":18,"character":74},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":109}]}],"createOverlay":[{"__symbolic":"method"}],"destroyOverlay":[{"__symbolic":"method"}]}}},"origins":{"TimePickerComponent":"./timepicker.component","TimePickerModule":"./timepicker.module","ɵa":"./timepicker.directive"},"importAs":"mis-crystal-design-system/timepicker"}

package/timepicker/timepicker.component.d.ts

@@ -2,6 +2,7 @@ import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit } from "@angular
 import * as moment from "moment-timezone";
 import { ITime } from "./time.namespace";
 import { TimepickerDirective } from "./timepicker.directive";
+import { ToolTipDirective } from "mis-crystal-design-system/tooltip";
 export declare class TimePickerComponent implements OnInit, OnChanges, OnDestroy {
     currTime: string;
     chosenTime: string;
@@ -29,6 +30,7 @@ export declare class TimePickerComponent implements OnInit, OnChanges, OnDestroy
     timeEmitter: EventEmitter<ITime>;
     input: ElementRef;
     timepickerDirective: TimepickerDirective;
+    tooltipDirective: ToolTipDirective;
     set timeIntervalRefs(intervals: any);
     constructor();
     ngOnInit(): void;