@naniteninja/dashboard-components-lib 2.1.47 → 2.1.49
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.
|
@@ -6,7 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
|
|
|
6
6
|
import { MatMenuModule } from '@angular/material/menu';
|
|
7
7
|
import * as i3 from '@ngx-translate/core';
|
|
8
8
|
import { TranslateModule, TranslateService } from '@ngx-translate/core';
|
|
9
|
-
import { interval, take, takeUntil,
|
|
9
|
+
import { interval, take, takeUntil, debounceTime, distinctUntilChanged, switchMap, of, Subject, map, BehaviorSubject, animationFrameScheduler, defer, finalize, shareReplay, from, concatMap, Observable, combineLatest } from 'rxjs';
|
|
10
10
|
import * as i1 from '@naniteninja/ionic-lib';
|
|
11
11
|
import { MODAL_DATA, BaseCardModule, ButtonsModule, PopperModule, LibModalComponent, DirectiveModule, AvatarComponent, InputFieldModule, FormFieldModule, BaseComponent, DateRangeValidator, TimeRangeValidator, LibMapModule, DashedCheckboxModule, InputDateFieldModule, InputFieldSelectModule, InputTimeFieldModule, LibModalModule, LibErrorMessageComponent, SectionSeparatorComponent, PopupModalService, ImageCardModule, ToggleModule } from '@naniteninja/ionic-lib';
|
|
12
12
|
import { trigger, transition, style, query, sequence, animate, stagger } from '@angular/animations';
|
|
@@ -960,6 +960,9 @@ class LibEventFormComponent extends BaseComponent {
|
|
|
960
960
|
this.closeForm = new EventEmitter();
|
|
961
961
|
this.submitForm = new EventEmitter();
|
|
962
962
|
this.editOptionsCtrl = new FormControl();
|
|
963
|
+
this.localSuggestions = [];
|
|
964
|
+
this.showLocalSuggestions = false;
|
|
965
|
+
this.cancelHideSuggestions = false;
|
|
963
966
|
}
|
|
964
967
|
onDeleteConfirm() {
|
|
965
968
|
this.showConfirm = false;
|
|
@@ -1012,6 +1015,23 @@ class LibEventFormComponent extends BaseComponent {
|
|
|
1012
1015
|
this.form.controls.address.setValue(event.address);
|
|
1013
1016
|
this.form.controls.address.setErrors(event.address && event.coordinates ? null : { invalidField: true });
|
|
1014
1017
|
}
|
|
1018
|
+
onLocalSuggestionSelect(suggestion) {
|
|
1019
|
+
this.form.controls.location.setValue({ coordinates: [suggestion.lng, suggestion.lat], address: suggestion.address });
|
|
1020
|
+
this.form.controls.address.setValue(suggestion.address);
|
|
1021
|
+
this.form.controls.address.setErrors(null);
|
|
1022
|
+
this.showLocalSuggestions = false;
|
|
1023
|
+
this.localSuggestions = [];
|
|
1024
|
+
this.cdr.markForCheck();
|
|
1025
|
+
}
|
|
1026
|
+
hideLocalSuggestionsDelayed() {
|
|
1027
|
+
setTimeout(() => {
|
|
1028
|
+
if (!this.cancelHideSuggestions) {
|
|
1029
|
+
this.showLocalSuggestions = false;
|
|
1030
|
+
this.cdr.markForCheck();
|
|
1031
|
+
}
|
|
1032
|
+
this.cancelHideSuggestions = false;
|
|
1033
|
+
}, 200);
|
|
1034
|
+
}
|
|
1015
1035
|
resetModal() {
|
|
1016
1036
|
this.recurringTypeChanged = false;
|
|
1017
1037
|
this.editOptionsCtrl.setValue(null);
|
|
@@ -1067,6 +1087,23 @@ class LibEventFormComponent extends BaseComponent {
|
|
|
1067
1087
|
}
|
|
1068
1088
|
watchFormFields() {
|
|
1069
1089
|
this.form.controls.allDay.valueChanges.pipe(takeUntil(this.componentDestroyed$)).subscribe((value) => this.handleAllDayEvents(value, true));
|
|
1090
|
+
this.form.controls.address.valueChanges
|
|
1091
|
+
.pipe(debounceTime(300), distinctUntilChanged(), switchMap((value) => {
|
|
1092
|
+
if (!value || value.length < 3 || !this.locationSearchFn) {
|
|
1093
|
+
this.showLocalSuggestions = false;
|
|
1094
|
+
this.localSuggestions = [];
|
|
1095
|
+
this.cdr.markForCheck();
|
|
1096
|
+
return of([]);
|
|
1097
|
+
}
|
|
1098
|
+
return this.locationSearchFn(value);
|
|
1099
|
+
}), takeUntil(this.componentDestroyed$))
|
|
1100
|
+
.subscribe((results) => {
|
|
1101
|
+
console.log('RESULTS ARRIVED IN LIBRARY:', results);
|
|
1102
|
+
this.localSuggestions = results;
|
|
1103
|
+
this.showLocalSuggestions = results.length > 0;
|
|
1104
|
+
console.log('SUGGESTIONS BINDING STATE:', this.showLocalSuggestions, this.localSuggestions.length);
|
|
1105
|
+
this.cdr.markForCheck();
|
|
1106
|
+
});
|
|
1070
1107
|
this.form.controls.address.valueChanges.pipe(takeUntil(this.componentDestroyed$)).subscribe((value) => {
|
|
1071
1108
|
if (value && !this.form.value.location) {
|
|
1072
1109
|
this.form.controls.address.setErrors({ invalidField: true });
|
|
@@ -1171,11 +1208,11 @@ class LibEventFormComponent extends BaseComponent {
|
|
|
1171
1208
|
}
|
|
1172
1209
|
}
|
|
1173
1210
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LibEventFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }, { token: CalendarUtilsService }, { token: FallbackTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1174
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LibEventFormComponent, isStandalone: false, selector: "lib-event-form", inputs: { calendars: "calendars", locationSearchFn: "locationSearchFn", event: "event", draggedEvent: "draggedEvent" }, outputs: { updateRecurringEvent: "updateRecurringEvent", updateDraggedEvent: "updateDraggedEvent", delete: "delete", closeForm: "closeForm", submitForm: "submitForm" }, usesInheritance: true, ngImport: i0, template: "<lib-bottom-modal\n [title]=\"modalTitle\"\n [(isOpen)]=\"openModal\"\n [(showConfirm)]=\"showConfirm\"\n [confirmButton]=\"'CONFIRM.YES' | fallbackTranslate: 'Yes'\"\n [confirmCancelButton]=\"'CONFIRM.No' | fallbackTranslate: 'No'\"\n [confirmationTitle]=\"'CONFIRM.ARE_YOU_SURE' | fallbackTranslate: 'Confirm Deletion'\"\n [confirmationMsg]=\"'CONFIRM.ARE_YOU_SURE_MESSAGE' | fallbackTranslate: 'Sure you want to delete?'\"\n [showCloseBtn]=\"!cancelButtonTitle && editMode\"\n [customClass]=\"'calendar-event-modal'\"\n [loading]=\"loading$ | async\"\n [validModal]=\"(!form || form.valid) && (loading$ | async) !== true\"\n [submitButtonTitle]=\"submitButtonTitle\"\n [secondaryButtonTitle]=\"secondaryButtonTitle\"\n [cancelButtonTitle]=\"cancelButtonTitle\"\n (secondaryButtonClick)=\"onModalSecondaryButtonClick()\"\n (closeModal)=\"resetModal()\"\n (submitModal)=\"onSubmitModal()\"\n (confirmEvent)=\"onDeleteConfirm()\"\n>\n <div class=\"event-modal\">\n @if (!form && editMode && !openRecurringOptions) {\n <lib-event-info [event]=\"event\" [calendars]=\"calendars\"></lib-event-info>\n }\n @if (openRecurringOptions) {\n <lib-edit-recurring-event [editOptionsCtrl]=\"editOptionsCtrl\" [excludeCurrentInstance]=\"recurringTypeChanged\"></lib-edit-recurring-event>\n }\n <ng-content></ng-content>\n @if (form && !openRecurringOptions) {\n <form [formGroup]=\"form\" autocomplete=\"off\" appFocusInvalidInput (ngSubmit)=\"saveEvent()\" (keyup.enter)=\"saveEvent()\" id=\"event-form\">\n <div class=\"form-body\">\n <div class=\"form-row center-content\">\n <div class=\"event-title-field\">\n <lib-input-field\n maxLength=\"2000\"\n formControlName=\"title\"\n type=\"text\"\n [readonly]=\"loading$ | async\"\n [label]=\"'CALENDAR.TITLE_FIELD' | fallbackTranslate: 'Title'\"\n [trimWhiteSpace]=\"false\"\n ></lib-input-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['title'] }\"></lib-error-message>\n </div>\n </div>\n <div class=\"form-row event-dates\">\n <div class=\"input-field-container input-field-container-group\">\n <div class=\"event-date-container\" [ngClass]=\"{ 'input-field-container-full-row': !form.controls['allDay'].value }\">\n <lib-input-date-field\n class=\"event-date\"\n formControlName=\"startDate\"\n [readonly]=\"loading$ | async\"\n [hieActions]=\"true\"\n [showIcon]=\"true\"\n [label]=\"'CALENDAR.START_DATE' | fallbackTranslate: 'Start Date'\"\n ></lib-input-date-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startDate'] }\"></lib-error-message>\n </div>\n @if (form.controls['allDay'].value) {\n <lib-input-date-field\n class=\"event-date event-end-date\"\n formControlName=\"endDate\"\n [disabled]=\"loading$ | async\"\n [hieActions]=\"true\"\n [showIcon]=\"true\"\n [label]=\"'CALENDAR.END_DATE' | fallbackTranslate: 'End Date'\"\n ></lib-input-date-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endDate'] }\"></lib-error-message>\n }\n </div>\n </div>\n\n @if (!form.controls['allDay'].value) {\n <div class=\"form-row\">\n <div class=\"input-field-container input-field-container-group time-fields-group\">\n <div class=\"time-field\">\n <lib-input-time-field\n formControlName=\"startTime\"\n [showIcon]=\"true\"\n [startDate]=\"eventStart\"\n [interval]=\"15\"\n [disabled]=\"loading$ | async\"\n [label]=\"'CALENDAR.STARTS' | fallbackTranslate: 'Starts'\"\n ></lib-input-time-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startTime'] }\"></lib-error-message>\n </div>\n <div class=\"time-field\">\n <lib-input-time-field\n class=\"end-time\"\n formControlName=\"endTime\"\n [interval]=\"15\"\n [showIcon]=\"true\"\n [displaySlotTime]=\"true\"\n [fromTime]=\"\n form.controls.startTime.value && form.controls.startTime.value['slotValue'] ? form.controls.startTime.value['slotValue'] : form.controls.startTime.value\n \"\n [startDate]=\"eventStart\"\n [disabled]=\"loading$ | async\"\n [label]=\"'CALENDAR.ENDS' | fallbackTranslate: 'Ends'\"\n ></lib-input-time-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endTime'] }\"></lib-error-message>\n </div>\n </div>\n </div>\n }\n\n <div class=\"form-row recurring\">\n <div class=\"recurring-select\" formGroupName=\"recurringPattern\">\n <lib-input-field-select\n formControlName=\"type\"\n [optionLabel]=\"(recurringOptions[0].title | fallbackTranslate: 'noTrnslations') === 'noTrnslations' ? 'name' : 'title'\"\n [optionValue]=\"'type'\"\n [options]=\"recurringOptions\"\n [disabled]=\"loading$ | async\"\n >\n </lib-input-field-select>\n </div>\n <div class=\"allDay-container\">\n <ion-item class=\"no-shadow allDay\">\n <label>\n <lib-dashed-checkbox formControlName=\"allDay\" [disabled]=\"loading$ | async\"></lib-dashed-checkbox>\n <span>{{ 'CALENDAR.ALL_DAY' | fallbackTranslate: 'All day' }}</span>\n </label>\n </ion-item>\n </div>\n </div>\n\n <div class=\"form-row address\">\n <div class=\"input-field-container\">\n <lib-input-field\n maxLength=\"2000\"\n [trimWhiteSpace]=\"false\"\n formControlName=\"address\"\n [enableGoogleAddress]=\"!locationSearchFn\"\n [locationSearchFn]=\"locationSearchFn\"\n [address]=\"form.controls['address'].value\"\n (locationChange)=\"onLocationChange($event)\"\n [readonly]=\"loading$ | async\"\n [label]=\"'FIELDS.ADD_LOCATION' | fallbackTranslate: 'Location'\"\n >\n </lib-input-field>\n <lib-error-message class=\"input-error\" [config]=\"{ control: form.controls['address'] }\"></lib-error-message>\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"event-note-field\">\n <lib-input-field\n formControlName=\"note\"\n [textarea]=\"true\"\n [label]=\"'FIELDS.ADD_DESCRIPTION' | fallbackTranslate: 'Description'\"\n maxLength=\"2000\"\n [readonly]=\"loading$ | async\"\n ></lib-input-field>\n </div>\n </div>\n </div>\n </form>\n }\n </div>\n</lib-bottom-modal>\n", styles: [".event-modal{--input-width: 100%;--input-height: 48px;--border-radius: 100px;--input-icon-color: #fe3c72;--input-font-color: #fff;--dropdown-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);--input-font-family: \"Gilroy-Regular\", serif;--label-color: grey;--input-field-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, .7), inset -2px -2px 8px rgba(203, 199, 209, .5);--input-number-filed-font: var(--font-family);--textarea-height: 100px !important;position:relative;display:block;width:100%;padding:0 20px 10px;max-height:72vh;overflow:visible!important}.event-modal .form-row{display:flex;flex-direction:row;margin-bottom:10px}.event-modal .form-row.form-footer{align-items:flex-end;justify-content:flex-end;margin-bottom:-15px}.event-modal .form-row.form-footer lib-primary-btn{width:100px}.event-modal .form-row.form-row-error{margin:-10px 0 0;padding:0;height:20px}.event-modal .form-row.recurring{margin:12px 0;display:flex}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:50%}.event-modal .form-row.recurring .recurring-select lib-input-field-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end;margin-top:-10px}.event-modal form{padding:5px 5px 0}.event-modal form .form-body{max-width:100%;position:relative;display:block;overflow:visible}.event-modal ion-item ion-label{font-family:Gilroy-Regular,serif!important}.event-modal ion-item ion-label:not(.allDay){display:flex!important;flex-direction:row;align-items:center;justify-content:center}.event-modal ion-item.allDay{margin-top:-10px;width:fit-content;--min-height: 50px}.event-modal ion-item.allDay label{display:flex;gap:10px;align-items:center;font-family:Gilroy-Regular,serif;cursor:pointer}.event-modal ion-item.allDay lib-dashed-checkbox{--size: 24px;--color: var(--cyrano-pink-shade-1)}.event-modal .event-title-field,.event-modal .event-note-field{position:relative;display:block;width:100%;padding-top:10px}.event-modal .event-title-field lib-input-field,.event-modal .event-note-field lib-input-field{position:relative;width:100%;min-width:100%}.event-modal .input-field-container{padding-top:2px;width:100%}.event-modal .input-field-container.input-field-container-group{display:flex;gap:5px}.event-modal .input-field-container.input-field-container-group div{width:50%}.event-modal .input-field-container.input-field-container-group div.input-field-container-full-row{width:100%}.event-modal .input-field-container .time-fields{display:flex;gap:10px}.event-modal .input-field-container lib-input-field{width:100%}.event-modal .field-error{position:relative;display:block;width:100%}@media screen and (max-width: 500px){.event-modal .event-date-container{margin-bottom:15px}.event-modal .input-field-container-group{display:flex;flex-direction:column}.event-modal .input-field-container-group div{width:100%!important}.event-modal .input-field-container-group.time-fields-group{flex-direction:row}.event-modal .form-row.recurring{display:block}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end}.event-modal .form-row.recurring .allDay-container ion-item.allDay{padding-left:0;margin-top:10px}.event-modal .form-row.address{margin-top:-20px}.event-modal .form-row.event-dates{margin-bottom:0}}@media screen and (max-width: 350px){.event-modal .input-placeholder.input-placeholder-date .time-placeholder{margin-left:0}}.event-modal .event-input-field-error{margin-top:-20px}.event-modal ::ng-deep .location-suggestions{position:absolute;bottom:100%;top:auto;z-index:99999!important;background:var(--cyrano-dark-shade-1, #1e1c23)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px #00000080}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.DashedCheckboxComponent, selector: "lib-dashed-checkbox", inputs: ["checked", "disabled"], outputs: ["toggle"] }, { kind: "component", type: i1.InputDateFieldComponent, selector: "lib-input-date-field", inputs: ["label", "defaultDate", "maxDate", "minDate", "showTime", "hieActions", "readonly", "defaultDayHighlight", "showIcon", "timeOnly", "view", "disabled", "dateFormat", "placeholder", "appendTo", "stepMinute", "mask", "styleClass", "timeFormat"], outputs: ["focusEvent"] }, { kind: "component", type: i1.InputFieldComponent, selector: "lib-input-field,[lib-input-field]", inputs: ["name", "autocomplete", "label", "placeholder", "type", "readonly", "focus", "enableGoogleAddress", "locationAutocompleteConfig", "defaultLocation", "mask", "prefix", "suffix", "maxLength", "address", "textarea", "resize", "counter", "patterns", "trimWhiteSpace", "disabled", "locationSearchFn", "locationSearchDebounce", "locationSearchMinLength"], outputs: ["mapError", "locationChange", "keyDown", "onBlur"] }, { kind: "component", type: i1.InputFieldSelectComponent, selector: "lib-input-field-select", inputs: ["multiple", "label", "placeholder", "optionLabel", "optionValue", "options", "optionsTemplates", "filterBy", "enableFilter", "readonly", "disabled", "showClear", "editable", "withTemplate", "enableTranslation"], outputs: ["valueChange"] }, { kind: "component", type: i1.InputTimeFieldComponent, selector: "lib-input-time-field", inputs: ["startDate", "interval", "displaySlotTime", "fromTime", "format", "label", "readonly", "showIcon", "disabled"], outputs: ["focusEvent"] }, { kind: "component", type: i1.BottomModalComponent, selector: "lib-bottom-modal", inputs: ["breakpoints", "initialBreakpoint", "isOpen", "backdropDismiss", "canDismiss", "showArrow", "showBackBtn", "showConfirm", "showCloseBtn", "loading", "showHeaderSeparator", "title", "confirmationTitle", "confirmationMsg", "confirmButton", "confirmCancelButton", "description", "secondaryButtonTitle", "submitButtonTitle", "cancelButtonTitle", "validModal", "adaptToContentHeight", "customClass"], outputs: ["isOpenChange", "breakpointChange", "closeModal", "submitModal", "secondaryButtonClick", "backClick", "showConfirmChange", "confirmEvent"] }, { kind: "component", type: i1.LibErrorMessageComponent, selector: "lib-error-message", inputs: ["config"] }, { kind: "component", type: LibEventInfoComponent, selector: "lib-event-info", inputs: ["event", "calendars"] }, { kind: "component", type: LibEditRecurringEventComponent, selector: "lib-edit-recurring-event", inputs: ["excludeCurrentInstance", "editOptionsCtrl"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: FallbackTranslatePipe, name: "fallbackTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1211
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LibEventFormComponent, isStandalone: false, selector: "lib-event-form", inputs: { calendars: "calendars", locationSearchFn: "locationSearchFn", event: "event", draggedEvent: "draggedEvent" }, outputs: { updateRecurringEvent: "updateRecurringEvent", updateDraggedEvent: "updateDraggedEvent", delete: "delete", closeForm: "closeForm", submitForm: "submitForm" }, usesInheritance: true, ngImport: i0, template: "<lib-bottom-modal\n [title]=\"modalTitle\"\n [(isOpen)]=\"openModal\"\n [(showConfirm)]=\"showConfirm\"\n [confirmButton]=\"'CONFIRM.YES' | fallbackTranslate: 'Yes'\"\n [confirmCancelButton]=\"'CONFIRM.No' | fallbackTranslate: 'No'\"\n [confirmationTitle]=\"'CONFIRM.ARE_YOU_SURE' | fallbackTranslate: 'Confirm Deletion'\"\n [confirmationMsg]=\"'CONFIRM.ARE_YOU_SURE_MESSAGE' | fallbackTranslate: 'Sure you want to delete?'\"\n [showCloseBtn]=\"!cancelButtonTitle && editMode\"\n [customClass]=\"'calendar-event-modal'\"\n [loading]=\"loading$ | async\"\n [validModal]=\"(!form || form.valid) && (loading$ | async) !== true\"\n [submitButtonTitle]=\"submitButtonTitle\"\n [secondaryButtonTitle]=\"secondaryButtonTitle\"\n [cancelButtonTitle]=\"cancelButtonTitle\"\n (secondaryButtonClick)=\"onModalSecondaryButtonClick()\"\n (closeModal)=\"resetModal()\"\n (submitModal)=\"onSubmitModal()\"\n (confirmEvent)=\"onDeleteConfirm()\"\n>\n <div class=\"event-modal\">\n @if (!form && editMode && !openRecurringOptions) {\n <lib-event-info [event]=\"event\" [calendars]=\"calendars\"></lib-event-info>\n }\n @if (openRecurringOptions) {\n <lib-edit-recurring-event [editOptionsCtrl]=\"editOptionsCtrl\" [excludeCurrentInstance]=\"recurringTypeChanged\"></lib-edit-recurring-event>\n }\n <ng-content></ng-content>\n @if (form && !openRecurringOptions) {\n <form [formGroup]=\"form\" autocomplete=\"off\" appFocusInvalidInput (ngSubmit)=\"saveEvent()\" (keyup.enter)=\"saveEvent()\" id=\"event-form\">\n <div class=\"form-body\">\n <div class=\"form-row center-content\">\n <div class=\"event-title-field\">\n <lib-input-field\n maxLength=\"2000\"\n formControlName=\"title\"\n type=\"text\"\n [readonly]=\"loading$ | async\"\n [label]=\"'CALENDAR.TITLE_FIELD' | fallbackTranslate: 'Title'\"\n [trimWhiteSpace]=\"false\"\n ></lib-input-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['title'] }\"></lib-error-message>\n </div>\n </div>\n <div class=\"form-row event-dates\">\n <div class=\"input-field-container input-field-container-group\">\n <div class=\"event-date-container\" [ngClass]=\"{ 'input-field-container-full-row': !form.controls['allDay'].value }\">\n <lib-input-date-field\n class=\"event-date\"\n formControlName=\"startDate\"\n [readonly]=\"loading$ | async\"\n [hieActions]=\"true\"\n [showIcon]=\"true\"\n [label]=\"'CALENDAR.START_DATE' | fallbackTranslate: 'Start Date'\"\n ></lib-input-date-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startDate'] }\"></lib-error-message>\n </div>\n @if (form.controls['allDay'].value) {\n <lib-input-date-field\n class=\"event-date event-end-date\"\n formControlName=\"endDate\"\n [disabled]=\"loading$ | async\"\n [hieActions]=\"true\"\n [showIcon]=\"true\"\n [label]=\"'CALENDAR.END_DATE' | fallbackTranslate: 'End Date'\"\n ></lib-input-date-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endDate'] }\"></lib-error-message>\n }\n </div>\n </div>\n\n @if (!form.controls['allDay'].value) {\n <div class=\"form-row\">\n <div class=\"input-field-container input-field-container-group time-fields-group\">\n <div class=\"time-field\">\n <lib-input-time-field\n formControlName=\"startTime\"\n [showIcon]=\"true\"\n [startDate]=\"eventStart\"\n [interval]=\"15\"\n [disabled]=\"loading$ | async\"\n [label]=\"'CALENDAR.STARTS' | fallbackTranslate: 'Starts'\"\n ></lib-input-time-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startTime'] }\"></lib-error-message>\n </div>\n <div class=\"time-field\">\n <lib-input-time-field\n class=\"end-time\"\n formControlName=\"endTime\"\n [interval]=\"15\"\n [showIcon]=\"true\"\n [displaySlotTime]=\"true\"\n [fromTime]=\"\n form.controls.startTime.value && form.controls.startTime.value['slotValue'] ? form.controls.startTime.value['slotValue'] : form.controls.startTime.value\n \"\n [startDate]=\"eventStart\"\n [disabled]=\"loading$ | async\"\n [label]=\"'CALENDAR.ENDS' | fallbackTranslate: 'Ends'\"\n ></lib-input-time-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endTime'] }\"></lib-error-message>\n </div>\n </div>\n </div>\n }\n\n <div class=\"form-row recurring\">\n <div class=\"recurring-select\" formGroupName=\"recurringPattern\">\n <lib-input-field-select\n formControlName=\"type\"\n [optionLabel]=\"(recurringOptions[0].title | fallbackTranslate: 'noTrnslations') === 'noTrnslations' ? 'name' : 'title'\"\n [optionValue]=\"'type'\"\n [options]=\"recurringOptions\"\n [disabled]=\"loading$ | async\"\n >\n </lib-input-field-select>\n </div>\n <div class=\"allDay-container\">\n <ion-item class=\"no-shadow allDay\">\n <label>\n <lib-dashed-checkbox formControlName=\"allDay\" [disabled]=\"loading$ | async\"></lib-dashed-checkbox>\n <span>{{ 'CALENDAR.ALL_DAY' | fallbackTranslate: 'All day' }}</span>\n </label>\n </ion-item>\n </div>\n </div>\n\n <div class=\"form-row address\">\n <div class=\"input-field-container\">\n <lib-input-field\n maxLength=\"2000\"\n [trimWhiteSpace]=\"false\"\n formControlName=\"address\"\n [enableGoogleAddress]=\"!locationSearchFn\"\n [locationSearchFn]=\"null\"\n [address]=\"form.controls['address'].value\"\n (locationChange)=\"onLocationChange($event)\"\n (onBlur)=\"hideLocalSuggestionsDelayed()\"\n [readonly]=\"loading$ | async\"\n [label]=\"'FIELDS.ADD_LOCATION' | fallbackTranslate: 'Location'\"\n >\n </lib-input-field>\n\n @if (showLocalSuggestions && localSuggestions.length > 0) {\n <div class=\"custom-location-suggestions\">\n @for (suggestion of localSuggestions; track suggestion.address) {\n <div class=\"suggestion-item\" (mousedown)=\"onLocalSuggestionSelect(suggestion)\">\n <div class=\"suggestion-icon\"><i class=\"icon icon-gen3-pin\"></i></div>\n <div class=\"suggestion-text\">{{ suggestion.address }}</div>\n </div>\n }\n </div>\n }\n\n <lib-error-message class=\"input-error\" [config]=\"{ control: form.controls['address'] }\"></lib-error-message>\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"event-note-field\">\n <lib-input-field\n formControlName=\"note\"\n [textarea]=\"true\"\n [label]=\"'FIELDS.ADD_DESCRIPTION' | fallbackTranslate: 'Description'\"\n maxLength=\"2000\"\n [readonly]=\"loading$ | async\"\n ></lib-input-field>\n </div>\n </div>\n </div>\n </form>\n }\n </div>\n</lib-bottom-modal>\n", styles: [".event-modal{--input-width: 100%;--input-height: 48px;--border-radius: 100px;--input-icon-color: #fe3c72;--input-font-color: #fff;--dropdown-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);--input-font-family: \"Gilroy-Regular\", serif;--label-color: grey;--input-field-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, .7), inset -2px -2px 8px rgba(203, 199, 209, .5);--input-number-filed-font: var(--font-family);--textarea-height: 100px !important;position:relative;display:block;width:100%;padding:0 20px 10px;max-height:72vh;overflow:visible!important}.event-modal .form-row{display:flex;flex-direction:row;margin-bottom:10px}.event-modal .form-row.form-footer{align-items:flex-end;justify-content:flex-end;margin-bottom:-15px}.event-modal .form-row.form-footer lib-primary-btn{width:100px}.event-modal .form-row.form-row-error{margin:-10px 0 0;padding:0;height:20px}.event-modal .form-row.recurring{margin:12px 0;display:flex}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:50%}.event-modal .form-row.recurring .recurring-select lib-input-field-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end;margin-top:-10px}.event-modal form{padding:5px 5px 0}.event-modal form .form-body{max-width:100%;position:relative;display:block;overflow:visible}.event-modal ion-item ion-label{font-family:Gilroy-Regular,serif!important}.event-modal ion-item ion-label:not(.allDay){display:flex!important;flex-direction:row;align-items:center;justify-content:center}.event-modal ion-item.allDay{margin-top:-10px;width:fit-content;--min-height: 50px}.event-modal ion-item.allDay label{display:flex;gap:10px;align-items:center;font-family:Gilroy-Regular,serif;cursor:pointer}.event-modal ion-item.allDay lib-dashed-checkbox{--size: 24px;--color: var(--cyrano-pink-shade-1)}.event-modal .event-title-field,.event-modal .event-note-field{position:relative;display:block;width:100%;padding-top:10px}.event-modal .event-title-field lib-input-field,.event-modal .event-note-field lib-input-field{position:relative;width:100%;min-width:100%}.event-modal .input-field-container{padding-top:2px;width:100%}.event-modal .input-field-container.input-field-container-group{display:flex;gap:5px}.event-modal .input-field-container.input-field-container-group div{width:50%}.event-modal .input-field-container.input-field-container-group div.input-field-container-full-row{width:100%}.event-modal .input-field-container .time-fields{display:flex;gap:10px}.event-modal .input-field-container lib-input-field{width:100%}.event-modal .field-error{position:relative;display:block;width:100%}@media screen and (max-width: 500px){.event-modal .event-date-container{margin-bottom:15px}.event-modal .input-field-container-group{display:flex;flex-direction:column}.event-modal .input-field-container-group div{width:100%!important}.event-modal .input-field-container-group.time-fields-group{flex-direction:row}.event-modal .form-row.recurring{display:block}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end}.event-modal .form-row.recurring .allDay-container ion-item.allDay{padding-left:0;margin-top:10px}.event-modal .form-row.address{margin-top:-20px}.event-modal .form-row.event-dates{margin-bottom:0}}@media screen and (max-width: 350px){.event-modal .input-placeholder.input-placeholder-date .time-placeholder{margin-left:0}}.event-modal .event-input-field-error{margin-top:-20px}.event-modal ::ng-deep .location-suggestions{display:none!important}.event-modal .custom-location-suggestions{display:block!important;visibility:visible!important;opacity:1!important;border:3px solid red!important;position:absolute;bottom:calc(100% - 2px);left:0;right:0;z-index:10000;background:#1e1c23;border:1px solid rgba(255,255,255,.1);border-radius:12px;max-height:200px;overflow-y:auto;box-shadow:0 8px 32px #00000080;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px 0;animation:fadeIn .1s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.event-modal .custom-location-suggestions .suggestion-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:all .2s ease}.event-modal .custom-location-suggestions .suggestion-item:hover{background:#fe3c721a}.event-modal .custom-location-suggestions .suggestion-item:hover .suggestion-text,.event-modal .custom-location-suggestions .suggestion-item:hover .suggestion-icon{color:#fe3c72}.event-modal .custom-location-suggestions .suggestion-item .suggestion-icon{color:#ffffff80;font-size:14px;flex-shrink:0}.event-modal .custom-location-suggestions .suggestion-item .suggestion-text{color:#ffffffe6;font-size:13px;font-family:Gilroy-Regular,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.DashedCheckboxComponent, selector: "lib-dashed-checkbox", inputs: ["checked", "disabled"], outputs: ["toggle"] }, { kind: "component", type: i1.InputDateFieldComponent, selector: "lib-input-date-field", inputs: ["label", "defaultDate", "maxDate", "minDate", "showTime", "hieActions", "readonly", "defaultDayHighlight", "showIcon", "timeOnly", "view", "disabled", "dateFormat", "placeholder", "appendTo", "stepMinute", "mask", "styleClass", "timeFormat"], outputs: ["focusEvent"] }, { kind: "component", type: i1.InputFieldComponent, selector: "lib-input-field,[lib-input-field]", inputs: ["name", "autocomplete", "label", "placeholder", "type", "readonly", "focus", "enableGoogleAddress", "locationAutocompleteConfig", "defaultLocation", "mask", "prefix", "suffix", "maxLength", "address", "textarea", "resize", "counter", "patterns", "trimWhiteSpace", "disabled", "locationSearchFn", "locationSearchDebounce", "locationSearchMinLength"], outputs: ["mapError", "locationChange", "keyDown", "onBlur"] }, { kind: "component", type: i1.InputFieldSelectComponent, selector: "lib-input-field-select", inputs: ["multiple", "label", "placeholder", "optionLabel", "optionValue", "options", "optionsTemplates", "filterBy", "enableFilter", "readonly", "disabled", "showClear", "editable", "withTemplate", "enableTranslation"], outputs: ["valueChange"] }, { kind: "component", type: i1.InputTimeFieldComponent, selector: "lib-input-time-field", inputs: ["startDate", "interval", "displaySlotTime", "fromTime", "format", "label", "readonly", "showIcon", "disabled"], outputs: ["focusEvent"] }, { kind: "component", type: i1.BottomModalComponent, selector: "lib-bottom-modal", inputs: ["breakpoints", "initialBreakpoint", "isOpen", "backdropDismiss", "canDismiss", "showArrow", "showBackBtn", "showConfirm", "showCloseBtn", "loading", "showHeaderSeparator", "title", "confirmationTitle", "confirmationMsg", "confirmButton", "confirmCancelButton", "description", "secondaryButtonTitle", "submitButtonTitle", "cancelButtonTitle", "validModal", "adaptToContentHeight", "customClass"], outputs: ["isOpenChange", "breakpointChange", "closeModal", "submitModal", "secondaryButtonClick", "backClick", "showConfirmChange", "confirmEvent"] }, { kind: "component", type: i1.LibErrorMessageComponent, selector: "lib-error-message", inputs: ["config"] }, { kind: "component", type: LibEventInfoComponent, selector: "lib-event-info", inputs: ["event", "calendars"] }, { kind: "component", type: LibEditRecurringEventComponent, selector: "lib-edit-recurring-event", inputs: ["excludeCurrentInstance", "editOptionsCtrl"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: FallbackTranslatePipe, name: "fallbackTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1175
1212
|
}
|
|
1176
1213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LibEventFormComponent, decorators: [{
|
|
1177
1214
|
type: Component,
|
|
1178
|
-
args: [{ selector: 'lib-event-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<lib-bottom-modal\n [title]=\"modalTitle\"\n [(isOpen)]=\"openModal\"\n [(showConfirm)]=\"showConfirm\"\n [confirmButton]=\"'CONFIRM.YES' | fallbackTranslate: 'Yes'\"\n [confirmCancelButton]=\"'CONFIRM.No' | fallbackTranslate: 'No'\"\n [confirmationTitle]=\"'CONFIRM.ARE_YOU_SURE' | fallbackTranslate: 'Confirm Deletion'\"\n [confirmationMsg]=\"'CONFIRM.ARE_YOU_SURE_MESSAGE' | fallbackTranslate: 'Sure you want to delete?'\"\n [showCloseBtn]=\"!cancelButtonTitle && editMode\"\n [customClass]=\"'calendar-event-modal'\"\n [loading]=\"loading$ | async\"\n [validModal]=\"(!form || form.valid) && (loading$ | async) !== true\"\n [submitButtonTitle]=\"submitButtonTitle\"\n [secondaryButtonTitle]=\"secondaryButtonTitle\"\n [cancelButtonTitle]=\"cancelButtonTitle\"\n (secondaryButtonClick)=\"onModalSecondaryButtonClick()\"\n (closeModal)=\"resetModal()\"\n (submitModal)=\"onSubmitModal()\"\n (confirmEvent)=\"onDeleteConfirm()\"\n>\n <div class=\"event-modal\">\n @if (!form && editMode && !openRecurringOptions) {\n <lib-event-info [event]=\"event\" [calendars]=\"calendars\"></lib-event-info>\n }\n @if (openRecurringOptions) {\n <lib-edit-recurring-event [editOptionsCtrl]=\"editOptionsCtrl\" [excludeCurrentInstance]=\"recurringTypeChanged\"></lib-edit-recurring-event>\n }\n <ng-content></ng-content>\n @if (form && !openRecurringOptions) {\n <form [formGroup]=\"form\" autocomplete=\"off\" appFocusInvalidInput (ngSubmit)=\"saveEvent()\" (keyup.enter)=\"saveEvent()\" id=\"event-form\">\n <div class=\"form-body\">\n <div class=\"form-row center-content\">\n <div class=\"event-title-field\">\n <lib-input-field\n maxLength=\"2000\"\n formControlName=\"title\"\n type=\"text\"\n [readonly]=\"loading$ | async\"\n [label]=\"'CALENDAR.TITLE_FIELD' | fallbackTranslate: 'Title'\"\n [trimWhiteSpace]=\"false\"\n ></lib-input-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['title'] }\"></lib-error-message>\n </div>\n </div>\n <div class=\"form-row event-dates\">\n <div class=\"input-field-container input-field-container-group\">\n <div class=\"event-date-container\" [ngClass]=\"{ 'input-field-container-full-row': !form.controls['allDay'].value }\">\n <lib-input-date-field\n class=\"event-date\"\n formControlName=\"startDate\"\n [readonly]=\"loading$ | async\"\n [hieActions]=\"true\"\n [showIcon]=\"true\"\n [label]=\"'CALENDAR.START_DATE' | fallbackTranslate: 'Start Date'\"\n ></lib-input-date-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startDate'] }\"></lib-error-message>\n </div>\n @if (form.controls['allDay'].value) {\n <lib-input-date-field\n class=\"event-date event-end-date\"\n formControlName=\"endDate\"\n [disabled]=\"loading$ | async\"\n [hieActions]=\"true\"\n [showIcon]=\"true\"\n [label]=\"'CALENDAR.END_DATE' | fallbackTranslate: 'End Date'\"\n ></lib-input-date-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endDate'] }\"></lib-error-message>\n }\n </div>\n </div>\n\n @if (!form.controls['allDay'].value) {\n <div class=\"form-row\">\n <div class=\"input-field-container input-field-container-group time-fields-group\">\n <div class=\"time-field\">\n <lib-input-time-field\n formControlName=\"startTime\"\n [showIcon]=\"true\"\n [startDate]=\"eventStart\"\n [interval]=\"15\"\n [disabled]=\"loading$ | async\"\n [label]=\"'CALENDAR.STARTS' | fallbackTranslate: 'Starts'\"\n ></lib-input-time-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startTime'] }\"></lib-error-message>\n </div>\n <div class=\"time-field\">\n <lib-input-time-field\n class=\"end-time\"\n formControlName=\"endTime\"\n [interval]=\"15\"\n [showIcon]=\"true\"\n [displaySlotTime]=\"true\"\n [fromTime]=\"\n form.controls.startTime.value && form.controls.startTime.value['slotValue'] ? form.controls.startTime.value['slotValue'] : form.controls.startTime.value\n \"\n [startDate]=\"eventStart\"\n [disabled]=\"loading$ | async\"\n [label]=\"'CALENDAR.ENDS' | fallbackTranslate: 'Ends'\"\n ></lib-input-time-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endTime'] }\"></lib-error-message>\n </div>\n </div>\n </div>\n }\n\n <div class=\"form-row recurring\">\n <div class=\"recurring-select\" formGroupName=\"recurringPattern\">\n <lib-input-field-select\n formControlName=\"type\"\n [optionLabel]=\"(recurringOptions[0].title | fallbackTranslate: 'noTrnslations') === 'noTrnslations' ? 'name' : 'title'\"\n [optionValue]=\"'type'\"\n [options]=\"recurringOptions\"\n [disabled]=\"loading$ | async\"\n >\n </lib-input-field-select>\n </div>\n <div class=\"allDay-container\">\n <ion-item class=\"no-shadow allDay\">\n <label>\n <lib-dashed-checkbox formControlName=\"allDay\" [disabled]=\"loading$ | async\"></lib-dashed-checkbox>\n <span>{{ 'CALENDAR.ALL_DAY' | fallbackTranslate: 'All day' }}</span>\n </label>\n </ion-item>\n </div>\n </div>\n\n <div class=\"form-row address\">\n <div class=\"input-field-container\">\n <lib-input-field\n maxLength=\"2000\"\n [trimWhiteSpace]=\"false\"\n formControlName=\"address\"\n [enableGoogleAddress]=\"!locationSearchFn\"\n [locationSearchFn]=\"locationSearchFn\"\n [address]=\"form.controls['address'].value\"\n (locationChange)=\"onLocationChange($event)\"\n [readonly]=\"loading$ | async\"\n [label]=\"'FIELDS.ADD_LOCATION' | fallbackTranslate: 'Location'\"\n >\n </lib-input-field>\n <lib-error-message class=\"input-error\" [config]=\"{ control: form.controls['address'] }\"></lib-error-message>\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"event-note-field\">\n <lib-input-field\n formControlName=\"note\"\n [textarea]=\"true\"\n [label]=\"'FIELDS.ADD_DESCRIPTION' | fallbackTranslate: 'Description'\"\n maxLength=\"2000\"\n [readonly]=\"loading$ | async\"\n ></lib-input-field>\n </div>\n </div>\n </div>\n </form>\n }\n </div>\n</lib-bottom-modal>\n", styles: [".event-modal{--input-width: 100%;--input-height: 48px;--border-radius: 100px;--input-icon-color: #fe3c72;--input-font-color: #fff;--dropdown-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);--input-font-family: \"Gilroy-Regular\", serif;--label-color: grey;--input-field-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, .7), inset -2px -2px 8px rgba(203, 199, 209, .5);--input-number-filed-font: var(--font-family);--textarea-height: 100px !important;position:relative;display:block;width:100%;padding:0 20px 10px;max-height:72vh;overflow:visible!important}.event-modal .form-row{display:flex;flex-direction:row;margin-bottom:10px}.event-modal .form-row.form-footer{align-items:flex-end;justify-content:flex-end;margin-bottom:-15px}.event-modal .form-row.form-footer lib-primary-btn{width:100px}.event-modal .form-row.form-row-error{margin:-10px 0 0;padding:0;height:20px}.event-modal .form-row.recurring{margin:12px 0;display:flex}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:50%}.event-modal .form-row.recurring .recurring-select lib-input-field-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end;margin-top:-10px}.event-modal form{padding:5px 5px 0}.event-modal form .form-body{max-width:100%;position:relative;display:block;overflow:visible}.event-modal ion-item ion-label{font-family:Gilroy-Regular,serif!important}.event-modal ion-item ion-label:not(.allDay){display:flex!important;flex-direction:row;align-items:center;justify-content:center}.event-modal ion-item.allDay{margin-top:-10px;width:fit-content;--min-height: 50px}.event-modal ion-item.allDay label{display:flex;gap:10px;align-items:center;font-family:Gilroy-Regular,serif;cursor:pointer}.event-modal ion-item.allDay lib-dashed-checkbox{--size: 24px;--color: var(--cyrano-pink-shade-1)}.event-modal .event-title-field,.event-modal .event-note-field{position:relative;display:block;width:100%;padding-top:10px}.event-modal .event-title-field lib-input-field,.event-modal .event-note-field lib-input-field{position:relative;width:100%;min-width:100%}.event-modal .input-field-container{padding-top:2px;width:100%}.event-modal .input-field-container.input-field-container-group{display:flex;gap:5px}.event-modal .input-field-container.input-field-container-group div{width:50%}.event-modal .input-field-container.input-field-container-group div.input-field-container-full-row{width:100%}.event-modal .input-field-container .time-fields{display:flex;gap:10px}.event-modal .input-field-container lib-input-field{width:100%}.event-modal .field-error{position:relative;display:block;width:100%}@media screen and (max-width: 500px){.event-modal .event-date-container{margin-bottom:15px}.event-modal .input-field-container-group{display:flex;flex-direction:column}.event-modal .input-field-container-group div{width:100%!important}.event-modal .input-field-container-group.time-fields-group{flex-direction:row}.event-modal .form-row.recurring{display:block}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end}.event-modal .form-row.recurring .allDay-container ion-item.allDay{padding-left:0;margin-top:10px}.event-modal .form-row.address{margin-top:-20px}.event-modal .form-row.event-dates{margin-bottom:0}}@media screen and (max-width: 350px){.event-modal .input-placeholder.input-placeholder-date .time-placeholder{margin-left:0}}.event-modal .event-input-field-error{margin-top:-20px}.event-modal ::ng-deep .location-suggestions{position:absolute;bottom:100%;top:auto;z-index:99999!important;background:var(--cyrano-dark-shade-1, #1e1c23)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px #00000080}\n"] }]
|
|
1215
|
+
args: [{ selector: 'lib-event-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<lib-bottom-modal\n [title]=\"modalTitle\"\n [(isOpen)]=\"openModal\"\n [(showConfirm)]=\"showConfirm\"\n [confirmButton]=\"'CONFIRM.YES' | fallbackTranslate: 'Yes'\"\n [confirmCancelButton]=\"'CONFIRM.No' | fallbackTranslate: 'No'\"\n [confirmationTitle]=\"'CONFIRM.ARE_YOU_SURE' | fallbackTranslate: 'Confirm Deletion'\"\n [confirmationMsg]=\"'CONFIRM.ARE_YOU_SURE_MESSAGE' | fallbackTranslate: 'Sure you want to delete?'\"\n [showCloseBtn]=\"!cancelButtonTitle && editMode\"\n [customClass]=\"'calendar-event-modal'\"\n [loading]=\"loading$ | async\"\n [validModal]=\"(!form || form.valid) && (loading$ | async) !== true\"\n [submitButtonTitle]=\"submitButtonTitle\"\n [secondaryButtonTitle]=\"secondaryButtonTitle\"\n [cancelButtonTitle]=\"cancelButtonTitle\"\n (secondaryButtonClick)=\"onModalSecondaryButtonClick()\"\n (closeModal)=\"resetModal()\"\n (submitModal)=\"onSubmitModal()\"\n (confirmEvent)=\"onDeleteConfirm()\"\n>\n <div class=\"event-modal\">\n @if (!form && editMode && !openRecurringOptions) {\n <lib-event-info [event]=\"event\" [calendars]=\"calendars\"></lib-event-info>\n }\n @if (openRecurringOptions) {\n <lib-edit-recurring-event [editOptionsCtrl]=\"editOptionsCtrl\" [excludeCurrentInstance]=\"recurringTypeChanged\"></lib-edit-recurring-event>\n }\n <ng-content></ng-content>\n @if (form && !openRecurringOptions) {\n <form [formGroup]=\"form\" autocomplete=\"off\" appFocusInvalidInput (ngSubmit)=\"saveEvent()\" (keyup.enter)=\"saveEvent()\" id=\"event-form\">\n <div class=\"form-body\">\n <div class=\"form-row center-content\">\n <div class=\"event-title-field\">\n <lib-input-field\n maxLength=\"2000\"\n formControlName=\"title\"\n type=\"text\"\n [readonly]=\"loading$ | async\"\n [label]=\"'CALENDAR.TITLE_FIELD' | fallbackTranslate: 'Title'\"\n [trimWhiteSpace]=\"false\"\n ></lib-input-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['title'] }\"></lib-error-message>\n </div>\n </div>\n <div class=\"form-row event-dates\">\n <div class=\"input-field-container input-field-container-group\">\n <div class=\"event-date-container\" [ngClass]=\"{ 'input-field-container-full-row': !form.controls['allDay'].value }\">\n <lib-input-date-field\n class=\"event-date\"\n formControlName=\"startDate\"\n [readonly]=\"loading$ | async\"\n [hieActions]=\"true\"\n [showIcon]=\"true\"\n [label]=\"'CALENDAR.START_DATE' | fallbackTranslate: 'Start Date'\"\n ></lib-input-date-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startDate'] }\"></lib-error-message>\n </div>\n @if (form.controls['allDay'].value) {\n <lib-input-date-field\n class=\"event-date event-end-date\"\n formControlName=\"endDate\"\n [disabled]=\"loading$ | async\"\n [hieActions]=\"true\"\n [showIcon]=\"true\"\n [label]=\"'CALENDAR.END_DATE' | fallbackTranslate: 'End Date'\"\n ></lib-input-date-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endDate'] }\"></lib-error-message>\n }\n </div>\n </div>\n\n @if (!form.controls['allDay'].value) {\n <div class=\"form-row\">\n <div class=\"input-field-container input-field-container-group time-fields-group\">\n <div class=\"time-field\">\n <lib-input-time-field\n formControlName=\"startTime\"\n [showIcon]=\"true\"\n [startDate]=\"eventStart\"\n [interval]=\"15\"\n [disabled]=\"loading$ | async\"\n [label]=\"'CALENDAR.STARTS' | fallbackTranslate: 'Starts'\"\n ></lib-input-time-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startTime'] }\"></lib-error-message>\n </div>\n <div class=\"time-field\">\n <lib-input-time-field\n class=\"end-time\"\n formControlName=\"endTime\"\n [interval]=\"15\"\n [showIcon]=\"true\"\n [displaySlotTime]=\"true\"\n [fromTime]=\"\n form.controls.startTime.value && form.controls.startTime.value['slotValue'] ? form.controls.startTime.value['slotValue'] : form.controls.startTime.value\n \"\n [startDate]=\"eventStart\"\n [disabled]=\"loading$ | async\"\n [label]=\"'CALENDAR.ENDS' | fallbackTranslate: 'Ends'\"\n ></lib-input-time-field>\n <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endTime'] }\"></lib-error-message>\n </div>\n </div>\n </div>\n }\n\n <div class=\"form-row recurring\">\n <div class=\"recurring-select\" formGroupName=\"recurringPattern\">\n <lib-input-field-select\n formControlName=\"type\"\n [optionLabel]=\"(recurringOptions[0].title | fallbackTranslate: 'noTrnslations') === 'noTrnslations' ? 'name' : 'title'\"\n [optionValue]=\"'type'\"\n [options]=\"recurringOptions\"\n [disabled]=\"loading$ | async\"\n >\n </lib-input-field-select>\n </div>\n <div class=\"allDay-container\">\n <ion-item class=\"no-shadow allDay\">\n <label>\n <lib-dashed-checkbox formControlName=\"allDay\" [disabled]=\"loading$ | async\"></lib-dashed-checkbox>\n <span>{{ 'CALENDAR.ALL_DAY' | fallbackTranslate: 'All day' }}</span>\n </label>\n </ion-item>\n </div>\n </div>\n\n <div class=\"form-row address\">\n <div class=\"input-field-container\">\n <lib-input-field\n maxLength=\"2000\"\n [trimWhiteSpace]=\"false\"\n formControlName=\"address\"\n [enableGoogleAddress]=\"!locationSearchFn\"\n [locationSearchFn]=\"null\"\n [address]=\"form.controls['address'].value\"\n (locationChange)=\"onLocationChange($event)\"\n (onBlur)=\"hideLocalSuggestionsDelayed()\"\n [readonly]=\"loading$ | async\"\n [label]=\"'FIELDS.ADD_LOCATION' | fallbackTranslate: 'Location'\"\n >\n </lib-input-field>\n\n @if (showLocalSuggestions && localSuggestions.length > 0) {\n <div class=\"custom-location-suggestions\">\n @for (suggestion of localSuggestions; track suggestion.address) {\n <div class=\"suggestion-item\" (mousedown)=\"onLocalSuggestionSelect(suggestion)\">\n <div class=\"suggestion-icon\"><i class=\"icon icon-gen3-pin\"></i></div>\n <div class=\"suggestion-text\">{{ suggestion.address }}</div>\n </div>\n }\n </div>\n }\n\n <lib-error-message class=\"input-error\" [config]=\"{ control: form.controls['address'] }\"></lib-error-message>\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"event-note-field\">\n <lib-input-field\n formControlName=\"note\"\n [textarea]=\"true\"\n [label]=\"'FIELDS.ADD_DESCRIPTION' | fallbackTranslate: 'Description'\"\n maxLength=\"2000\"\n [readonly]=\"loading$ | async\"\n ></lib-input-field>\n </div>\n </div>\n </div>\n </form>\n }\n </div>\n</lib-bottom-modal>\n", styles: [".event-modal{--input-width: 100%;--input-height: 48px;--border-radius: 100px;--input-icon-color: #fe3c72;--input-font-color: #fff;--dropdown-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);--input-font-family: \"Gilroy-Regular\", serif;--label-color: grey;--input-field-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, .7), inset -2px -2px 8px rgba(203, 199, 209, .5);--input-number-filed-font: var(--font-family);--textarea-height: 100px !important;position:relative;display:block;width:100%;padding:0 20px 10px;max-height:72vh;overflow:visible!important}.event-modal .form-row{display:flex;flex-direction:row;margin-bottom:10px}.event-modal .form-row.form-footer{align-items:flex-end;justify-content:flex-end;margin-bottom:-15px}.event-modal .form-row.form-footer lib-primary-btn{width:100px}.event-modal .form-row.form-row-error{margin:-10px 0 0;padding:0;height:20px}.event-modal .form-row.recurring{margin:12px 0;display:flex}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:50%}.event-modal .form-row.recurring .recurring-select lib-input-field-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end;margin-top:-10px}.event-modal form{padding:5px 5px 0}.event-modal form .form-body{max-width:100%;position:relative;display:block;overflow:visible}.event-modal ion-item ion-label{font-family:Gilroy-Regular,serif!important}.event-modal ion-item ion-label:not(.allDay){display:flex!important;flex-direction:row;align-items:center;justify-content:center}.event-modal ion-item.allDay{margin-top:-10px;width:fit-content;--min-height: 50px}.event-modal ion-item.allDay label{display:flex;gap:10px;align-items:center;font-family:Gilroy-Regular,serif;cursor:pointer}.event-modal ion-item.allDay lib-dashed-checkbox{--size: 24px;--color: var(--cyrano-pink-shade-1)}.event-modal .event-title-field,.event-modal .event-note-field{position:relative;display:block;width:100%;padding-top:10px}.event-modal .event-title-field lib-input-field,.event-modal .event-note-field lib-input-field{position:relative;width:100%;min-width:100%}.event-modal .input-field-container{padding-top:2px;width:100%}.event-modal .input-field-container.input-field-container-group{display:flex;gap:5px}.event-modal .input-field-container.input-field-container-group div{width:50%}.event-modal .input-field-container.input-field-container-group div.input-field-container-full-row{width:100%}.event-modal .input-field-container .time-fields{display:flex;gap:10px}.event-modal .input-field-container lib-input-field{width:100%}.event-modal .field-error{position:relative;display:block;width:100%}@media screen and (max-width: 500px){.event-modal .event-date-container{margin-bottom:15px}.event-modal .input-field-container-group{display:flex;flex-direction:column}.event-modal .input-field-container-group div{width:100%!important}.event-modal .input-field-container-group.time-fields-group{flex-direction:row}.event-modal .form-row.recurring{display:block}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end}.event-modal .form-row.recurring .allDay-container ion-item.allDay{padding-left:0;margin-top:10px}.event-modal .form-row.address{margin-top:-20px}.event-modal .form-row.event-dates{margin-bottom:0}}@media screen and (max-width: 350px){.event-modal .input-placeholder.input-placeholder-date .time-placeholder{margin-left:0}}.event-modal .event-input-field-error{margin-top:-20px}.event-modal ::ng-deep .location-suggestions{display:none!important}.event-modal .custom-location-suggestions{display:block!important;visibility:visible!important;opacity:1!important;border:3px solid red!important;position:absolute;bottom:calc(100% - 2px);left:0;right:0;z-index:10000;background:#1e1c23;border:1px solid rgba(255,255,255,.1);border-radius:12px;max-height:200px;overflow-y:auto;box-shadow:0 8px 32px #00000080;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px 0;animation:fadeIn .1s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.event-modal .custom-location-suggestions .suggestion-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:all .2s ease}.event-modal .custom-location-suggestions .suggestion-item:hover{background:#fe3c721a}.event-modal .custom-location-suggestions .suggestion-item:hover .suggestion-text,.event-modal .custom-location-suggestions .suggestion-item:hover .suggestion-icon{color:#fe3c72}.event-modal .custom-location-suggestions .suggestion-item .suggestion-icon{color:#ffffff80;font-size:14px;flex-shrink:0}.event-modal .custom-location-suggestions .suggestion-item .suggestion-text{color:#ffffffe6;font-size:13px;font-family:Gilroy-Regular,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
1179
1216
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }, { type: CalendarUtilsService }, { type: FallbackTranslatePipe }], propDecorators: { calendars: [{
|
|
1180
1217
|
type: Input
|
|
1181
1218
|
}], locationSearchFn: [{
|