@candidosales/material-time-picker/fesm2022/candidosales-material-time-picker.mjs

Time Picker for Angular

import * as i0 from '@angular/core';
import { EventEmitter, Input, Output, Component, Inject, ViewEncapsulation } from '@angular/core';
import { NgStyle, NgClass } from '@angular/common';
import { MatToolbar } from '@angular/material/toolbar';
import { MatMiniFabButton } from '@angular/material/button';
import * as i1 from '@angular/cdk/layout';
import { Breakpoints } from '@angular/cdk/layout';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i1$1 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogContent } from '@angular/material/dialog';
import { MatIcon } from '@angular/material/icon';
import { MatInput } from '@angular/material/input';
import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';

// Current type to show
var CLOCK_TYPE;
(function (CLOCK_TYPE) {
    CLOCK_TYPE[CLOCK_TYPE["HOURS"] = 1] = "HOURS";
    CLOCK_TYPE[CLOCK_TYPE["MINUTES"] = 2] = "MINUTES";
})(CLOCK_TYPE || (CLOCK_TYPE = {}));
class WClockComponent {
    constructor() {
        this.userTimeChange = new EventEmitter();
        this.viewChange = new EventEmitter();
        this.steps = new Array();
    }
    ngOnChanges() {
        this.setupUI();
    }
    setupUI() {
        this.steps = new Array();
        switch (this.currentView) {
            case CLOCK_TYPE.HOURS:
                for (let i = 1; i <= this.userTime.format; i++) {
                    this.steps.push(i);
                    this.selectedTimePart = this.userTime.hour || 0;
                    if (this.selectedTimePart > this.userTime.format) {
                        this.selectedTimePart -= this.userTime.format;
                    }
                }
                break;
            case CLOCK_TYPE.MINUTES:
                for (let i = 5; i <= 55; i += 5) {
                    this.steps.push(i);
                }
                this.steps.push(0);
                this.selectedTimePart = this.userTime.minute || 0;
                break;
        }
    }
    getPointerStyle() {
        let divider = 1;
        switch (this.currentView) {
            case CLOCK_TYPE.HOURS:
                divider = this.userTime.format;
                break;
            case CLOCK_TYPE.MINUTES:
                divider = 60;
                break;
        }
        let degrees = 0;
        if (this.currentView === CLOCK_TYPE.HOURS) {
            degrees = Math.round(this.userTime.hour * (360 / divider)) - 180;
        }
        else {
            degrees = Math.round(this.userTime.minute * (360 / divider)) - 180;
        }
        const style = {
            '-webkit-transform': 'rotate(' + degrees + 'deg)',
            '-ms-transform': 'rotate(' + degrees + 'deg)',
            transform: 'rotate(' + degrees + 'deg)'
        };
        return style;
    }
    getTimeValueClass(step, index) {
        if (this.currentView === CLOCK_TYPE.HOURS) {
            this.STEP_DEG = 360 / this.userTime.format;
        }
        else {
            this.STEP_DEG = 360 / 12;
        }
        let classes = 'w-clock-step w-clock-deg' + this.STEP_DEG * (index + 1);
        if (this.selectedTimePart === step) {
            classes += ' mat-primary';
        }
        return classes;
    }
    changeTimeValue(step) {
        if (this.currentView === CLOCK_TYPE.HOURS) {
            this.userTime.hour = step;
            // auto switch to minutes
            this.viewChange.emit(CLOCK_TYPE.MINUTES);
        }
        else {
            this.userTime.minute = step;
            // auto switch to hours
            this.viewChange.emit(CLOCK_TYPE.HOURS);
        }
        this.userTimeChange.emit(this.userTime);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: WClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: WClockComponent, isStandalone: true, selector: "w-clock", inputs: { userTime: "userTime", currentView: "currentView", color: "color" }, outputs: { userTimeChange: "userTimeChange", viewChange: "viewChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-row justify-content-center align-items-center w-clock-wrapper\">\n  <div class=\"w-clock\">\n    <div class=\"w-clock-container\">\n\n      <!-- Clock center -->\n      <button  mat-mini-fab [color]=\"color\" class=\"w-clock-center\"></button>\n\n      <!-- Clock hand -->\n      <mat-toolbar [ngStyle]=\"getPointerStyle()\" [color]=\"color\" class=\"w-pointer\">\n        <button mat-mini-fab [color]=\"color\" class=\"w-clock-selected\"></button>\n      </mat-toolbar>\n\n      <!-- Hour / Minute number faces -->\n      @for (step of steps; track step; let i = $index) {\n        <div [class]=\"getTimeValueClass(step, i)\" >\n          <button mat-mini-fab\n            [color]=\"selectedTimePart === step ? color : ''\"\n            (click)=\"changeTimeValue(step)\">\n            {{ step }}\n          </button>\n        </div>\n      }\n\n    </div>\n  </div>\n</div>", styles: [".d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.align-items-end{align-items:end}@media(min-width:768px){.flex-md-row{flex-direction:row}.flex-md-column{flex-direction:column}}.w-clock-wrapper{height:100%;padding:0 24px}.w-clock-wrapper .w-clock{width:200px;height:200px;border-radius:50%;cursor:pointer;padding:24px;background:#ededed}.w-clock-wrapper .w-clock .w-clock-container{width:100%;height:100%;position:relative;display:block}.w-clock-wrapper .w-clock .w-clock-center{height:6px;width:6px;position:absolute;inset:0;margin:auto;border-radius:50%}.w-clock-wrapper .w-clock .w-pointer{box-shadow:none;width:1px;height:50%;position:absolute;left:0;right:0;bottom:0;margin:0 auto;padding:0;transform-origin:top center;transition:transform .2s;z-index:0;pointer-events:none}.w-clock-wrapper .w-clock .w-clock-step{display:block;position:absolute;transform:translate(-50%,-50%);transition:transform .2s}.w-clock-wrapper .w-clock .w-clock-step .mat-mdc-mini-fab{box-shadow:none;background-color:transparent}.w-clock-wrapper .w-clock .w-clock-selected{position:absolute;bottom:-19px;left:-19px;min-width:0;min-height:0;pointer-events:none;box-shadow:none;cursor:none}.w-clock-deg0{top:0%;left:50%}.w-clock-deg15{top:1.70370869%;left:62.94095226%}.w-clock-deg30{top:6.69872981%;left:75%}.w-clock-deg45{top:14.64466094%;left:85.35533905%}.w-clock-deg60{top:25%;left:93.30127019%}.w-clock-deg75{top:37.05904774%;left:98.29629131%}.w-clock-deg90{top:50%;left:100%}.w-clock-deg105{top:62.94095226%;left:98.29629131%}.w-clock-deg120{top:75%;left:93.30127019%}.w-clock-deg135{top:85.35533906%;left:85.35533906%}.w-clock-deg150{top:93.30127019%;left:75%}.w-clock-deg165{top:98.29629131%;left:62.94095226%}.w-clock-deg180{top:100%;left:50%}.w-clock-deg195{top:98.29629131%;left:37.05904774%}.w-clock-deg210{top:93.30127019%;left:25%}.w-clock-deg225{top:85.35533906%;left:14.64466094%}.w-clock-deg240{top:75%;left:6.69872981%}.w-clock-deg255{top:62.94095226%;left:1.703708686%}.w-clock-deg270{top:50%;left:0%}.w-clock-deg285{top:37.05904774%;left:1.703708686%}.w-clock-deg300{top:25%;left:6.69872981%}.w-clock-deg315{top:14.64466094%;left:14.64466094%}.w-clock-deg330{top:6.69872981%;left:25%}.w-clock-deg345{top:1.703708686%;left:37.05904774%}.w-clock-deg360{top:0%;left:50%}\n"], dependencies: [{ kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: WClockComponent, decorators: [{
            type: Component,
            args: [{ selector: 'w-clock', imports: [MatMiniFabButton, MatToolbar, NgStyle], template: "<div class=\"d-flex flex-row justify-content-center align-items-center w-clock-wrapper\">\n  <div class=\"w-clock\">\n    <div class=\"w-clock-container\">\n\n      <!-- Clock center -->\n      <button  mat-mini-fab [color]=\"color\" class=\"w-clock-center\"></button>\n\n      <!-- Clock hand -->\n      <mat-toolbar [ngStyle]=\"getPointerStyle()\" [color]=\"color\" class=\"w-pointer\">\n        <button mat-mini-fab [color]=\"color\" class=\"w-clock-selected\"></button>\n      </mat-toolbar>\n\n      <!-- Hour / Minute number faces -->\n      @for (step of steps; track step; let i = $index) {\n        <div [class]=\"getTimeValueClass(step, i)\" >\n          <button mat-mini-fab\n            [color]=\"selectedTimePart === step ? color : ''\"\n            (click)=\"changeTimeValue(step)\">\n            {{ step }}\n          </button>\n        </div>\n      }\n\n    </div>\n  </div>\n</div>", styles: [".d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.align-items-end{align-items:end}@media(min-width:768px){.flex-md-row{flex-direction:row}.flex-md-column{flex-direction:column}}.w-clock-wrapper{height:100%;padding:0 24px}.w-clock-wrapper .w-clock{width:200px;height:200px;border-radius:50%;cursor:pointer;padding:24px;background:#ededed}.w-clock-wrapper .w-clock .w-clock-container{width:100%;height:100%;position:relative;display:block}.w-clock-wrapper .w-clock .w-clock-center{height:6px;width:6px;position:absolute;inset:0;margin:auto;border-radius:50%}.w-clock-wrapper .w-clock .w-pointer{box-shadow:none;width:1px;height:50%;position:absolute;left:0;right:0;bottom:0;margin:0 auto;padding:0;transform-origin:top center;transition:transform .2s;z-index:0;pointer-events:none}.w-clock-wrapper .w-clock .w-clock-step{display:block;position:absolute;transform:translate(-50%,-50%);transition:transform .2s}.w-clock-wrapper .w-clock .w-clock-step .mat-mdc-mini-fab{box-shadow:none;background-color:transparent}.w-clock-wrapper .w-clock .w-clock-selected{position:absolute;bottom:-19px;left:-19px;min-width:0;min-height:0;pointer-events:none;box-shadow:none;cursor:none}.w-clock-deg0{top:0%;left:50%}.w-clock-deg15{top:1.70370869%;left:62.94095226%}.w-clock-deg30{top:6.69872981%;left:75%}.w-clock-deg45{top:14.64466094%;left:85.35533905%}.w-clock-deg60{top:25%;left:93.30127019%}.w-clock-deg75{top:37.05904774%;left:98.29629131%}.w-clock-deg90{top:50%;left:100%}.w-clock-deg105{top:62.94095226%;left:98.29629131%}.w-clock-deg120{top:75%;left:93.30127019%}.w-clock-deg135{top:85.35533906%;left:85.35533906%}.w-clock-deg150{top:93.30127019%;left:75%}.w-clock-deg165{top:98.29629131%;left:62.94095226%}.w-clock-deg180{top:100%;left:50%}.w-clock-deg195{top:98.29629131%;left:37.05904774%}.w-clock-deg210{top:93.30127019%;left:25%}.w-clock-deg225{top:85.35533906%;left:14.64466094%}.w-clock-deg240{top:75%;left:6.69872981%}.w-clock-deg255{top:62.94095226%;left:1.703708686%}.w-clock-deg270{top:50%;left:0%}.w-clock-deg285{top:37.05904774%;left:1.703708686%}.w-clock-deg300{top:25%;left:6.69872981%}.w-clock-deg315{top:14.64466094%;left:14.64466094%}.w-clock-deg330{top:6.69872981%;left:25%}.w-clock-deg345{top:1.703708686%;left:37.05904774%}.w-clock-deg360{top:0%;left:50%}\n"] }]
        }], propDecorators: { userTime: [{
                type: Input
            }], userTimeChange: [{
                type: Output
            }], currentView: [{
                type: Input
            }], viewChange: [{
                type: Output
            }], color: [{
                type: Input
            }] } });

class Utils {
    static formatHour(format, hour) {
        if (format === 24) {
            if (hour === 24) {
                return '00';
            }
            else if (hour < 10) {
                return '0' + String(hour);
            }
        }
        return String(hour);
    }
    static formatMinute(minute) {
        if (minute === 0) {
            return '00';
        }
        else if (minute < 10) {
            return '0' + String(minute);
        }
        else {
            return String(minute);
        }
    }
}

class WTimeComponent {
    constructor(breakpointObserver) {
        this.destroyed = new Subject();
        this.userTimeChange = new EventEmitter();
        this.onRevert = new EventEmitter();
        this.onSubmit = new EventEmitter();
        this.VIEW_HOURS = CLOCK_TYPE.HOURS;
        this.VIEW_MINUTES = CLOCK_TYPE.MINUTES;
        this.currentView = this.VIEW_HOURS;
        this.currentClassScreenSize = '';
        breakpointObserver
            .observe([
            Breakpoints.XSmall,
            Breakpoints.Small,
        ])
            .pipe(takeUntil(this.destroyed))
            .subscribe(result => {
            for (const query of Object.keys(result.breakpoints)) {
                if (result.breakpoints[query]) {
                    this.currentClassScreenSize = 'vertical-time';
                }
                else
                    this.currentClassScreenSize = '';
            }
        });
    }
    ngOnInit() {
        if (!this.userTime) {
            this.userTime = {
                hour: 6,
                minute: 0,
                meriden: 'PM',
                format: 12
            };
        }
        if (!this.revertLabel) {
            this.revertLabel = 'Cancel';
        }
        if (!this.submitLabel) {
            this.submitLabel = 'Okay';
        }
    }
    formatHour(format, hour) {
        return Utils.formatHour(format, hour);
    }
    formatMinute(minute) {
        return Utils.formatMinute(minute);
    }
    setCurrentView(type) {
        this.currentView = type;
    }
    setMeridien(m) {
        this.userTime.meriden = m;
    }
    revert() {
        this.onRevert.emit();
    }
    submit() {
        this.onSubmit.emit(this.userTime);
    }
    emituserTimeChange(event) {
        this.userTimeChange.emit(this.userTime);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: WTimeComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: WTimeComponent, isStandalone: true, selector: "w-time", inputs: { userTime: "userTime", revertLabel: "revertLabel", submitLabel: "submitLabel", color: "color" }, outputs: { userTimeChange: "userTimeChange", onRevert: "onRevert", onSubmit: "onSubmit" }, ngImport: i0, template: "<div class=\"d-flex flex-row flex-md-column justify-content-center align-items-center w-time\" [ngClass]=\"currentClassScreenSize\">\n  <mat-toolbar class=\"d-flex flex-column flex-md-row justify-content-center align-items-center w-timepicker-time-container\" [color]=\"color\">\n\n    <div class=\"w-timepicker-selected-time\">\n      <span [class]=\"currentView === VIEW_HOURS ? 'active': ''\" (click)=\"setCurrentView(VIEW_HOURS)\">{{ formatHour(userTime.format, userTime.hour) }}:</span>\n      <span [class]=\"currentView === VIEW_MINUTES ? 'active': ''\" (click)=\"setCurrentView(VIEW_MINUTES)\">{{ formatMinute(userTime.minute) }}</span>\n    </div>\n    @if (userTime.format === 12) {\n      <div class=\"d-flex flex-column justify-content-center align-items-center w-timepicker-selected-ampm\">\n        <span (click)=\"setMeridien('AM')\" [class]=\"userTime.meriden === 'AM' ? 'active' : ''\">AM</span>\n        <span (click)=\"setMeridien('PM')\" [class]=\"userTime.meriden === 'PM' ? 'active' : ''\">PM</span>\n      </div>\n    }\n\n  </mat-toolbar>\n\n  <div class=\"d-flex flex-column flex-md-row justify-content-between align-items-center w-time-content\">\n    <w-clock [color]=\"color\" class=\"w-animation-zoom\" [userTime]=\"userTime\" (userTimeChange)=\"emituserTimeChange($event)\" [(currentView)]=\"currentView\" (viewChange)=\"setCurrentView($event)\"></w-clock>\n\n    <div class=\"d-flex align-items-end\">\n      <button class=\"btn btn-sm\" (click)=\"revert()\">{{revertLabel}}</button>\n      <button class=\"btn btn-sm btn-{{color}}\" (click)=\"submit()\">{{submitLabel}}</button>\n    </div>\n  </div>\n</div>\n", styles: [".d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.align-items-end{align-items:end}@media(min-width:768px){.flex-md-row{flex-direction:row}.flex-md-column{flex-direction:column}}:host{display:block}.w-time{max-height:100%;min-height:350px;height:350px}.w-time .w-timepicker-time-container{padding:15px;min-width:160px;height:100%}.w-time .w-timepicker-selected-time{font-size:3.5rem;font-weight:400;display:flex}.w-time .w-timepicker-selected-ampm{font-size:1rem;line-height:1.3rem;padding-top:2rem}.w-time .w-time-content{width:100%;height:100%;padding:6px}.w-time .w-time-content w-clock{padding:12px 0;height:calc(100% - 58px)}.w-time.vertical-time{height:auto}.w-time.vertical-time .w-timepicker-time-container{min-width:auto;width:100%;height:100px}.w-time.vertical-time .w-timepicker-time-container .w-timepicker-selected-ampm{padding:0 12px}.w-timepicker-selected-time>span,.w-timepicker-selected-ampm>span{outline:0;opacity:.5}.w-timepicker-selected-time>span:not(.active),.w-timepicker-selected-ampm>span:not(.active){cursor:pointer}.w-timepicker-selected-time>span.active,.w-timepicker-selected-ampm>span.active{opacity:1}.w-animate-next{opacity:0;-webkit-transform:translate3d(50%,0,1px);transform:translate3d(50%,0,1px)}.w-animate-next-remove{-webkit-transition:all .5s cubic-bezier(.35,0,.25,1);transition:all .5s cubic-bezier(.35,0,.25,1);opacity:0;-webkit-transform:translate3d(50%,0,1px);transform:translate3d(50%,0,1px)}.w-animate-next-remove-active{opacity:1;-webkit-transform:translate3d(0,0,1px);transform:translateZ(1px)}.w-animate-prev{opacity:0;-webkit-transform:translate3d(-50%,0,1px);transform:translate3d(-50%,0,1px)}.w-animate-prev-remove{-webkit-transition:all .3s cubic-bezier(.35,0,.25,1);transition:all .3s cubic-bezier(.35,0,.25,1);opacity:0;-webkit-transform:translate3d(-50%,0,1px);transform:translate3d(-50%,0,1px)}.w-animate-prev-remove-active{opacity:1;-webkit-transform:translate3d(0,0,1px);transform:translateZ(1px)}@-webkit-keyframes w-animation-bounce{0%{opacity:0;-webkit-transform:scale(.95);transform:scale(.95)}70%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes w-animation-bounce{0%{opacity:0;-webkit-transform:scale(.95);transform:scale(.95)}70%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}to{-webkit-transform:scale(1);transform:scale(1)}}.w-animation-zoom.ng-enter{-webkit-transition:all .3s cubic-bezier(.35,0,.25,1);transition:all .3s cubic-bezier(.35,0,.25,1);-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:w-animation-bounce;animation-name:w-animation-bounce}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WClockComponent, selector: "w-clock", inputs: ["userTime", "currentView", "color"], outputs: ["userTimeChange", "viewChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: WTimeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'w-time', imports: [NgClass, MatToolbar, WClockComponent], template: "<div class=\"d-flex flex-row flex-md-column justify-content-center align-items-center w-time\" [ngClass]=\"currentClassScreenSize\">\n  <mat-toolbar class=\"d-flex flex-column flex-md-row justify-content-center align-items-center w-timepicker-time-container\" [color]=\"color\">\n\n    <div class=\"w-timepicker-selected-time\">\n      <span [class]=\"currentView === VIEW_HOURS ? 'active': ''\" (click)=\"setCurrentView(VIEW_HOURS)\">{{ formatHour(userTime.format, userTime.hour) }}:</span>\n      <span [class]=\"currentView === VIEW_MINUTES ? 'active': ''\" (click)=\"setCurrentView(VIEW_MINUTES)\">{{ formatMinute(userTime.minute) }}</span>\n    </div>\n    @if (userTime.format === 12) {\n      <div class=\"d-flex flex-column justify-content-center align-items-center w-timepicker-selected-ampm\">\n        <span (click)=\"setMeridien('AM')\" [class]=\"userTime.meriden === 'AM' ? 'active' : ''\">AM</span>\n        <span (click)=\"setMeridien('PM')\" [class]=\"userTime.meriden === 'PM' ? 'active' : ''\">PM</span>\n      </div>\n    }\n\n  </mat-toolbar>\n\n  <div class=\"d-flex flex-column flex-md-row justify-content-between align-items-center w-time-content\">\n    <w-clock [color]=\"color\" class=\"w-animation-zoom\" [userTime]=\"userTime\" (userTimeChange)=\"emituserTimeChange($event)\" [(currentView)]=\"currentView\" (viewChange)=\"setCurrentView($event)\"></w-clock>\n\n    <div class=\"d-flex align-items-end\">\n      <button class=\"btn btn-sm\" (click)=\"revert()\">{{revertLabel}}</button>\n      <button class=\"btn btn-sm btn-{{color}}\" (click)=\"submit()\">{{submitLabel}}</button>\n    </div>\n  </div>\n</div>\n", styles: [".d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.align-items-end{align-items:end}@media(min-width:768px){.flex-md-row{flex-direction:row}.flex-md-column{flex-direction:column}}:host{display:block}.w-time{max-height:100%;min-height:350px;height:350px}.w-time .w-timepicker-time-container{padding:15px;min-width:160px;height:100%}.w-time .w-timepicker-selected-time{font-size:3.5rem;font-weight:400;display:flex}.w-time .w-timepicker-selected-ampm{font-size:1rem;line-height:1.3rem;padding-top:2rem}.w-time .w-time-content{width:100%;height:100%;padding:6px}.w-time .w-time-content w-clock{padding:12px 0;height:calc(100% - 58px)}.w-time.vertical-time{height:auto}.w-time.vertical-time .w-timepicker-time-container{min-width:auto;width:100%;height:100px}.w-time.vertical-time .w-timepicker-time-container .w-timepicker-selected-ampm{padding:0 12px}.w-timepicker-selected-time>span,.w-timepicker-selected-ampm>span{outline:0;opacity:.5}.w-timepicker-selected-time>span:not(.active),.w-timepicker-selected-ampm>span:not(.active){cursor:pointer}.w-timepicker-selected-time>span.active,.w-timepicker-selected-ampm>span.active{opacity:1}.w-animate-next{opacity:0;-webkit-transform:translate3d(50%,0,1px);transform:translate3d(50%,0,1px)}.w-animate-next-remove{-webkit-transition:all .5s cubic-bezier(.35,0,.25,1);transition:all .5s cubic-bezier(.35,0,.25,1);opacity:0;-webkit-transform:translate3d(50%,0,1px);transform:translate3d(50%,0,1px)}.w-animate-next-remove-active{opacity:1;-webkit-transform:translate3d(0,0,1px);transform:translateZ(1px)}.w-animate-prev{opacity:0;-webkit-transform:translate3d(-50%,0,1px);transform:translate3d(-50%,0,1px)}.w-animate-prev-remove{-webkit-transition:all .3s cubic-bezier(.35,0,.25,1);transition:all .3s cubic-bezier(.35,0,.25,1);opacity:0;-webkit-transform:translate3d(-50%,0,1px);transform:translate3d(-50%,0,1px)}.w-animate-prev-remove-active{opacity:1;-webkit-transform:translate3d(0,0,1px);transform:translateZ(1px)}@-webkit-keyframes w-animation-bounce{0%{opacity:0;-webkit-transform:scale(.95);transform:scale(.95)}70%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes w-animation-bounce{0%{opacity:0;-webkit-transform:scale(.95);transform:scale(.95)}70%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}to{-webkit-transform:scale(1);transform:scale(1)}}.w-animation-zoom.ng-enter{-webkit-transition:all .3s cubic-bezier(.35,0,.25,1);transition:all .3s cubic-bezier(.35,0,.25,1);-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:w-animation-bounce;animation-name:w-animation-bounce}\n"] }]
        }], ctorParameters: () => [{ type: i1.BreakpointObserver }], propDecorators: { userTime: [{
                type: Input
            }], userTimeChange: [{
                type: Output
            }], revertLabel: [{
                type: Input
            }], submitLabel: [{
                type: Input
            }], onRevert: [{
                type: Output
            }], onSubmit: [{
                type: Output
            }], color: [{
                type: Input
            }] } });

