mis-crystal-design-system 2.9.8 → 3.0.0

package/fesm2015/mis-crystal-design-system-timepicker.js

@@ -0,0 +1,272 @@
+import { EventEmitter, Directive, TemplateRef, ViewContainerRef, Input, Output, Component, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import * as moment from 'moment-timezone';
+import { tz } from 'moment-timezone';
+import { ConnectionPositionPair, OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ToolTipModule } from 'mis-crystal-design-system/tooltip';
+
+class TimepickerDirective {
+    constructor(templateRef, overlay, viewContainerRef) {
+        this.templateRef = templateRef;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.openStatus = false;
+        this.statusEmitter = new EventEmitter();
+    }
+    set createOverlayOnInput(openStatus) {
+        this.openStatus = openStatus;
+        if (this.originEl && this.openStatus)
+            this.createOverlay(this.originEl);
+    }
+    ;
+    createOverlay(origin) {
+        const positions = [
+            new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, 0, 4),
+            new ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }, 0, 4)
+        ];
+        const overlayConfig = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: "cdk-overlay-transparent-backdrop",
+            positionStrategy: this.overlay
+                .position()
+                //connecting the dropdown overlay to the input element
+                .flexibleConnectedTo(origin)
+                .withPositions([...positions])
+                .withPush(true)
+        });
+        this.overlayRef = this.overlay.create(overlayConfig);
+        const dropdownPortal = new TemplatePortal(this.templateRef, this.viewContainerRef);
+        this.overlayRef.attach(dropdownPortal);
+        this.overlayRef.backdropClick().subscribe(resp => {
+            this.openStatus = false;
+            this.statusEmitter.emit(false);
+            this.overlayRef.detach();
+        });
+    }
+    destroyOverlay() {
+        this.overlayRef.detach();
+    }
+}
+TimepickerDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[libTimepicker]'
+            },] }
+];
+TimepickerDirective.ctorParameters = () => [
+    { type: TemplateRef },
+    { type: Overlay },
+    { type: ViewContainerRef }
+];
+TimepickerDirective.propDecorators = {
+    originEl: [{ type: Input, args: ['originEl',] }],
+    statusEmitter: [{ type: Output }],
+    createOverlayOnInput: [{ type: Input, args: ['openStatus',] }]
+};
+
+class TimePickerComponent {
+    constructor() {
+        this.openStatus = false;
+        this.isHighlighted = 0;
+        this.isInvalid = false;
+        this.timeIntervals = [];
+        this.shouldScroll = false;
+        this.userInputFlag = false;
+        this.clockFormat = 12;
+        this.timezone = "Asia/Kolkata";
+        this.height = "max-content";
+        this.inputWidth = "100px";
+        this.interval = 15;
+        this.dateAsEpoch = moment().valueOf();
+        this.rangeValidity = true;
+        this.timeEmitter = new EventEmitter();
+    }
+    // gets all the li elements from the dropdown and scrolls to the highlighted element
+    set timeIntervalRefs(intervals) {
+        intervals.forEach(interval => {
+            if (interval.nativeElement.classList[0] === "highlight") {
+                const highlighted = interval.nativeElement;
+                setTimeout(() => highlighted.scrollIntoView({ behavior: "smooth", block: "center" }));
+            }
+        });
+    }
+    ngOnInit() {
+        this.timeFormat = this.clockFormat === 12 ? "hh:mm a" : "HH:mm";
+        this.populateDropdown();
+        this.chosenTime = this.timeIntervals[0];
+        this.calculateClosestInterval(this.chosenTime);
+        this.emitTime({
+            valid: !this.isInvalid,
+            time: this.chosenTime
+        });
+    }
+    ngOnChanges() {
+        tz.setDefault(this.timezone);
+        this.currTime = moment().format();
+        if (this.timeFormat) {
+            // if the first interval is >= the chosen time
+            // then only update the value of chosen time
+            // else it remains the same
+            const chosenTimeMoment = moment(`${moment(this.dateAsEpoch).format("DD-MM-YYYY")} ${this.chosenTime}`, `'DD-MM-YYYY' ${this.timeFormat}`);
+            if (this.firstInterval >= chosenTimeMoment.valueOf() && this.rangeValidity && !this.userInputFlag) {
+                this.chosenTime = moment(this.firstInterval).format(this.timeFormat);
+            }
+            if (!this.userInputFlag)
+                this.populateDropdown();
+            this.userInputFlag = false;
+            this.isInvalid = !this.checkTimeValidity(this.chosenTime.trim());
+            this.emitTime({
+                valid: !this.isInvalid,
+                time: this.chosenTime
+            });
+            this.calculateClosestInterval(this.chosenTime);
+        }
+    }
+    emitTime(data) {
+        this.timeEmitter.emit(data);
+    }
+    // gets a boolean from overlay event to close the dropdown
+    closeDropdown(val) {
+        this.openStatus = val;
+    }
+    // toggle timepicker dropdown
+    openDropdown() {
+        this.openStatus = true;
+    }
+    checkTimeValidity(time) {
+        const RE12 = /^(([0-9][1-9]|1[0-2]):([0-5][0-9])( )?(am|pm|AM|PM))$/i;
+        const RE24 = /^([01][0-9]|2[0-3]):[0-5][0-9]$/;
+        const RE = this.clockFormat === 12 ? RE12 : RE24;
+        const timeMoment = moment(`${moment(this.dateAsEpoch).format("DD-MM-YYYY")} ${time}`, `'DD-MM-YYYY' ${this.timeFormat}`);
+        let flag = false;
+        // if the first interval is set to the start of the day
+        // then we don't check its validity against the current time
+        if (this.firstInterval &&
+            moment(this.firstInterval).format(this.timeFormat).valueOf() === moment().startOf("d").format(this.timeFormat).valueOf()) {
+            flag = time.match(RE) ? true : false;
+        }
+        else {
+            flag = time.match(RE) && timeMoment.isAfter(moment());
+        }
+        return flag;
+    }
+    // update chosen time as soon as the user clicks on an interval
+    onTimeSelect(time) {
+        this.isInvalid = !this.checkTimeValidity(time.trim());
+        if (!this.isInvalid) {
+            this.chosenTime = time;
+            this.calculateClosestInterval(this.chosenTime);
+        }
+        this.emitTime({
+            valid: !this.isInvalid,
+            time: time
+        });
+        this.openStatus = false;
+        if (this.timepickerDirective)
+            this.timepickerDirective.destroyOverlay();
+    }
+    // checks validity of time on input change and calculates the closest interval
+    onTimeChange(time) {
+        this.isInvalid = !this.checkTimeValidity(time.trim());
+        if (!this.isInvalid) {
+            this.userInputFlag = true;
+            this.calculateClosestInterval(time);
+        }
+        this.emitTime({
+            valid: !this.isInvalid,
+            time: time
+        });
+    }
+    calculateClosestInterval(time) {
+        const intervalMS = this.interval * 60 * 1000;
+        const chosenDate = moment(this.dateAsEpoch).format("DD-MM-YYYY");
+        // converting time passed as parameter to moment object and adding date
+        const parsedTimeWithDate = moment(`${chosenDate} ${time}`, `DD-MM-YYYY ${this.timeFormat}`);
+        // converting moment object to epoch so that calculations for rounding off are easier to do
+        const currEpoch = parsedTimeWithDate.valueOf();
+        const offset = currEpoch % intervalMS;
+        const roundedEpoch = offset >= intervalMS / 2 ? currEpoch + (intervalMS - offset) : currEpoch - offset;
+        // finding the index of element that needs to be highlighted
+        this.timeIntervals.forEach((interval, index, array) => {
+            const intervalObj = moment(`${chosenDate} ${interval}`, `DD-MM-YYYY ${this.timeFormat}`);
+            if (intervalObj.valueOf() === roundedEpoch)
+                this.isHighlighted = index;
+            if (array.length === 1)
+                this.isHighlighted = 0;
+        });
+    }
+    // populates the dropdown according to the first interval received
+    populateDropdown() {
+        this.timeIntervals = [];
+        // if picker is used as an individual component
+        if (!this.firstInterval) {
+            // firstInterval is initialised according to the current time
+            // if the date is same as the current date
+            if (moment(this.dateAsEpoch).format("DD-MM-YYYY") === moment().format("DD-MM-YYYY")) {
+                const offset = this.interval - (moment().minutes() % this.interval);
+                this.firstInterval = moment().add(offset, "m").valueOf();
+            }
+            // else the firstInterval is initialised as start of day
+            else {
+                this.firstInterval = moment().startOf("d").valueOf();
+            }
+        }
+        const start = moment(this.firstInterval);
+        const end = moment().endOf("d");
+        while (start.valueOf() < end.valueOf()) {
+            this.timeIntervals.push(start.format(this.timeFormat));
+            start.add(this.interval, "m");
+        }
+        // if the start time is equal to the interval just before midnight
+        // and the start date = end date
+        // push 11:59pm only
+        if (this.timeIntervals.length === 0) {
+            this.chosenTime = moment().endOf("d").format(this.timeFormat);
+            this.timeIntervals.push(moment().endOf("d").format(this.timeFormat));
+        }
+    }
+}
+TimePickerComponent.decorators = [
+    { type: Component, args: [{
+                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]=\"isInvalid || !rangeValidity\"\n    [text]=\"'Invalid Time'\"\n    [position]=\"'top'\"\n    [showOnHover]=\"false\"\n    #input\n    cdkOverlayOrigin\n    class=\"p\"\n  />\n\n  <ng-template #dropdownContainer libDropdownScroll libTimepicker [originEl]=\"input\" [openStatus]=\"openStatus\" (statusEmitter)=\"closeDropdown($event)\">\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:16px;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}"]
+            },] }
+];
+TimePickerComponent.ctorParameters = () => [];
+TimePickerComponent.propDecorators = {
+    clockFormat: [{ type: Input }],
+    timezone: [{ type: Input }],
+    height: [{ type: Input }],
+    inputWidth: [{ type: Input }],
+    dropdownWidth: [{ type: Input }],
+    interval: [{ type: Input }],
+    dateAsEpoch: [{ type: Input }],
+    firstInterval: [{ type: Input }],
+    rangeValidity: [{ type: Input }],
+    timeEmitter: [{ type: Output }],
+    input: [{ type: ViewChild, args: ["input", { static: true },] }],
+    timepickerDirective: [{ type: ViewChild, args: [TimepickerDirective,] }],
+    timeIntervalRefs: [{ type: ViewChildren, args: ["timeInterval",] }]
+};
+
+class TimePickerModule {
+    static forRoot() {
+        return { ngModule: TimePickerModule, providers: [] };
+    }
+}
+TimePickerModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [TimePickerComponent, TimepickerDirective],
+                imports: [CommonModule, FormsModule, ToolTipModule, OverlayModule],
+                exports: [TimePickerComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TimePickerComponent, TimePickerModule, TimepickerDirective as ɵa };
+//# sourceMappingURL=mis-crystal-design-system-timepicker.js.map

