// Copyright Laserfiche.
// Licensed under the MIT License. See LICENSE in the project root for license information.
import { Component } from '@angular/core';
import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material/core';
import { FieldFormat } from '@laserfiche/lf-ui-components/shared';
import { ValidationRule, ValidationUtils } from '@laserfiche/lf-ui-components/internal-shared';
import { of } from 'rxjs';
import { DateTimeBaseFieldDirective } from '../base-field/datetime-base-field.directives';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/material/form-field";
import * as i4 from "@angular/material/input";
import * as i5 from "../../lf-token-picker/lf-token-picker.component";
import * as i6 from "../../../../lf-date-time-picker/uni-date-time.component";
import * as i7 from "../dynamic-field/dynamic-field.component";
export class TimeFieldComponent extends DateTimeBaseFieldDirective {
    async ngOnInit() {
        super.ngOnInit();
        this.timeDisplayFormat = this.getTimeFormat();
        this.TIME_FIELDS_MUST_BE_IN_THE_FORMAT_0 = this.localizationService.getStringLaserficheWithObservableParams('TIME_FIELDS_MUST_BE_IN_FORMAT_0', [of(this.timeDisplayFormat)]);
        this.uniDateTimeSettings = {
            showLabel: false,
            readOnly: false,
            combinedDateTime: false,
            showTimeOnly: true,
            timeFormat: this.timeDisplayFormat,
            timePlaceholder: this.timeDisplayFormat,
            defaultTimeOfDate: this.lf_field_value,
        };
        this.uniDateTimeConfig = {
            storedValueTimeFormat: this.internalTimeFormat,
            storedValueDateTimeFormat: '{TIME}',
            language: navigator.language,
            silent: false, // no internal strings and no custom error messages
        };
    }
    deserializeLfFieldValue() {
        return this.lf_field_value ?? ''; // TODO: check what format the API gives us Time in
    }
    serializeFieldFormControlValue() {
        return this.getLfFieldFormControlValue();
    }
    getAdditionalValidatorsForFieldType() {
        const validators = [];
        validators.push(ValidationUtils.createTimeValidator());
        return validators;
    }
    getValidationTextForFieldType(validationRuleName) {
        switch (validationRuleName) {
            case ValidationRule.TIME:
                return this.TIME_FIELDS_MUST_BE_IN_THE_FORMAT_0;
        }
        return undefined;
    }
    getTimeFormat() {
        if (this.timeDisplayFormat) {
            return this.timeDisplayFormat;
        }
        switch (this.lf_field_info?.format) {
            case FieldFormat.ShortTime:
                return 'hh:mm A';
            case FieldFormat.LongTime:
                return 'hh:mm:ss A';
            default:
                return 'hh:mm:ss A';
        }
    }
    async onTimeValueChangedAsync() {
        if (this.containsToken) {
            this.lf_field_form_control.clearValidators();
        }
        else {
            this.resetToDefaultValidators();
        }
        super.onDateOrTimeTokenValueChanged();
        this.lf_field_form_control.updateValueAndValidity();
    }
    onTimeTokenChosen(token) {
        const newFieldVal = this.createNewFieldValueWithToken(token);
        if (this.tokenService.containsTokenForFieldType(newFieldVal, this.lf_field_info.fieldType, this.is_import_mode)) {
            this.lf_field_form_control.clearValidators();
            this.lf_field_form_control.updateValueAndValidity();
        }
        this.onTokenChosen(token);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimeFieldComponent, selector: "lf-time-field-component", providers: [
            { provide: DateTimeBaseFieldDirective, useExisting: TimeFieldComponent },
            { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher },
        ], usesInheritance: true, ngImport: i0, template: "<!--Copyright Laserfiche.\nLicensed under the MIT License. See LICENSE in the project root for license information.-->\n\n<span class=\"token-picker-field-box\" *ngIf=\"!isDynamic else dynamic\" [ngClass]=\"{'extra-space': !getBrokenValidationRule()}\">\n  <mat-form-field *ngIf=\"showTokenTextBox\" title=\"{{lf_field_info.displayName}}\" appearance=\"outline\" class=\"lf-field\">\n    <input #tokenTarget matInput type=\"text\" [formControl]=\"lf_field_form_control\"\n      title=\"{{lf_field_form_control.value}}\" (change)=\"onTimeValueChangedAsync()\">\n  </mat-form-field>\n  <lf-uni-date-time #tokenTarget class=\"lf-field\" *ngIf=\"!showTokenTextBox\" [config]=\"uniDateTimeConfig\"\n    [settings]=\"uniDateTimeSettings\" (valueChangedEventHandler)=\"onUniDateOrTimeChanged($event)\">\n  </lf-uni-date-time>\n  <lf-token-picker-component class=\"lf-field-token-picker\" (tokenPicked)=\"onTimeTokenChosen($event)\"\n    [data]=\"lfFieldTokenData\">\n  </lf-token-picker-component>\n</span>\n<mat-error *ngIf=\"getBrokenValidationRule()\">{{fieldValidationErrorMsg | async}}</mat-error>\n\n<ng-template #dynamic>\n  <lf-dynamic-field-component ngDefaultControl [options]=\"dynamic_field_value_options\"\n    [formControl]=\"lf_field_form_control\" [title]=\"lf_field_info.displayName\"\n    [fieldValidationErrorMsg]=\"fieldValidationErrorMsg\" [getBrokenValidationRule]=\"getBrokenValidationRule.bind(this)\"\n    (valueChange)=\"onValueChanged()\">\n  </lf-dynamic-field-component>\n</ng-template>\n", styles: [".extra-space{margin-bottom:1rem}\n", ".lf-field,.lf-textarea{width:100%;min-width:50px}.mat-mdc-input-element{caret-color:#000}.token-picker-field-box{width:100%;display:flex;font-size:14px}.field-box{flex-grow:1;flex-shrink:1;display:inline-block;width:100%}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix,::ng-deep mat-form-field.lf-textarea>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix{padding:0;border:none}::ng-deep mat-form-field.lf-field.lf-date-field>.mat-mdc-form-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix{line-height:0}::ng-deep .lf-field .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__leading,::ng-deep .lf-field .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__notch,::ng-deep .lf-field .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__trailing,::ng-deep .lf-textarea .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__leading,::ng-deep .lf-textarea .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__notch,::ng-deep .lf-textarea .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__trailing{border-color:#ccc}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-focus-outline-color: black;&:hover{--mdc-outlined-text-field-outline-width: 2px}}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix>.mat-mdc-select>.mat-mdc-select-trigger>.mat-mdc-select-arrow-wrapper>.mat-mdc-select-arrow{color:#0000008a}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mdc-notched-outline{height:28px;color:#ccc}::ng-deep mat-form-field.lf-textarea>.mat-mdc-form-field-wrapper>.mat-mdc-form-field-flex>.mdc-notched-outline{color:#ccc}::ng-deep mat-form-field.lf-field>.mat-mdc-form-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick,::ng-deep mat-form-field.lf-textarea>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick{color:#000}::ng-deep mat-form-field.lf-field.ng-invalid>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick,::ng-deep mat-form-field.lf-textarea.ng-invalid>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick{color:red}::ng-deep mat-form-field.lf-field.ng-invalid.ng-pristine>.mat-mdc-form-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick,::ng-deep mat-form-field.lf-textarea.ng-invalid.ng-pristine>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick{color:#000}::ng-deep mat-form-field.lf-field .mat-mdc-form-field-subscript-wrapper,::ng-deep mat-form-field.lf-textarea .mat-mdc-form-field-subscript-wrapper{display:flex;flex-direction:column}::ng-deep lf-field-template-container-component .lf-template-picker>.mat-mdc-form-field-subscript-wrapper{height:0px}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper,::ng-deep mat-form-field.lf-textarea>.mat-mdc-text-field-wrapper{padding-bottom:0;padding-left:10px;padding-right:10px}::ng-deep mat-form-field.lf-date-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-icon-suffix{top:-.2em;position:unset}.lf-field-token-picker{flex-grow:0;flex-shrink:0;margin-left:1px;vertical-align:top}.mat-mdc-form-field{font-size:inherit;font-weight:400;line-height:1.125;font-family:Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}::ng-deep .mdc-floating-label.mat-mdc-floating-label{display:none}::ng-deep .lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex{height:28px}::ng-deep .lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix{height:inherit;min-height:0px}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix>.mat-mdc-select,::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix>.mat-mdc-select>.mat-mdc-select-trigger{height:inherit;font-size:14px}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix>.mat-mdc-input-element{height:inherit}::ng-deep .mdc-line-ripple{display:none}::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper>.mat-mdc-form-field-hint-wrapper,::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper>.mat-mdc-form-field-error-wrapper{position:unset;padding:0;min-height:1.25rem}::ng-deep .mat-mdc-form-field-hint-spacer{flex-basis:0!important}::ng-deep mat-hint{color:#0009}::ng-deep .mat-mdc-form-field-hint,::ng-deep .mat-mdc-form-field-error{padding:0 1rem;line-height:1rem;font-size:var(--mat-form-field-subscript-text-size)}::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align:before{height:unset;display:block}::ng-deep .lf-checklist-item .mat-form-field-invalid .mat-mdc-form-field-subscript-wrapper{padding-top:0!important}::ng-deep .lf-field .mdc-text-field{border-radius:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.LfTokenPickerComponent, selector: "lf-token-picker-component", inputs: ["data"], outputs: ["tokenPicked"] }, { kind: "component", type: i6.UniDateTimeComponent, selector: "lf-uni-date-time", inputs: ["config", "settings", "customStrings", "componentId", "abstractControl", "dateControlName", "timeControlName", "dateTimeControlName"], outputs: ["valueChangedEventHandler", "blurEventHandler", "dateIconClickEventHandler", "timeIconClickEventHandler"] }, { kind: "component", type: i7.DynamicFieldComponent, selector: "lf-dynamic-field-component", inputs: ["options", "formControl", "title", "fieldValidationErrorMsg", "getBrokenValidationRule", "compareWith"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lf-time-field-component', providers: [
                        { provide: DateTimeBaseFieldDirective, useExisting: TimeFieldComponent },
                        { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher },
                    ], template: "<!--Copyright Laserfiche.\nLicensed under the MIT License. See LICENSE in the project root for license information.-->\n\n<span class=\"token-picker-field-box\" *ngIf=\"!isDynamic else dynamic\" [ngClass]=\"{'extra-space': !getBrokenValidationRule()}\">\n  <mat-form-field *ngIf=\"showTokenTextBox\" title=\"{{lf_field_info.displayName}}\" appearance=\"outline\" class=\"lf-field\">\n    <input #tokenTarget matInput type=\"text\" [formControl]=\"lf_field_form_control\"\n      title=\"{{lf_field_form_control.value}}\" (change)=\"onTimeValueChangedAsync()\">\n  </mat-form-field>\n  <lf-uni-date-time #tokenTarget class=\"lf-field\" *ngIf=\"!showTokenTextBox\" [config]=\"uniDateTimeConfig\"\n    [settings]=\"uniDateTimeSettings\" (valueChangedEventHandler)=\"onUniDateOrTimeChanged($event)\">\n  </lf-uni-date-time>\n  <lf-token-picker-component class=\"lf-field-token-picker\" (tokenPicked)=\"onTimeTokenChosen($event)\"\n    [data]=\"lfFieldTokenData\">\n  </lf-token-picker-component>\n</span>\n<mat-error *ngIf=\"getBrokenValidationRule()\">{{fieldValidationErrorMsg | async}}</mat-error>\n\n<ng-template #dynamic>\n  <lf-dynamic-field-component ngDefaultControl [options]=\"dynamic_field_value_options\"\n    [formControl]=\"lf_field_form_control\" [title]=\"lf_field_info.displayName\"\n    [fieldValidationErrorMsg]=\"fieldValidationErrorMsg\" [getBrokenValidationRule]=\"getBrokenValidationRule.bind(this)\"\n    (valueChange)=\"onValueChanged()\">\n  </lf-dynamic-field-component>\n</ng-template>\n", styles: [".extra-space{margin-bottom:1rem}\n", ".lf-field,.lf-textarea{width:100%;min-width:50px}.mat-mdc-input-element{caret-color:#000}.token-picker-field-box{width:100%;display:flex;font-size:14px}.field-box{flex-grow:1;flex-shrink:1;display:inline-block;width:100%}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix,::ng-deep mat-form-field.lf-textarea>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix{padding:0;border:none}::ng-deep mat-form-field.lf-field.lf-date-field>.mat-mdc-form-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix{line-height:0}::ng-deep .lf-field .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__leading,::ng-deep .lf-field .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__notch,::ng-deep .lf-field .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__trailing,::ng-deep .lf-textarea .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__leading,::ng-deep .lf-textarea .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__notch,::ng-deep .lf-textarea .mdc-text-field--outlined:not(.mdc-text-field--focused) .mdc-notched-outline__trailing{border-color:#ccc}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-focus-outline-color: black;&:hover{--mdc-outlined-text-field-outline-width: 2px}}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix>.mat-mdc-select>.mat-mdc-select-trigger>.mat-mdc-select-arrow-wrapper>.mat-mdc-select-arrow{color:#0000008a}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mdc-notched-outline{height:28px;color:#ccc}::ng-deep mat-form-field.lf-textarea>.mat-mdc-form-field-wrapper>.mat-mdc-form-field-flex>.mdc-notched-outline{color:#ccc}::ng-deep mat-form-field.lf-field>.mat-mdc-form-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick,::ng-deep mat-form-field.lf-textarea>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick{color:#000}::ng-deep mat-form-field.lf-field.ng-invalid>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick,::ng-deep mat-form-field.lf-textarea.ng-invalid>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick{color:red}::ng-deep mat-form-field.lf-field.ng-invalid.ng-pristine>.mat-mdc-form-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick,::ng-deep mat-form-field.lf-textarea.ng-invalid.ng-pristine>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-form-field-outline-thick{color:#000}::ng-deep mat-form-field.lf-field .mat-mdc-form-field-subscript-wrapper,::ng-deep mat-form-field.lf-textarea .mat-mdc-form-field-subscript-wrapper{display:flex;flex-direction:column}::ng-deep lf-field-template-container-component .lf-template-picker>.mat-mdc-form-field-subscript-wrapper{height:0px}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper,::ng-deep mat-form-field.lf-textarea>.mat-mdc-text-field-wrapper{padding-bottom:0;padding-left:10px;padding-right:10px}::ng-deep mat-form-field.lf-date-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-icon-suffix{top:-.2em;position:unset}.lf-field-token-picker{flex-grow:0;flex-shrink:0;margin-left:1px;vertical-align:top}.mat-mdc-form-field{font-size:inherit;font-weight:400;line-height:1.125;font-family:Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}::ng-deep .mdc-floating-label.mat-mdc-floating-label{display:none}::ng-deep .lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex{height:28px}::ng-deep .lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix{height:inherit;min-height:0px}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix>.mat-mdc-select,::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix>.mat-mdc-select>.mat-mdc-select-trigger{height:inherit;font-size:14px}::ng-deep mat-form-field.lf-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix>.mat-mdc-input-element{height:inherit}::ng-deep .mdc-line-ripple{display:none}::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper>.mat-mdc-form-field-hint-wrapper,::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper>.mat-mdc-form-field-error-wrapper{position:unset;padding:0;min-height:1.25rem}::ng-deep .mat-mdc-form-field-hint-spacer{flex-basis:0!important}::ng-deep mat-hint{color:#0009}::ng-deep .mat-mdc-form-field-hint,::ng-deep .mat-mdc-form-field-error{padding:0 1rem;line-height:1rem;font-size:var(--mat-form-field-subscript-text-size)}::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align:before{height:unset;display:block}::ng-deep .lf-checklist-item .mat-form-field-invalid .mat-mdc-form-field-subscript-wrapper{padding-top:0!important}::ng-deep .lf-field .mdc-text-field{border-radius:0}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 