class WTimeDialogComponent {
    constructor(dialogRef, data) {
        this.dialogRef = dialogRef;
        this.data = data;
        this.VIEW_HOURS = CLOCK_TYPE.HOURS;
        this.VIEW_MINUTES = CLOCK_TYPE.MINUTES;
        this.currentView = this.VIEW_HOURS;
        this.userTime = this.data.time;
        this.color = this.data.color;
    }
    revert() {
        this.dialogRef.close(-1);
    }
    submit() {
        this.dialogRef.close(this.userTime);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: WTimeDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: WTimeDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "\n<div mat-dialog-content class=\"w-timepicker-dialog\">\n    <w-time [color]=\"color\" [userTime]=\"userTime\" (onRevert)=\"revert()\" (onSubmit)=\"submit()\" [revertLabel]=\"data.revertLabel\" [submitLabel]=\"data.submitLabel\"></w-time>\n</div>\n\n", styles: [".w-timepicker-dialog{padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: WTimeComponent, selector: "w-time", inputs: ["userTime", "revertLabel", "submitLabel", "color"], outputs: ["userTimeChange", "onRevert", "onSubmit"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: WTimeDialogComponent, decorators: [{
            type: Component,
            args: [{ imports: [MatDialogContent, WTimeComponent], template: "\n<div mat-dialog-content class=\"w-timepicker-dialog\">\n    <w-time [color]=\"color\" [userTime]=\"userTime\" (onRevert)=\"revert()\" (onSubmit)=\"submit()\" [revertLabel]=\"data.revertLabel\" [submitLabel]=\"data.submitLabel\"></w-time>\n</div>\n\n", styles: [".w-timepicker-dialog{padding:0;margin:0}\n"] }]
        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }] });