package/fesm2015/mis-crystal-design-system-timepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-timepicker.js","sources":["../../../projects/mis-components/timepicker/timepicker.directive.ts","../../../projects/mis-components/timepicker/timepicker.component.ts","../../../projects/mis-components/timepicker/timepicker.module.ts","../../../projects/mis-components/timepicker/mis-crystal-design-system-timepicker.ts"],"sourcesContent":["import { Directive, Output, TemplateRef } from '@angular/core';\nimport { EventEmitter, Input, ViewContainerRef } from \"@angular/core\";\nimport { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\n\n@Directive({\n  selector: '[libTimepicker]'\n})\nexport class TimepickerDirective {\n  private openStatus: boolean = false;\n  @Input('originEl') originEl : any;\n  @Output() statusEmitter = new EventEmitter<boolean>(); \n\n  @Input('openStatus')  set createOverlayOnInput(openStatus){\n    this.openStatus = openStatus;\n    if(this.originEl && this.openStatus) this.createOverlay(this.originEl);\n  }; \n  private overlayRef!: OverlayRef;\n  constructor(private templateRef: TemplateRef<Element>, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n\n  createOverlay(origin: any): void {\n    const positions = [\n      new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, 0, 4),\n      new ConnectionPositionPair({ originX: \"end\", originY: \"bottom\" }, { overlayX: \"end\", overlayY: \"top\" }, 0, 4)\n    ];\n\n    const overlayConfig = new OverlayConfig({\n      hasBackdrop: true,\n      backdropClass: \"cdk-overlay-transparent-backdrop\",\n      positionStrategy: this.overlay\n        .position()\n        //connecting the dropdown overlay to the input element\n        .flexibleConnectedTo(origin)\n        .withPositions([...positions])\n        .withPush(true)\n    });\n\n    this.overlayRef = this.overlay.create(overlayConfig);\n    const dropdownPortal = new TemplatePortal(this.templateRef, this.viewContainerRef);\n    this.overlayRef.attach(dropdownPortal);\n    this.overlayRef.backdropClick().subscribe(resp => {\n      this.openStatus = false;\n      this.statusEmitter.emit(false);\n      this.overlayRef.detach();\n    });\n  }\n\n  destroyOverlay(){\n    this.overlayRef.detach();\n  }\n  \n}\n","import { Component, ElementRef, EventEmitter, Input, Output, QueryList, TemplateRef, ViewChild, ViewChildren } from \"@angular/core\";\nimport * as moment from \"moment-timezone\";\nimport { ITime } from \"./time.namespace\";\nimport { TimepickerDirective } from \"./timepicker.directive\";\n\n@Component({\n  selector: \"mis-timepicker\",\n  templateUrl: \"./timepicker.component.html\",\n  styleUrls: [\"./timepicker.component.scss\"]\n})\nexport class TimePickerComponent {\n  currTime!: string;\n  chosenTime: string;\n  openStatus: boolean = false;\n  isHighlighted: number = 0;\n  isInvalid: boolean = false;\n  timeIntervals: string[] = [];\n  shouldScroll: boolean = false;\n  userInputFlag: boolean = false;\n\n  @Input() clockFormat: number = 12;\n  timeFormat!: string;\n\n  @Input() timezone: string = \"Asia/Kolkata\";\n  @Input() height: string = \"max-content\";\n  @Input() inputWidth: string = \"100px\";\n  @Input() dropdownWidth?: string;\n  @Input() interval: number = 15;\n  @Input() dateAsEpoch: number = moment().valueOf();\n  @Input() firstInterval!: number;\n  @Input() rangeValidity: boolean = true;\n\n  @Output() timeEmitter = new EventEmitter<ITime>();\n  @ViewChild(\"input\", { static: true }) input: ElementRef;\n  @ViewChild(TimepickerDirective) timepickerDirective: TimepickerDirective;\n\n  // gets all the li elements from the dropdown and scrolls to the highlighted element\n  @ViewChildren(\"timeInterval\") set timeIntervalRefs(intervals) {\n    intervals.forEach(interval => {\n      if (interval.nativeElement.classList[0] === \"highlight\") {\n        const highlighted = interval.nativeElement;\n        setTimeout(() => highlighted.scrollIntoView({ behavior: \"smooth\", block: \"center\" }));\n      }\n    });\n  }\n\n  constructor() {}\n  ngOnInit(): void {\n    this.timeFormat = this.clockFormat === 12 ? \"hh:mm a\" : \"HH:mm\";\n    this.populateDropdown();\n    this.chosenTime = this.timeIntervals[0];\n    this.calculateClosestInterval(this.chosenTime);\n    this.emitTime({\n      valid: !this.isInvalid,\n      time: this.chosenTime\n    });\n  }\n\n  ngOnChanges(): void {\n    moment.tz.setDefault(this.timezone);\n    this.currTime = moment().format();\n    if (this.timeFormat) {\n      // if the first interval is >= the chosen time\n      // then only update the value of chosen time\n      // else it remains the same\n      const chosenTimeMoment = moment(`${moment(this.dateAsEpoch).format(\"DD-MM-YYYY\")} ${this.chosenTime}`, `'DD-MM-YYYY' ${this.timeFormat}`);\n\n      if (this.firstInterval >= chosenTimeMoment.valueOf() && this.rangeValidity && !this.userInputFlag) {\n        this.chosenTime = moment(this.firstInterval).format(this.timeFormat);\n      }\n      if (!this.userInputFlag) this.populateDropdown();\n      this.userInputFlag = false;\n      this.isInvalid = !this.checkTimeValidity(this.chosenTime.trim());\n      this.emitTime({\n        valid: !this.isInvalid,\n        time: this.chosenTime\n      });\n      this.calculateClosestInterval(this.chosenTime);\n    }\n  }\n\n  emitTime(data: ITime): void {\n    this.timeEmitter.emit(data);\n  }\n\n  // gets a boolean from overlay event to close the dropdown\n  closeDropdown(val: boolean) {\n    this.openStatus = val;\n  }\n\n  // toggle timepicker dropdown\n  openDropdown(): void {\n    this.openStatus = true;\n  }\n\n  checkTimeValidity(time: string): boolean {\n    const RE12 = /^(([0-9][1-9]|1[0-2]):([0-5][0-9])( )?(am|pm|AM|PM))$/i;\n    const RE24 = /^([01][0-9]|2[0-3]):[0-5][0-9]$/;\n    const RE = this.clockFormat === 12 ? RE12 : RE24;\n\n    const timeMoment = moment(`${moment(this.dateAsEpoch).format(\"DD-MM-YYYY\")} ${time}`, `'DD-MM-YYYY' ${this.timeFormat}`);\n    let flag: boolean = false;\n\n    // if the first interval is set to the start of the day\n    // then we don't check its validity against the current time\n    if (\n      this.firstInterval &&\n      moment(this.firstInterval).format(this.timeFormat).valueOf() === moment().startOf(\"d\").format(this.timeFormat).valueOf()\n    ) {\n      flag = time.match(RE) ? true : false;\n    } else {\n      flag = time.match(RE) && timeMoment.isAfter(moment());\n    }\n\n    return flag;\n  }\n\n  // update chosen time as soon as the user clicks on an interval\n  onTimeSelect(time: string): void {\n    this.isInvalid = !this.checkTimeValidity(time.trim());\n    if (!this.isInvalid) {\n      this.chosenTime = time;\n      this.calculateClosestInterval(this.chosenTime);\n    }\n    this.emitTime({\n      valid: !this.isInvalid,\n      time: time\n    });\n    this.openStatus = false;\n    if (this.timepickerDirective) this.timepickerDirective.destroyOverlay();\n  }\n\n  // checks validity of time on input change and calculates the closest interval\n  onTimeChange(time: string): void {\n    this.isInvalid = !this.checkTimeValidity(time.trim());\n    if (!this.isInvalid) {\n      this.userInputFlag = true;\n      this.calculateClosestInterval(time);\n    }\n    this.emitTime({\n      valid: !this.isInvalid,\n      time: time\n    });\n  }\n\n  calculateClosestInterval(time: string): void {\n    const intervalMS = this.interval * 60 * 1000;\n    const chosenDate = moment(this.dateAsEpoch).format(\"DD-MM-YYYY\");\n\n    // converting time passed as parameter to moment object and adding date\n    const parsedTimeWithDate = moment(`${chosenDate} ${time}`, `DD-MM-YYYY ${this.timeFormat}`);\n\n    // converting moment object to epoch so that calculations for rounding off are easier to do\n    const currEpoch = parsedTimeWithDate.valueOf();\n\n    const offset = currEpoch % intervalMS;\n    const roundedEpoch = offset >= intervalMS / 2 ? currEpoch + (intervalMS - offset) : currEpoch - offset;\n\n    // finding the index of element that needs to be highlighted\n    this.timeIntervals.forEach((interval, index, array) => {\n      const intervalObj = moment(`${chosenDate} ${interval}`, `DD-MM-YYYY ${this.timeFormat}`);\n      if (intervalObj.valueOf() === roundedEpoch) this.isHighlighted = index;\n      if (array.length === 1) this.isHighlighted = 0;\n    });\n  }\n\n  // populates the dropdown according to the first interval received\n  populateDropdown(): void {\n    this.timeIntervals = [];\n\n    // if picker is used as an individual component\n    if (!this.firstInterval) {\n      // firstInterval is initialised according to the current time\n      // if the date is same as the current date\n      if (moment(this.dateAsEpoch).format(\"DD-MM-YYYY\") === moment().format(\"DD-MM-YYYY\")) {\n        const offset = this.interval - (moment().minutes() % this.interval);\n        this.firstInterval = moment().add(offset, \"m\").valueOf();\n      }\n\n      // else the firstInterval is initialised as start of day\n      else {\n        this.firstInterval = moment().startOf(\"d\").valueOf();\n      }\n    }\n\n    const start = moment(this.firstInterval);\n    const end = moment().endOf(\"d\");\n\n    while (start.valueOf() < end.valueOf()) {\n      this.timeIntervals.push(start.format(this.timeFormat));\n      start.add(this.interval, \"m\");\n    }\n\n    // if the start time is equal to the interval just before midnight\n    // and the start date = end date\n    // push 11:59pm only\n    if (this.timeIntervals.length === 0) {\n      this.chosenTime = moment().endOf(\"d\").format(this.timeFormat);\n      this.timeIntervals.push(moment().endOf(\"d\").format(this.timeFormat));\n    }\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { TimePickerComponent } from \"./timepicker.component\";\nimport { ToolTipModule } from \"mis-crystal-design-system/tooltip\";\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { TimepickerDirective } from './timepicker.directive';\n\n@NgModule({\n  declarations: [TimePickerComponent, TimepickerDirective],\n  imports: [CommonModule, FormsModule, ToolTipModule, OverlayModule],\n  exports: [TimePickerComponent]\n})\nexport class TimePickerModule {\n  static forRoot(): ModuleWithProviders<TimePickerModule> {\n    return { ngModule: TimePickerModule, providers: [] };\n  }\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {TimepickerDirective as ɵa} from './timepicker.directive';"],"names":["moment.tz"],"mappings":"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"}

