@sneat/extensions-schedulus-shared 0.3.0

package/esm2022/lib/components/happening-slots/happening-slots.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"happening-slots.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/happening-slots/happening-slots.component.ts","../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/happening-slots/happening-slots.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  EventEmitter,\n  input,\n  Output,\n  signal,\n  inject,\n} from '@angular/core';\nimport {\n  IonBadge,\n  IonButton,\n  IonButtons,\n  IonIcon,\n  IonItem,\n  IonLabel,\n  IonSpinner,\n  IonText,\n} from '@ionic/angular/standalone';\nimport { Numeral2Pipe } from '@sneat/components';\nimport {\n  IHappeningSlot,\n  WeekdayCode2,\n  IHappeningContext,\n  IHappeningSlotWithID,\n  WdToWeekdayPipe,\n} from '@sneat/mod-schedulus-core';\nimport { ErrorLogger, IErrorLogger } from '@sneat/core';\nimport {\n  HappeningService,\n  IDeleteSlotRequest,\n} from '../../services/happening.service';\nimport {\n  HappeningSlotModalService,\n  HappeningSlotModalServiceModule,\n} from '../happening-slot-form/happening-slot-modal.service';\n\nexport interface AddSlotParams {\n  wd?: WeekdayCode2;\n}\n\n@Component({\n  imports: [\n    HappeningSlotModalServiceModule,\n    WdToWeekdayPipe,\n    Numeral2Pipe,\n    IonLabel,\n    IonButtons,\n    IonButton,\n    IonIcon,\n    IonItem,\n    IonText,\n    IonBadge,\n    IonSpinner,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'sneat-happening-slots',\n  templateUrl: './happening-slots.component.html',\n})\nexport class HappeningSlotsComponent {\n  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);\n  private readonly happeningService = inject(HappeningService);\n  private readonly happeningSlotModalService = inject(\n    HappeningSlotModalService,\n  );\n\n  public readonly happening = input.required<IHappeningContext>();\n\n  public readonly wd = input<WeekdayCode2 | undefined>();\n\n  @Output() readonly slotSelected = new EventEmitter<IHappeningSlot>();\n  @Output() readonly happeningChange = new EventEmitter<IHappeningContext>();\n\n  protected readonly $slots = computed<IHappeningSlotWithID[] | undefined>(() =>\n    Object.entries(this.happening().brief?.slots || {}).map(([id, slot]) =>\n      Object.assign(slot, { id }),\n    ),\n  );\n\n  protected readonly hasAnyWd = (\n    slot: IHappeningSlotWithID,\n    ...wds: readonly WeekdayCode2[]\n  ) => wds.some((wd) => !!slot.weekdays?.includes(wd));\n\n  protected removeSlot(event: Event, slot: IHappeningSlotWithID): void {\n    event.preventDefault();\n    event.stopPropagation();\n    const happening = this.happening();\n    if (!happening.brief) {\n      throw new Error('!this.happening?.brief');\n    }\n    if (happening.id) {\n      this.deleteSlot(slot);\n    } else {\n      this.removeSlotFromHappening(slot);\n    }\n  }\n\n  private removeSlotFromHappening(slot: IHappeningSlotWithID): void {\n    const happening = this.happening();\n    if (!happening.brief) {\n      throw new Error('!this.happening');\n    }\n    this.onHappeningChanged({\n      ...happening,\n      brief: {\n        ...happening.brief,\n        slots: Object.fromEntries(\n          Object.entries(happening.brief?.slots || {}).filter(\n            ([id]) => id !== slot.id,\n          ),\n        ),\n      },\n    });\n  }\n\n  private deleteSlot(slot: IHappeningSlotWithID): void {\n    const happening = this.happening();\n    if (!happening.brief) {\n      throw new Error('!this.happening?.brief');\n    }\n    const happeningID = happening.id;\n    if (!happeningID) {\n      throw new Error('!happeningID');\n    }\n    const spaceID = happening.space.id;\n    if (!spaceID) {\n      throw new Error('!spaceID');\n    }\n    const request: IDeleteSlotRequest = {\n      spaceID: spaceID,\n      happeningID,\n      slotID: slot.id,\n    };\n\n    this.$deletingSlotIDs.set([...this.$deletingSlotIDs(), slot.id]);\n\n    const removeFromDeletingSlotIDs = (delay: number) =>\n      setTimeout(\n        () =>\n          this.$deletingSlotIDs.set(\n            this.$deletingSlotIDs().filter((id) => id !== slot.id),\n          ),\n        delay,\n      );\n    this.happeningService.deleteSlot(request).subscribe({\n      next: () => {\n        this.removeSlotFromHappening(slot);\n        removeFromDeletingSlotIDs(0);\n      },\n      error: (err) => {\n        this.errorLogger.logError(err, 'failed to delete slot');\n        removeFromDeletingSlotIDs(300);\n      },\n    });\n  }\n\n  protected readonly $deletingSlotIDs = signal<readonly string[]>([]);\n\n  protected selectSlot(event: Event, slot: IHappeningSlotWithID): void {\n    this.slotSelected.emit(slot);\n    this.showEditSlot(event, slot);\n  }\n\n  protected onHappeningChanged(happening: IHappeningContext): void {\n    this.happeningChange.emit(happening);\n  }\n\n  protected editingSlot?: IHappeningSlot;\n\n  protected showEditSlot(event: Event, slot: IHappeningSlotWithID): void {\n    event.stopPropagation();\n    event.preventDefault();\n    const happening = this.happening();\n    this.happeningSlotModalService\n      .editSingleHappeningSlot(event, happening, undefined, slot)\n      .catch(this.errorLogger.logErrorHandler('failed to open edit modal'));\n\n    // this.addSlotParams = undefined;\n    // this.editingSlot = slot;\n    // this.isShowingSlotFormModal = true;\n  }\n\n  protected showAddSlot(event: Event): void {\n    const happening = this.happening();\n    this.happeningSlotModalService\n      .editSingleHappeningSlot(event, happening)\n      .catch(this.errorLogger.logErrorHandler('failed to open edit modal'));\n\n    // this.editingSlot = undefined;\n    // this.addSlotParams = params;\n    // this.isShowingSlotFormModal = true;\n  }\n\n  // onSlotFormModalDismissed(event: Event): void {\n  // \tconsole.log('onAddSlotModalDismissed(), event:', event);\n  // \tthis.editingSlot = undefined;\n  // \tthis.isShowingSlotFormModal = false;\n  // \tthis.addSlotDismissed.next();\n  // }\n}\n","<ion-item color=\"light\" class=\"sneat-tiny-end-padding\">\n  <ion-label>When</ion-label>\n  <ion-buttons slot=\"end\">\n    <ion-button\n      title=\"Add slot\"\n      (click)=\"showAddSlot($event)\"\n      [color]=\"$slots()?.length ? 'primary' : 'danger'\"\n    >\n      <ion-icon name=\"add-outline\" slot=\"start\" />\n      <ion-label>Add slot</ion-label>\n    </ion-button>\n  </ion-buttons>\n</ion-item>\n@if ($slots() && !$slots()?.length) {\n  <ion-item>\n    <ion-label><i>No slots have been added yet.</i></ion-label>\n  </ion-item>\n}\n@for (slot of $slots(); track slot.id; let last = $last) {\n  <ion-item\n    button=\"button\"\n    class=\"with-buttons sneat-tiny-end-padding\"\n    [lines]=\"last ? 'full' : 'inset'\"\n    (click)=\"selectSlot($event, slot)\"\n  >\n    @if (slot.start || slot.end) {\n      <ion-buttons slot=\"start\">\n        <!-- TODO(help-wanted): align to the top -->\n        <div style=\"text-align: center\">\n          @if (slot.start) {\n            <ion-badge style=\"display: block\" color=\"light\">\n              @if (slot.start.date) {\n                <b>{{ slot.start.date }}</b>\n              }\n\n              &#64; {{ slot.start.time }}\n            </ion-badge>\n          }\n          @if (slot.durationMinutes) {\n            <ion-text\n              color=\"medium\"\n              style=\"display: block; font-size: small; margin-top: 0.75em\"\n            >\n              {{ slot.durationMinutes }} mins\n            </ion-text>\n          }\n        </div>\n      </ion-buttons>\n    }\n\n    @if (slot.repeats === \"monthly\") {\n      @if (slot.start) {\n        on\n      } @else {\n        On\n      }\n      {{ slot.day | numeral }}\n      of every month\n    }\n\n    @if (slot.repeats === \"yearly\") {\n      Every year on {{ slot.day | numeral }} of {{ slot.month }}\n    }\n\n    <ion-label text-wrap>\n      <p>\n        @if (slot.weekdays?.length === 7) {\n          Every day\n        } @else if (\n          slot.weekdays?.length === 5 && !hasAnyWd(slot, \"sa\", \"su\")\n        ) {\n          Weekdays\n        } @else if (slot.weekdays?.length === 2 && hasAnyWd(slot, \"sa\", \"su\")) {\n          Weekends\n        } @else {\n          @for (wd of slot.weekdays; track wd) {\n            <ion-badge color=\"light\" style=\"margin-right: 4px\">\n              {{ wd | wdToWeekday }}\n            </ion-badge>\n          }\n        }\n      </p>\n      <p>\n        @if (slot.location && (slot.location.title || slot.location.address)) {\n          &#64; {{ slot.location.title || slot.location.address }}\n          @if (slot.end) {\n            , ends at\n            {{ slot.end.time }}\n          }\n        } @else if (slot.end) {\n          Ends at {{ slot.end.time }}\n        }\n      </p>\n    </ion-label>\n    <ion-buttons slot=\"end\">\n      @if (!$deletingSlotIDs().includes(slot.id)) {\n        <ion-button\n          title=\"Edit\"\n          color=\"medium\"\n          (click)=\"showEditSlot($event, slot)\"\n        >\n          <ion-icon name=\"create-outline\" />\n        </ion-button>\n      }\n      @if (!happening().id || ($slots()?.length || 0) > 1) {\n        <ion-button\n          [disabled]=\"$deletingSlotIDs().includes(slot.id)\"\n          (click)=\"removeSlot($event, slot)\"\n          color=\"medium\"\n        >\n          @if ($deletingSlotIDs().includes(slot.id)) {\n            @if ($deletingSlotIDs().includes(slot.id)) {\n              <ion-spinner name=\"lines-small\" slot=\"end\" />\n            }\n            <ion-label style=\"text-transform: none\">Deleting...</ion-label>\n          } @else {\n            <ion-icon name=\"close-outline\" />\n          }\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-item>\n}\n<!--<ion-modal-->\n<!--\t#addSlotModal-->\n<!--\t[isOpen]=\"isShowingSlotFormModal\"-->\n<!--\t(ionModalDidDismiss)=\"onSlotFormModalDismissed($event)\"-->\n<!--&gt;-->\n<!--\t&lt;!&ndash;\tclass=\"auto-height\"&ndash;&gt;-->\n\n<!--\t<ng-template>-->\n<!--\t\t<ion-header>-->\n<!--\t\t\t<ion-toolbar color=\"primary\">-->\n<!--\t\t\t\t<ion-title>-->\n<!--\t\t\t\t\t@if (editingSlot) {-->\n<!--\t\t\t\t\t\t{{ happening?.brief?.title || \"Edit happening\" }}-->\n<!--\t\t\t\t\t} @else {-->\n<!--\t\t\t\t\t\tNew slot-->\n<!--\t\t\t\t\t}-->\n<!--\t\t\t\t</ion-title>-->\n<!--\t\t\t\t<ion-buttons slot=\"end\">-->\n<!--\t\t\t\t\t<ion-button (click)=\"addSlotModal.dismiss()\">-->\n<!--\t\t\t\t\t\t<ion-icon name=\"close-outline\" slot=\"icon-only\" />-->\n<!--\t\t\t\t\t</ion-button>-->\n<!--\t\t\t\t</ion-buttons>-->\n<!--\t\t\t</ion-toolbar>-->\n<!--\t\t</ion-header>-->\n<!--\t\t<ion-content>-->\n<!--\t\t\t&lt;!&ndash;\t\t\t<div class=\"modal-wrapper\">&ndash;&gt;-->\n<!--\t\t\t<sneat-happening-slot-form-->\n<!--\t\t\t\tclass=\"modal-content\"-->\n<!--\t\t\t\tmode=\"modal\"-->\n<!--\t\t\t\t[wd]=\"addSlotParams?.wd\"-->\n<!--\t\t\t\t[(happening)]=\"happening\"-->\n<!--\t\t\t\t[slot]=\"editingSlot\"-->\n<!--\t\t\t\t[isToDo]=\"false\"-->\n<!--\t\t\t\t(slotAdded)=\"onSlotAdded($event)\"-->\n<!--\t\t\t\t(happeningChange)=\"onHappeningChanged($event)\"-->\n<!--\t\t\t/>-->\n<!--\t\t\t&lt;!&ndash;\t\t\t</div>&ndash;&gt;-->\n<!--\t\t</ion-content>-->\n<!--\t</ng-template>-->\n<!--</ion-modal>-->\n"]}