class MaterialTimePickerComponent {
    constructor(dialog) {
        this.dialog = dialog;
        this.label = "Hour";
        this.appearance = "fill";
        this.change = new EventEmitter();
    }
    ngOnInit() {
        if (!this.userTime) {
            this.userTime = {
                hour: 0,
                minute: 0,
                meriden: "PM",
                format: 24,
            };
        }
    }
    time() {
        if (!this.userTime) {
            return "";
        }
        let meriden = `${this.userTime.meriden}`;
        if (this.userTime.format === 24) {
            meriden = "";
        }
        let hour = `${this.userTime.hour}`;
        if (this.userTime.hour === 24) {
            hour = "00";
        }
        if (this.userTime.minute === 0) {
            return `${hour}:00 ${meriden}`;
        }
        else if (this.userTime.minute < 10) {
            const tt = "0" + String(this.userTime.minute);
            return `${hour}:${tt} ${meriden}`;
        }
        else {
            return `${hour}:${this.userTime.minute} ${meriden}`;
        }
    }
    showPicker() {
        const dialogRef = this.dialog.open(WTimeDialogComponent, {
            data: {
                time: {
                    hour: this.userTime.hour,
                    minute: this.userTime.minute,
                    meriden: this.userTime.meriden,
                    format: this.userTime.format,
                },
                color: this.color,
                revertLabel: this.revertLabel,
                submitLabel: this.submitLabel,
            },
        });
        dialogRef.afterClosed().subscribe((result) => {
            // result will be update userTime object or -1 or undefined (closed dialog w/o clicking cancel)
            if (result === undefined) {
                return;
            }
            else if (result !== -1) {
                this.userTime = result;
                const hour = result.hour;
                const minute = result.minute;
                const dataEvent = {
                    hour: Utils.formatHour(result.format, hour),
                    minute: Utils.formatMinute(minute),
                    meriden: this.userTime.meriden,
                    format: this.userTime.format,
                };
                this.emitChange(dataEvent);
            }
        });
        return false;
    }
    emitChange(data) {
        this.change.emit(data);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MaterialTimePickerComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: MaterialTimePickerComponent, isStandalone: true, selector: "material-timepicker", inputs: { label: "label", appearance: "appearance", userTime: "userTime", color: "color", revertLabel: "revertLabel", submitLabel: "submitLabel", disabled: "disabled", readonly: "readonly", classFormField: "classFormField" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"d-flex flex-row w-mat-timepicker\">\n  <mat-form-field class=\"d-flex {{classFormField}}\" class=\"timeContainer\" appearance=\"{{appearance}}\">\n      <mat-label>{{ label }}</mat-label>\n      <input matInput class=\"timeInput\" placeholder=\"Select time\" id=\"time_Control\" name=\"time_Control\" [value]=\"time()\" [disabled]=\"disabled\" [readonly]=\"readonly\">\n      <mat-icon matSuffix (click)=\"showPicker()\">access_time</mat-icon>\n  </mat-form-field>\n</div>\n", styles: [".d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.align-items-end{align-items:end}@media(min-width:768px){.flex-md-row{flex-direction:row}.flex-md-column{flex-direction:column}}.time-picker-button{padding:0;margin:0;min-width:44px}.mat-mdc-form-field-flex{display:inline-flex;align-items:center;box-sizing:border-box;width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MaterialTimePickerComponent, decorators: [{
            type: Component,
            args: [{ selector: "material-timepicker", encapsulation: ViewEncapsulation.None, imports: [
                        MatFormField,
                        MatLabel,
                        MatInput,
                        MatIcon,
                        MatSuffix,
                    ], template: "<div class=\"d-flex flex-row w-mat-timepicker\">\n  <mat-form-field class=\"d-flex {{classFormField}}\" class=\"timeContainer\" appearance=\"{{appearance}}\">\n      <mat-label>{{ label }}</mat-label>\n      <input matInput class=\"timeInput\" placeholder=\"Select time\" id=\"time_Control\" name=\"time_Control\" [value]=\"time()\" [disabled]=\"disabled\" [readonly]=\"readonly\">\n      <mat-icon matSuffix (click)=\"showPicker()\">access_time</mat-icon>\n  </mat-form-field>\n</div>\n", styles: [".d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.align-items-end{align-items:end}@media(min-width:768px){.flex-md-row{flex-direction:row}.flex-md-column{flex-direction:column}}.time-picker-button{padding:0;margin:0;min-width:44px}.mat-mdc-form-field-flex{display:inline-flex;align-items:center;box-sizing:border-box;width:100%}\n"] }]
        }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { label: [{
                type: Input
            }], appearance: [{
                type: Input
            }], userTime: [{
                type: Input
            }], color: [{
                type: Input
            }], revertLabel: [{
                type: Input
            }], submitLabel: [{
                type: Input
            }], disabled: [{
                type: Input
            }], readonly: [{
                type: Input
            }], classFormField: [{
                type: Input
            }], change: [{
                type: Output
            }] } });

/*
 * Public API Surface of material-time-picker
 */

/**
 * Generated bundle index. Do not edit.
 */

export { MaterialTimePickerComponent, WClockComponent, WTimeComponent, WTimeDialogComponent };
//# sourceMappingURL=candidosales-material-time-picker.mjs.map