package/fesm2015/mis-crystal-design-system-timerangepicker.js

@@ -0,0 +1,147 @@
+import { EventEmitter, Component, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core';
+import * as moment from 'moment-timezone';
+import { tz } from 'moment-timezone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TimePickerModule } from 'mis-crystal-design-system/timepicker';
+
+class TimeRangePickerComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.inputWidth = '100px';
+        this.height = '46px';
+        this.timezone = "Asia/Kolkata";
+        this.startDateEpoch = moment().tz(this.timezone).valueOf();
+        this.endDateEpoch = moment().tz(this.timezone).valueOf();
+        this.clockFormat = 12;
+        this.interval = 15;
+        this.timeRangeEmitter = new EventEmitter();
+        this.firstIntervalForStartPicker = moment().valueOf();
+        this.firstIntervalForEndPicker = moment().valueOf();
+        this.rangeValidity = true;
+    }
+    ngOnInit() {
+        console.log(this.timezone);
+        this.timeFormat = this.clockFormat === 12 ? "hh:mm a" : "HH:mm";
+        this.setFirstIntervals();
+    }
+    ngOnChanges() {
+        tz.setDefault(this.timezone);
+    }
+    // calculate the first interval of the picker
+    setFirstIntervals() {
+        const startDate = moment(this.startDateEpoch).format("DD-MM-YYYY");
+        const endDate = moment(this.endDateEpoch).format("DD-MM-YYYY");
+        const minutes = moment().minutes();
+        const offset = this.interval - (minutes % this.interval);
+        // first interval for the start picker will always be the one closest to the current time
+        this.firstIntervalForStartPicker = moment().add(offset, "m").valueOf();
+        this.startTime = {
+            valid: true,
+            time: moment().add(offset, "m").format(this.timeFormat)
+        };
+        // for the end picker if the startDate and the endDate is same
+        // the first interval is set one interval ahead of the first interval for start picker
+        // else if the dates are different we set it to the start of the day
+        if (startDate === endDate) {
+            this.firstIntervalForEndPicker = moment().add(offset, "m").add(this.interval, "m").valueOf();
+        }
+        else {
+            this.firstIntervalForEndPicker = moment().startOf("d").valueOf();
+        }
+        this.endTime = {
+            valid: true,
+            time: moment(this.firstIntervalForEndPicker).format(this.timeFormat)
+        };
+    }
+    emitTimeRange(data) {
+        this.timeRangeEmitter.emit(data);
+    }
+    //handlers catch the emitted values and run validation
+    startPickerHandler(time) {
+        this.startTime = time;
+        // if the start time changes and the start date is the same as the end date
+        // and the start time >=  end time
+        // update the first interval of end picker according to the time set in start picker
+        const startDate = moment(this.startDateEpoch).format("DD-MM-YYYY");
+        const endDate = moment(this.endDateEpoch).format("DD-MM-YYYY");
+        if (startDate === endDate) {
+            let minutes = moment(this.startTime.time, this.timeFormat).minutes();
+            let offset = this.interval - (minutes % this.interval);
+            this.firstIntervalForEndPicker = moment(`${startDate} ${this.startTime.time}`, `'DD-MM-YYYY' ${this.timeFormat}`).add(offset, "m").valueOf();
+        }
+    }
+    endPickerHandler(time) {
+        this.endTime = time;
+        const validity = this.checkTimeValidity(this.startTime.time.trim()) && this.checkTimeValidity(this.endTime.time.trim());
+        this.emitTimeRange({
+            valid: validity && this.rangeValidity,
+            startTime: this.startTime.time,
+            endTime: this.endTime.time
+        });
+        this.rangeValidation();
+    }
+    checkTimeValidity(time) {
+        const RE12 = /^(([0-9][1-9]|1[0-2]):([0-5][0-9])( )?(am|pm|AM|PM))$/i;
+        const RE24 = /^([01][0-9]|2[0-3]):[0-5][0-9]$/;
+        const RE = this.clockFormat === 12 ? RE12 : RE24;
+        const flag = time.match(RE) ? true : false;
+        return flag;
+    }
+    // validates end picker's input according to the start picker's input
+    rangeValidation() {
+        const startDate = moment(this.startDateEpoch).format("DD-MM-YYYY");
+        const endDate = moment(this.endDateEpoch).format("DD-MM-YYYY");
+        const validity = this.checkTimeValidity(this.startTime.time.trim()) && this.checkTimeValidity(this.endTime.time.trim());
+        if (validity && startDate === endDate) {
+            if (this.endTime.time === moment().endOf("d").add(1, "m").format(this.timeFormat)) {
+                this.endTime.time = moment().endOf("d").format(this.timeFormat);
+            }
+            const startMoment = moment(this.startTime.time, this.timeFormat);
+            const endMoment = moment(this.endTime.time, this.timeFormat);
+            this.rangeValidity = endMoment.diff(startMoment, "m") >= 1 ? true : false;
+            this.cdr.detectChanges();
+        }
+    }
+}
+TimeRangePickerComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-timerangepicker",
+                template: "<div class=\"rangepicker-container\">\n  <mis-timepicker\n    [clockFormat]=\"clockFormat\"\n    [interval]=\"interval\"\n    [dateAsEpoch]=\"startDateEpoch\"\n    [firstInterval]=\"firstIntervalForStartPicker\"\n    (timeEmitter)=\"startPickerHandler($event)\"\n    [timezone]=\"timezone\"\n    [height]=\"height\"\n    [inputWidth]=\"'200px'\"\n    [dropdownWidth]=\"dropdownWidth\"\n  ></mis-timepicker>\n  <mis-timepicker\n    [clockFormat]=\"clockFormat\"\n    [interval]=\"interval\"\n    [dateAsEpoch]=\"endDateEpoch\"\n    [firstInterval]=\"firstIntervalForEndPicker\"\n    (timeEmitter)=\"endPickerHandler($event)\"\n    [rangeValidity]=\"rangeValidity\"\n    [timezone]=\"timezone\"\n    [height]=\"height\"\n    [inputWidth]=\"'200px'\"\n    [dropdownWidth]=\"dropdownWidth\"\n  ></mis-timepicker>\n</div>\n",
+                styles: [".rangepicker-container{display:flex;gap:1rem}"]
+            },] }
+];
+TimeRangePickerComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+TimeRangePickerComponent.propDecorators = {
+    inputWidth: [{ type: Input }],
+    dropdownWidth: [{ type: Input }],
+    height: [{ type: Input }],
+    timezone: [{ type: Input }],
+    startDateEpoch: [{ type: Input }],
+    endDateEpoch: [{ type: Input }],
+    clockFormat: [{ type: Input }],
+    interval: [{ type: Input }],
+    timeRangeEmitter: [{ type: Output }]
+};
+
+class TimeRangePickerModule {
+    static forRoot() {
+        return { ngModule: TimeRangePickerModule, providers: [] };
+    }
+}
+TimeRangePickerModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [TimeRangePickerComponent],
+                imports: [CommonModule, FormsModule, TimePickerModule],
+                exports: [TimeRangePickerComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TimeRangePickerComponent, TimeRangePickerModule };
+//# sourceMappingURL=mis-crystal-design-system-timerangepicker.js.map