package/esm2022/lib/components/index.js

@@ -0,0 +1,20 @@
+export * from './calendar/calendar-brief.component';
+export * from './calendar/calendar-component-types';
+export * from './calendar/calendar.component';
+// export * from './calendar/weekday';
+// export * from './calendar-filter.service';
+// export * from './day-tasks/day-tasks.component';
+//
+// // export * from './calendar/calendar-component.module';
+// export * from './calendar/components/calendar-day/calendar-day.component';
+//
+// export * from './calendar/calendar-brief-component2.component';
+export * from './happening-form/happening-form.component';
+export * from './happening-component-base-params';
+// export * from './schedule-core';
+// export * from './schedule-slots';
+// export * from './weekday-functions';
+// export { Week } from './week';
+//
+// export { CalendarDayTitleComponent } from './calendar/components/calendar-day/calendar-day-title.component';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,sCAAsC;AACtC,6CAA6C;AAC7C,mDAAmD;AACnD,EAAE;AACF,2DAA2D;AAC3D,6EAA6E;AAC7E,EAAE;AACF,kEAAkE;AAClE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,mCAAmC;AACnC,oCAAoC;AACpC,uCAAuC;AACvC,iCAAiC;AACjC,EAAE;AACF,+GAA+G","sourcesContent":["export * from './calendar/calendar-brief.component';\nexport * from './calendar/calendar-component-types';\nexport * from './calendar/calendar.component';\n// export * from './calendar/weekday';\n// export * from './calendar-filter.service';\n// export * from './day-tasks/day-tasks.component';\n//\n// // export * from './calendar/calendar-component.module';\n// export * from './calendar/components/calendar-day/calendar-day.component';\n//\n// export * from './calendar/calendar-brief-component2.component';\nexport * from './happening-form/happening-form.component';\nexport * from './happening-component-base-params';\n// export * from './schedule-core';\n// export * from './schedule-slots';\n// export * from './weekday-functions';\n// export { Week } from './week';\n//\n// export { CalendarDayTitleComponent } from './calendar/components/calendar-day/calendar-day-title.component';\n"]}

package/esm2022/lib/components/start-end-dates-range-form/start-end-dates-range-form.component.js

