@sneat/extensions-schedulus-shared 0.3.0

package/esm2022/lib/components/calendar/components/calendar-filter/calendar-filter.component.js

@@ -0,0 +1,162 @@
+import { Component, computed, Input, signal, inject } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { IonAccordion, IonAccordionGroup, IonBadge, IonButton, IonButtons, IonCard, IonCheckbox, IonCol, IonGrid, IonIcon, IonInput, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonRow, } from '@ionic/angular/standalone';
+import { ContactTitlePipe } from '@sneat/contactus-shared';
+import { emptyCalendarFilter, CalendarFilterService, } from '../../../calendar-filter.service';
+import { WeekdaysFormBase } from '../../../weekdays/weekdays-form-base';
+import { ContactsFilterComponent } from './contacts-filter.component';
+import { ClassName } from '@sneat/ui';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class CalendarFilterComponent extends WeekdaysFormBase {
+    constructor() {
+        super(false);
+        this.filterService = inject(CalendarFilterService);
+        this.$expanded = signal(false, ...(ngDevMode ? [{ debugName: "$expanded" }] : []));
+        this.resetting = false;
+        this.showWeekdays = false;
+        this.showRepeats = false;
+        this.text = new FormControl('');
+        // protected readonly $weekdays = computed(() => this.$filter().weekdays);
+        this.$repeats = computed(() => this.$filter().repeats, ...(ngDevMode ? [{ debugName: "$repeats" }] : []));
+        this.contactID = '';
+        this.selectedContacts = [];
+        this.$repeatsWeekly = computed(() => this.$repeats().includes('weekly'), ...(ngDevMode ? [{ debugName: "$repeatsWeekly" }] : []));
+        this.$repeatsMonthly = computed(() => this.$repeats().includes('monthly'), ...(ngDevMode ? [{ debugName: "$repeatsMonthly" }] : []));
+        this.$repeatsQuarterly = computed(() => this.$repeats().includes('quarterly'), ...(ngDevMode ? [{ debugName: "$repeatsQuarterly" }] : []));
+        this.$repeatsYearly = computed(() => this.$repeats().includes('yearly'), ...(ngDevMode ? [{ debugName: "$repeatsYearly" }] : []));
+        this.$filter = signal(emptyCalendarFilter, ...(ngDevMode ? [{ debugName: "$filter" }] : []));
+        this.$contactIDs = computed(() => this.$filter().contactIDs, ...(ngDevMode ? [{ debugName: "$contactIDs" }] : []));
+        this.$hasFilter = computed(() => {
+            const filter = this.$filter();
+            return (!!filter.text.trim() ||
+                !!filter.weekdays.length ||
+                !!filter.contactIDs.length ||
+                !!filter.repeats?.length);
+        }, ...(ngDevMode ? [{ debugName: "$hasFilter" }] : []));
+        this.onFilterChanged = (filter) => {
+            if (this.$filter() === filter) {
+                return;
+            }
+            this.$filter.set(filter);
+            this.text.setValue(filter.text || '');
+            const { contactIDs } = filter;
+            if (contactIDs) {
+                if (filter.contactIDs.length === 1) {
+                    this.contactID = contactIDs[0];
+                    this.accordionValue = 'filter';
+                    this.$expanded.set(true);
+                }
+            }
+            // TODO: reset weekday & repeats controls
+            this.emitChanged();
+        };
+        const filterService = this.filterService;
+        filterService.filter.subscribe({
+            next: this.onFilterChanged,
+        });
+    }
+    onSelectedContactsChanged(contactIDs) {
+        this.onFilterChanged({ ...this.$filter(), contactIDs: [...contactIDs] });
+    }
+    clearFilter(event) {
+        event?.stopPropagation();
+        this.resetting = true;
+        try {
+            this.$filter.update((f) => ({
+                ...f,
+                contactIDs: [],
+                repeats: [],
+                weekdays: [],
+            }));
+            this.contactID = '';
+            const resetFormControlOptions = {
+                onlySelf: true,
+                emitEvent: false,
+                emitModelToViewChange: true,
+                emitViewToModelChange: false,
+            };
+            this.text.setValue('', resetFormControlOptions);
+            Object.values(this.weekdayById).forEach((wd) => wd.set(false));
+        }
+        catch (e) {
+            console.error(e);
+        }
+        this.resetting = false;
+        this.emitChanged();
+    }
+    accordionChanged(event) {
+        event.stopPropagation();
+        this.$expanded.set(!!event.detail.value);
+    }
+    repeatChanged(event) {
+        const ce = event;
+        const { checked, value } = ce.detail;
+        this.$filter.update((filter) => {
+            const repeats = filter.repeats;
+            const found = repeats.includes(value);
+            if (checked && !found) {
+                return { ...filter, repeats: [...repeats, value] };
+            }
+            if (!checked && found) {
+                return { ...filter, repeats: repeats.filter((r) => r !== value) };
+            }
+            return filter;
+        });
+        this.emitChanged();
+    }
+    onTextKeyUp() {
+        this.emitChanged();
+    }
+    onWeekdayChanged(wd, checked) {
+        super.onWeekdayChanged(wd, checked);
+        this.emitChanged();
+    }
+    emitChanged() {
+        if (this.resetting) {
+            return;
+        }
+        this.$filter.update((filter) => ({
+            ...filter,
+            text: this.text.value || '',
+            showRecurrings: true,
+            showSingles: true,
+            weekdays: this.selectedWeekdayCodes(),
+        }));
+        this.filterService.next(this.$filter());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CalendarFilterComponent, isStandalone: true, selector: "sneat-calendar-filter", inputs: { space: "space", showWeekdays: "showWeekdays", showRepeats: "showRepeats" }, providers: [{ provide: ClassName, useValue: 'CalendarFilterComponent' }], usesInheritance: true, ngImport: i0, template: "<ion-card>\n  <ion-accordion-group\n    [multiple]=\"false\"\n    (ionChange)=\"accordionChanged($event)\"\n  >\n    <ion-accordion value=\"filter\">\n      <ion-item slot=\"header\">\n        <!-- [color]=\"$expanded() ? 'light' : undefined\"-->\n        <ion-icon name=\"search-outline\" slot=\"start\" />\n        <!--\t\t\t\t<ion-label color=\"medium\" position=\"floating\">Filter</ion-label>-->\n        <ion-input\n          label=\"Filter\"\n          [formControl]=\"text\"\n          (keyup)=\"onTextKeyUp()\"\n          (click)=\"$event.stopPropagation()\"\n          placeholder=\"text to search\"\n        />\n        @if ($hasFilter()) {\n          <ion-buttons slot=\"end\">\n            <ion-button (click)=\"clearFilter($event)\" title=\"Clear filter\">\n              <ion-icon name=\"close-outline\" color=\"medium\" />\n            </ion-button>\n          </ion-buttons>\n        }\n      </ion-item>\n      <ion-item-group slot=\"content\">\n        <!--\t\t\t\t<ion-item>-->\n        <!--\t\t\t\t\t<ion-checkbox (ionChange)=\"emitChanged()\" slot=\"start\" labelPlacement=\"end\">Myself</ion-checkbox>-->\n        <!--\t\t\t\t</ion-item>-->\n        @if (showWeekdays) {\n          <ion-item-divider color=\"light\">Weekdays</ion-item-divider>\n          <ion-grid class=\"ion-grid-layout\">\n            <ion-row>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayMo()\"\n                    (ionChange)=\"onWeekdayChanged('mo', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Mo\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayTu()\"\n                    (ionChange)=\"onWeekdayChanged('tu', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Tu\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayWe()\"\n                    (ionChange)=\"onWeekdayChanged('we', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  We\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayTh()\"\n                    (ionChange)=\"onWeekdayChanged('th', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Th\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayFr()\"\n                    (ionChange)=\"onWeekdayChanged('fr', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Fr\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdaySa()\"\n                    (ionChange)=\"onWeekdayChanged('sa', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Sa\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdaySu()\"\n                    (ionChange)=\"onWeekdayChanged('su', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Su\n                </ion-item>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        }\n        @if (showRepeats) {\n          <ion-item-divider color=\"light\">Repeats</ion-item-divider>\n          <ion-grid class=\"ion-grid-layout\">\n            <ion-row>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"weekly\"\n                    [checked]=\"$repeatsWeekly()\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Weekly\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"monthly\"\n                    [checked]=\"$repeatsMonthly()\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Monthly\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"quarterly\"\n                    [checked]=\"$repeatsQuarterly()\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Quarterly\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"yearly\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Yearly\n                </ion-item>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        }\n\n        <sneat-contacts-filter\n          [$contactIDs]=\"$contactIDs()\"\n          (contactIDsChange)=\"onSelectedContactsChanged($event)\"\n        />\n      </ion-item-group>\n    </ion-accordion>\n  </ion-accordion-group>\n  @if (!$expanded() && $filter().contactIDs.length) {\n    <ion-item>\n      <ion-label>\n        @if (selectedContacts.length === 1) {\n          Member:\n        }\n        @if (selectedContacts.length > 1) {\n          Members:\n        }\n        @for (contact of selectedContacts; track contact.id) {\n          <ion-badge style=\"margin: 0 0.5em\" color=\"light\">\n            {{ contact | contactTitle }}\n          </ion-badge>\n        }\n      </ion-label>\n      <ion-buttons slot=\"end\">\n        <ion-button title=\"Clear participants\" color=\"medium\">\n          <!-- (click)=\"clearMembers()\" -->\n          <ion-icon name=\"close-outline\" />\n        </ion-button>\n      </ion-buttons>\n    </ion-item>\n  }\n</ion-card>\n", dependencies: [{ kind: "component", type: ContactsFilterComponent, selector: "sneat-contacts-filter", inputs: ["$contactIDs"], outputs: ["contactIDsChange"] }, { 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: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: 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: IonItemGroup, selector: "ion-item-group" }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { 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: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "pipe", type: ContactTitlePipe, name: "contactTitle" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarFilterComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        ContactTitlePipe,
+                        ContactsFilterComponent,
+                        ReactiveFormsModule,
+                        IonCard,
+                        IonAccordionGroup,
+                        IonItem,
+                        IonIcon,
+                        IonInput,
+                        IonButtons,
+                        IonButton,
+                        IonItemGroup,
+                        IonItemDivider,
+                        IonGrid,
+                        IonRow,
+                        IonCol,
+                        IonCheckbox,
+                        IonAccordion,
+                        IonBadge,
+                        IonLabel,
+                    ], providers: [{ provide: ClassName, useValue: 'CalendarFilterComponent' }], selector: 'sneat-calendar-filter', template: "<ion-card>\n  <ion-accordion-group\n    [multiple]=\"false\"\n    (ionChange)=\"accordionChanged($event)\"\n  >\n    <ion-accordion value=\"filter\">\n      <ion-item slot=\"header\">\n        <!-- [color]=\"$expanded() ? 'light' : undefined\"-->\n        <ion-icon name=\"search-outline\" slot=\"start\" />\n        <!--\t\t\t\t<ion-label color=\"medium\" position=\"floating\">Filter</ion-label>-->\n        <ion-input\n          label=\"Filter\"\n          [formControl]=\"text\"\n          (keyup)=\"onTextKeyUp()\"\n          (click)=\"$event.stopPropagation()\"\n          placeholder=\"text to search\"\n        />\n        @if ($hasFilter()) {\n          <ion-buttons slot=\"end\">\n            <ion-button (click)=\"clearFilter($event)\" title=\"Clear filter\">\n              <ion-icon name=\"close-outline\" color=\"medium\" />\n            </ion-button>\n          </ion-buttons>\n        }\n      </ion-item>\n      <ion-item-group slot=\"content\">\n        <!--\t\t\t\t<ion-item>-->\n        <!--\t\t\t\t\t<ion-checkbox (ionChange)=\"emitChanged()\" slot=\"start\" labelPlacement=\"end\">Myself</ion-checkbox>-->\n        <!--\t\t\t\t</ion-item>-->\n        @if (showWeekdays) {\n          <ion-item-divider color=\"light\">Weekdays</ion-item-divider>\n          <ion-grid class=\"ion-grid-layout\">\n            <ion-row>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayMo()\"\n                    (ionChange)=\"onWeekdayChanged('mo', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Mo\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayTu()\"\n                    (ionChange)=\"onWeekdayChanged('tu', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Tu\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayWe()\"\n                    (ionChange)=\"onWeekdayChanged('we', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  We\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayTh()\"\n                    (ionChange)=\"onWeekdayChanged('th', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Th\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayFr()\"\n                    (ionChange)=\"onWeekdayChanged('fr', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Fr\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdaySa()\"\n                    (ionChange)=\"onWeekdayChanged('sa', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Sa\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdaySu()\"\n                    (ionChange)=\"onWeekdayChanged('su', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Su\n                </ion-item>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        }\n        @if (showRepeats) {\n          <ion-item-divider color=\"light\">Repeats</ion-item-divider>\n          <ion-grid class=\"ion-grid-layout\">\n            <ion-row>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"weekly\"\n                    [checked]=\"$repeatsWeekly()\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Weekly\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"monthly\"\n                    [checked]=\"$repeatsMonthly()\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Monthly\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"quarterly\"\n                    [checked]=\"$repeatsQuarterly()\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Quarterly\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"yearly\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Yearly\n                </ion-item>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        }\n\n        <sneat-contacts-filter\n          [$contactIDs]=\"$contactIDs()\"\n          (contactIDsChange)=\"onSelectedContactsChanged($event)\"\n        />\n      </ion-item-group>\n    </ion-accordion>\n  </ion-accordion-group>\n  @if (!$expanded() && $filter().contactIDs.length) {\n    <ion-item>\n      <ion-label>\n        @if (selectedContacts.length === 1) {\n          Member:\n        }\n        @if (selectedContacts.length > 1) {\n          Members:\n        }\n        @for (contact of selectedContacts; track contact.id) {\n          <ion-badge style=\"margin: 0 0.5em\" color=\"light\">\n            {{ contact | contactTitle }}\n          </ion-badge>\n        }\n      </ion-label>\n      <ion-buttons slot=\"end\">\n        <ion-button title=\"Clear participants\" color=\"medium\">\n          <!-- (click)=\"clearMembers()\" -->\n          <ion-icon name=\"close-outline\" />\n        </ion-button>\n      </ion-buttons>\n    </ion-item>\n  }\n</ion-card>\n" }]
+        }], ctorParameters: () => [], propDecorators: { space: [{
+                type: Input,
+                args: [{ required: true }]
+            }], showWeekdays: [{
+                type: Input
+            }], showRepeats: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=calendar-filter.component.js.map

package/esm2022/lib/components/calendar/components/calendar-filter/calendar-filter.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-filter.component.js","sourceRoot":"","sources":["../../../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/calendar/components/calendar-filter/calendar-filter.component.ts","../../../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/calendar/components/calendar-filter/calendar-filter.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, computed, Input, signal, inject } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport {\n  IonAccordion,\n  IonAccordionGroup,\n  IonBadge,\n  IonButton,\n  IonButtons,\n  IonCard,\n  IonCheckbox,\n  IonCol,\n  IonGrid,\n  IonIcon,\n  IonInput,\n  IonItem,\n  IonItemDivider,\n  IonItemGroup,\n  IonLabel,\n  IonRow,\n} from '@ionic/angular/standalone';\nimport { ContactTitlePipe } from '@sneat/contactus-shared';\nimport { IContactWithBriefAndSpace } from '@sneat/contactus-core';\nimport { WeekdayCode2 } from '@sneat/mod-schedulus-core';\nimport { ISpaceContext } from '@sneat/space-models';\nimport {\n  emptyCalendarFilter,\n  CalendarFilterService,\n} from '../../../calendar-filter.service';\nimport { WeekdaysFormBase } from '../../../weekdays/weekdays-form-base';\nimport { ContactsFilterComponent } from './contacts-filter.component';\nimport { ICalendarFilter } from './calendar-filter';\nimport { ClassName } from '@sneat/ui';\n\n@Component({\n  imports: [\n    ContactTitlePipe,\n    ContactsFilterComponent,\n    ReactiveFormsModule,\n    IonCard,\n    IonAccordionGroup,\n    IonItem,\n    IonIcon,\n    IonInput,\n    IonButtons,\n    IonButton,\n    IonItemGroup,\n    IonItemDivider,\n    IonGrid,\n    IonRow,\n    IonCol,\n    IonCheckbox,\n    IonAccordion,\n    IonBadge,\n    IonLabel,\n  ],\n  providers: [{ provide: ClassName, useValue: 'CalendarFilterComponent' }],\n  selector: 'sneat-calendar-filter',\n  templateUrl: 'calendar-filter.component.html',\n})\nexport class CalendarFilterComponent extends WeekdaysFormBase {\n  private readonly filterService = inject(CalendarFilterService);\n\n  protected readonly $expanded = signal(false);\n  public accordionValue?: string;\n  private resetting = false;\n\n  @Input({ required: true }) space?: ISpaceContext;\n  @Input() showWeekdays = false;\n  @Input() showRepeats = false;\n\n  readonly text = new FormControl<string>('');\n\n  // protected readonly $weekdays = computed(() => this.$filter().weekdays);\n  protected readonly $repeats = computed(() => this.$filter().repeats);\n\n  contactID = '';\n  selectedContacts: IContactWithBriefAndSpace[] = [];\n  contacts?: IContactWithBriefAndSpace[];\n\n  protected readonly $repeatsWeekly = computed(() =>\n    this.$repeats().includes('weekly'),\n  );\n  protected readonly $repeatsMonthly = computed(() =>\n    this.$repeats().includes('monthly'),\n  );\n  protected readonly $repeatsQuarterly = computed(() =>\n    this.$repeats().includes('quarterly'),\n  );\n  protected readonly $repeatsYearly = computed(() =>\n    this.$repeats().includes('yearly'),\n  );\n\n  protected readonly $filter = signal<ICalendarFilter>(emptyCalendarFilter);\n\n  protected readonly $contactIDs = computed(() => this.$filter().contactIDs);\n\n  protected readonly $hasFilter = computed(() => {\n    const filter = this.$filter();\n    return (\n      !!filter.text.trim() ||\n      !!filter.weekdays.length ||\n      !!filter.contactIDs.length ||\n      !!filter.repeats?.length\n    );\n  });\n\n  public constructor() {\n    super(false);\n    const filterService = this.filterService;\n\n    filterService.filter.subscribe({\n      next: this.onFilterChanged,\n    });\n  }\n\n  protected onSelectedContactsChanged(contactIDs: readonly string[]): void {\n    this.onFilterChanged({ ...this.$filter(), contactIDs: [...contactIDs] });\n  }\n\n  private readonly onFilterChanged = (filter: ICalendarFilter): void => {\n    if (this.$filter() === filter) {\n      return;\n    }\n    this.$filter.set(filter);\n    this.text.setValue(filter.text || '');\n    const { contactIDs } = filter;\n    if (contactIDs) {\n      if (filter.contactIDs.length === 1) {\n        this.contactID = contactIDs[0];\n        this.accordionValue = 'filter';\n        this.$expanded.set(true);\n      }\n    }\n    // TODO: reset weekday & repeats controls\n    this.emitChanged();\n  };\n\n  protected clearFilter(event?: Event): void {\n    event?.stopPropagation();\n    this.resetting = true;\n    try {\n      this.$filter.update((f) => ({\n        ...f,\n        contactIDs: [],\n        repeats: [],\n        weekdays: [],\n      }));\n      this.contactID = '';\n\n      const resetFormControlOptions = {\n        onlySelf: true,\n        emitEvent: false,\n        emitModelToViewChange: true,\n        emitViewToModelChange: false,\n      };\n      this.text.setValue('', resetFormControlOptions);\n      Object.values(this.weekdayById).forEach((wd) => wd.set(false));\n    } catch (e) {\n      console.error(e);\n    }\n    this.resetting = false;\n    this.emitChanged();\n  }\n\n  protected accordionChanged(event: Event): void {\n    event.stopPropagation();\n    this.$expanded.set(!!(event as CustomEvent).detail.value);\n  }\n\n  protected repeatChanged(event: Event): void {\n    const ce = event as CustomEvent;\n    const { checked, value } = ce.detail;\n    this.$filter.update((filter) => {\n      const repeats = filter.repeats;\n      const found = repeats.includes(value);\n      if (checked && !found) {\n        return { ...filter, repeats: [...repeats, value] };\n      }\n      if (!checked && found) {\n        return { ...filter, repeats: repeats.filter((r) => r !== value) };\n      }\n      return filter;\n    });\n    this.emitChanged();\n  }\n\n  protected onTextKeyUp(): void {\n    this.emitChanged();\n  }\n\n  protected override onWeekdayChanged(\n    wd: WeekdayCode2,\n    checked: boolean,\n  ): void {\n    super.onWeekdayChanged(wd, checked);\n    this.emitChanged();\n  }\n\n  protected emitChanged(): void {\n    if (this.resetting) {\n      return;\n    }\n    this.$filter.update((filter) => ({\n      ...filter,\n      text: this.text.value || '',\n      showRecurrings: true,\n      showSingles: true,\n      weekdays: this.selectedWeekdayCodes(),\n    }));\n    this.filterService.next(this.$filter());\n  }\n}\n","<ion-card>\n  <ion-accordion-group\n    [multiple]=\"false\"\n    (ionChange)=\"accordionChanged($event)\"\n  >\n    <ion-accordion value=\"filter\">\n      <ion-item slot=\"header\">\n        <!-- [color]=\"$expanded() ? 'light' : undefined\"-->\n        <ion-icon name=\"search-outline\" slot=\"start\" />\n        <!--\t\t\t\t<ion-label color=\"medium\" position=\"floating\">Filter</ion-label>-->\n        <ion-input\n          label=\"Filter\"\n          [formControl]=\"text\"\n          (keyup)=\"onTextKeyUp()\"\n          (click)=\"$event.stopPropagation()\"\n          placeholder=\"text to search\"\n        />\n        @if ($hasFilter()) {\n          <ion-buttons slot=\"end\">\n            <ion-button (click)=\"clearFilter($event)\" title=\"Clear filter\">\n              <ion-icon name=\"close-outline\" color=\"medium\" />\n            </ion-button>\n          </ion-buttons>\n        }\n      </ion-item>\n      <ion-item-group slot=\"content\">\n        <!--\t\t\t\t<ion-item>-->\n        <!--\t\t\t\t\t<ion-checkbox (ionChange)=\"emitChanged()\" slot=\"start\" labelPlacement=\"end\">Myself</ion-checkbox>-->\n        <!--\t\t\t\t</ion-item>-->\n        @if (showWeekdays) {\n          <ion-item-divider color=\"light\">Weekdays</ion-item-divider>\n          <ion-grid class=\"ion-grid-layout\">\n            <ion-row>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayMo()\"\n                    (ionChange)=\"onWeekdayChanged('mo', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Mo\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayTu()\"\n                    (ionChange)=\"onWeekdayChanged('tu', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Tu\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayWe()\"\n                    (ionChange)=\"onWeekdayChanged('we', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  We\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayTh()\"\n                    (ionChange)=\"onWeekdayChanged('th', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Th\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdayFr()\"\n                    (ionChange)=\"onWeekdayChanged('fr', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Fr\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdaySa()\"\n                    (ionChange)=\"onWeekdayChanged('sa', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Sa\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    [checked]=\"weekdaySu()\"\n                    (ionChange)=\"onWeekdayChanged('su', $event.detail.checked)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Su\n                </ion-item>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        }\n        @if (showRepeats) {\n          <ion-item-divider color=\"light\">Repeats</ion-item-divider>\n          <ion-grid class=\"ion-grid-layout\">\n            <ion-row>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"weekly\"\n                    [checked]=\"$repeatsWeekly()\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Weekly\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"monthly\"\n                    [checked]=\"$repeatsMonthly()\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Monthly\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"quarterly\"\n                    [checked]=\"$repeatsQuarterly()\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Quarterly\n                </ion-item>\n              </ion-col>\n              <ion-col>\n                <ion-item class=\"sneat-no-end-padding sneat-no-bottom-border\">\n                  <ion-checkbox\n                    value=\"yearly\"\n                    (ionChange)=\"repeatChanged($event)\"\n                    slot=\"start\"\n                    labelPlacement=\"end\"\n                    class=\"sneat-small-end-margin\"\n                  />\n                  Yearly\n                </ion-item>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        }\n\n        <sneat-contacts-filter\n          [$contactIDs]=\"$contactIDs()\"\n          (contactIDsChange)=\"onSelectedContactsChanged($event)\"\n        />\n      </ion-item-group>\n    </ion-accordion>\n  </ion-accordion-group>\n  @if (!$expanded() && $filter().contactIDs.length) {\n    <ion-item>\n      <ion-label>\n        @if (selectedContacts.length === 1) {\n          Member:\n        }\n        @if (selectedContacts.length > 1) {\n          Members:\n        }\n        @for (contact of selectedContacts; track contact.id) {\n          <ion-badge style=\"margin: 0 0.5em\" color=\"light\">\n            {{ contact | contactTitle }}\n          </ion-badge>\n        }\n      </ion-label>\n      <ion-buttons slot=\"end\">\n        <ion-button title=\"Clear participants\" color=\"medium\">\n          <!-- (click)=\"clearMembers()\" -->\n          <ion-icon name=\"close-outline\" />\n        </ion-button>\n      </ion-buttons>\n    </ion-item>\n  }\n</ion-card>\n"]}

package/esm2022/lib/components/calendar/components/calendar-filter/calendar-filter.js

@@ -0,0 +1,17 @@
+import { getRelatedItemIDs } from '@sneat/dto';
+// export function areSameFilters(f1: ICalendarFilter, f2: ICalendarFilter): boolean {
+// 	return f1 === f2 || f1.text == f2.text && f1.memberIDs
+//
+// }
+export function isMatchingScheduleFilter(h, f) {
+    if (!f) {
+        return true;
+    }
+    if (f.text && !h.dbo?.title?.toLowerCase().includes(f.text)) {
+        return false;
+    }
+    return !(f.contactIDs.length &&
+        !f.contactIDs.some((fmID) => fmID === '' &&
+            !getRelatedItemIDs(h.dbo?.related || h.brief?.related, 'contactus', 'contacts', h.space.id)?.length));
+}
+//# sourceMappingURL=calendar-filter.js.map

package/esm2022/lib/components/calendar/components/calendar-filter/calendar-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-filter.js","sourceRoot":"","sources":["../../../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/calendar/components/calendar-filter/calendar-filter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAY/C,sFAAsF;AACtF,0DAA0D;AAC1D,EAAE;AACF,IAAI;AAEJ,MAAM,UAAU,wBAAwB,CACtC,CAAoB,EACpB,CAAmB;IAEnB,IAAI,CAAC,CAAC,EAAE,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;QAC5D,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,CAAC,CACN,CAAC,CAAC,UAAU,CAAC,MAAM;QACnB,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAChB,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,KAAK,EAAE;YACX,CAAC,iBAAiB,CAChB,CAAC,CAAC,GAAG,EAAE,OAAO,IAAI,CAAC,CAAC,KAAK,EAAE,OAAO,EAClC,WAAW,EACX,UAAU,EACV,CAAC,CAAC,KAAK,CAAC,EAAE,CACX,EAAE,MAAM,CACZ,CACF,CAAC;AACJ,CAAC","sourcesContent":["import { getRelatedItemIDs } from '@sneat/dto';\nimport { WeekdayCode2, IHappeningContext } from '@sneat/mod-schedulus-core';\n\nexport interface ICalendarFilter {\n  readonly text: string;\n  readonly contactIDs: readonly string[];\n  readonly weekdays: readonly WeekdayCode2[];\n  readonly repeats: readonly string[];\n  readonly showRecurrings: boolean;\n  readonly showSingles: boolean;\n}\n\n// export function areSameFilters(f1: ICalendarFilter, f2: ICalendarFilter): boolean {\n// \treturn f1 === f2 || f1.text == f2.text && f1.memberIDs\n//\n// }\n\nexport function isMatchingScheduleFilter(\n  h: IHappeningContext,\n  f?: ICalendarFilter,\n): boolean {\n  if (!f) {\n    return true;\n  }\n  if (f.text && !h.dbo?.title?.toLowerCase().includes(f.text)) {\n    return false;\n  }\n  return !(\n    f.contactIDs.length &&\n    !f.contactIDs.some(\n      (fmID) =>\n        fmID === '' &&\n        !getRelatedItemIDs(\n          h.dbo?.related || h.brief?.related,\n          'contactus',\n          'contacts',\n          h.space.id,\n        )?.length,\n    )\n  );\n}\n"]}

package/esm2022/lib/components/calendar/components/calendar-filter/contacts-filter.component.js

@@ -0,0 +1,95 @@
+import { ChangeDetectionStrategy, Component, computed, EventEmitter, input, Output, signal, inject, } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonButton, IonButtons, IonCheckbox, IonIcon, IonItem, IonItemDivider, IonLabel, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, } from '@ionic/angular/standalone';
+import { ContactTitlePipe } from '@sneat/contactus-shared';
+import { ContactusSpaceContextService, ContactusSpaceService, } from '@sneat/contactus-services';
+import { ContactusModuleBaseComponent } from '@sneat/contactus-shared';
+import { zipMapBriefsWithIDs } from '@sneat/space-models';
+import { ClassName } from '@sneat/ui';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class ContactsFilterComponent extends ContactusModuleBaseComponent {
+    onTabChanged(event) {
+        this.$tab.set(event.detail.value);
+    }
+    constructor() {
+        const contactusSpaceService = inject(ContactusSpaceService);
+        super(contactusSpaceService);
+        this.$contactIDs = input.required(...(ngDevMode ? [{ debugName: "$contactIDs" }] : []));
+        this.$hasContactIDs = computed(() => !!this.$contactIDs().length, ...(ngDevMode ? [{ debugName: "$hasContactIDs" }] : []));
+        this.contactIDs = [];
+        this.contactIDsChange = new EventEmitter();
+        this.$tab = signal('members', ...(ngDevMode ? [{ debugName: "$tab" }] : []));
+        this.contactID = ''; // TODO: Needs documentation on what & why
+        // protected readonly $selectedContacts = computed<
+        // 	readonly IContactWithBriefAndSpace[]
+        // >(() => {
+        // 	const space = this.$space();
+        // 	const contacts = this.$members() || [];
+        // 	const selectedContacts = this.contactIDs.map((id) => {
+        // 		let contact = contacts.find((m) => m.id == id);
+        // 		if (!contact) {
+        // 			contact = {
+        // 				id,
+        // 				brief: { type: 'not_found' as ContactType },
+        // 				space: space,
+        // 			};
+        // 		}
+        // 		return contact;
+        // 	});
+        // 	return selectedContacts.map(addSpace(space));
+        // });
+        this.$members = signal(undefined, ...(ngDevMode ? [{ debugName: "$members" }] : []));
+        const contactusSpaceContextService = new ContactusSpaceContextService(this.destroyed$, this.spaceIDChanged$);
+        contactusSpaceContextService.contactusSpaceContext$
+            .pipe(this.takeUntilDestroyed())
+            .subscribe(this.onContactusSpaceChanged.bind(this));
+    }
+    onContactusSpaceChanged(contactusSpace) {
+        const contactBriefs = zipMapBriefsWithIDs(contactusSpace?.dbo?.contacts)?.map((m) => Object.assign(m, { space: this.space || { id: `` } }));
+        this.$members.set(contactBriefs.filter((c) => c.brief.roles?.includes('member')));
+    }
+    clearSelectedContacts() {
+        this.contactIDsChange.emit([]);
+    }
+    onContactCheckChanged(event) {
+        event.stopPropagation();
+        const cs = event;
+        const { checked, value } = cs.detail;
+        let contactIDs = this.$contactIDs();
+        if (checked === undefined) {
+            // a dropdown
+            contactIDs = this.contactID ? [this.contactID] : [];
+        }
+        else if (checked === true) {
+            contactIDs = [...contactIDs, value];
+        }
+        else if (checked === false) {
+            contactIDs = contactIDs.filter((id) => id !== value);
+        }
+        this.contactIDsChange.emit(contactIDs);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ContactsFilterComponent, isStandalone: true, selector: "sneat-contacts-filter", inputs: { $contactIDs: { classPropertyName: "$contactIDs", publicName: "$contactIDs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { contactIDsChange: "contactIDsChange" }, providers: [{ provide: ClassName, useValue: 'ContactsFilterComponent' }], usesInheritance: true, ngImport: i0, template: "@let members = $members();\n@if (members && members.length <= 7) {\n  <ion-item-divider color=\"light\" class=\"sneat-tiny-end-padding\">\n    <!--\t\t<ion-label color=\"medium\" class=\"ion-margin-end\">Participants</ion-label>-->\n    <ion-segment [value]=\"$tab()\" (ionChange)=\"onTabChanged($event)\">\n      <ion-segment-button value=\"members\">Members</ion-segment-button>\n      <ion-segment-button value=\"contacts\">Contacts</ion-segment-button>\n    </ion-segment>\n    <ion-buttons slot=\"end\">\n      @if ($tab() === \"contacts\") {\n        <ion-button title=\"Choose members and contacts\" color=\"medium\">\n          <ion-icon slot=\"start\" name=\"add-circle-outline\" />\n          <ion-label>Choose</ion-label>\n        </ion-button>\n      }\n      @if ($hasContactIDs()) {\n        <ion-button\n          title=\"Clear participants filter\"\n          color=\"medium\"\n          (click)=\"clearSelectedContacts()\"\n        >\n          <ion-icon name=\"close-outline\" />\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-item-divider>\n  @if ($tab() === \"members\") {\n    @for (contact of members; track contact.id) {\n      <ion-item>\n        <ion-checkbox\n          justify=\"start\"\n          labelPlacement=\"end\"\n          [value]=\"contact.id\"\n          [checked]=\"$contactIDs().includes(contact.id)\"\n          (ionChange)=\"onContactCheckChanged($event)\"\n          >{{ contact | contactTitle }}\n        </ion-checkbox>\n        <ion-buttons slot=\"end\">\n          <ion-button>\n            <ion-icon name=\"person-circle-outline\" />\n          </ion-button>\n        </ion-buttons>\n      </ion-item>\n    }\n  }\n  <ion-item>\n    <ion-checkbox\n      value=\"\"\n      labelPlacement=\"end\"\n      justify=\"start\"\n      [checked]=\"$contactIDs().includes('')\"\n      (ionChange)=\"onContactCheckChanged($event)\"\n      ><small>Unassigned only</small>\n    </ion-checkbox>\n  </ion-item>\n  <!--\t\t\t\t\t<ion-segment [(ngModel)]=\"memberID\" color=\"dark\" (ionChange)=\"onMemberChanged($event)\">-->\n  <!--\t\t\t\t\t\t<ion-segment-button value=\"\">Anyone</ion-segment-button>-->\n  <!--\t\t\t\t\t\t<ion-segment-button [value]=\"member.id\" *ngFor=\"let member of members\">-->\n\n  <!--\t\t\t\t\t\t</ion-segment-button>-->\n  <!--\t\t\t\t\t</ion-segment>-->\n} @else {\n  <ion-item>\n    <ion-select\n      interface=\"popover\"\n      [(ngModel)]=\"contactID\"\n      (ionChange)=\"onContactCheckChanged($event)\"\n      label=\"Participants\"\n    >\n      <ion-select-option value=\"\">* Anyone</ion-select-option>\n      <ion-select-option value=\"UNASSIGNED\">- Unassigned</ion-select-option>\n      @for (contact of members; track contact.id) {\n        <ion-select-option [value]=\"contact.id\">\n          {{ contact | contactTitle }}\n        </ion-select-option>\n      }\n    </ion-select>\n  </ion-item>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { 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: 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: 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: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "pipe", type: ContactTitlePipe, name: "contactTitle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsFilterComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        FormsModule,
+                        ContactTitlePipe,
+                        IonItemDivider,
+                        IonLabel,
+                        IonButtons,
+                        IonButton,
+                        IonIcon,
+                        IonItem,
+                        IonCheckbox,
+                        IonSelect,
+                        IonSelectOption,
+                        IonSegment,
+                        IonSegmentButton,
+                    ], providers: [{ provide: ClassName, useValue: 'ContactsFilterComponent' }], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sneat-contacts-filter', template: "@let members = $members();\n@if (members && members.length <= 7) {\n  <ion-item-divider color=\"light\" class=\"sneat-tiny-end-padding\">\n    <!--\t\t<ion-label color=\"medium\" class=\"ion-margin-end\">Participants</ion-label>-->\n    <ion-segment [value]=\"$tab()\" (ionChange)=\"onTabChanged($event)\">\n      <ion-segment-button value=\"members\">Members</ion-segment-button>\n      <ion-segment-button value=\"contacts\">Contacts</ion-segment-button>\n    </ion-segment>\n    <ion-buttons slot=\"end\">\n      @if ($tab() === \"contacts\") {\n        <ion-button title=\"Choose members and contacts\" color=\"medium\">\n          <ion-icon slot=\"start\" name=\"add-circle-outline\" />\n          <ion-label>Choose</ion-label>\n        </ion-button>\n      }\n      @if ($hasContactIDs()) {\n        <ion-button\n          title=\"Clear participants filter\"\n          color=\"medium\"\n          (click)=\"clearSelectedContacts()\"\n        >\n          <ion-icon name=\"close-outline\" />\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-item-divider>\n  @if ($tab() === \"members\") {\n    @for (contact of members; track contact.id) {\n      <ion-item>\n        <ion-checkbox\n          justify=\"start\"\n          labelPlacement=\"end\"\n          [value]=\"contact.id\"\n          [checked]=\"$contactIDs().includes(contact.id)\"\n          (ionChange)=\"onContactCheckChanged($event)\"\n          >{{ contact | contactTitle }}\n        </ion-checkbox>\n        <ion-buttons slot=\"end\">\n          <ion-button>\n            <ion-icon name=\"person-circle-outline\" />\n          </ion-button>\n        </ion-buttons>\n      </ion-item>\n    }\n  }\n  <ion-item>\n    <ion-checkbox\n      value=\"\"\n      labelPlacement=\"end\"\n      justify=\"start\"\n      [checked]=\"$contactIDs().includes('')\"\n      (ionChange)=\"onContactCheckChanged($event)\"\n      ><small>Unassigned only</small>\n    </ion-checkbox>\n  </ion-item>\n  <!--\t\t\t\t\t<ion-segment [(ngModel)]=\"memberID\" color=\"dark\" (ionChange)=\"onMemberChanged($event)\">-->\n  <!--\t\t\t\t\t\t<ion-segment-button value=\"\">Anyone</ion-segment-button>-->\n  <!--\t\t\t\t\t\t<ion-segment-button [value]=\"member.id\" *ngFor=\"let member of members\">-->\n\n  <!--\t\t\t\t\t\t</ion-segment-button>-->\n  <!--\t\t\t\t\t</ion-segment>-->\n} @else {\n  <ion-item>\n    <ion-select\n      interface=\"popover\"\n      [(ngModel)]=\"contactID\"\n      (ionChange)=\"onContactCheckChanged($event)\"\n      label=\"Participants\"\n    >\n      <ion-select-option value=\"\">* Anyone</ion-select-option>\n      <ion-select-option value=\"UNASSIGNED\">- Unassigned</ion-select-option>\n      @for (contact of members; track contact.id) {\n        <ion-select-option [value]=\"contact.id\">\n          {{ contact | contactTitle }}\n        </ion-select-option>\n      }\n    </ion-select>\n  </ion-item>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { $contactIDs: [{ type: i0.Input, args: [{ isSignal: true, alias: "$contactIDs", required: true }] }], contactIDsChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=contacts-filter.component.js.map

package/esm2022/lib/components/calendar/components/calendar-filter/contacts-filter.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contacts-filter.component.js","sourceRoot":"","sources":["../../../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/calendar/components/calendar-filter/contacts-filter.component.ts","../../../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/calendar/components/calendar-filter/contacts-filter.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 { FormsModule } from '@angular/forms';\nimport {\n  IonButton,\n  IonButtons,\n  IonCheckbox,\n  IonIcon,\n  IonItem,\n  IonItemDivider,\n  IonLabel,\n  IonSegment,\n  IonSegmentButton,\n  IonSelect,\n  IonSelectOption,\n} from '@ionic/angular/standalone';\nimport { ContactTitlePipe } from '@sneat/contactus-shared';\nimport {\n  IContactusSpaceDbo,\n  IContactWithBriefAndSpace,\n} from '@sneat/contactus-core';\nimport {\n  ContactusSpaceContextService,\n  ContactusSpaceService,\n} from '@sneat/contactus-services';\nimport { ContactusModuleBaseComponent } from '@sneat/contactus-shared';\nimport { IIdAndOptionalDbo } from '@sneat/core';\nimport { zipMapBriefsWithIDs } from '@sneat/space-models';\nimport { ClassName } from '@sneat/ui';\n\n@Component({\n  imports: [\n    FormsModule,\n    ContactTitlePipe,\n    IonItemDivider,\n    IonLabel,\n    IonButtons,\n    IonButton,\n    IonIcon,\n    IonItem,\n    IonCheckbox,\n    IonSelect,\n    IonSelectOption,\n    IonSegment,\n    IonSegmentButton,\n  ],\n  providers: [{ provide: ClassName, useValue: 'ContactsFilterComponent' }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'sneat-contacts-filter',\n  templateUrl: 'contacts-filter.component.html',\n})\nexport class ContactsFilterComponent extends ContactusModuleBaseComponent {\n  public readonly $contactIDs = input.required<readonly string[]>();\n\n  protected readonly $hasContactIDs = computed(\n    () => !!this.$contactIDs().length,\n  );\n\n  contactIDs: readonly string[] = [];\n  @Output() readonly contactIDsChange = new EventEmitter<readonly string[]>();\n\n  protected readonly $tab = signal<'members' | 'contacts'>('members');\n\n  protected onTabChanged(event: CustomEvent): void {\n    this.$tab.set(event.detail.value);\n  }\n\n  contactID = ''; // TODO: Needs documentation on what & why\n\n  // protected readonly $selectedContacts = computed<\n  // \treadonly IContactWithBriefAndSpace[]\n  // >(() => {\n  // \tconst space = this.$space();\n  // \tconst contacts = this.$members() || [];\n  // \tconst selectedContacts = this.contactIDs.map((id) => {\n  // \t\tlet contact = contacts.find((m) => m.id == id);\n  // \t\tif (!contact) {\n  // \t\t\tcontact = {\n  // \t\t\t\tid,\n  // \t\t\t\tbrief: { type: 'not_found' as ContactType },\n  // \t\t\t\tspace: space,\n  // \t\t\t};\n  // \t\t}\n  // \t\treturn contact;\n  // \t});\n  // \treturn selectedContacts.map(addSpace(space));\n  // });\n\n  protected readonly $members = signal<\n    readonly IContactWithBriefAndSpace[] | undefined\n  >(undefined);\n\n  constructor() {\n    const contactusSpaceService = inject(ContactusSpaceService);\n\n    super(contactusSpaceService);\n    const contactusSpaceContextService = new ContactusSpaceContextService(\n      this.destroyed$,\n      this.spaceIDChanged$,\n    );\n    contactusSpaceContextService.contactusSpaceContext$\n      .pipe(this.takeUntilDestroyed())\n      .subscribe(this.onContactusSpaceChanged.bind(this));\n  }\n\n  private onContactusSpaceChanged(\n    contactusSpace?: IIdAndOptionalDbo<IContactusSpaceDbo>,\n  ): void {\n    const contactBriefs = zipMapBriefsWithIDs(\n      contactusSpace?.dbo?.contacts,\n    )?.map((m) => Object.assign(m, { space: this.space || { id: `` } }));\n    this.$members.set(\n      contactBriefs.filter((c) => c.brief.roles?.includes('member')),\n    );\n  }\n\n  protected clearSelectedContacts(): void {\n    this.contactIDsChange.emit([]);\n  }\n\n  protected onContactCheckChanged(event: Event): void {\n    event.stopPropagation();\n    const cs = event as CustomEvent;\n    const { checked, value } = cs.detail;\n    let contactIDs = this.$contactIDs();\n    if (checked === undefined) {\n      // a dropdown\n      contactIDs = this.contactID ? [this.contactID] : [];\n    } else if (checked === true) {\n      contactIDs = [...contactIDs, value];\n    } else if (checked === false) {\n      contactIDs = contactIDs.filter((id) => id !== value);\n    }\n    this.contactIDsChange.emit(contactIDs);\n  }\n}\n","@let members = $members();\n@if (members && members.length <= 7) {\n  <ion-item-divider color=\"light\" class=\"sneat-tiny-end-padding\">\n    <!--\t\t<ion-label color=\"medium\" class=\"ion-margin-end\">Participants</ion-label>-->\n    <ion-segment [value]=\"$tab()\" (ionChange)=\"onTabChanged($event)\">\n      <ion-segment-button value=\"members\">Members</ion-segment-button>\n      <ion-segment-button value=\"contacts\">Contacts</ion-segment-button>\n    </ion-segment>\n    <ion-buttons slot=\"end\">\n      @if ($tab() === \"contacts\") {\n        <ion-button title=\"Choose members and contacts\" color=\"medium\">\n          <ion-icon slot=\"start\" name=\"add-circle-outline\" />\n          <ion-label>Choose</ion-label>\n        </ion-button>\n      }\n      @if ($hasContactIDs()) {\n        <ion-button\n          title=\"Clear participants filter\"\n          color=\"medium\"\n          (click)=\"clearSelectedContacts()\"\n        >\n          <ion-icon name=\"close-outline\" />\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-item-divider>\n  @if ($tab() === \"members\") {\n    @for (contact of members; track contact.id) {\n      <ion-item>\n        <ion-checkbox\n          justify=\"start\"\n          labelPlacement=\"end\"\n          [value]=\"contact.id\"\n          [checked]=\"$contactIDs().includes(contact.id)\"\n          (ionChange)=\"onContactCheckChanged($event)\"\n          >{{ contact | contactTitle }}\n        </ion-checkbox>\n        <ion-buttons slot=\"end\">\n          <ion-button>\n            <ion-icon name=\"person-circle-outline\" />\n          </ion-button>\n        </ion-buttons>\n      </ion-item>\n    }\n  }\n  <ion-item>\n    <ion-checkbox\n      value=\"\"\n      labelPlacement=\"end\"\n      justify=\"start\"\n      [checked]=\"$contactIDs().includes('')\"\n      (ionChange)=\"onContactCheckChanged($event)\"\n      ><small>Unassigned only</small>\n    </ion-checkbox>\n  </ion-item>\n  <!--\t\t\t\t\t<ion-segment [(ngModel)]=\"memberID\" color=\"dark\" (ionChange)=\"onMemberChanged($event)\">-->\n  <!--\t\t\t\t\t\t<ion-segment-button value=\"\">Anyone</ion-segment-button>-->\n  <!--\t\t\t\t\t\t<ion-segment-button [value]=\"member.id\" *ngFor=\"let member of members\">-->\n\n  <!--\t\t\t\t\t\t</ion-segment-button>-->\n  <!--\t\t\t\t\t</ion-segment>-->\n} @else {\n  <ion-item>\n    <ion-select\n      interface=\"popover\"\n      [(ngModel)]=\"contactID\"\n      (ionChange)=\"onContactCheckChanged($event)\"\n      label=\"Participants\"\n    >\n      <ion-select-option value=\"\">* Anyone</ion-select-option>\n      <ion-select-option value=\"UNASSIGNED\">- Unassigned</ion-select-option>\n      @for (contact of members; track contact.id) {\n        <ion-select-option [value]=\"contact.id\">\n          {{ contact | contactTitle }}\n        </ion-select-option>\n      }\n    </ion-select>\n  </ion-item>\n}\n"]}

package/esm2022/lib/components/calendar/components/calendar-week/calendar-week-card.component.js

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, input, inject, } from '@angular/core';
+import { IonButton, IonButtons, IonCard, IonIcon, IonItem, IonLabel, } from '@ionic/angular/standalone';
+import { virtualSliderAnimations } from '@sneat/components';
+import { ClassName } from '@sneat/ui';
+import { getToday, CalendarStateService } from '../../calendar-state.service';
+import { SwipeableBaseComponent } from '../../../swipeable-base.component';
+import { swipeableWeek } from '../../../swipeable-ui';
+import { CalendarWeekTitleComponent } from './calendar-week-title.component';
+import { CalendarWeekComponent } from './calendar-week.component';
+import * as i0 from "@angular/core";
+// implements OnInit
+export class CalendarWeekCardComponent extends SwipeableBaseComponent {
+    get oddWeek() {
+        return this.oddSlide;
+    }
+    get evenWeek() {
+        return this.evenSlide;
+    }
+    constructor() {
+        const scheduleStateService = inject(CalendarStateService);
+        super(scheduleStateService, 7);
+        this.$space = input.required(...(ngDevMode ? [{ debugName: "$space" }] : []));
+        this.$spaceDaysProvider = input.required(...(ngDevMode ? [{ debugName: "$spaceDaysProvider" }] : []));
+        this.createSlides();
+        // Delay creation of the non-active slide for performance reasons
+        setTimeout(() => (this.isEvenSlideActivated = true), 500);
+    }
+    createSlides() {
+        const current = getToday();
+        const next = new Date(new Date().setDate(current.getDate() + 7));
+        this.oddSlide = swipeableWeek('odd', current, this.destroyed$);
+        this.evenSlide = swipeableWeek('even', next, this.destroyed$);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarWeekCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CalendarWeekCardComponent, isStandalone: true, selector: "sneat-week-card", inputs: { $space: { classPropertyName: "$space", publicName: "$space", isSignal: true, isRequired: true, transformFunction: null }, $spaceDaysProvider: { classPropertyName: "$spaceDaysProvider", publicName: "$spaceDaysProvider", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: ClassName, useValue: 'ScheduleWeekCardComponent' }], usesInheritance: true, ngImport: i0, template: "<ion-card>\n  <ion-item\n    class=\"sneat-small-end-padding sneat-small-start-padding\"\n    lines=\"full\"\n  >\n    <ion-buttons\n      slot=\"start\"\n      class=\"sneat-tiny-end-margin sneat-no-horizontal-margins\"\n    >\n      <ion-button\n        [disabled]=\"$isDefaultDate()\"\n        [color]=\"$isDefaultDate() ? 'medium' : 'primary'\"\n        [title]=\"'Jump to current week'\"\n        (click)=\"setToday()\"\n      >\n        <ion-icon name=\"today-outline\" />\n      </ion-button>\n      <ion-button color=\"tertiary\" title=\"Previous day\" (click)=\"swipePrev()\">\n        <ion-icon name=\"chevron-back-sharp\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons\n      slot=\"end\"\n      class=\"sneat-tiny-start-margin sneat-no-horizontal-margins\"\n    >\n      <ion-button color=\"tertiary\" title=\"Next day\" (click)=\"swipeNext()\">\n        <ion-icon name=\"chevron-forward-sharp\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-label>\n      <div\n        class=\"virtual-slider-outer\"\n        (swipeleft)=\"swipeLeft()\"\n        (swiperight)=\"swipeRight()\"\n      >\n        <div class=\"virtual-slider-inner\" [@virtualSlider]=\"animationState\">\n          <h1\n            class=\"virtual-slide\"\n            [@virtualSlide]=\"oddSlide?.animationState || 'show'\"\n          >\n            <sneat-calendar-week-title [week]=\"oddWeek\" />\n          </h1>\n          <h1\n            class=\"virtual-slide\"\n            [@virtualSlide]=\"evenSlide?.animationState || 'hide'\"\n          >\n            <sneat-calendar-week-title [week]=\"evenWeek\" />\n          </h1>\n        </div>\n      </div>\n    </ion-label>\n  </ion-item>\n\n  <div\n    class=\"virtual-slider-outer\"\n    (swipeleft)=\"swipeLeft()\"\n    (swiperight)=\"swipeRight()\"\n  >\n    <div class=\"virtual-slider-inner\" [@virtualSlider]=\"animationState\">\n      <sneat-calendar-week\n        [$space]=\"$space()\"\n        class=\"virtual-slide\"\n        [@virtualSlide]=\"oddSlide?.animationState || 'show'\"\n        [$week]=\"oddWeek\"\n        [$spaceDaysProvider]=\"$spaceDaysProvider()\"\n      />\n      @if (isEvenSlideActivated) {\n        <sneat-calendar-week\n          class=\"virtual-slide\"\n          [$space]=\"$space()\"\n          [@virtualSlide]=\"evenSlide?.animationState || 'hide'\"\n          [$week]=\"evenWeek\"\n          [$spaceDaysProvider]=\"$spaceDaysProvider()\"\n        />\n      }\n    </div>\n  </div>\n</ion-card>\n", dependencies: [{ kind: "component", type: CalendarWeekComponent, selector: "sneat-calendar-week", inputs: ["$space", "$week", "$spaceDaysProvider"], outputs: ["goNew", "dateSelected"] }, { kind: "component", type: CalendarWeekTitleComponent, selector: "sneat-calendar-week-title", inputs: ["week"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { 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: 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: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], animations: virtualSliderAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarWeekCardComponent, decorators: [{
+            type: Component,
+            args: [{ animations: virtualSliderAnimations, imports: [
+                        CalendarWeekComponent,
+                        CalendarWeekTitleComponent,
+                        IonCard,
+                        IonItem,
+                        IonButtons,
+                        IonButton,
+                        IonIcon,
+                        IonLabel,
+                    ], providers: [{ provide: ClassName, useValue: 'ScheduleWeekCardComponent' }], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sneat-week-card', template: "<ion-card>\n  <ion-item\n    class=\"sneat-small-end-padding sneat-small-start-padding\"\n    lines=\"full\"\n  >\n    <ion-buttons\n      slot=\"start\"\n      class=\"sneat-tiny-end-margin sneat-no-horizontal-margins\"\n    >\n      <ion-button\n        [disabled]=\"$isDefaultDate()\"\n        [color]=\"$isDefaultDate() ? 'medium' : 'primary'\"\n        [title]=\"'Jump to current week'\"\n        (click)=\"setToday()\"\n      >\n        <ion-icon name=\"today-outline\" />\n      </ion-button>\n      <ion-button color=\"tertiary\" title=\"Previous day\" (click)=\"swipePrev()\">\n        <ion-icon name=\"chevron-back-sharp\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons\n      slot=\"end\"\n      class=\"sneat-tiny-start-margin sneat-no-horizontal-margins\"\n    >\n      <ion-button color=\"tertiary\" title=\"Next day\" (click)=\"swipeNext()\">\n        <ion-icon name=\"chevron-forward-sharp\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-label>\n      <div\n        class=\"virtual-slider-outer\"\n        (swipeleft)=\"swipeLeft()\"\n        (swiperight)=\"swipeRight()\"\n      >\n        <div class=\"virtual-slider-inner\" [@virtualSlider]=\"animationState\">\n          <h1\n            class=\"virtual-slide\"\n            [@virtualSlide]=\"oddSlide?.animationState || 'show'\"\n          >\n            <sneat-calendar-week-title [week]=\"oddWeek\" />\n          </h1>\n          <h1\n            class=\"virtual-slide\"\n            [@virtualSlide]=\"evenSlide?.animationState || 'hide'\"\n          >\n            <sneat-calendar-week-title [week]=\"evenWeek\" />\n          </h1>\n        </div>\n      </div>\n    </ion-label>\n  </ion-item>\n\n  <div\n    class=\"virtual-slider-outer\"\n    (swipeleft)=\"swipeLeft()\"\n    (swiperight)=\"swipeRight()\"\n  >\n    <div class=\"virtual-slider-inner\" [@virtualSlider]=\"animationState\">\n      <sneat-calendar-week\n        [$space]=\"$space()\"\n        class=\"virtual-slide\"\n        [@virtualSlide]=\"oddSlide?.animationState || 'show'\"\n        [$week]=\"oddWeek\"\n        [$spaceDaysProvider]=\"$spaceDaysProvider()\"\n      />\n      @if (isEvenSlideActivated) {\n        <sneat-calendar-week\n          class=\"virtual-slide\"\n          [$space]=\"$space()\"\n          [@virtualSlide]=\"evenSlide?.animationState || 'hide'\"\n          [$week]=\"evenWeek\"\n          [$spaceDaysProvider]=\"$spaceDaysProvider()\"\n        />\n      }\n    </div>\n  </div>\n</ion-card>\n" }]
+        }], ctorParameters: () => [], propDecorators: { $space: [{ type: i0.Input, args: [{ isSignal: true, alias: "$space", required: true }] }], $spaceDaysProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "$spaceDaysProvider", required: true }] }] } });
+//# sourceMappingURL=calendar-week-card.component.js.map

package/esm2022/lib/components/calendar/components/calendar-week/calendar-week-card.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-week-card.component.js","sourceRoot":"","sources":["../../../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/calendar/components/calendar-week/calendar-week-card.component.ts","../../../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/calendar/components/calendar-week/calendar-week-card.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,OAAO,EACP,OAAO,EACP,QAAQ,GACT,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAiB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;;AAmBlE,oBAAoB;AACpB,MAAM,OAAO,yBAA0B,SAAQ,sBAAsB;IAInE,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAyB,CAAC;IACxC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAA0B,CAAC;IACzC,CAAC;IAED;QACE,MAAM,oBAAoB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;QAE1D,KAAK,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC;QAdjB,WAAM,GAAG,KAAK,CAAC,QAAQ,iDAAiB,CAAC;QACzC,uBAAkB,GAAG,KAAK,CAAC,QAAQ,6DAAwB,CAAC;QAe1E,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,iEAAiE;QACjE,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;IAC5D,CAAC;IAEO,YAAY;QAClB,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC;QAC3B,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;QACjE,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC/D,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAChE,CAAC;8GA5BU,yBAAyB;kGAAzB,yBAAyB,kWANzB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,2BAA2B,EAAE,CAAC,iDCpC5E,w7EA8EA,4CDnDI,qBAAqB,uJACrB,0BAA0B,wFAC1B,OAAO,yLACP,OAAO,0NACP,UAAU,8EACV,SAAS,oPACT,OAAO,2JACP,QAAQ,+EATE,uBAAuB;;2FAiBxB,yBAAyB;kBAlBrC,SAAS;iCACI,uBAAuB,WAC1B;wBACP,qBAAqB;wBACrB,0BAA0B;wBAC1B,OAAO;wBACP,OAAO;wBACP,UAAU;wBACV,SAAS;wBACT,OAAO;wBACP,QAAQ;qBACT,aACU,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,2BAA2B,EAAE,CAAC,mBACzD,uBAAuB,CAAC,MAAM,YACrC,iBAAiB","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  inject,\n} from '@angular/core';\nimport {\n  IonButton,\n  IonButtons,\n  IonCard,\n  IonIcon,\n  IonItem,\n  IonLabel,\n} from '@ionic/angular/standalone';\nimport { virtualSliderAnimations } from '@sneat/components';\nimport { ISpaceContext } from '@sneat/space-models';\nimport { ClassName } from '@sneat/ui';\nimport { CalendarDataProvider } from '../../../../services/calendar-data-provider';\nimport { getToday, CalendarStateService } from '../../calendar-state.service';\nimport { SwipeableBaseComponent } from '../../../swipeable-base.component';\nimport { SwipeableWeek, swipeableWeek } from '../../../swipeable-ui';\nimport { CalendarWeekTitleComponent } from './calendar-week-title.component';\nimport { CalendarWeekComponent } from './calendar-week.component';\n\n@Component({\n  animations: virtualSliderAnimations,\n  imports: [\n    CalendarWeekComponent,\n    CalendarWeekTitleComponent,\n    IonCard,\n    IonItem,\n    IonButtons,\n    IonButton,\n    IonIcon,\n    IonLabel,\n  ],\n  providers: [{ provide: ClassName, useValue: 'ScheduleWeekCardComponent' }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'sneat-week-card',\n  templateUrl: 'calendar-week-card.component.html',\n})\n// implements OnInit\nexport class CalendarWeekCardComponent extends SwipeableBaseComponent {\n  public readonly $space = input.required<ISpaceContext>();\n  public readonly $spaceDaysProvider = input.required<CalendarDataProvider>();\n\n  get oddWeek(): SwipeableWeek {\n    return this.oddSlide as SwipeableWeek;\n  }\n\n  get evenWeek(): SwipeableWeek {\n    return this.evenSlide as SwipeableWeek;\n  }\n\n  constructor() {\n    const scheduleStateService = inject(CalendarStateService);\n\n    super(scheduleStateService, 7);\n\n    this.createSlides();\n\n    // Delay creation of the non-active slide for performance reasons\n    setTimeout(() => (this.isEvenSlideActivated = true), 500);\n  }\n\n  private createSlides(): void {\n    const current = getToday();\n    const next = new Date(new Date().setDate(current.getDate() + 7));\n    this.oddSlide = swipeableWeek('odd', current, this.destroyed$);\n    this.evenSlide = swipeableWeek('even', next, this.destroyed$);\n  }\n}\n","<ion-card>\n  <ion-item\n    class=\"sneat-small-end-padding sneat-small-start-padding\"\n    lines=\"full\"\n  >\n    <ion-buttons\n      slot=\"start\"\n      class=\"sneat-tiny-end-margin sneat-no-horizontal-margins\"\n    >\n      <ion-button\n        [disabled]=\"$isDefaultDate()\"\n        [color]=\"$isDefaultDate() ? 'medium' : 'primary'\"\n        [title]=\"'Jump to current week'\"\n        (click)=\"setToday()\"\n      >\n        <ion-icon name=\"today-outline\" />\n      </ion-button>\n      <ion-button color=\"tertiary\" title=\"Previous day\" (click)=\"swipePrev()\">\n        <ion-icon name=\"chevron-back-sharp\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons\n      slot=\"end\"\n      class=\"sneat-tiny-start-margin sneat-no-horizontal-margins\"\n    >\n      <ion-button color=\"tertiary\" title=\"Next day\" (click)=\"swipeNext()\">\n        <ion-icon name=\"chevron-forward-sharp\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-label>\n      <div\n        class=\"virtual-slider-outer\"\n        (swipeleft)=\"swipeLeft()\"\n        (swiperight)=\"swipeRight()\"\n      >\n        <div class=\"virtual-slider-inner\" [@virtualSlider]=\"animationState\">\n          <h1\n            class=\"virtual-slide\"\n            [@virtualSlide]=\"oddSlide?.animationState || 'show'\"\n          >\n            <sneat-calendar-week-title [week]=\"oddWeek\" />\n          </h1>\n          <h1\n            class=\"virtual-slide\"\n            [@virtualSlide]=\"evenSlide?.animationState || 'hide'\"\n          >\n            <sneat-calendar-week-title [week]=\"evenWeek\" />\n          </h1>\n        </div>\n      </div>\n    </ion-label>\n  </ion-item>\n\n  <div\n    class=\"virtual-slider-outer\"\n    (swipeleft)=\"swipeLeft()\"\n    (swiperight)=\"swipeRight()\"\n  >\n    <div class=\"virtual-slider-inner\" [@virtualSlider]=\"animationState\">\n      <sneat-calendar-week\n        [$space]=\"$space()\"\n        class=\"virtual-slide\"\n        [@virtualSlide]=\"oddSlide?.animationState || 'show'\"\n        [$week]=\"oddWeek\"\n        [$spaceDaysProvider]=\"$spaceDaysProvider()\"\n      />\n      @if (isEvenSlideActivated) {\n        <sneat-calendar-week\n          class=\"virtual-slide\"\n          [$space]=\"$space()\"\n          [@virtualSlide]=\"evenSlide?.animationState || 'hide'\"\n          [$week]=\"evenWeek\"\n          [$spaceDaysProvider]=\"$spaceDaysProvider()\"\n        />\n      }\n    </div>\n  </div>\n</ion-card>\n"]}

package/esm2022/lib/components/calendar/components/calendar-week/calendar-week-tab.component.js

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { WithSpaceInput } from '@sneat/space-services';
+import { ClassName } from '@sneat/ui';
+import { CalendarWeekCardComponent } from './calendar-week-card.component';
+import * as i0 from "@angular/core";
+export class CalendarWeekTabComponent extends WithSpaceInput {
+    constructor() {
+        super();
+        this.$spaceDaysProvider = input.required(...(ngDevMode ? [{ debugName: "$spaceDaysProvider" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarWeekTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: CalendarWeekTabComponent, isStandalone: true, selector: "sneat-week-tab", inputs: { $spaceDaysProvider: { classPropertyName: "$spaceDaysProvider", publicName: "$spaceDaysProvider", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: ClassName, useValue: 'CalendarWeekTabComponent' }], usesInheritance: true, ngImport: i0, template: "<sneat-week-card\n  [$space]=\"$space()\"\n  [$spaceDaysProvider]=\"$spaceDaysProvider()\"\n/>\n<!--\nAt the moment it is just a wrapper of sneat-week-card\nbut at later stage we might want to show below some statistics or other info.\n-->\n", dependencies: [{ kind: "component", type: CalendarWeekCardComponent, selector: "sneat-week-card", inputs: ["$space", "$spaceDaysProvider"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarWeekTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-week-tab', imports: [CalendarWeekCardComponent], providers: [{ provide: ClassName, useValue: 'CalendarWeekTabComponent' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sneat-week-card\n  [$space]=\"$space()\"\n  [$spaceDaysProvider]=\"$spaceDaysProvider()\"\n/>\n<!--\nAt the moment it is just a wrapper of sneat-week-card\nbut at later stage we might want to show below some statistics or other info.\n-->\n" }]
+        }], ctorParameters: () => [], propDecorators: { $spaceDaysProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "$spaceDaysProvider", required: true }] }] } });
+//# sourceMappingURL=calendar-week-tab.component.js.map

package/esm2022/lib/components/calendar/components/calendar-week/calendar-week-tab.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-week-tab.component.js","sourceRoot":"","sources":["../../../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/calendar/components/calendar-week/calendar-week-tab.component.ts","../../../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/calendar/components/calendar-week/calendar-week-tab.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;;AAS3E,MAAM,OAAO,wBAAyB,SAAQ,cAAc;IAG1D;QACE,KAAK,EAAE,CAAC;QAHM,uBAAkB,GAAG,KAAK,CAAC,QAAQ,6DAAwB,CAAC;IAI5E,CAAC;8GALU,wBAAwB;kGAAxB,wBAAwB,uOAHxB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAA0B,EAAE,CAAC,iDCV3E,mPAQA,4CDCY,yBAAyB;;2FAIxB,wBAAwB;kBAPpC,SAAS;+BACE,gBAAgB,WAEjB,CAAC,yBAAyB,CAAC,aACzB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAA0B,EAAE,CAAC,mBACxD,uBAAuB,CAAC,MAAM","sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { WithSpaceInput } from '@sneat/space-services';\nimport { ClassName } from '@sneat/ui';\nimport { CalendarDataProvider } from '../../../../services/calendar-data-provider';\nimport { CalendarWeekCardComponent } from './calendar-week-card.component';\n\n@Component({\n  selector: 'sneat-week-tab',\n  templateUrl: 'calendar-week-tab.component.html',\n  imports: [CalendarWeekCardComponent],\n  providers: [{ provide: ClassName, useValue: 'CalendarWeekTabComponent' }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CalendarWeekTabComponent extends WithSpaceInput {\n  public readonly $spaceDaysProvider = input.required<CalendarDataProvider>();\n\n  public constructor() {\n    super();\n  }\n}\n","<sneat-week-card\n  [$space]=\"$space()\"\n  [$spaceDaysProvider]=\"$spaceDaysProvider()\"\n/>\n<!--\nAt the moment it is just a wrapper of sneat-week-card\nbut at later stage we might want to show below some statistics or other info.\n-->\n"]}

package/esm2022/lib/components/calendar/components/calendar-week/calendar-week-title.component.js

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ShortMonthNamePipe } from '@sneat/components';
+import * as i0 from "@angular/core";
+export class CalendarWeekTitleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarWeekTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CalendarWeekTitleComponent, isStandalone: true, selector: "sneat-calendar-week-title", inputs: { week: "week" }, ngImport: i0, template: "{{ week?.startDate?.getDate() }}\n{{ week?.startDate?.getMonth() | shortMonthName }}\n—\n{{ week?.endDate?.getDate() }} {{ week?.endDate?.getMonth() | shortMonthName }}\n", dependencies: [{ kind: "pipe", type: ShortMonthNamePipe, name: "shortMonthName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarWeekTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-calendar-week-title', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ShortMonthNamePipe], template: "{{ week?.startDate?.getDate() }}\n{{ week?.startDate?.getMonth() | shortMonthName }}\n—\n{{ week?.endDate?.getDate() }} {{ week?.endDate?.getMonth() | shortMonthName }}\n" }]
+        }], propDecorators: { week: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+//# sourceMappingURL=calendar-week-title.component.js.map

package/esm2022/lib/components/calendar/components/calendar-week/calendar-week-title.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-week-title.component.js","sourceRoot":"","sources":["../../../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/calendar/components/calendar-week/calendar-week-title.component.ts","../../../../../../../../../../../libs/extensions/schedulus/shared/src/lib/components/calendar/components/calendar-week/calendar-week-title.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;;AASvD,MAAM,OAAO,0BAA0B;8GAA1B,0BAA0B;kGAA1B,0BAA0B,+GCVvC,kLAIA,uCDIY,kBAAkB;;2FAEjB,0BAA0B;kBANtC,SAAS;+BACE,2BAA2B,mBAEpB,uBAAuB,CAAC,MAAM,WACtC,CAAC,kBAAkB,CAAC;;sBAG5B,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE","sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { ShortMonthNamePipe } from '@sneat/components';\nimport { SwipeableWeek } from '../../../swipeable-ui';\n\n@Component({\n  selector: 'sneat-calendar-week-title',\n  templateUrl: 'calendar-week-title.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [ShortMonthNamePipe],\n})\nexport class CalendarWeekTitleComponent {\n  @Input({ required: true }) week?: SwipeableWeek;\n}\n","{{ week?.startDate?.getDate() }}\n{{ week?.startDate?.getMonth() | shortMonthName }}\n—\n{{ week?.endDate?.getDate() }} {{ week?.endDate?.getMonth() | shortMonthName }}\n"]}