package/fesm2015/mis-crystal-design-system-timerangepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-timerangepicker.js","sources":["../../../projects/mis-components/timerangepicker/timerangepicker.component.ts","../../../projects/mis-components/timerangepicker/timerangepicker.module.ts","../../../projects/mis-components/timerangepicker/mis-crystal-design-system-timerangepicker.ts"],"sourcesContent":["import { Component, Input, ChangeDetectorRef, Output, EventEmitter } from \"@angular/core\";\nimport * as moment from \"moment-timezone\";\nimport { ITimeRange, ITime } from \"./timerange.namespace\";\n\n@Component({\n  selector: \"mis-timerangepicker\",\n  templateUrl: \"./timerangepicker.component.html\",\n  styleUrls: [\"./timerangepicker.component.scss\"]\n})\nexport class TimeRangePickerComponent {\n  @Input() inputWidth :string = '100px';\n  @Input() dropdownWidth?: string;\n  @Input() height: string = '46px';\n  @Input() timezone: string = \"Asia/Kolkata\";\n  @Input() startDateEpoch: number = moment().tz(this.timezone).valueOf();\n  @Input() endDateEpoch: number = moment().tz(this.timezone).valueOf();\n  @Input() clockFormat: number = 12;\n  @Input() interval: number = 15;\n  @Output() timeRangeEmitter = new EventEmitter<ITimeRange>();\n\n  timeFormat!: string;\n  firstIntervalForStartPicker: number = moment().valueOf();\n  firstIntervalForEndPicker: number = moment().valueOf();\n  startTime!: ITime;\n  endTime!: ITime;\n  rangeValidity: boolean = true;\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  ngOnInit() {\n    console.log(this.timezone);\n    this.timeFormat = this.clockFormat === 12 ? \"hh:mm a\" : \"HH:mm\";\n    this.setFirstIntervals();\n  }\n\n  ngOnChanges(){\n    moment.tz.setDefault(this.timezone);\n  }\n\n  // calculate the first interval of the picker\n  setFirstIntervals(): void {\n    const startDate = moment(this.startDateEpoch).format(\"DD-MM-YYYY\");\n    const endDate = moment(this.endDateEpoch).format(\"DD-MM-YYYY\");\n    const minutes = moment().minutes();\n    const offset = this.interval - (minutes % this.interval);\n\n    // first interval for the start picker will always be the one closest to the current time\n    this.firstIntervalForStartPicker = moment().add(offset, \"m\").valueOf();\n    this.startTime = {\n      valid: true,\n      time: moment().add(offset, \"m\").format(this.timeFormat)\n    };\n\n    // for the end picker if the startDate and the endDate is same\n    // the first interval is set one interval ahead of the first interval for start picker\n    // else if the dates are different we set it to the start of the day\n    if (startDate === endDate) {\n      this.firstIntervalForEndPicker = moment().add(offset, \"m\").add(this.interval, \"m\").valueOf();\n    } else {\n      this.firstIntervalForEndPicker = moment().startOf(\"d\").valueOf();\n    }\n\n    this.endTime = {\n      valid: true,\n      time: moment(this.firstIntervalForEndPicker).format(this.timeFormat)\n    }\n  }\n\n  emitTimeRange(data: ITimeRange): void {\n    this.timeRangeEmitter.emit(data);\n  }\n\n  //handlers catch the emitted values and run validation\n  startPickerHandler(time: ITime): void {\n    this.startTime = time;\n\n    // if the start time changes and the start date is the same as the end date\n    // and the start time >=  end time\n    // update the first interval of end picker according to the time set in start picker\n    const startDate = moment(this.startDateEpoch).format(\"DD-MM-YYYY\");\n    const endDate = moment(this.endDateEpoch).format(\"DD-MM-YYYY\");\n\n    if (startDate === endDate) {\n      let minutes = moment(this.startTime.time, this.timeFormat).minutes();\n      let offset = this.interval - (minutes % this.interval);\n      this.firstIntervalForEndPicker = moment(`${startDate} ${this.startTime.time}`, `'DD-MM-YYYY' ${this.timeFormat}`).add(offset, \"m\").valueOf();\n    }\n  }\n\n  endPickerHandler(time: ITime): void {\n    this.endTime = time;\n\n    const validity = this.checkTimeValidity(this.startTime.time.trim()) && this.checkTimeValidity(this.endTime.time.trim());\n    this.emitTimeRange({\n      valid: validity && this.rangeValidity,\n      startTime: this.startTime.time,\n      endTime: this.endTime.time\n    });\n\n    this.rangeValidation();\n  }\n\n  checkTimeValidity(time: string): boolean {\n    const RE12 = /^(([0-9][1-9]|1[0-2]):([0-5][0-9])( )?(am|pm|AM|PM))$/i;\n    const RE24 = /^([01][0-9]|2[0-3]):[0-5][0-9]$/;\n    const RE = this.clockFormat === 12 ? RE12 : RE24;\n    const flag = time.match(RE) ? true : false;\n    return flag;\n  }\n\n  // validates end picker's input according to the start picker's input\n  rangeValidation() {\n    const startDate = moment(this.startDateEpoch).format(\"DD-MM-YYYY\");\n    const endDate = moment(this.endDateEpoch).format(\"DD-MM-YYYY\");\n    const validity = this.checkTimeValidity(this.startTime.time.trim()) && this.checkTimeValidity(this.endTime.time.trim());\n    if (validity && startDate === endDate) {\n      if (this.endTime.time === moment().endOf(\"d\").add(1, \"m\").format(this.timeFormat)) {\n        this.endTime.time = moment().endOf(\"d\").format(this.timeFormat);\n      }\n\n      const startMoment = moment(this.startTime.time, this.timeFormat);\n      const endMoment = moment(this.endTime.time, this.timeFormat);\n      this.rangeValidity = endMoment.diff(startMoment, \"m\") >= 1 ? true : false;\n      this.cdr.detectChanges();\n    }\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { TimeRangePickerComponent } from \"./timerangepicker.component\";\nimport { TimePickerModule } from \"mis-crystal-design-system/timepicker\";\n\n@NgModule({\n  declarations: [TimeRangePickerComponent],\n  imports: [CommonModule, FormsModule, TimePickerModule],\n  exports: [TimeRangePickerComponent]\n})\nexport class TimeRangePickerModule {\n  static forRoot(): ModuleWithProviders<TimeRangePickerModule> {\n    return { ngModule: TimeRangePickerModule, providers: [] };\n  }\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["moment.tz"],"mappings":"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"}

