@sneat/extensions-schedulus-shared 0.3.0

package/esm2022/lib/components/happening-slot-form/happening-slot-form.component.js

@@ -0,0 +1,505 @@
+import { Component, computed, EventEmitter, input, Input, Output, signal, ViewChild, inject, } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule, UntypedFormGroup, } from '@angular/forms';
+import { IonButton, IonCheckbox, IonCol, IonGrid, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonRow, IonSelect, IonSelectOption, IonSpinner, ModalController, } from '@ionic/angular/standalone';
+import { ClassName, SelectFromListComponent } from '@sneat/ui';
+import { emptyTiming, } from '@sneat/mod-schedulus-core';
+import { newRandomId } from '@sneat/random';
+import { StartEndDatetimeFormComponent } from '../start-end-datetime-form/start-end-datetime-form.component';
+import { WeekdaysFormBase } from '../weekdays/weekdays-form-base';
+import { HappeningService } from '../../services/happening.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+/*
+ INTENTIONALLY not decoupling weekdays form (WeekdaysFormBase) into a separate component
+ as markup of the form is tightly coupled with the weekdays form
+ as weekend & weekdays checkboxes are in the header of the form
+ */
+export class HappeningSlotFormComponent extends WeekdaysFormBase {
+    onMonthlyModeChanged(s) {
+        this.monthlyMode.set(s);
+    }
+    constructor() {
+        super(true);
+        this.modalCtrl = inject(ModalController);
+        this.happeningService = inject(HappeningService);
+        this.$happening = input.required(...(ngDevMode ? [{ debugName: "$happening" }] : []));
+        this.$happeningID = computed(() => this.$happening().id, ...(ngDevMode ? [{ debugName: "$happeningID" }] : []));
+        this.$happeningType = computed(() => this.$happening().brief?.type, ...(ngDevMode ? [{ debugName: "$happeningType" }] : []));
+        this.isToDo = false;
+        this.slotAdded = new EventEmitter();
+        this.happeningChange = new EventEmitter();
+        this.eventTimesChanged = new EventEmitter();
+        this.timing = emptyTiming;
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+        this.tab = 'when';
+        // minDate = '2000';
+        // maxDate = '' + (new Date().getFullYear() + 5);
+        this.repeatsOptions = [
+            // { id: 'daily', title: 'Daily' },  // Daily does not make much sense, weekly covers it
+            { id: 'weekly', title: 'Weekly' },
+            { id: 'monthly', title: 'Monthly' },
+            { id: 'yearly', title: 'Yearly' },
+        ];
+        this.monthlyMode = signal('', ...(ngDevMode ? [{ debugName: "monthlyMode" }] : []));
+        this.monthlyDate = signal(0, ...(ngDevMode ? [{ debugName: "monthlyDate" }] : []));
+        this.numberOfDaysInMonth = 28;
+        this.isUpdating = signal(false, ...(ngDevMode ? [{ debugName: "isUpdating" }] : []));
+        this.monthlyModes = [
+            { id: 'monthly-day', title: 'Specific day' },
+            { id: 'monthly-week-1', title: 'First week' },
+            { id: 'monthly-week-2', title: 'Second week' },
+            { id: 'monthly-week-3', title: 'Third week' },
+            { id: 'monthly-week-4', title: 'Fourth week' },
+            { id: 'monthly-week-last', title: 'Last week' },
+        ];
+        this.slotForm = new UntypedFormGroup({
+            locationTitle: new FormControl(''),
+            locationAddress: new FormControl(''),
+        });
+        this.repeats = signal(undefined, ...(ngDevMode ? [{ debugName: "repeats" }] : []));
+        this.showWeekdays = computed(() => 
+        // this.happens() === 'daily' ||
+        this.repeats() === 'weekly' ||
+            (this.repeats() === 'monthly' &&
+                this.monthlyMode()?.startsWith('monthly-week')), ...(ngDevMode ? [{ debugName: "showWeekdays" }] : []));
+        this.showTimeForm = computed(() => {
+            const happens = this.repeats();
+            const monthlyMode = this.monthlyMode();
+            const monthlyDate = this.monthlyDate();
+            const hasWeekdaySelected = this.hasWeekdaySelected();
+            return (this.$happeningType() === 'single' ||
+                // happens === 'daily' ||
+                (happens === 'weekly' && hasWeekdaySelected) ||
+                (happens === 'monthly' &&
+                    ((monthlyMode === 'monthly-day' && !!monthlyDate) ||
+                        (monthlyMode.includes('week') && hasWeekdaySelected))));
+        }, ...(ngDevMode ? [{ debugName: "showTimeForm" }] : []));
+        this.showAddSlotButton = computed(() => {
+            const happens = this.repeats();
+            const monthlyMode = this.monthlyMode();
+            const monthlyDate = this.monthlyDate();
+            return (
+            // happens === 'daily' ||
+            (happens === 'weekly' && this.hasWeekdaySelected()) ||
+                (happens === 'monthly' && monthlyMode === 'monthly-day' && !!monthlyDate));
+        }, ...(ngDevMode ? [{ debugName: "showAddSlotButton" }] : []));
+        this.yearlyMonth = new FormControl(undefined);
+        this.monthDays = [
+            [1, 2, 3, 4, 5],
+            [6, 7, 8, 9, 10],
+            [11, 12, 13, 14, 15],
+            [16, 17, 18, 19, 20],
+            [21, 22, 23, 24, 25],
+            [26, 27, 28, 29, 30, 31],
+        ];
+        this.months = [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December',
+        ];
+        // const now = new Date();
+        const preselectedWd = window.history.state?.wd;
+        if (preselectedWd) {
+            this.weekdayById[preselectedWd].set(true);
+        }
+        // this.weekdaysForm.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe({
+        // 	next: () => (this.error = undefined),
+        // });
+    }
+    // ngOnChanges(changes: SimpleChanges): void {
+    // 	if (this.wd) {
+    // 		this.weekdayById[this.wd]?.setValue(true);
+    // 	}
+    // }
+    // dismissModal(): void {
+    // 	this.modalCtrl
+    // 		.dismiss()
+    // 		.catch(this.errorLogger.logErrorHandler('failed to dismiss modal'));
+    // }
+    onRepeatsChanged(value) {
+        this.repeats.set(value);
+    }
+    addOnceSlot(timing) {
+        this.slotForm.markAsTouched();
+        const slot = this.initiateSlot(timing);
+        return slot;
+    }
+    addWeeklySlot(timing) {
+        // this.weekdaysForm.markAsTouched({ onlySelf: true });
+        this.slotForm.markAsTouched();
+        if (this.$happeningType() === 'recurring' && !this.hasWeekdaySelected()) {
+            this.error.set('At least 1 weekday should be selected');
+        }
+        if (!this.startEndDatetimeForm?.isValid) {
+            return undefined;
+        }
+        // if (!this.weekdaysForm.valid) {
+        // 	this.showWeekday = false;
+        //
+        // 	this.alertCtrl.create({
+        // 		header: 'Please select day(s)',
+        // 		inputs: wd2.map(wd => {
+        // 			// tslint:disable-next-line:no-any
+        // 			const result: { type: 'checkbox'; name: WeekdayCode2; value: WeekdayCode2; label: string; handler: (input: any) => void } = {
+        // 				type: 'checkbox',
+        // 				name: wd,
+        // 				value: wd,
+        // 				label: wdCodeToWeekdayLongName(wd),
+        // 				handler: input => {
+        // 					const v = this.weekdaysForm.get(wd);
+        // 					if (v) {
+        // 						v.setValue(input.checked);
+        // 					} else {
+        // 						console.error('!v', v);
+        // 					}
+        // 					console.log(input);
+        // 				},
+        // 			};
+        // 			return result;
+        // 		}),
+        // 		buttons: [
+        // 			{
+        // 				text: 'OK',
+        // 				handler: () => {
+        // 					this.showWeekday = true;
+        // 					if (this.weekdaysForm.valid) {
+        // 						this.addSlot();
+        // 					}
+        // 				},
+        // 			},
+        // 			{
+        // 				text: 'Cancel',
+        // 				handler: () => {
+        // 					this.showWeekday = true;
+        // 				},
+        // 			}],
+        // 	})
+        // 		.then(alert => {
+        // 			alert.present()
+        // 				.catch(this.errorLogger.logErrorHandler('failed to present alert'));
+        // 		})
+        // 		.then(value => {
+        // 			console.log('Alert value:', value);
+        // 		})
+        // 		.catch(this.errorLogger.logErrorHandler('failed to create an alert'));
+        // 	return;
+        // }
+        if (!this.slotForm.valid) {
+            return undefined;
+        }
+        const formValue = this.slotForm.value;
+        if (!this.timing) {
+            throw new Error('!this.timing');
+        }
+        let slot = this.initiateSlot(timing);
+        if (this.$happeningType() === 'recurring') {
+            slot = {
+                ...slot,
+                weekdays: this.selectedWeekdayCodes(),
+            };
+        }
+        if (formValue.locationTitle || formValue.locationAddress) {
+            let l = {};
+            slot = { ...slot, location: l };
+            if (formValue.locationTitle) {
+                l = { ...l, title: formValue.locationTitle };
+            }
+            if (formValue.locationAddress) {
+                l = { ...l, address: formValue.locationAddress };
+            }
+            slot = { ...slot, location: l };
+        }
+        return slot;
+    }
+    initiateSlot(timing) {
+        const repeats = this.$happeningType() === 'single' ? 'once' : this.repeats();
+        if (!repeats) {
+            throw new Error('!repeats');
+        }
+        return {
+            ...(timing || this.timing),
+            repeats,
+        };
+    }
+    setYearlyMonth(month) {
+        this.yearlyMonth.setValue(month);
+        switch (this.yearlyMonth.value) {
+            case 'February':
+                this.numberOfDaysInMonth = 28;
+                break;
+            case 'January':
+            case 'March':
+            case 'May':
+            case 'July':
+            case 'August':
+            case 'October':
+            case 'December':
+                this.numberOfDaysInMonth = 31;
+                break;
+            case 'April':
+            case 'June':
+            case 'September':
+            case 'November':
+                this.numberOfDaysInMonth = 30;
+                break;
+        }
+    }
+    setMonthlyDay(day) {
+        this.monthlyDate.set(day);
+    }
+    addDaySlot() {
+        const day = this.monthlyDate();
+        let slot = {
+            repeats: 'monthly',
+        };
+        switch (this.repeats()) {
+            case 'monthly':
+                slot = { ...slot, day };
+                break;
+            case 'yearly':
+                if (!this.yearlyMonth.value) {
+                    return;
+                }
+                slot = { ...slot, day, month: this.yearlyMonth.value };
+                break;
+        }
+        return slot;
+    }
+    addSlotToHappening(timing) {
+        if (!this.$happening().brief) {
+            throw new Error('!this.happening?.brief');
+        }
+        const slot = this.getSlot(timing);
+        if (!slot) {
+            return;
+        }
+        const slotID = this.generateSlotID();
+        let happening = this.$happening();
+        if (!happening.brief) {
+            return;
+        }
+        happening = {
+            ...happening,
+            brief: {
+                ...happening.brief,
+                slots: { ...happening.brief?.slots, [slotID]: slot },
+            },
+        };
+        this.slotAdded.emit(slot);
+        this.happeningChange.emit(happening);
+    }
+    addYearlySlot() {
+        return {
+            repeats: 'yearly',
+            // day: ['may-21'],
+        };
+    }
+    addMonthlySlot(_timing) {
+        if (this.monthlyMode() === 'monthly-day') {
+            return this.addDaySlot();
+        }
+        return undefined;
+    }
+    saveChanges() {
+        const slot = this.getSlot();
+        const happening = this.$happening();
+        const spaceID = happening.space.id;
+        const happeningID = happening.id;
+        if (!spaceID || !happeningID || !slot) {
+            return;
+        }
+        let id = this.slot?.id;
+        const isNewSlot = !id;
+        const putSlot = isNewSlot
+            ? this.happeningService.addSlot
+            : this.date
+                ? (spaceID, happeningID, slot) => this.happeningService.adjustSlot(spaceID, happeningID, slot, this.date || '')
+                : this.happeningService.updateSlot;
+        if (!id) {
+            id = this.generateSlotID();
+        }
+        this.isUpdating.set(true);
+        putSlot(spaceID, happeningID, { ...slot, id }).subscribe({
+            next: () => {
+                this.modalCtrl
+                    .dismiss()
+                    .catch(this.errorLogger.logErrorHandler('failed to dismiss modal'));
+            },
+            error: (err) => {
+                this.errorLogger.logError(err, 'failed to update happening slot');
+                this.isUpdating.set(false);
+            },
+        });
+    }
+    applyChanges() {
+        if (this.slot) {
+            this.saveChanges();
+        }
+        else {
+            this.addSlot();
+        }
+    }
+    addSlot(_timing) {
+        if (this.$happeningID()) {
+            this.saveChanges();
+        }
+        else {
+            this.addSlotToHappening();
+        }
+    }
+    generateSlotID() {
+        for (let i = 0; i < 10; i++) {
+            const slotID = newRandomId({ len: 4 });
+            if (!this.$happening().brief?.slots?.[slotID]) {
+                return slotID;
+            }
+        }
+        throw new Error('failed to generate unique slot ID');
+    }
+    getSlot(timing) {
+        switch (this.$happeningType()) {
+            case 'single':
+                return this.addOnceSlot(timing);
+            case 'recurring': {
+                const repeats = this.repeats();
+                switch (repeats) {
+                    case 'weekly':
+                        return this.addWeeklySlot(timing);
+                    case 'monthly':
+                        return this.addMonthlySlot(timing);
+                    case 'yearly':
+                        return this.addYearlySlot();
+                    case undefined:
+                    default:
+                        throw new Error(`unknown repeats=[${repeats}]`);
+                }
+            }
+            case undefined:
+                throw new Error('happeningType is undefined');
+        }
+    }
+    // onTimeStartsChanged(event: Event): void {
+    // 	const { detail } = (event as CustomEvent);
+    // 	const startInMinutes = ionTimeToMinutes(detail.value);
+    // 	const durationInMinutes = ionTimeToMinutes(this.timeDuration.value);
+    // 	const endInISO = minutesToIonTime(startInMinutes + durationInMinutes);
+    // 	// console.log(startInMinutes, durationInMinutes, endInISO, 'timeEnds.value:', timeEnds.value);
+    // 	if (this.timeEnds.value !== endInISO) {
+    // 		this.timeEnds.setValue(endInISO);
+    // 		this.onEventTimesChanged();
+    // 	}
+    // }
+    //
+    // onTimeDurationChanged(): void {
+    // 	const startInMinutes = ionTimeToMinutes(this.timeStarts.value);
+    // 	const durationInMinutes = ionTimeToMinutes(this.timeDuration.value);
+    // 	const endInISO = minutesToIonTime(startInMinutes + durationInMinutes);
+    // 	// console.log(startInMinutes, durationInMinutes, endInISO, 'timeEnds.value:', timeEnds.value);
+    // 	if (this.timeEnds.value !== endInISO) {
+    // 		this.timeEnds.setValue(endInISO);
+    // 		this.onEventTimesChanged();
+    // 	}
+    // }
+    //
+    // onTimeEndsChanged(/*event: CustomEvent*/): void {
+    // 	const startInMinutes = ionTimeToMinutes(this.timeStarts.value);
+    // 	const endInMinutes = ionTimeToMinutes(this.timeEnds.value);
+    // 	const durationInISO = minutesToIonTime(endInMinutes - startInMinutes);
+    // 	// console.log(startInMinutes, durationInISO, endInMinutes, 'timeDuration.value:', timeDuration.value);
+    // 	if (this.timeDuration.value !== durationInISO) {
+    // 		this.timeDuration.setValue(durationInISO);
+    // 	}
+    // 	this.onEventTimesChanged();
+    // }
+    onEventTimesChanged() {
+        if (!this.date) {
+            return;
+        }
+        // const timestamp = (c: FormControl): number => isoStringsToDate(this.date, c.value)
+        // 	.getTime();
+        this.eventTimesChanged.emit(this.timing);
+    }
+    onTimingChanged(timing) {
+        this.timing = timing;
+    }
+    ngOnChanges(changes) {
+        if (changes['wd']) {
+            const wd = this.wd;
+            if (wd) {
+                this.weekdayById[wd].set(true);
+            }
+        }
+        if (changes['slot']) {
+            const slot = this.slot;
+            if (slot) {
+                if (slot.repeats !== 'once' && slot.repeats !== 'UNKNOWN') {
+                    this.repeats.set(slot?.repeats);
+                }
+                slot.weekdays?.forEach((wd) => {
+                    this.weekdayById[wd].set(true);
+                });
+                this.timing = slot;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HappeningSlotFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: HappeningSlotFormComponent, isStandalone: true, selector: "sneat-happening-slot-form", inputs: { $happening: { classPropertyName: "$happening", publicName: "$happening", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: true, transformFunction: null }, slot: { classPropertyName: "slot", publicName: "slot", isSignal: false, isRequired: false, transformFunction: null }, wd: { classPropertyName: "wd", publicName: "wd", isSignal: false, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: false, isRequired: false, transformFunction: null }, isToDo: { classPropertyName: "isToDo", publicName: "isToDo", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { slotAdded: "slotAdded", happeningChange: "happeningChange", eventTimesChanged: "eventTimesChanged" }, providers: [
+            { provide: ClassName, useValue: 'RecurringSlotFormComponent' },
+            HappeningService,
+        ], viewQueries: [{ propertyName: "startEndDatetimeForm", first: true, predicate: ["startEndDatetimeForm"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!--wd: {{ wd }}; date: {{date}}-->\n<!--<ion-item-divider color=\"primary\" class=\"sneat-no-end-padding\" *ngIf=\"mode === 'modal'\">-->\n<!--\t<ion-label style=\"font-weight: bold\">New slot</ion-label>-->\n<!--\t<ion-buttons slot=\"end\" class=\"sneat-no-end-margin\">-->\n<!--\t\t<ion-button title=\"Cancel\" (click)=\"dismissModal()\">-->\n<!--\t\t\t<ion-label color=\"light\">Cancel</ion-label>-->\n<!--\t\t\t<ion-icon name=\"close-outline\" slot=\"end\" />-->\n<!--\t\t</ion-button>-->\n<!--\t</ion-buttons>-->\n<!--</ion-item-divider>-->\n<!--<ion-item *ngIf=\"happeningType === 'single'\">-->\n<!--\t<ion-label *ngIf=\"isToDo && !date\">Due</ion-label>-->\n<!--\t<ion-label *ngIf=\"isToDo && date\">Due on</ion-label>-->\n<!--\t<ion-label *ngIf=\"!isToDo\">Takes place on</ion-label>-->\n<!--\t<ion-datetime [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"date\"-->\n<!--\t\t\t\t\t\t\t\t(ionChange)=\"onEventTimesChanged()\"></ion-datetime>-->\n<!--</ion-item>-->\n\n<!--<ion-item-divider color=\"light\">-->\n<!--\t<ion-segment [(ngModel)]=\"tab\" color=\"dark\">-->\n<!--\t\t<ion-segment-button value=\"when\">-->\n<!--\t\t\t<ion-label>When</ion-label>-->\n<!--\t\t</ion-segment-button>-->\n<!--\t\t<ion-segment-button value=\"where\">-->\n<!--\t\t\t<ion-label>Where</ion-label>-->\n<!--\t\t</ion-segment-button>-->\n<!--\t</ion-segment>-->\n<!--</ion-item-divider>-->\n\n@if ($happeningType() === \"recurring\") {\n  @if (repeats()) {\n    <ion-grid class=\"ion-grid-layout\">\n      <ion-row>\n        <ion-col>\n          <ion-item color=\"light\" lines=\"full\">\n            <ion-select\n              label=\"Repeats\"\n              interface=\"popover\"\n              [value]=\"repeats()\"\n              (ionChange)=\"onRepeatsChanged($event.detail.value)\"\n            >\n              @for (repeatOption of repeatsOptions; track repeatOption.id) {\n                <ion-select-option [value]=\"repeatOption.id\">\n                  {{ repeatOption.title }}\n                </ion-select-option>\n              }\n            </ion-select>\n          </ion-item>\n        </ion-col>\n        @if (showWeekdays()) {\n          <ion-col>\n            <ion-item color=\"light\" lines=\"full\">\n              <ion-checkbox\n                color=\"medium\"\n                labelPlacement=\"end\"\n                slot=\"end\"\n                [checked]=\"weekdaysCheckbox()\"\n                (ionChange)=\"onWeekdaysCheckboxChange($event.detail.checked)\"\n              >\n                <ion-label color=\"medium\">W-days</ion-label>\n              </ion-checkbox>\n              <ion-checkbox\n                color=\"medium\"\n                labelPlacement=\"end\"\n                slot=\"end\"\n                [checked]=\"weekendCheckbox()\"\n                (ionChange)=\"onWeekendCheckboxChange($event.detail.checked)\"\n              >\n                <ion-label color=\"medium\">W-end</ion-label>\n              </ion-checkbox>\n            </ion-item>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-grid>\n  } @else {\n    <sneat-select-from-list\n      label=\"Repeats\"\n      listLabelColor=\"light\"\n      [value]=\"repeats() || ''\"\n      [items]=\"repeatsOptions\"\n      [isReadonly]=\"!!date\"\n      (valueChange)=\"onRepeatsChanged($event)\"\n      labelPlacement=\"end\"\n      listLabel=\"divider\"\n      justify=\"start\"\n    />\n  }\n\n  @if (repeats() === \"monthly\") {\n    <!--\t\t<ion-item-divider>-->\n    <!--\t\t\t<ion-label>On</ion-label>-->\n    <!--\t\t</ion-item-divider>-->\n    <sneat-select-from-list\n      label=\"On\"\n      [value]=\"monthlyMode()\"\n      [items]=\"monthlyModes\"\n      [isReadonly]=\"!!date\"\n      (valueChange)=\"onMonthlyModeChanged($event)\"\n      labelPlacement=\"end\"\n      listLabel=\"divider\"\n      justify=\"start\"\n    />\n  }\n\n  @if (showWeekdays()) {\n    @if (!hasWeekdaySelected()) {\n      <ion-item-divider> Choose day of the week </ion-item-divider>\n    }\n    <form>\n      <ion-grid class=\"ion-grid-layout\">\n        <ion-row>\n          <ion-col size=\"4\">\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"mo\"\n                [checked]=\"weekdayMo()\"\n                (ionChange)=\"onWeekdayChanged('mo', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Monday\n              </ion-checkbox>\n            </ion-item>\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"tu\"\n                [checked]=\"weekdayTu()\"\n                (ionChange)=\"onWeekdayChanged('tu', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Tuesday\n              </ion-checkbox>\n            </ion-item>\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"we\"\n                [checked]=\"weekdayWe()\"\n                (ionChange)=\"onWeekdayChanged('we', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Wednesday\n              </ion-checkbox>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"4\">\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"th\"\n                [checked]=\"weekdayTh()\"\n                (ionChange)=\"onWeekdayChanged('th', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Thursday\n              </ion-checkbox>\n            </ion-item>\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"fr\"\n                [checked]=\"weekdayFr()\"\n                (ionChange)=\"onWeekdayChanged('fr', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Friday\n              </ion-checkbox>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"4\">\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"sa\"\n                [checked]=\"weekdaySa()\"\n                (ionChange)=\"onWeekdayChanged('sa', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Saturday\n              </ion-checkbox>\n            </ion-item>\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"su\"\n                [checked]=\"weekdaySu()\"\n                (ionChange)=\"onWeekdayChanged('su', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Sunday\n              </ion-checkbox>\n            </ion-item>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n  }\n  @if (repeats() === \"yearly\") {\n    @if (yearlyMonth) {\n      <ion-item>\n        <ion-select\n          label=\"Month\"\n          interface=\"popover\"\n          [formControl]=\"yearlyMonth\"\n          (ionChange)=\"setYearlyMonth($event.detail.value)\"\n        >\n          @for (month of months; track month) {\n            <ion-select-option [value]=\"month\">{{ month }}</ion-select-option>\n          }\n        </ion-select>\n      </ion-item>\n    } @else {\n      <ion-item-divider>Select month</ion-item-divider>\n      <ion-item>\n        @for (month of months; track month) {\n          <ion-button\n            class=\"ion-margin-end\"\n            color=\"light\"\n            (click)=\"setYearlyMonth(month)\"\n            >{{ month }}\n          </ion-button>\n        }\n      </ion-item>\n    }\n  }\n\n  @if (\n    (repeats() === \"monthly\" && monthlyMode() === \"monthly-day\") ||\n    (repeats() === \"yearly\" && yearlyMonth.value)\n  ) {\n    <ion-item-divider>Choose date</ion-item-divider>\n    <ion-grid>\n      @for (daysRow of monthDays; let rowIndex = $index; track rowIndex) {\n        <ion-row>\n          @for (day of daysRow; track day) {\n            <ion-col size=\"2\">\n              <ion-button color=\"light\" (click)=\"setMonthlyDay(day)\"\n                >{{ day }}\n              </ion-button>\n            </ion-col>\n          }\n        </ion-row>\n      }\n      <!--\t\t\t<ion-row>-->\n      <!--\t\t\t\t@for (i of [].constructor(numberOfDaysInMonth - 25); track i) {-->\n      <!--\t\t\t\t\t<ion-col size=\"2\">-->\n      <!--\t\t\t\t\t\t<ion-button color=\"light\" (click)=\"setMonthlyDay($index + 25 + 1)\"-->\n      <!--\t\t\t\t\t\t\t>{{ $index + 25 + 1 }}-->\n      <!--\t\t\t\t\t\t</ion-button>-->\n      <!--\t\t\t\t\t</ion-col>-->\n      <!--\t\t\t\t}-->\n      <!--\t\t\t</ion-row>-->\n    </ion-grid>\n  }\n}\n\n@if (showTimeForm()) {\n  <!--\t<ion-item-divider color=\"light\">-->\n  <!--\t\t<ion-label>When</ion-label>-->\n  <!--\t</ion-item-divider>-->\n  <!--\t\t<ion-item-divider color=\"light\">When</ion-item-divider>-->\n  <sneat-start-end-datetime-form\n    #startEndDatetimeForm\n    [date]=\"date\"\n    [mode]=\"$happeningType()\"\n    [timing]=\"timing\"\n    addSlotLabel=\"Add slot\"\n    (timingChange)=\"onTimingChanged($event)\"\n    (addClick)=\"addSlot($event)\"\n  />\n}\n\n<!--\t\t\t<ion-item-divider color=\"light\">Where</ion-item-divider>-->\n<!--\t\t\t<ion-item class=\"ion-padding-start\">-->\n<!--\t\t\t\t<ion-textarea label=\"Address / room / directions\" labelPlacement=\"stacked\"></ion-textarea>-->\n<!--\t\t\t</ion-item>-->\n\n<!-- @if (\"tab === 'where'\") { -->\n<!--\t<ion-item-divider color=\"light\">Where</ion-item-divider>-->\n<!--\t<ion-item>-->\n<!--\t\t<ion-label position=\"floating\">Address / room / directions</ion-label>-->\n<!--\t\t<ion-textarea></ion-textarea>-->\n<!--\t</ion-item>-->\n<!-- }-->\n\n<!--<ng-container *ngIf=\"tab === 'when'\">-->\n\n<!--</ng-container>-->\n\n<!--happeningType: {{happeningType}}, happens: {{happens}};-->\n\n@if (error() || showAddSlotButton()) {\n  <ion-list lines=\"none\">\n    @if (error()) {\n      <ion-item>\n        <ion-label color=\"danger\">{{ error() }}</ion-label>\n      </ion-item>\n    }\n\n    @if (showAddSlotButton()) {\n      <ion-item>\n        <ion-button\n          slot=\"end\"\n          color=\"primary\"\n          [disabled]=\"isUpdating()\"\n          (click)=\"applyChanges()\"\n          size=\"medium\"\n        >\n          @if (slot) {\n            <ion-icon name=\"save-outline\" slot=\"start\" />\n            <ion-label>Update slot</ion-label>\n          } @else {\n            <ion-icon name=\"add-outline\" slot=\"start\" />\n            <ion-label>Add slot</ion-label>\n          }\n          @if (isUpdating()) {\n            <ion-spinner name=\"lines-small\" slot=\"end\"></ion-spinner>\n          }\n        </ion-button>\n      </ion-item>\n    }\n  </ion-list>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SelectFromListComponent, selector: "sneat-select-from-list", inputs: ["value", "filterLabel", "label", "listLabel", "listLabelColor", "isFilterable", "isLoading", "items", "items$", "lastItemLines", "labelPlacement", "justify", "other", "canAdd", "filterItem", "selectMode", "isReadonly", "$isProcessing", "sortBy"], outputs: ["valueChange", "filterChanged"] }, { kind: "component", type: StartEndDatetimeFormComponent, selector: "sneat-start-end-datetime-form", inputs: ["addSlotLabel", "mode", "date", "timing"], outputs: ["timingChange", "addClick"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HappeningSlotFormComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SelectFromListComponent,
+                        StartEndDatetimeFormComponent,
+                        IonGrid,
+                        IonRow,
+                        IonCol,
+                        IonItem,
+                        IonSelect,
+                        IonSelectOption,
+                        IonCheckbox,
+                        IonItemDivider,
+                        IonList,
+                        IonLabel,
+                        IonButton,
+                        IonSpinner,
+                        IonIcon,
+                    ], providers: [
+                        { provide: ClassName, useValue: 'RecurringSlotFormComponent' },
+                        HappeningService,
+                    ], selector: 'sneat-happening-slot-form', template: "<!--wd: {{ wd }}; date: {{date}}-->\n<!--<ion-item-divider color=\"primary\" class=\"sneat-no-end-padding\" *ngIf=\"mode === 'modal'\">-->\n<!--\t<ion-label style=\"font-weight: bold\">New slot</ion-label>-->\n<!--\t<ion-buttons slot=\"end\" class=\"sneat-no-end-margin\">-->\n<!--\t\t<ion-button title=\"Cancel\" (click)=\"dismissModal()\">-->\n<!--\t\t\t<ion-label color=\"light\">Cancel</ion-label>-->\n<!--\t\t\t<ion-icon name=\"close-outline\" slot=\"end\" />-->\n<!--\t\t</ion-button>-->\n<!--\t</ion-buttons>-->\n<!--</ion-item-divider>-->\n<!--<ion-item *ngIf=\"happeningType === 'single'\">-->\n<!--\t<ion-label *ngIf=\"isToDo && !date\">Due</ion-label>-->\n<!--\t<ion-label *ngIf=\"isToDo && date\">Due on</ion-label>-->\n<!--\t<ion-label *ngIf=\"!isToDo\">Takes place on</ion-label>-->\n<!--\t<ion-datetime [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"date\"-->\n<!--\t\t\t\t\t\t\t\t(ionChange)=\"onEventTimesChanged()\"></ion-datetime>-->\n<!--</ion-item>-->\n\n<!--<ion-item-divider color=\"light\">-->\n<!--\t<ion-segment [(ngModel)]=\"tab\" color=\"dark\">-->\n<!--\t\t<ion-segment-button value=\"when\">-->\n<!--\t\t\t<ion-label>When</ion-label>-->\n<!--\t\t</ion-segment-button>-->\n<!--\t\t<ion-segment-button value=\"where\">-->\n<!--\t\t\t<ion-label>Where</ion-label>-->\n<!--\t\t</ion-segment-button>-->\n<!--\t</ion-segment>-->\n<!--</ion-item-divider>-->\n\n@if ($happeningType() === \"recurring\") {\n  @if (repeats()) {\n    <ion-grid class=\"ion-grid-layout\">\n      <ion-row>\n        <ion-col>\n          <ion-item color=\"light\" lines=\"full\">\n            <ion-select\n              label=\"Repeats\"\n              interface=\"popover\"\n              [value]=\"repeats()\"\n              (ionChange)=\"onRepeatsChanged($event.detail.value)\"\n            >\n              @for (repeatOption of repeatsOptions; track repeatOption.id) {\n                <ion-select-option [value]=\"repeatOption.id\">\n                  {{ repeatOption.title }}\n                </ion-select-option>\n              }\n            </ion-select>\n          </ion-item>\n        </ion-col>\n        @if (showWeekdays()) {\n          <ion-col>\n            <ion-item color=\"light\" lines=\"full\">\n              <ion-checkbox\n                color=\"medium\"\n                labelPlacement=\"end\"\n                slot=\"end\"\n                [checked]=\"weekdaysCheckbox()\"\n                (ionChange)=\"onWeekdaysCheckboxChange($event.detail.checked)\"\n              >\n                <ion-label color=\"medium\">W-days</ion-label>\n              </ion-checkbox>\n              <ion-checkbox\n                color=\"medium\"\n                labelPlacement=\"end\"\n                slot=\"end\"\n                [checked]=\"weekendCheckbox()\"\n                (ionChange)=\"onWeekendCheckboxChange($event.detail.checked)\"\n              >\n                <ion-label color=\"medium\">W-end</ion-label>\n              </ion-checkbox>\n            </ion-item>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-grid>\n  } @else {\n    <sneat-select-from-list\n      label=\"Repeats\"\n      listLabelColor=\"light\"\n      [value]=\"repeats() || ''\"\n      [items]=\"repeatsOptions\"\n      [isReadonly]=\"!!date\"\n      (valueChange)=\"onRepeatsChanged($event)\"\n      labelPlacement=\"end\"\n      listLabel=\"divider\"\n      justify=\"start\"\n    />\n  }\n\n  @if (repeats() === \"monthly\") {\n    <!--\t\t<ion-item-divider>-->\n    <!--\t\t\t<ion-label>On</ion-label>-->\n    <!--\t\t</ion-item-divider>-->\n    <sneat-select-from-list\n      label=\"On\"\n      [value]=\"monthlyMode()\"\n      [items]=\"monthlyModes\"\n      [isReadonly]=\"!!date\"\n      (valueChange)=\"onMonthlyModeChanged($event)\"\n      labelPlacement=\"end\"\n      listLabel=\"divider\"\n      justify=\"start\"\n    />\n  }\n\n  @if (showWeekdays()) {\n    @if (!hasWeekdaySelected()) {\n      <ion-item-divider> Choose day of the week </ion-item-divider>\n    }\n    <form>\n      <ion-grid class=\"ion-grid-layout\">\n        <ion-row>\n          <ion-col size=\"4\">\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"mo\"\n                [checked]=\"weekdayMo()\"\n                (ionChange)=\"onWeekdayChanged('mo', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Monday\n              </ion-checkbox>\n            </ion-item>\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"tu\"\n                [checked]=\"weekdayTu()\"\n                (ionChange)=\"onWeekdayChanged('tu', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Tuesday\n              </ion-checkbox>\n            </ion-item>\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"we\"\n                [checked]=\"weekdayWe()\"\n                (ionChange)=\"onWeekdayChanged('we', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Wednesday\n              </ion-checkbox>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"4\">\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"th\"\n                [checked]=\"weekdayTh()\"\n                (ionChange)=\"onWeekdayChanged('th', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Thursday\n              </ion-checkbox>\n            </ion-item>\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"fr\"\n                [checked]=\"weekdayFr()\"\n                (ionChange)=\"onWeekdayChanged('fr', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Friday\n              </ion-checkbox>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"4\">\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"sa\"\n                [checked]=\"weekdaySa()\"\n                (ionChange)=\"onWeekdayChanged('sa', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Saturday\n              </ion-checkbox>\n            </ion-item>\n            <ion-item lines=\"none\">\n              <ion-checkbox\n                slot=\"start\"\n                value=\"su\"\n                [checked]=\"weekdaySu()\"\n                (ionChange)=\"onWeekdayChanged('su', $event.detail.checked)\"\n                labelPlacement=\"end\"\n                >Sunday\n              </ion-checkbox>\n            </ion-item>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n  }\n  @if (repeats() === \"yearly\") {\n    @if (yearlyMonth) {\n      <ion-item>\n        <ion-select\n          label=\"Month\"\n          interface=\"popover\"\n          [formControl]=\"yearlyMonth\"\n          (ionChange)=\"setYearlyMonth($event.detail.value)\"\n        >\n          @for (month of months; track month) {\n            <ion-select-option [value]=\"month\">{{ month }}</ion-select-option>\n          }\n        </ion-select>\n      </ion-item>\n    } @else {\n      <ion-item-divider>Select month</ion-item-divider>\n      <ion-item>\n        @for (month of months; track month) {\n          <ion-button\n            class=\"ion-margin-end\"\n            color=\"light\"\n            (click)=\"setYearlyMonth(month)\"\n            >{{ month }}\n          </ion-button>\n        }\n      </ion-item>\n    }\n  }\n\n  @if (\n    (repeats() === \"monthly\" && monthlyMode() === \"monthly-day\") ||\n    (repeats() === \"yearly\" && yearlyMonth.value)\n  ) {\n    <ion-item-divider>Choose date</ion-item-divider>\n    <ion-grid>\n      @for (daysRow of monthDays; let rowIndex = $index; track rowIndex) {\n        <ion-row>\n          @for (day of daysRow; track day) {\n            <ion-col size=\"2\">\n              <ion-button color=\"light\" (click)=\"setMonthlyDay(day)\"\n                >{{ day }}\n              </ion-button>\n            </ion-col>\n          }\n        </ion-row>\n      }\n      <!--\t\t\t<ion-row>-->\n      <!--\t\t\t\t@for (i of [].constructor(numberOfDaysInMonth - 25); track i) {-->\n      <!--\t\t\t\t\t<ion-col size=\"2\">-->\n      <!--\t\t\t\t\t\t<ion-button color=\"light\" (click)=\"setMonthlyDay($index + 25 + 1)\"-->\n      <!--\t\t\t\t\t\t\t>{{ $index + 25 + 1 }}-->\n      <!--\t\t\t\t\t\t</ion-button>-->\n      <!--\t\t\t\t\t</ion-col>-->\n      <!--\t\t\t\t}-->\n      <!--\t\t\t</ion-row>-->\n    </ion-grid>\n  }\n}\n\n@if (showTimeForm()) {\n  <!--\t<ion-item-divider color=\"light\">-->\n  <!--\t\t<ion-label>When</ion-label>-->\n  <!--\t</ion-item-divider>-->\n  <!--\t\t<ion-item-divider color=\"light\">When</ion-item-divider>-->\n  <sneat-start-end-datetime-form\n    #startEndDatetimeForm\n    [date]=\"date\"\n    [mode]=\"$happeningType()\"\n    [timing]=\"timing\"\n    addSlotLabel=\"Add slot\"\n    (timingChange)=\"onTimingChanged($event)\"\n    (addClick)=\"addSlot($event)\"\n  />\n}\n\n<!--\t\t\t<ion-item-divider color=\"light\">Where</ion-item-divider>-->\n<!--\t\t\t<ion-item class=\"ion-padding-start\">-->\n<!--\t\t\t\t<ion-textarea label=\"Address / room / directions\" labelPlacement=\"stacked\"></ion-textarea>-->\n<!--\t\t\t</ion-item>-->\n\n<!-- @if (\"tab === 'where'\") { -->\n<!--\t<ion-item-divider color=\"light\">Where</ion-item-divider>-->\n<!--\t<ion-item>-->\n<!--\t\t<ion-label position=\"floating\">Address / room / directions</ion-label>-->\n<!--\t\t<ion-textarea></ion-textarea>-->\n<!--\t</ion-item>-->\n<!-- }-->\n\n<!--<ng-container *ngIf=\"tab === 'when'\">-->\n\n<!--</ng-container>-->\n\n<!--happeningType: {{happeningType}}, happens: {{happens}};-->\n\n@if (error() || showAddSlotButton()) {\n  <ion-list lines=\"none\">\n    @if (error()) {\n      <ion-item>\n        <ion-label color=\"danger\">{{ error() }}</ion-label>\n      </ion-item>\n    }\n\n    @if (showAddSlotButton()) {\n      <ion-item>\n        <ion-button\n          slot=\"end\"\n          color=\"primary\"\n          [disabled]=\"isUpdating()\"\n          (click)=\"applyChanges()\"\n          size=\"medium\"\n        >\n          @if (slot) {\n            <ion-icon name=\"save-outline\" slot=\"start\" />\n            <ion-label>Update slot</ion-label>\n          } @else {\n            <ion-icon name=\"add-outline\" slot=\"start\" />\n            <ion-label>Add slot</ion-label>\n          }\n          @if (isUpdating()) {\n            <ion-spinner name=\"lines-small\" slot=\"end\"></ion-spinner>\n          }\n        </ion-button>\n      </ion-item>\n    }\n  </ion-list>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { $happening: [{ type: i0.Input, args: [{ isSignal: true, alias: "$happening", required: true }] }], mode: [{
+                type: Input,
+                args: [{ required: true }]
+            }], slot: [{
+                type: Input
+            }], wd: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }], isToDo: [{
+                type: Input
+            }], slotAdded: [{
+                type: Output
+            }], happeningChange: [{
+                type: Output
+            }], eventTimesChanged: [{
+                type: Output
+            }], startEndDatetimeForm: [{
+                type: ViewChild,
+                args: ['startEndDatetimeForm']
+            }] } });
+//# sourceMappingURL=happening-slot-form.component.js.map