@naniteninja/dashboard-components-lib 2.1.50 → 2.1.52
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.
|
@@ -1206,11 +1206,11 @@ class LibEventFormComponent extends BaseComponent {
|
|
|
1206
1206
|
}
|
|
1207
1207
|
}
|
|
1208
1208
|
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 }); }
|
|
1209
|
-
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{position:absolute;top:calc(100% + 4px);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 }); }
|
|
1209
|
+
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{position:relative!important;display:block!important;visibility:visible!important;opacity:1!important;left:0;right:0;z-index:100;background:#1e1c23;border:1px solid rgba(255,255,255,.1);border-radius:12px;max-height:250px;overflow-y:auto;box-shadow:inset 0 0 10px #00000080;padding:4px 0;margin:8px 0;animation:slideDown .2s ease-out}@keyframes slideDown{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 }); }
|
|
1210
1210
|
}
|
|
1211
1211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LibEventFormComponent, decorators: [{
|
|
1212
1212
|
type: Component,
|
|
1213
|
-
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{position:absolute;top:calc(100% + 4px);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"] }]
|
|
1213
|
+
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{position:relative!important;display:block!important;visibility:visible!important;opacity:1!important;left:0;right:0;z-index:100;background:#1e1c23;border:1px solid rgba(255,255,255,.1);border-radius:12px;max-height:250px;overflow-y:auto;box-shadow:inset 0 0 10px #00000080;padding:4px 0;margin:8px 0;animation:slideDown .2s ease-out}@keyframes slideDown{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"] }]
|
|
1214
1214
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }, { type: CalendarUtilsService }, { type: FallbackTranslatePipe }], propDecorators: { calendars: [{
|
|
1215
1215
|
type: Input
|
|
1216
1216
|
}], locationSearchFn: [{
|