package/package.json

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

package/phone-input/mis-crystal-design-system-phone-input.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PhoneInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-phone-input","template":"<div class=\"main-container-phone\">\n  <mis-dropdown [height]=\"dropdownHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\" [selectedItem]=\"dropdownSelectedItem\" [label]=\"label\" [searchEnabled]=\"false\" [multiLine]=\"false\" (onChange)=\"handleDropdownSelection($event)\"></mis-dropdown>\n  <div class=\"details-field\">\n    <div class=\"input-box\">\n      <input\n      [ngStyle]=\"{'height': inputHeight }\"\n        class=\"black-text\"\n        [placeholder]=\"inputPlaceholder\"\n        [formControl]=\"inputFormControl\" \n        type=\"number\"\n      />\n    </div>\n  </div>\n</div>\n","styles":[".main-container-phone{display:flex;border:1px solid #e0e0e0;border-radius:6px}.details-field label{display:inline-block;min-width:224px;margin-right:24px}.details-field .input-box{width:100%}.details-field .input-box input{width:100%;height:32px}input{padding:10px 16px;border:none;outline:none;width:100%;height:auto;border-radius:6px}.black-text,input{color:#181f33;line-height:24px;font-size:16px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.main-container-phone ::ng-deep .item{padding:8px!important}.main-container-phone ::ng-deep .dropdown{border:unset!important}"]}]}],"members":{"dropdownHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"dropdownWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"inputHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"dropdownData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"dropdownSelectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"inputPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"inputFormControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"onDropdownSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"handleDropdownSelection":[{"__symbolic":"method"}]}},"PhoneInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"PhoneInputComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":12,"character":25},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":12,"character":46},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":12,"character":59},{"__symbolic":"reference","module":"@angular/cdk-experimental/scrolling","name":"ScrollingModule","line":12,"character":74},{"__symbolic":"reference","module":"mis-crystal-design-system/dropdown","name":"DropdownModule","line":12,"character":91}],"exports":[{"__symbolic":"reference","name":"PhoneInputComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"PhoneInputModule"},"providers":[]}}}}},"origins":{"PhoneInputComponent":"./phone-input.component","PhoneInputModule":"./phone-input.module"},"importAs":"mis-crystal-design-system/phone-input"}
+{"__symbolic":"module","version":4,"metadata":{"PhoneInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-phone-input","template":"<div class=\"main-container-phone\">\n  <mis-dropdown [height]=\"dropdownHeight\" [dropdownListWidth]=\"dropdownListWidth\"[dropdownListHeight]=\"dropdownListHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\" [selectedItem]=\"dropdownSelectedItem\" [label]=\"label\" [searchEnabled]=\"false\" [multiLine]=\"false\" (onChange)=\"handleDropdownSelection($event)\"></mis-dropdown>\n  <div class=\"details-field\">\n    <div class=\"input-box\">\n      <input\n      [ngStyle]=\"{'height': inputHeight }\"\n        class=\"black-text\"\n        [placeholder]=\"inputPlaceholder\"\n        [formControl]=\"inputFormControl\" \n        type=\"number\"\n      />\n    </div>\n  </div>\n</div>\n","styles":[".main-container-phone{display:flex;border:1px solid #e0e0e0;border-radius:6px}.details-field label{display:inline-block;min-width:224px;margin-right:24px}.details-field .input-box{width:100%}.details-field .input-box input{width:100%;height:32px}input{padding:10px 16px;border:none;outline:none;width:100%;height:auto;border-radius:6px}.black-text,input{color:#181f33;line-height:24px;font-size:16px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.main-container-phone ::ng-deep .item{padding:8px!important}.main-container-phone ::ng-deep .dropdown{border:unset!important}"]}]}],"members":{"dropdownHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"dropdownWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"inputHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"dropdownData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"dropdownSelectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"inputPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"inputFormControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"onDropdownSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"handleDropdownSelection":[{"__symbolic":"method"}]}},"PhoneInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"PhoneInputComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":12,"character":25},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":12,"character":46},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":12,"character":59},{"__symbolic":"reference","module":"@angular/cdk-experimental/scrolling","name":"ScrollingModule","line":12,"character":74},{"__symbolic":"reference","module":"mis-crystal-design-system/dropdown","name":"DropdownModule","line":12,"character":91}],"exports":[{"__symbolic":"reference","name":"PhoneInputComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"PhoneInputModule"},"providers":[]}}}}},"origins":{"PhoneInputComponent":"./phone-input.component","PhoneInputModule":"./phone-input.module"},"importAs":"mis-crystal-design-system/phone-input"}

