carriera-intern-components 1.1.37 → 1.1.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6811,7 +6811,7 @@ class CaiInputDatetimePickerComponent {
|
|
|
6811
6811
|
this.destroy$.complete();
|
|
6812
6812
|
}
|
|
6813
6813
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaiInputDatetimePickerComponent, deps: [{ token: i1.NgControl, self: true }, { token: CalendarDateTimePickerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6814
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaiInputDatetimePickerComponent, isStandalone: true, selector: "cai-input-datetime-picker", inputs: { id: "id", inputConfig: "inputConfig", formFormat: "formFormat" }, outputs: { clearInputEvent: "clear", blurInputEvent: "blurInput", selectLastOneForSelectionEmitter: "selectLastOneForSelectionEmitter", selectLastOneAfterMouseUpEmitter: "selectLastOneAfterMouseUpEmitter", onDatePasteEmitter: "onDatePasteEmitter", onFocusEmitter: "onFocusEmitter", changeSelectionEmmiter: "changeSelectionEmmiter", setSelectionEmmiter: "setSelectionEmmiter" }, providers: [CalendarDateTimePickerService], viewQueries: [{ propertyName: "dateTimePopover", first: true, predicate: ["dateTimePopover"], descendants: true }, { propertyName: "t2", first: true, predicate: ["t2"], descendants: true }, { propertyName: "span1", first: true, predicate: ["span1"], descendants: true, static: true }, { propertyName: "span2", first: true, predicate: ["span2"], descendants: true, static: true }, { propertyName: "span3", first: true, predicate: ["span3"], descendants: true, static: true }, { propertyName: "holder1", first: true, predicate: ["holder1"], descendants: true, static: true }, { propertyName: "closeTooltip", first: true, predicate: ["closeTooltip"], descendants: true }], ngImport: i0, template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n<!-- -->\n@let invalid =\n getSuperControl?.invalid &&\n (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let showClear = !disabled && !inputConfig.hideClear;\n<!-- Date Time Input -->\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid,\n 'datetime-invalid': invalid,\n 'datetime-disabled': disabled,\n 'datetime-focus': isFocusInput,\n 'datetime-has-text': getSuperControl?.value,\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-size-22': size === 22,\n }\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (click)=\"onPopoverClick()\"\n (shown)=\"onPopoverShown()\"\n (hidden)=\"onPopoverHidden()\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <div\n #holder1\n tabindex=\"1\"\n (paste)=\"onDatePaste($event)\"\n (keydown)=\"changeSelection($event)\"\n (blur)=\"blurInput()\"\n class=\"datetime-input-listener\"\n [ngbTooltip]=\"errorTooltip\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n ></div>\n\n <div\n class=\"datetime-icon-container\"\n [class.hidden]=\"inputConfig.isIconHidden\"\n >\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n\n <div class=\"datetime-input\">\n <span\n #span1\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n ></div>\n </span>\n <span\n #span2\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n ></div>\n </span>\n <span\n #span3\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n ></span>\n </div>\n\n @if (!disabled) {\n @let tooltipClass =\n inverse\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n : \"tooltip input-tooltip\";\n\n @if (showClear) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Cancel\"\n [openDelay]=\"600\"\n [tooltipClass]=\"tooltipClass\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #closeTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (mousedown)=\"handleCloseTooltip()\"\n (mouseleave)=\"handleCloseTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n }\n <svg-icon\n class=\"datetime-icon datetime-dropdown-icon\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if (!inTable) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors\n | errorMessage: inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div class=\"datetime-dropdown-holder\">\n <cai-custom-datetime-pickers\n [calendarType]=\"\n inputConfig.name === 'datepicker' ||\n inputConfig.name === 'datepickerBankCard'\n ? 'date'\n : 'time'\n \"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTimeInputDate\"\n (closePopover)=\"closePopover($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if (inTable && invalid && !isFocusInput) {\n {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .2s ease-in-out;cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus .datetime-dropdown-icon{transform:rotate(180deg)}.datetime-input-container.datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotate(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px)}.datetime-in-table .datetime-input-listener{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0}.main::selection{background-color:#ffffff4d;border-radius:1px}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
6814
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaiInputDatetimePickerComponent, isStandalone: true, selector: "cai-input-datetime-picker", inputs: { id: "id", inputConfig: "inputConfig", formFormat: "formFormat" }, outputs: { clearInputEvent: "clear", blurInputEvent: "blurInput", selectLastOneForSelectionEmitter: "selectLastOneForSelectionEmitter", selectLastOneAfterMouseUpEmitter: "selectLastOneAfterMouseUpEmitter", onDatePasteEmitter: "onDatePasteEmitter", onFocusEmitter: "onFocusEmitter", changeSelectionEmmiter: "changeSelectionEmmiter", setSelectionEmmiter: "setSelectionEmmiter" }, providers: [CalendarDateTimePickerService], viewQueries: [{ propertyName: "dateTimePopover", first: true, predicate: ["dateTimePopover"], descendants: true }, { propertyName: "t2", first: true, predicate: ["t2"], descendants: true }, { propertyName: "span1", first: true, predicate: ["span1"], descendants: true, static: true }, { propertyName: "span2", first: true, predicate: ["span2"], descendants: true, static: true }, { propertyName: "span3", first: true, predicate: ["span3"], descendants: true, static: true }, { propertyName: "holder1", first: true, predicate: ["holder1"], descendants: true, static: true }, { propertyName: "closeTooltip", first: true, predicate: ["closeTooltip"], descendants: true }], ngImport: i0, template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n<!-- -->\n@let invalid =\n getSuperControl?.invalid &&\n (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let showClear = !disabled && !inputConfig.hideClear;\n<!-- Date Time Input -->\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid,\n 'datetime-invalid': invalid,\n 'datetime-disabled': disabled,\n 'datetime-focus': isFocusInput,\n 'datetime-has-text': getSuperControl?.value,\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-size-22': size === 22,\n }\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (click)=\"onPopoverClick()\"\n (shown)=\"onPopoverShown()\"\n (hidden)=\"onPopoverHidden()\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <div\n #holder1\n tabindex=\"1\"\n (paste)=\"onDatePaste($event)\"\n (keydown)=\"changeSelection($event)\"\n (blur)=\"blurInput()\"\n class=\"datetime-input-listener\"\n [ngbTooltip]=\"errorTooltip\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n ></div>\n\n <div\n class=\"datetime-icon-container\"\n [class.hidden]=\"inputConfig.isIconHidden\"\n >\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n\n <div class=\"datetime-input\">\n <span\n #span1\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n ></div>\n </span>\n <span\n #span2\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n ></div>\n </span>\n <span\n #span3\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n ></span>\n </div>\n\n @if (!disabled) {\n @let tooltipClass =\n inverse\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n : \"tooltip input-tooltip\";\n\n @if (showClear) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Cancel\"\n [openDelay]=\"600\"\n [tooltipClass]=\"tooltipClass\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #closeTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (mousedown)=\"handleCloseTooltip()\"\n (mouseleave)=\"handleCloseTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n }\n <svg-icon\n class=\"datetime-icon datetime-dropdown-icon\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if (!inTable) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors\n | errorMessage: inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div class=\"datetime-dropdown-holder\">\n <cai-custom-datetime-pickers\n [calendarType]=\"\n inputConfig.name === 'datepicker' ||\n inputConfig.name === 'datepickerBankCard'\n ? 'date'\n : 'time'\n \"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTimeInputDate\"\n (closePopover)=\"closePopover($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if (inTable && invalid && !isFocusInput) {\n {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .2s ease-in-out;cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus .datetime-dropdown-icon{transform:rotate(180deg)}.datetime-input-container.datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotate(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px)}.datetime-in-table .datetime-input-listener{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0}.main::selection{background-color:#ffffff4d;border-radius:1px}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
6815
6815
|
// modules
|
|
6816
6816
|
CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i4.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type:
|
|
6817
6817
|
// components
|
|
@@ -6832,7 +6832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6832
6832
|
CaCustomDatetimePickersComponent,
|
|
6833
6833
|
// pipes
|
|
6834
6834
|
ErrorMessagePipe,
|
|
6835
|
-
], providers: [CalendarDateTimePickerService], template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n<!-- -->\n@let invalid =\n getSuperControl?.invalid &&\n (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let showClear = !disabled && !inputConfig.hideClear;\n<!-- Date Time Input -->\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid,\n 'datetime-invalid': invalid,\n 'datetime-disabled': disabled,\n 'datetime-focus': isFocusInput,\n 'datetime-has-text': getSuperControl?.value,\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-size-22': size === 22,\n }\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (click)=\"onPopoverClick()\"\n (shown)=\"onPopoverShown()\"\n (hidden)=\"onPopoverHidden()\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <div\n #holder1\n tabindex=\"1\"\n (paste)=\"onDatePaste($event)\"\n (keydown)=\"changeSelection($event)\"\n (blur)=\"blurInput()\"\n class=\"datetime-input-listener\"\n [ngbTooltip]=\"errorTooltip\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n ></div>\n\n <div\n class=\"datetime-icon-container\"\n [class.hidden]=\"inputConfig.isIconHidden\"\n >\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n\n <div class=\"datetime-input\">\n <span\n #span1\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n ></div>\n </span>\n <span\n #span2\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n ></div>\n </span>\n <span\n #span3\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n ></span>\n </div>\n\n @if (!disabled) {\n @let tooltipClass =\n inverse\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n : \"tooltip input-tooltip\";\n\n @if (showClear) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Cancel\"\n [openDelay]=\"600\"\n [tooltipClass]=\"tooltipClass\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #closeTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (mousedown)=\"handleCloseTooltip()\"\n (mouseleave)=\"handleCloseTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n }\n <svg-icon\n class=\"datetime-icon datetime-dropdown-icon\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if (!inTable) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors\n | errorMessage: inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div class=\"datetime-dropdown-holder\">\n <cai-custom-datetime-pickers\n [calendarType]=\"\n inputConfig.name === 'datepicker' ||\n inputConfig.name === 'datepickerBankCard'\n ? 'date'\n : 'time'\n \"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTimeInputDate\"\n (closePopover)=\"closePopover($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if (inTable && invalid && !isFocusInput) {\n {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .2s ease-in-out;cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus .datetime-dropdown-icon{transform:rotate(180deg)}.datetime-input-container.datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotate(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px)}.datetime-in-table .datetime-input-listener{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0}.main::selection{background-color:#ffffff4d;border-radius:1px}\n"] }]
|
|
6835
|
+
], providers: [CalendarDateTimePickerService], template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n<!-- -->\n@let invalid =\n getSuperControl?.invalid &&\n (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let showClear = !disabled && !inputConfig.hideClear;\n<!-- Date Time Input -->\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid,\n 'datetime-invalid': invalid,\n 'datetime-disabled': disabled,\n 'datetime-focus': isFocusInput,\n 'datetime-has-text': getSuperControl?.value,\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-size-22': size === 22,\n }\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (click)=\"onPopoverClick()\"\n (shown)=\"onPopoverShown()\"\n (hidden)=\"onPopoverHidden()\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <div\n #holder1\n tabindex=\"1\"\n (paste)=\"onDatePaste($event)\"\n (keydown)=\"changeSelection($event)\"\n (blur)=\"blurInput()\"\n class=\"datetime-input-listener\"\n [ngbTooltip]=\"errorTooltip\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n ></div>\n\n <div\n class=\"datetime-icon-container\"\n [class.hidden]=\"inputConfig.isIconHidden\"\n >\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n\n <div class=\"datetime-input\">\n <span\n #span1\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n ></div>\n </span>\n <span\n #span2\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n ></div>\n </span>\n <span\n #span3\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n ></span>\n </div>\n\n @if (!disabled) {\n @let tooltipClass =\n inverse\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n : \"tooltip input-tooltip\";\n\n @if (showClear) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Cancel\"\n [openDelay]=\"600\"\n [tooltipClass]=\"tooltipClass\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #closeTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (mousedown)=\"handleCloseTooltip()\"\n (mouseleave)=\"handleCloseTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n }\n <svg-icon\n class=\"datetime-icon datetime-dropdown-icon\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if (!inTable) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors\n | errorMessage: inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div class=\"datetime-dropdown-holder\">\n <cai-custom-datetime-pickers\n [calendarType]=\"\n inputConfig.name === 'datepicker' ||\n inputConfig.name === 'datepickerBankCard'\n ? 'date'\n : 'time'\n \"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTimeInputDate\"\n (closePopover)=\"closePopover($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if (inTable && invalid && !isFocusInput) {\n {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .2s ease-in-out;cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus .datetime-dropdown-icon{transform:rotate(180deg)}.datetime-input-container.datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotate(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px)}.datetime-in-table .datetime-input-listener{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0}.main::selection{background-color:#ffffff4d;border-radius:1px}\n"] }]
|
|
6836
6836
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
6837
6837
|
type: Self
|
|
6838
6838
|
}] }, { type: CalendarDateTimePickerService }], propDecorators: { id: [{
|