@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, signal, } from '@angular/core';
+import { IonCheckbox, IonCol, IonGrid, IonInput, IonItem, IonRow, } from '@ionic/angular/standalone';
+import * as i0 from "@angular/core";
+export class StartEndDatesRangeFormComponent {
+    constructor() {
+        this.timingChange = new EventEmitter();
+        this.startEnabled = signal(false, ...(ngDevMode ? [{ debugName: "startEnabled" }] : []));
+        this.endEnabled = signal(false, ...(ngDevMode ? [{ debugName: "endEnabled" }] : []));
+    }
+    onStartChecked(event) {
+        const ce = event;
+        const checked = ce.detail.checked;
+        this.startEnabled.set(checked);
+        let start = this.timing?.start;
+        if (!start?.date) {
+            start = { ...start, date: new Date().toISOString().substring(0, 10) };
+            const timing = { ...this.timing, start };
+            this.timing = timing;
+            this.timingChange.emit(timing);
+        }
+    }
+    onEndChecked(event) {
+        const ce = event;
+        const checked = ce.detail.checked;
+        this.endEnabled.set(checked);
+    }
+    onStartChanged(event) {
+        const ce = event;
+        const date = ce.detail.value;
+        const start = this.timing?.start;
+        const timing = { ...this.timing, start: { ...start, date } };
+        this.timingChange.emit(timing);
+    }
+    onEndChanged(event) {
+        const ce = event;
+        const date = ce.detail.value;
+        const end = this.timing?.end;
+        const timing = {
+            ...this.timing,
+            end: { ...end, date },
+            start: this.timing?.start || { date, time: '' },
+        };
+        this.timingChange.emit(timing);
+    }
+    ngOnChanges(changes) {
+        // console.log('StartEndDatesRangeFormComponent.ngOnChanges', { changes });
+        if (changes['timing']) {
+            if (this.timing?.start?.date && !this.startEnabled()) {
+                this.startEnabled.set(true);
+            }
+            if (this.timing?.end?.date && !this.startEnabled()) {
+                this.endEnabled.set(true);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StartEndDatesRangeFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: StartEndDatesRangeFormComponent, isStandalone: true, selector: "sneat-start-end-dates-range-form", inputs: { timing: "timing" }, outputs: { timingChange: "timingChange" }, usesOnChanges: true, ngImport: i0, template: "<ion-grid class=\"ion-grid-layout\">\n  <ion-row>\n    <ion-col size=\"6\">\n      <ion-item>\n        <ion-checkbox\n          labelPlacement=\"end\"\n          slot=\"start\"\n          (ionChange)=\"onStartChecked($event)\"\n          >First on</ion-checkbox\n        >\n      </ion-item>\n    </ion-col>\n    <ion-col size=\"6\">\n      <ion-item>\n        <ion-input\n          [value]=\"timing?.start?.date\"\n          type=\"date\"\n          [disabled]=\"!startEnabled()\"\n          (ionChange)=\"onStartChanged($event)\"\n        />\n      </ion-item>\n    </ion-col>\n  </ion-row>\n  <ion-row>\n    <ion-col size=\"6\">\n      <ion-item lines=\"none\">\n        <ion-checkbox\n          labelPlacement=\"end\"\n          slot=\"start\"\n          (ionChange)=\"onEndChecked($event)\"\n          >Last on</ion-checkbox\n        >\n      </ion-item>\n    </ion-col>\n    <ion-col size=\"6\">\n      <ion-item lines=\"none\">\n        <ion-input\n          type=\"date\"\n          [disabled]=\"!endEnabled()\"\n          (ionChange)=\"onEndChanged($event)\"\n        />\n      </ion-item>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n", dependencies: [{ 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: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StartEndDatesRangeFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-start-end-dates-range-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IonGrid, IonRow, IonCol, IonItem, IonCheckbox, IonInput], template: "<ion-grid class=\"ion-grid-layout\">\n  <ion-row>\n    <ion-col size=\"6\">\n      <ion-item>\n        <ion-checkbox\n          labelPlacement=\"end\"\n          slot=\"start\"\n          (ionChange)=\"onStartChecked($event)\"\n          >First on</ion-checkbox\n        >\n      </ion-item>\n    </ion-col>\n    <ion-col size=\"6\">\n      <ion-item>\n        <ion-input\n          [value]=\"timing?.start?.date\"\n          type=\"date\"\n          [disabled]=\"!startEnabled()\"\n          (ionChange)=\"onStartChanged($event)\"\n        />\n      </ion-item>\n    </ion-col>\n  </ion-row>\n  <ion-row>\n    <ion-col size=\"6\">\n      <ion-item lines=\"none\">\n        <ion-checkbox\n          labelPlacement=\"end\"\n          slot=\"start\"\n          (ionChange)=\"onEndChecked($event)\"\n          >Last on</ion-checkbox\n        >\n      </ion-item>\n    </ion-col>\n    <ion-col size=\"6\">\n      <ion-item lines=\"none\">\n        <ion-input\n          type=\"date\"\n          [disabled]=\"!endEnabled()\"\n          (ionChange)=\"onEndChanged($event)\"\n        />\n      </ion-item>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n" }]
+        }], propDecorators: { timing: [{
+                type: Input,
+                args: [{ required: true }]
+            }], timingChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=start-end-dates-range-form.component.js.map

package/esm2022/lib/components/start-end-dates-range-form/start-end-dates-range-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"start-end-dates-range-form.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/start-end-dates-range-form/start-end-dates-range-form.component.ts","../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/start-end-dates-range-form/start-end-dates-range-form.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n  signal,\n  SimpleChanges,\n} from '@angular/core';\nimport {\n  IonCheckbox,\n  IonCol,\n  IonGrid,\n  IonInput,\n  IonItem,\n  IonRow,\n} from '@ionic/angular/standalone';\nimport { IDateTime, ITiming } from '@sneat/mod-schedulus-core';\n\n@Component({\n  selector: 'sneat-start-end-dates-range-form',\n  templateUrl: './start-end-dates-range-form.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonGrid, IonRow, IonCol, IonItem, IonCheckbox, IonInput],\n})\nexport class StartEndDatesRangeFormComponent implements OnChanges {\n  @Input({ required: true }) timing?: ITiming;\n  @Output() timingChange = new EventEmitter<ITiming>();\n\n  protected startEnabled = signal(false);\n  protected endEnabled = signal(false);\n\n  protected onStartChecked(event: Event): void {\n    const ce = event as CustomEvent;\n    const checked = ce.detail.checked;\n    this.startEnabled.set(checked);\n    let start = this.timing?.start;\n    if (!start?.date) {\n      start = { ...start, date: new Date().toISOString().substring(0, 10) };\n      const timing = { ...this.timing, start };\n      this.timing = timing;\n      this.timingChange.emit(timing);\n    }\n  }\n\n  protected onEndChecked(event: Event): void {\n    const ce = event as CustomEvent;\n    const checked = ce.detail.checked;\n    this.endEnabled.set(checked);\n  }\n\n  protected onStartChanged(event: Event): void {\n    const ce = event as CustomEvent;\n    const date = ce.detail.value;\n    const start: IDateTime | undefined = this.timing?.start;\n    const timing = { ...this.timing, start: { ...start, date } };\n    this.timingChange.emit(timing);\n  }\n\n  protected onEndChanged(event: Event): void {\n    const ce = event as CustomEvent;\n    const date = ce.detail.value;\n    const end: IDateTime | undefined = this.timing?.end;\n    const timing: ITiming = {\n      ...this.timing,\n      end: { ...end, date },\n      start: this.timing?.start || { date, time: '' },\n    };\n    this.timingChange.emit(timing);\n  }\n\n  public ngOnChanges(changes: SimpleChanges): void {\n    // console.log('StartEndDatesRangeFormComponent.ngOnChanges', { changes });\n    if (changes['timing']) {\n      if (this.timing?.start?.date && !this.startEnabled()) {\n        this.startEnabled.set(true);\n      }\n      if (this.timing?.end?.date && !this.startEnabled()) {\n        this.endEnabled.set(true);\n      }\n    }\n  }\n}\n","<ion-grid class=\"ion-grid-layout\">\n  <ion-row>\n    <ion-col size=\"6\">\n      <ion-item>\n        <ion-checkbox\n          labelPlacement=\"end\"\n          slot=\"start\"\n          (ionChange)=\"onStartChecked($event)\"\n          >First on</ion-checkbox\n        >\n      </ion-item>\n    </ion-col>\n    <ion-col size=\"6\">\n      <ion-item>\n        <ion-input\n          [value]=\"timing?.start?.date\"\n          type=\"date\"\n          [disabled]=\"!startEnabled()\"\n          (ionChange)=\"onStartChanged($event)\"\n        />\n      </ion-item>\n    </ion-col>\n  </ion-row>\n  <ion-row>\n    <ion-col size=\"6\">\n      <ion-item lines=\"none\">\n        <ion-checkbox\n          labelPlacement=\"end\"\n          slot=\"start\"\n          (ionChange)=\"onEndChecked($event)\"\n          >Last on</ion-checkbox\n        >\n      </ion-item>\n    </ion-col>\n    <ion-col size=\"6\">\n      <ion-item lines=\"none\">\n        <ion-input\n          type=\"date\"\n          [disabled]=\"!endEnabled()\"\n          (ionChange)=\"onEndChanged($event)\"\n        />\n      </ion-item>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n"]}