package/phone-input/phone-input.component.d.ts

@@ -11,6 +11,8 @@ export declare class PhoneInputComponent implements OnInit {
     inputPlaceholder: string;
     inputFormControl: FormControl;
     onDropdownSelection: EventEmitter<any>;
+    dropdownListWidth: any;
+    dropdownListHeight: any;
     constructor();
     ngOnInit(): void;
     handleDropdownSelection(item: DropdownItem): void;

package/timepicker/index.d.ts

@@ -0,0 +1 @@
+export * from "./public_api";

package/timepicker/mis-crystal-design-system-timepicker.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+export { TimepickerDirective as ɵa } from './timepicker.directive';

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

@@ -0,0 +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]=\"isInvalid || !rangeValidity\"\n    [text]=\"'Invalid Time'\"\n    [position]=\"'top'\"\n    [showOnHover]=\"false\"\n    #input\n    cdkOverlayOrigin\n    class=\"p\"\n  />\n\n  <ng-template #dropdownContainer libDropdownScroll libTimepicker [originEl]=\"input\" [openStatus]=\"openStatus\" (statusEmitter)=\"closeDropdown($event)\">\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:16px;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":20,"character":3}}]}],"timezone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"inputWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"dropdownWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"interval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"dateAsEpoch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"firstInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"rangeValidity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"timeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":33,"character":3},"arguments":["input",{"static":true}]}]}],"timepickerDirective":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":34,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}],"timeIntervalRefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":37,"character":3},"arguments":["timeInterval"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"emitTime":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"checkTimeValidity":[{"__symbolic":"method"}],"onTimeSelect":[{"__symbolic":"method"}],"onTimeChange":[{"__symbolic":"method"}],"calculateClosestInterval":[{"__symbolic":"method"}],"populateDropdown":[{"__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/package.json

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

package/timepicker/public_api.d.ts

@@ -0,0 +1,2 @@
+export { TimePickerComponent } from "./timepicker.component";
+export { TimePickerModule } from "./timepicker.module";

package/timepicker/time.namespace.d.ts

@@ -0,0 +1,4 @@
+export interface ITime {
+    valid: boolean;
+    time: string;
+}