package/esm2022/lib/components/start-end-datetime-form/start-end-datetime-form.component.js

@@ -0,0 +1,377 @@
+import { Component, EventEmitter, Input, Output, ViewChild, inject, } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule, UntypedFormGroup, Validators, } from '@angular/forms';
+import { IonAccordion, IonAccordionGroup, IonButton, IonButtons, IonCol, IonDatetime, IonGrid, IonIcon, IonInput, IonItem, IonLabel, IonModal, IonPopover, IonRow, IonSelect, IonSelectOption, ModalController, } from '@ionic/angular/standalone';
+import { dateToIso, isoStringsToDate, isValidaTimeString, isValidDateString, SneatSelectAllOnFocusDirective, } from '@sneat/core';
+import { emptyTiming } from '@sneat/mod-schedulus-core';
+import { dateToTimeOnlyStr } from '@sneat/mod-schedulus-core';
+import { ErrorLogger } from '@sneat/core';
+import { isTomorrow } from '../calendar-core';
+import { StartEndDatesRangeFormComponent } from '../start-end-dates-range-form/start-end-dates-range-form.component';
+import { TimeSelectorComponent } from './time-selector.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class StartEndDatetimeFormComponent {
+    onTimingChanged(timing) {
+        this.timingChange.emit(timing);
+    }
+    get disabled() {
+        return !this.mode;
+    }
+    get hideStartDate() {
+        return this.mode === 'recurring';
+    }
+    // public get timing(): ITiming {
+    // 	let start: IDateTime = {
+    // 		time: this.startTime.value || '',
+    // 	};
+    // 	if (this.startDate.value) {
+    // 		start = { ...start, date: this.startDate.value };
+    // 	}
+    // 	let end: IDateTime = {
+    // 		time: this.endTime.value || '',
+    // 	};
+    // 	if (this.endDate.value) {
+    // 		end = { ...end, date: this.endDate.value };
+    // 	}
+    // 	const timing: ITiming = {
+    // 		start, end,
+    // 		durationMinutes: Number(this.duration.value),
+    // 	};
+    // 	return timing;
+    // }
+    // Is public property as might be used by component's parent component
+    get isValid() {
+        this.form.markAllAsTouched();
+        return (isValidaTimeString(this.startTime.value || '') &&
+            (!this.endTime.value || isValidaTimeString(this.endTime.value)));
+    }
+    constructor() {
+        this.errorLogger = inject(ErrorLogger);
+        this.modalController = inject(ModalController);
+        this.timing = emptyTiming;
+        this.timingChange = new EventEmitter();
+        this.addClick = new EventEmitter();
+        this.today = new Date();
+        this.maxDate = new Date(this.today.getFullYear() + 1, 11, 31)
+            .toISOString()
+            .substring(0, 10);
+        this.tab = 'duration';
+        this.durationUnits = 'minutes';
+        // protected startDateVal? = new Date().toISOString().substring(0, 10);
+        this.startDate = new FormControl('', //TODO: set to current date only for single happenings: new Date().toISOString().substring(0, 10),
+        {
+            // dateToIso(new Date())
+            validators: Validators.required,
+        });
+        this.endDate = new FormControl('', {
+        // validators: Validators.required,
+        });
+        this.startTime = new FormControl('', {
+            validators: [Validators.required, Validators.pattern(/[0-2]\d:[0-5]\d/)],
+        });
+        this.endTime = new FormControl('', {
+            validators: [Validators.required, Validators.pattern(/[0-2]\d:[0-5]\d/)],
+        });
+        this.duration = new FormControl(60, {
+            validators: [Validators.required],
+        });
+        this.form = new UntypedFormGroup({
+            startDate: this.startDate,
+            startTime: this.startTime,
+            endTime: this.endTime,
+            duration: this.duration,
+        });
+        this.isTomorrow = isTomorrow;
+        this.endTime.disable();
+    }
+    ngOnChanges(changes) {
+        if (changes['date']) {
+            this.onDateChanged();
+        }
+        const happeningSlotChange = changes['timing'];
+        if (happeningSlotChange?.currentValue) {
+            this.onTimingChange();
+        }
+    }
+    onDateChanged() {
+        if (this.mode === 'single') {
+            if (!this.startDate.dirty) {
+                const date = this.date || new Date().toISOString().substring(0, 10);
+                this.startDate.setValue(date);
+            }
+        }
+        else {
+            this.startDate.setValue('');
+        }
+    }
+    onTimingChange() {
+        // if (this.happeningSlot.repeats === 'UNKNOWN') {
+        // 	this.setRepeatsBasedOnHappeningType();
+        // }
+        if (!this.startDate.dirty) {
+            const startDate = this.timing.start?.date;
+            if (startDate) {
+                this.startDate.setValue(startDate);
+            }
+        }
+        if (!this.startTime.dirty) {
+            this.startTime.setValue(this.timing.start?.time || '');
+        }
+        if (!this.endDate.dirty) {
+            this.endDate.setValue(this.timing.end?.date || '');
+        }
+        if (!this.endTime.dirty) {
+            this.endTime.setValue(this.timing.end?.time || '');
+        }
+        this.setDuration();
+    }
+    setStartTime(value) {
+        if (!isValidaTimeString(value)) {
+            this.errorLogger.logError(new Error('not valid time string:' + value), 'Invalid start time');
+            return;
+        }
+        this.modalController.dismiss().catch(console.error);
+        this.startTime.setValue(value);
+        this.timing = {
+            ...this.timing,
+            start: { ...this.timing.start, time: value },
+        };
+        this.setEndTime();
+        this.emitTimingChanged('setStartTime');
+        setTimeout(() => {
+            this.durationInput
+                ?.setFocus()
+                .then(() => {
+                // TODO: Remove this workaround once SneatSelectAllOnFocusDirective is fixed
+                this.durationInput?.getInputElement()?.then((el) => el.select());
+            })
+                .catch(this.errorLogger.logErrorHandler('Failed to set focus to duration input'));
+        }, 50);
+    }
+    addToStart(v) {
+        let d = undefined;
+        try {
+            let startDate = this.startDate.value || '';
+            let startTime = this.startTime.value || '';
+            d = isoStringsToDate(startDate || '2000-01-01', startTime);
+            if (v.days) {
+                d.setDate(d.getDate() + v.days);
+            }
+            if (v.hours) {
+                d.setTime(d.getTime() + v.hours * 60 * 60 * 1000);
+            }
+            if (this.startDate.value) {
+                // For recurring events startDate is not set
+                startDate = dateToIso(d);
+                this.timing = {
+                    ...this.timing,
+                    start: { ...this.timing.start, date: startDate },
+                };
+                this.startDate.setValue(startDate);
+            }
+            if (this.startTime.value) {
+                startTime = dateToTimeOnlyStr(d);
+                this.timing = {
+                    ...this.timing,
+                    start: { ...this.timing.start, time: startTime },
+                };
+                this.startTime.setValue(startTime);
+            }
+            this.setEndTime();
+            this.emitTimingChanged('addToStart');
+        }
+        catch (e) {
+            throw new Error(`failed to add ${JSON.stringify(v)} to ${d} [${this.startDate.value} ${this.startTime.value}]: ${e}`, { cause: e });
+        }
+    }
+    // private setRepeatsBasedOnHappeningType(): void {
+    // 	switch (this.mode) {
+    // 		case 'recurring':
+    // 			this.happeningSlot = {...this.happeningSlot};
+    // 			break;
+    // 		case 'single':
+    // 			this.happeningSlot = {...this.happeningSlot};
+    // 			break;
+    // 	}
+    // }
+    setStartDate(event, code) {
+        const today = new Date();
+        let d;
+        switch (code) {
+            case 'today':
+                d = today;
+                break;
+            case 'tomorrow':
+                d = new Date();
+                d.setDate(today.getDate() + 1);
+                break;
+        }
+        if (d) {
+            const date = dateToIso(d);
+            this.startDate.setValue(date);
+            this.timing = {
+                ...this.timing,
+                start: { ...this.timing.start, date: date },
+            };
+            this.emitTimingChanged('setStartDate');
+        }
+    }
+    emitTimingChanged(_source) {
+        this.timingChange.emit(this.timing);
+    }
+    addSlot() {
+        if (this.mode === 'single' && !this.timing.start?.date) {
+            alert('Please select date');
+            return;
+        }
+        this.timingChange.emit(this.timing);
+        this.addClick.emit(this.timing);
+    }
+    onStartTimeBlur() {
+        // console.log('StartEndDatetimeFormComponent.onStartTimeBlur()');
+        const startTime = this.startTime.value || '';
+        if (startTime.match(/^\d{2}$/)) {
+            this.startTime.setValue(startTime + ':00');
+        }
+    }
+    onStartDateChanged() {
+        let startDate = this.startDate.value || '';
+        if (startDate.includes('T')) {
+            startDate = startDate.split('T')[0];
+            this.startDate.setValue(startDate);
+        }
+        const slot = this.timing;
+        this.timing = {
+            ...slot,
+            start: { ...slot.start, date: this.startDate.value || '' },
+        };
+        if ((!this.startTime.value ||
+            isValidaTimeString(this.startTime.value)) &&
+            (!this.endTime.value ||
+                isValidaTimeString(this.endTime.value)) &&
+            (!this.startDate.value ||
+                isValidDateString(this.startDate.value))) {
+            this.emitTimingChanged('onStartDateChanged');
+        }
+    }
+    onStartTimeChanged() {
+        const slot = this.timing;
+        this.timing = {
+            ...slot,
+            start: { ...slot.start, time: this.startTime.value || '' },
+        };
+        if (this.timing.start?.time &&
+            !this.timing.start?.date &&
+            this.startDate.value) {
+            this.timing = {
+                ...this.timing,
+                start: { ...this.timing.start, date: this.startDate.value },
+            };
+        }
+        if (isValidaTimeString(this.startTime.value) &&
+            this.duration.value) {
+            this.setEndTime();
+        }
+    }
+    onDurationChanged() {
+        // console.log('StartEndDatetimeFormComponent.onDurationChanged()');
+        if (isValidaTimeString(this.startTime.value)) {
+            this.setEndTime();
+        }
+        else {
+            this.emitTimingChanged('onDurationChanged');
+        }
+    }
+    setEndTime() {
+        const startTime = this.startTime.value;
+        const startHour = Number(startTime.substring(0, 2));
+        const startMin = Number(startTime.substring(3, 5));
+        const duration = Number(this.duration.value);
+        const durationHours = ~~(duration / 60);
+        const durationMin = duration % 60;
+        const toStr = (v) => {
+            const s = '00' + ('' + v).replace(/^0+/, '');
+            return s.substring(s.length - 2, s.length);
+        };
+        const endHour = toStr(startHour + durationHours);
+        const endMin = toStr(startMin + durationMin);
+        const endTime = `${endHour}:${endMin}`;
+        this.timing = { ...this.timing, end: { time: endTime } };
+        this.endTime.setValue(endTime);
+        this.emitTimingChanged('setEndTime');
+    }
+    onEndTimeChanged() {
+        const slot = this.timing;
+        this.timing = {
+            ...slot,
+            end: { ...slot.end, time: this.endTime.value || '' },
+        };
+        if (isValidaTimeString(this.startTime.value)) {
+            this.setDuration();
+        }
+        this.emitTimingChanged('onEndTimeChanged');
+    }
+    setDuration() {
+        const startTime = this.startTime.value;
+        const endTime = this.endTime.value;
+        if (!startTime || !endTime) {
+            return;
+        }
+        const startHour = Number(startTime.substring(0, 2));
+        const startMin = Number(startTime.substring(3, 5));
+        const startAt = startHour * 60 + startMin;
+        const endHour = Number(endTime.substring(0, 2));
+        const endMin = Number(endTime.substring(3, 5));
+        const endAt = endHour * 60 + endMin;
+        const durationMinutes = endAt - startAt;
+        this.duration.setValue(durationMinutes);
+        this.timing = { ...this.timing, durationMinutes };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StartEndDatetimeFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StartEndDatetimeFormComponent, isStandalone: true, selector: "sneat-start-end-datetime-form", inputs: { addSlotLabel: "addSlotLabel", mode: "mode", date: "date", timing: "timing" }, outputs: { timingChange: "timingChange", addClick: "addClick" }, viewQueries: [{ propertyName: "durationInput", first: true, predicate: ["durationInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@switch (mode) {\n  @case (\"recurring\") {\n    <!-- TODO(help-wanted): use CSS class, preferably from Ionic -->\n    <ion-grid class=\"ion-grid-layout\" style=\"border-top: 1px solid lightgray\">\n      <ion-row>\n        <ion-col size=\"12\" size-md=\"4\">\n          <ion-item class=\"sneat-no-end-padding\" lines=\"none\">\n            <ion-input\n              type=\"time\"\n              label=\"At\"\n              #startTimeInput\n              [formControl]=\"startTime\"\n              (ionBlur)=\"onStartTimeBlur()\"\n              (ionChange)=\"onStartTimeChanged()\"\n            />\n            @if (startTime.touched && !startTime.valid && !!startTime.errors) {\n              <ion-label color=\"danger\" slot=\"end\"> Required field </ion-label>\n            }\n            <ion-buttons slot=\"end\" class=\"ion-no-margin ion-no-padding\">\n              <ion-button id=\"quick-pick-start-time-recurring\" color=\"medium\">\n                <!--\t\t\t<ion-label>Pick</ion-label>-->\n                <ion-icon name=\"chevron-down-outline\" slot=\"end\" />\n              </ion-button>\n              <ion-modal trigger=\"quick-pick-start-time-recurring\">\n                <ng-template>\n                  <sneat-time-selector (selected)=\"setStartTime($event)\" />\n                </ng-template>\n              </ion-modal>\n              <!-- Commented out as does not fit into modal - we might want to show only on wide screens -->\n              <!--\t\t\t\t\t<ion-button-->\n              <!--\t\t\t\t\t\t*ngIf=\"startTime.value\"-->\n              <!--\t\t\t\t\t\tcolor=\"medium\"-->\n              <!--\t\t\t\t\t\t(click)=\"addToStart({ hours: -1 })\"-->\n              <!--\t\t\t\t\t>-->\n              <!--\t\t\t\t\t\t<ion-icon name=\"chevron-back-outline\" slot=\"start\" />-->\n              <!--\t\t\t\t\t\t<ion-label>-1h</ion-label>-->\n              <!--\t\t\t\t\t</ion-button>-->\n              <!--\t\t\t\t\t<ion-button-->\n              <!--\t\t\t\t\t\t*ngIf=\"startTime.value\"-->\n              <!--\t\t\t\t\t\tcolor=\"medium\"-->\n              <!--\t\t\t\t\t\t(click)=\"addToStart({ hours: +1 })\"-->\n              <!--\t\t\t\t\t>-->\n              <!--\t\t\t\t\t\t<ion-label>+1h</ion-label>-->\n              <!--\t\t\t\t\t\t<ion-icon name=\"chevron-forward-outline\" slot=\"end\" />-->\n              <!--\t\t\t\t\t</ion-button>-->\n            </ion-buttons>\n          </ion-item>\n        </ion-col>\n        <ion-col size=\"12\" size-md=\"5\">\n          <ion-item lines=\"none\">\n            <ion-input\n              #durationInput\n              label=\"For\"\n              [formControl]=\"duration\"\n              (ionChange)=\"onDurationChanged()\"\n              type=\"number\"\n              style=\"text-align: right\"\n            />\n            <ion-select\n              slot=\"end\"\n              interface=\"popover\"\n              [(ngModel)]=\"durationUnits\"\n            >\n              <ion-select-option value=\"minutes\">minutes</ion-select-option>\n              <ion-select-option value=\"hours\">hours</ion-select-option>\n            </ion-select>\n          </ion-item>\n        </ion-col>\n        <ion-col size=\"12\" size-md=\"3\">\n          <ion-item lines=\"none\">\n            <ion-input\n              type=\"time\"\n              label=\"Ends at\"\n              [formControl]=\"endTime\"\n              (ionChange)=\"onEndTimeChanged()\"\n              placeholder=\"HH:MM\"\n            />\n          </ion-item>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- TODO(help-wanted): use CSS class, preferably from Ionic -->\n    <ion-accordion-group\n      style=\"\n        border-top: 1px solid lightgray;\n        border-bottom: 1px solid lightgray;\n      \"\n    >\n      <ion-accordion value=\"dates\">\n        <ion-item slot=\"header\" color=\"light\">\n          <ion-label color=\"medium\">Dates (start & end)</ion-label>\n        </ion-item>\n        <sneat-start-end-dates-range-form\n          slot=\"content\"\n          [timing]=\"timing\"\n          (timingChange)=\"onTimingChanged($event)\"\n        />\n      </ion-accordion>\n    </ion-accordion-group>\n  }\n  @case (\"single\") {\n    <ion-grid class=\"ion-grid-layout\">\n      @if (!startDate.value || !startTime.value) {\n        <ion-row>\n          <ion-col size=\"12\" size-lg=\"5\">\n            <ion-datetime\n              [min]=\"today.toISOString().substring(0, 10)\"\n              [max]=\"maxDate\"\n              presentation=\"date\"\n              [formControl]=\"startDate\"\n              (ionChange)=\"onStartDateChanged()\"\n            >\n              <ion-buttons slot=\"buttons\">\n                <ion-button\n                  color=\"medium\"\n                  (click)=\"setStartDate($event, 'today')\"\n                  >Today\n                </ion-button>\n                <ion-button\n                  color=\"medium\"\n                  (click)=\"setStartDate($event, 'tomorrow')\"\n                  >Tomorrow\n                </ion-button>\n              </ion-buttons>\n            </ion-datetime>\n          </ion-col>\n          <ion-col size=\"12\" size-lg=\"7\">\n            <sneat-time-selector\n              [hideHeader]=\"true\"\n              (selected)=\"startTime.setValue($event); onStartTimeChanged()\"\n            />\n          </ion-col>\n        </ion-row>\n      }\n      @if (startDate.value && startTime.value) {\n        <ion-row>\n          <ion-col size=\"12\" size-sm=\"6\">\n            <ion-item class=\"sneat-no-end-padding\">\n              <ion-input\n                label=\"On\"\n                type=\"date\"\n                [formControl]=\"startDate\"\n                (ionChange)=\"onStartDateChanged()\"\n              />\n              <!--\t\t\t\t<ion-buttons-->\n              <!--\t\t\t\t\tslot=\"end\"-->\n              <!--\t\t\t\t\t*ngIf=\"!startDate?.value\"-->\n              <!--\t\t\t\t\tclass=\"ion-no-margin ion-no-padding\"-->\n              <!--\t\t\t\t>-->\n              <!--\t\t\t\t\t<ion-button-->\n              <!--\t\t\t\t\t\tcolor=\"medium\"-->\n              <!--\t\t\t\t\t\t(click)=\"setStartDate($event, 'today')\"-->\n              <!--\t\t\t\t\t\ttitle=\"Today\"-->\n              <!--\t\t\t\t\t>-->\n              <!--\t\t\t\t\t\t<ion-icon name=\"today-outline\" />-->\n              <!--\t\t\t\t\t</ion-button>-->\n              <!--\t\t\t\t\t<ion-button-->\n              <!--\t\t\t\t\t\tvalue=\"tomorrow\"-->\n              <!--\t\t\t\t\t\tcolor=\"medium\"-->\n              <!--\t\t\t\t\t\t(click)=\"setStartDate($event, 'tomorrow')\"-->\n              <!--\t\t\t\t\t>-->\n              <!--\t\t\t\t\t\t<ion-label>+1D</ion-label>-->\n              <!--\t\t\t\t\t</ion-button>-->\n              <!--\t\t\t\t</ion-buttons>-->\n              @if (startDate.value) {\n                <ion-buttons slot=\"end\" class=\"ion-no-margin ion-no-padding\">\n                  <ion-button id=\"quick-pick-start-date\" color=\"medium\">\n                    <!--\t\t\t<ion-label>Pick</ion-label>-->\n                    <ion-icon name=\"chevron-down-outline\" slot=\"end\" />\n                  </ion-button>\n                  <ion-button color=\"medium\" (click)=\"addToStart({ days: -1 })\">\n                    <ion-icon name=\"chevron-back-outline\" slot=\"start\" />\n                    <ion-label>-1</ion-label>\n                  </ion-button>\n                  <ion-button color=\"medium\" (click)=\"addToStart({ days: +1 })\">\n                    <ion-label>+1</ion-label>\n                    <ion-icon name=\"chevron-forward-outline\" slot=\"end\" />\n                  </ion-button>\n                  <ion-popover\n                    trigger=\"quick-pick-start-date\"\n                    [dismissOnSelect]=\"true\"\n                  >\n                    <ng-template>\n                      <ion-item tappable (click)=\"setStartDate($event, 'today')\"\n                        >Today\n                      </ion-item>\n                      <ion-item\n                        tappable\n                        (click)=\"setStartDate($event, 'tomorrow')\"\n                        >Tomorrow\n                      </ion-item>\n                      <!--\t\t\t\t<ion-item-divider color=\"light\">Next week</ion-item-divider>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Monday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Tuesday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Wednesday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Thursday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Friday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Saturday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Sunday</ion-item>-->\n                    </ng-template>\n                  </ion-popover>\n                </ion-buttons>\n              }\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"12\" size-sm=\"6\">\n            <ion-item class=\"sneat-no-end-padding\">\n              <ion-input\n                type=\"time\"\n                label=\"At\"\n                #startTimeInput\n                [formControl]=\"startTime\"\n                (ionBlur)=\"onStartTimeBlur()\"\n                (ionChange)=\"onStartTimeChanged()\"\n              />\n              @if (\n                startTime.touched && !startTime.valid && !!startTime.errors\n              ) {\n                <ion-label color=\"danger\" slot=\"end\">\n                  Required field\n                </ion-label>\n              }\n              <ion-buttons slot=\"end\" class=\"ion-no-margin ion-no-padding\">\n                <ion-button id=\"quick-pick-start-time-single\" color=\"medium\">\n                  <!--\t\t\t<ion-label>Pick</ion-label>-->\n                  <ion-icon name=\"chevron-down-outline\" slot=\"end\" />\n                </ion-button>\n                <ion-modal trigger=\"quick-pick-start-time-single\">\n                  <ng-template>\n                    <sneat-time-selector (selected)=\"setStartTime($event)\" />\n                  </ng-template>\n                </ion-modal>\n                @if (startTime.value) {\n                  <ion-button\n                    color=\"medium\"\n                    (click)=\"addToStart({ hours: -1 })\"\n                  >\n                    <ion-icon name=\"chevron-back-outline\" slot=\"start\" />\n                    <ion-label>-1h</ion-label>\n                  </ion-button>\n                  <ion-button\n                    color=\"medium\"\n                    (click)=\"addToStart({ hours: +1 })\"\n                  >\n                    <ion-label>+1h</ion-label>\n                    <ion-icon name=\"chevron-forward-outline\" slot=\"end\" />\n                  </ion-button>\n                }\n              </ion-buttons>\n            </ion-item>\n          </ion-col>\n        </ion-row>\n      }\n      @if (startDate.value && startTime.value) {\n        <ion-row>\n          <ion-col size=\"12\" size-sm=\"6\">\n            <ion-item lines=\"none\">\n              <ion-input\n                label=\"Duration\"\n                sneatSelectAllOnFocus\n                [formControl]=\"duration\"\n                (ionChange)=\"onDurationChanged()\"\n                type=\"number\"\n                style=\"text-align: right\"\n              />\n              <ion-select\n                slot=\"end\"\n                interface=\"popover\"\n                [(ngModel)]=\"durationUnits\"\n              >\n                <ion-select-option value=\"minutes\">minutes</ion-select-option>\n                <ion-select-option value=\"hours\">hours</ion-select-option>\n              </ion-select>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"6\" size-sm=\"3\">\n            <ion-item lines=\"none\">\n              <ion-input\n                type=\"time\"\n                label=\"Ends at\"\n                [formControl]=\"endTime\"\n                (ionChange)=\"onEndTimeChanged()\"\n                placeholder=\"HH:MM\"\n              />\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"6\" size-sm=\"3\">\n            <ion-button expand=\"full\" class=\"ion-margin\" (click)=\"addSlot()\"\n              >{{ addSlotLabel }}\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      }\n    </ion-grid>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TimeSelectorComponent, selector: "sneat-time-selector", inputs: ["hideHeader"], outputs: ["selected"] }, { kind: "component", type: StartEndDatesRangeFormComponent, selector: "sneat-start-end-dates-range-form", inputs: ["timing"], outputs: ["timingChange"] }, { kind: "directive", type: SneatSelectAllOnFocusDirective, selector: "[sneatSelectAllOnFocus]" }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { 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: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showAdjacentDays", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { 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: IonPopover, selector: "ion-popover" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StartEndDatetimeFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-start-end-datetime-form', imports: [
+                        ReactiveFormsModule,
+                        FormsModule,
+                        TimeSelectorComponent,
+                        StartEndDatesRangeFormComponent,
+                        SneatSelectAllOnFocusDirective,
+                        IonAccordion,
+                        IonAccordionGroup,
+                        IonGrid,
+                        IonRow,
+                        IonCol,
+                        IonItem,
+                        IonInput,
+                        IonLabel,
+                        IonButtons,
+                        IonButton,
+                        IonIcon,
+                        IonModal,
+                        IonDatetime,
+                        IonSelectOption,
+                        IonSelect,
+                        IonPopover,
+                    ], template: "@switch (mode) {\n  @case (\"recurring\") {\n    <!-- TODO(help-wanted): use CSS class, preferably from Ionic -->\n    <ion-grid class=\"ion-grid-layout\" style=\"border-top: 1px solid lightgray\">\n      <ion-row>\n        <ion-col size=\"12\" size-md=\"4\">\n          <ion-item class=\"sneat-no-end-padding\" lines=\"none\">\n            <ion-input\n              type=\"time\"\n              label=\"At\"\n              #startTimeInput\n              [formControl]=\"startTime\"\n              (ionBlur)=\"onStartTimeBlur()\"\n              (ionChange)=\"onStartTimeChanged()\"\n            />\n            @if (startTime.touched && !startTime.valid && !!startTime.errors) {\n              <ion-label color=\"danger\" slot=\"end\"> Required field </ion-label>\n            }\n            <ion-buttons slot=\"end\" class=\"ion-no-margin ion-no-padding\">\n              <ion-button id=\"quick-pick-start-time-recurring\" color=\"medium\">\n                <!--\t\t\t<ion-label>Pick</ion-label>-->\n                <ion-icon name=\"chevron-down-outline\" slot=\"end\" />\n              </ion-button>\n              <ion-modal trigger=\"quick-pick-start-time-recurring\">\n                <ng-template>\n                  <sneat-time-selector (selected)=\"setStartTime($event)\" />\n                </ng-template>\n              </ion-modal>\n              <!-- Commented out as does not fit into modal - we might want to show only on wide screens -->\n              <!--\t\t\t\t\t<ion-button-->\n              <!--\t\t\t\t\t\t*ngIf=\"startTime.value\"-->\n              <!--\t\t\t\t\t\tcolor=\"medium\"-->\n              <!--\t\t\t\t\t\t(click)=\"addToStart({ hours: -1 })\"-->\n              <!--\t\t\t\t\t>-->\n              <!--\t\t\t\t\t\t<ion-icon name=\"chevron-back-outline\" slot=\"start\" />-->\n              <!--\t\t\t\t\t\t<ion-label>-1h</ion-label>-->\n              <!--\t\t\t\t\t</ion-button>-->\n              <!--\t\t\t\t\t<ion-button-->\n              <!--\t\t\t\t\t\t*ngIf=\"startTime.value\"-->\n              <!--\t\t\t\t\t\tcolor=\"medium\"-->\n              <!--\t\t\t\t\t\t(click)=\"addToStart({ hours: +1 })\"-->\n              <!--\t\t\t\t\t>-->\n              <!--\t\t\t\t\t\t<ion-label>+1h</ion-label>-->\n              <!--\t\t\t\t\t\t<ion-icon name=\"chevron-forward-outline\" slot=\"end\" />-->\n              <!--\t\t\t\t\t</ion-button>-->\n            </ion-buttons>\n          </ion-item>\n        </ion-col>\n        <ion-col size=\"12\" size-md=\"5\">\n          <ion-item lines=\"none\">\n            <ion-input\n              #durationInput\n              label=\"For\"\n              [formControl]=\"duration\"\n              (ionChange)=\"onDurationChanged()\"\n              type=\"number\"\n              style=\"text-align: right\"\n            />\n            <ion-select\n              slot=\"end\"\n              interface=\"popover\"\n              [(ngModel)]=\"durationUnits\"\n            >\n              <ion-select-option value=\"minutes\">minutes</ion-select-option>\n              <ion-select-option value=\"hours\">hours</ion-select-option>\n            </ion-select>\n          </ion-item>\n        </ion-col>\n        <ion-col size=\"12\" size-md=\"3\">\n          <ion-item lines=\"none\">\n            <ion-input\n              type=\"time\"\n              label=\"Ends at\"\n              [formControl]=\"endTime\"\n              (ionChange)=\"onEndTimeChanged()\"\n              placeholder=\"HH:MM\"\n            />\n          </ion-item>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- TODO(help-wanted): use CSS class, preferably from Ionic -->\n    <ion-accordion-group\n      style=\"\n        border-top: 1px solid lightgray;\n        border-bottom: 1px solid lightgray;\n      \"\n    >\n      <ion-accordion value=\"dates\">\n        <ion-item slot=\"header\" color=\"light\">\n          <ion-label color=\"medium\">Dates (start & end)</ion-label>\n        </ion-item>\n        <sneat-start-end-dates-range-form\n          slot=\"content\"\n          [timing]=\"timing\"\n          (timingChange)=\"onTimingChanged($event)\"\n        />\n      </ion-accordion>\n    </ion-accordion-group>\n  }\n  @case (\"single\") {\n    <ion-grid class=\"ion-grid-layout\">\n      @if (!startDate.value || !startTime.value) {\n        <ion-row>\n          <ion-col size=\"12\" size-lg=\"5\">\n            <ion-datetime\n              [min]=\"today.toISOString().substring(0, 10)\"\n              [max]=\"maxDate\"\n              presentation=\"date\"\n              [formControl]=\"startDate\"\n              (ionChange)=\"onStartDateChanged()\"\n            >\n              <ion-buttons slot=\"buttons\">\n                <ion-button\n                  color=\"medium\"\n                  (click)=\"setStartDate($event, 'today')\"\n                  >Today\n                </ion-button>\n                <ion-button\n                  color=\"medium\"\n                  (click)=\"setStartDate($event, 'tomorrow')\"\n                  >Tomorrow\n                </ion-button>\n              </ion-buttons>\n            </ion-datetime>\n          </ion-col>\n          <ion-col size=\"12\" size-lg=\"7\">\n            <sneat-time-selector\n              [hideHeader]=\"true\"\n              (selected)=\"startTime.setValue($event); onStartTimeChanged()\"\n            />\n          </ion-col>\n        </ion-row>\n      }\n      @if (startDate.value && startTime.value) {\n        <ion-row>\n          <ion-col size=\"12\" size-sm=\"6\">\n            <ion-item class=\"sneat-no-end-padding\">\n              <ion-input\n                label=\"On\"\n                type=\"date\"\n                [formControl]=\"startDate\"\n                (ionChange)=\"onStartDateChanged()\"\n              />\n              <!--\t\t\t\t<ion-buttons-->\n              <!--\t\t\t\t\tslot=\"end\"-->\n              <!--\t\t\t\t\t*ngIf=\"!startDate?.value\"-->\n              <!--\t\t\t\t\tclass=\"ion-no-margin ion-no-padding\"-->\n              <!--\t\t\t\t>-->\n              <!--\t\t\t\t\t<ion-button-->\n              <!--\t\t\t\t\t\tcolor=\"medium\"-->\n              <!--\t\t\t\t\t\t(click)=\"setStartDate($event, 'today')\"-->\n              <!--\t\t\t\t\t\ttitle=\"Today\"-->\n              <!--\t\t\t\t\t>-->\n              <!--\t\t\t\t\t\t<ion-icon name=\"today-outline\" />-->\n              <!--\t\t\t\t\t</ion-button>-->\n              <!--\t\t\t\t\t<ion-button-->\n              <!--\t\t\t\t\t\tvalue=\"tomorrow\"-->\n              <!--\t\t\t\t\t\tcolor=\"medium\"-->\n              <!--\t\t\t\t\t\t(click)=\"setStartDate($event, 'tomorrow')\"-->\n              <!--\t\t\t\t\t>-->\n              <!--\t\t\t\t\t\t<ion-label>+1D</ion-label>-->\n              <!--\t\t\t\t\t</ion-button>-->\n              <!--\t\t\t\t</ion-buttons>-->\n              @if (startDate.value) {\n                <ion-buttons slot=\"end\" class=\"ion-no-margin ion-no-padding\">\n                  <ion-button id=\"quick-pick-start-date\" color=\"medium\">\n                    <!--\t\t\t<ion-label>Pick</ion-label>-->\n                    <ion-icon name=\"chevron-down-outline\" slot=\"end\" />\n                  </ion-button>\n                  <ion-button color=\"medium\" (click)=\"addToStart({ days: -1 })\">\n                    <ion-icon name=\"chevron-back-outline\" slot=\"start\" />\n                    <ion-label>-1</ion-label>\n                  </ion-button>\n                  <ion-button color=\"medium\" (click)=\"addToStart({ days: +1 })\">\n                    <ion-label>+1</ion-label>\n                    <ion-icon name=\"chevron-forward-outline\" slot=\"end\" />\n                  </ion-button>\n                  <ion-popover\n                    trigger=\"quick-pick-start-date\"\n                    [dismissOnSelect]=\"true\"\n                  >\n                    <ng-template>\n                      <ion-item tappable (click)=\"setStartDate($event, 'today')\"\n                        >Today\n                      </ion-item>\n                      <ion-item\n                        tappable\n                        (click)=\"setStartDate($event, 'tomorrow')\"\n                        >Tomorrow\n                      </ion-item>\n                      <!--\t\t\t\t<ion-item-divider color=\"light\">Next week</ion-item-divider>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Monday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Tuesday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Wednesday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Thursday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Friday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Saturday</ion-item>-->\n                      <!--\t\t\t\t<ion-item><ion-text color=\"medium\">Next week -</ion-text> Sunday</ion-item>-->\n                    </ng-template>\n                  </ion-popover>\n                </ion-buttons>\n              }\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"12\" size-sm=\"6\">\n            <ion-item class=\"sneat-no-end-padding\">\n              <ion-input\n                type=\"time\"\n                label=\"At\"\n                #startTimeInput\n                [formControl]=\"startTime\"\n                (ionBlur)=\"onStartTimeBlur()\"\n                (ionChange)=\"onStartTimeChanged()\"\n              />\n              @if (\n                startTime.touched && !startTime.valid && !!startTime.errors\n              ) {\n                <ion-label color=\"danger\" slot=\"end\">\n                  Required field\n                </ion-label>\n              }\n              <ion-buttons slot=\"end\" class=\"ion-no-margin ion-no-padding\">\n                <ion-button id=\"quick-pick-start-time-single\" color=\"medium\">\n                  <!--\t\t\t<ion-label>Pick</ion-label>-->\n                  <ion-icon name=\"chevron-down-outline\" slot=\"end\" />\n                </ion-button>\n                <ion-modal trigger=\"quick-pick-start-time-single\">\n                  <ng-template>\n                    <sneat-time-selector (selected)=\"setStartTime($event)\" />\n                  </ng-template>\n                </ion-modal>\n                @if (startTime.value) {\n                  <ion-button\n                    color=\"medium\"\n                    (click)=\"addToStart({ hours: -1 })\"\n                  >\n                    <ion-icon name=\"chevron-back-outline\" slot=\"start\" />\n                    <ion-label>-1h</ion-label>\n                  </ion-button>\n                  <ion-button\n                    color=\"medium\"\n                    (click)=\"addToStart({ hours: +1 })\"\n                  >\n                    <ion-label>+1h</ion-label>\n                    <ion-icon name=\"chevron-forward-outline\" slot=\"end\" />\n                  </ion-button>\n                }\n              </ion-buttons>\n            </ion-item>\n          </ion-col>\n        </ion-row>\n      }\n      @if (startDate.value && startTime.value) {\n        <ion-row>\n          <ion-col size=\"12\" size-sm=\"6\">\n            <ion-item lines=\"none\">\n              <ion-input\n                label=\"Duration\"\n                sneatSelectAllOnFocus\n                [formControl]=\"duration\"\n                (ionChange)=\"onDurationChanged()\"\n                type=\"number\"\n                style=\"text-align: right\"\n              />\n              <ion-select\n                slot=\"end\"\n                interface=\"popover\"\n                [(ngModel)]=\"durationUnits\"\n              >\n                <ion-select-option value=\"minutes\">minutes</ion-select-option>\n                <ion-select-option value=\"hours\">hours</ion-select-option>\n              </ion-select>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"6\" size-sm=\"3\">\n            <ion-item lines=\"none\">\n              <ion-input\n                type=\"time\"\n                label=\"Ends at\"\n                [formControl]=\"endTime\"\n                (ionChange)=\"onEndTimeChanged()\"\n                placeholder=\"HH:MM\"\n              />\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"6\" size-sm=\"3\">\n            <ion-button expand=\"full\" class=\"ion-margin\" (click)=\"addSlot()\"\n              >{{ addSlotLabel }}\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      }\n    </ion-grid>\n  }\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { addSlotLabel: [{
+                type: Input
+            }], mode: [{
+                type: Input,
+                args: [{ required: true }]
+            }], date: [{
+                type: Input,
+                args: [{ required: true }]
+            }], timing: [{
+                type: Input,
+                args: [{ required: true }]
+            }], timingChange: [{
+                type: Output
+            }], addClick: [{
+                type: Output
+            }], durationInput: [{
+                type: ViewChild,
+                args: ['durationInput']
+            }] } });
+//# sourceMappingURL=start-end-datetime-form.component.js.map