@tapsellorg/angular-material-library/fesm2022/tapsellorg-angular-material-library-src-lib-day-hour-picker.mjs

Angular library for Tapsell

import * as i0 from '@angular/core';
import { output, input, signal, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
import * as i4 from '@tapsellorg/angular-material-library/src/lib/common';
import { withDestroy, PghReplaceWithModule } from '@tapsellorg/angular-material-library/src/lib/common';
import { takeUntil } from 'rxjs';
import { PghBreakpoints } from '@tapsellorg/angular-material-library/media';
import * as i1 from '@angular/cdk/layout';
import * as i2 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { PghLoaderModule } from '@tapsellorg/angular-material-library/src/lib/loader';

const DaysDictionary = new Map([
    ['SATURDAY', 'شنبه'],
    ['SUNDAY', 'یکشنبه'],
    ['MONDAY', 'دوشنبه'],
    ['TUESDAY', 'سه‌شنبه'],
    ['WEDNESDAY', 'چهارشنبه'],
    ['THURSDAY', 'پنجشنبه'],
    ['FRIDAY', 'جمعه'],
]);
const days = [
    'SATURDAY',
    'SUNDAY',
    'MONDAY',
    'TUESDAY',
    'WEDNESDAY',
    'THURSDAY',
    'FRIDAY',
];
const hours = [
    '00',
    '01',
    '02',
    '03',
    '04',
    '05',
    '06',
    '07',
    '08',
    '09',
    '10',
    '11',
    '12',
    '13',
    '14',
    '15',
    '16',
    '17',
    '18',
    '19',
    '20',
    '21',
    '22',
    '23',
];
const HOUR_ITEMS = hours.map(h => ({
    isSelected: true,
    hour: h,
}));
const ALL_DAYS = days.map(d => ({
    id: d + '-day',
    name: d,
    isDaySelected: false,
    isDayHovered: false,
    hours: HOUR_ITEMS.map(h => ({
        hourId: h.hour,
        start: Number(h.hour),
        end: Number(h.hour) + 1,
        isHourHovered: false,
        isHourSelected: false,
    })),
}));
const WEEKENDS = ALL_DAYS.filter(d => isWeekendDay(d.name));
const WEEKDAYS = ALL_DAYS.filter(d => !isWeekendDay(d.name));
function isWeekendDay(day) {
    return day.includes('THURSDAY') || day.includes('FRIDAY');
}

class PghDayHourPickerComponent extends withDestroy() {
    constructor(breakpointObserver, cdr) {
        super();
        this.breakpointObserver = breakpointObserver;
        this.cdr = cdr;
        this.selectedHoursChange = output();
        this.loader = input();
        this.selectedHours = input();
        this.allDays = signal(ALL_DAYS);
        this.hourItems = signal(HOUR_ITEMS);
        this.daysDictionary = DaysDictionary;
        this.weekEnds = WEEKENDS;
        this.weekDays = WEEKDAYS;
        this.isMobile = signal(false);
        this.selectedOption = signal('none');
    }
    ngOnInit() {
        this.fillTable();
        this.onObserveBreakpoints();
    }
    ngOnChanges(changes) {
        if (changes.selectedHours) {
            this.fillTable();
        }
    }
    fillTable() {
        if (this.selectedHours()) {
            for (const key in this.selectedHours()) {
                this.allDays().forEach(a => {
                    if (a.name === key) {
                        this.selectedHours()[key].forEach(s => {
                            const selectedHour = a.hours.find(h => s.start === h.start);
                            if (selectedHour) {
                                selectedHour.isHourSelected = true;
                            }
                        });
                    }
                });
            }
        }
        else {
            this.onClickAlways();
        }
        this.selectedOption.set(this.getSelectedOption());
    }
    getSelectedOption() {
        const selectedDays = this.getSelectedDays();
        switch (true) {
            case this.allDays().every(c => c.isDaySelected):
                return 'always';
            case selectedDays.includes('THURSDAY') &&
                selectedDays.includes('FRIDAY') &&
                !this.allDays()
                    .filter(c => c.name !== 'THURSDAY' && c.name !== 'FRIDAY')
                    .some(i => i.hours.some(i => i.isHourSelected)):
                return 'weekend';
            case selectedDays.includes('SATURDAY') &&
                selectedDays.includes('SUNDAY') &&
                selectedDays.includes('MONDAY') &&
                selectedDays.includes('TUESDAY') &&
                selectedDays.includes('WEDNESDAY') &&
                !this.allDays()
                    .filter(c => c.name === 'THURSDAY' || c.name === 'FRIDAY')
                    .some(i => i.hours.some(i => i.isHourSelected)):
                return 'weekday';
            default:
                return 'none';
        }
    }
    onHourHovered(h) {
        this.allDays().forEach(c => c.hours.filter(i => i.hourId.includes(h)).map(j => (j.isHourHovered = true)));
    }
    onMouseLeave(h) {
        this.allDays().forEach(c => c.hours.filter(i => i.hourId.includes(h)).map(j => (j.isHourHovered = false)));
    }
    onDayHovered(id) {
        this.allDays()
            .filter(c => c.id.includes(id))
            .forEach(i => i.hours.map(h => (h.isHourHovered = true)));
    }
    onDayLeave(id) {
        this.allDays()
            .filter(c => c.id.includes(id))
            .forEach(i => i.hours.map(h => (h.isHourHovered = false)));
    }
    unSelectAllCells() {
        this.allDays().forEach(c => {
            c.isDaySelected = false;
            c.hours.forEach(i => (i.isHourSelected = false));
        });
    }
    getSelectedDays() {
        return this.allDays()
            .map(c => {
            c.isDaySelected = c.hours.every(i => i.isHourSelected);
            return c;
        })
            .filter(c => c.isDaySelected)
            .map(s => s.name);
    }
    updateHourItemsState() {
        this.hourItems().forEach(h => {
            const hours = this.allDays().map(c => c.hours.find(i => i.hourId === h.hour));
            hours.every(h => h?.isHourSelected) ? (h.isSelected = true) : (h.isSelected = false);
        });
    }
    onDaySelected(id) {
        const selectedDay = this.allDays().find(c => c.id === id);
        if (!selectedDay)
            return;
        selectedDay.isDaySelected = !selectedDay.isDaySelected;
        selectedDay.hours.forEach(i => {
            i.isHourSelected = selectedDay.isDaySelected;
            i.isHourHovered = false;
        });
        this.selectedOption.set(this.getSelectedOption());
        this.sendSelectedHours();
        this.updateHourItemsState();
    }
    onHourSelected(h) {
        const selectedHour = this.hourItems().find(i => i.hour === h);
        if (!selectedHour)
            return;
        selectedHour.isSelected = !selectedHour.isSelected;
        this.allDays().forEach(c => c.hours
            .filter(i => i.hourId.includes(h))
            .forEach(j => {
            j.isHourSelected = selectedHour.isSelected;
            j.isHourHovered = false;
        }));
        this.selectedOption.set(this.getSelectedOption());
        this.sendSelectedHours();
    }
    onCellSelected(h) {
        h.isHourSelected = !h.isHourSelected;
        this.selectedOption.set(this.getSelectedOption());
        this.sendSelectedHours();
        this.updateHourItemsState();
    }
    onClickAlways() {
        this.allDays().forEach(c => c.hours.map(i => (i.isHourSelected = true)));
        this.selectedOption.set(this.getSelectedOption());
        this.sendSelectedHours();
        this.updateHourItemsState();
    }
    onClickWeekend() {
        this.unSelectAllCells();
        this.weekEnds.forEach(w => {
            w.isDaySelected = true;
            w.hours.forEach(i => (i.isHourSelected = true));
        });
        this.selectedOption.set(this.getSelectedOption());
        this.sendSelectedHours();
        this.updateHourItemsState();
    }
    onClickWeekDay() {
        this.unSelectAllCells();
        this.weekDays.forEach(w => {
            w.isDaySelected = true;
            w.hours.forEach(i => (i.isHourSelected = true));
        });
        this.selectedOption.set(this.getSelectedOption());
        this.sendSelectedHours();
        this.updateHourItemsState();
    }
    onObserveBreakpoints() {
        this.breakpointObserver
            .observe(PghBreakpoints.lg)
            .pipe(takeUntil(this._destroyed$))
            .subscribe(result => {
            this.isMobile.set(!result.matches);
            this.cdr.detectChanges();
        });
    }
    sendSelectedHours() {
        let newInfo;
        const selectedCells = this.allDays()
            .map(c => {
            newInfo = c.hours.filter(i => i.isHourSelected).map(i => ({ start: i.start, end: i.end }));
            return newInfo.length > 0 ? { [c.name]: newInfo } : null;
        })
            .filter(i => i);
        if (selectedCells.length === 0) {
            this.selectedHoursChange.emit(null);
            return;
        }
        const convertedSelectedCells = selectedCells.reduce((obj, item) => Object.assign(obj, item, {}));
        this.selectedHoursChange.emit(convertedSelectedCells);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDayHourPickerComponent, deps: [{ token: i1.BreakpointObserver }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghDayHourPickerComponent, isStandalone: false, selector: "pgh-day-hour-picker", inputs: { loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, selectedHours: { classPropertyName: "selectedHours", publicName: "selectedHours", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedHoursChange: "selectedHoursChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  [class.pgh-day-hour-container-mobile]=\"isMobile()\"\n  class=\"d-flex flex-column align-items-center p-3\"\n>\n  <div class=\"mb-3\">\n    <button\n      [class.pgh-day-hour-action-button-mobile]=\"isMobile()\"\n      mat-stroked-button\n      color=\"primary\"\n      (click)=\"onClickAlways()\"\n      class=\"me-md-2\"\n      [class.pgh-active-button]=\"selectedOption() === 'always'\"\n    >\n      \u0647\u0645\u0647 \u0631\u0648\u0632\u0647\u0627\n    </button>\n    <button\n      [class.pgh-day-hour-action-button-mobile]=\"isMobile()\"\n      mat-stroked-button\n      color=\"primary\"\n      (click)=\"onClickWeekend()\"\n      [class.pgh-active-button]=\"selectedOption() === 'weekend'\"\n      class=\"me-md-2\"\n    >\n      \u0641\u0642\u0637 \u0622\u062E\u0631 \u0647\u0641\u062A\u0647\u200C\u0647\u0627\n    </button>\n    <button\n      [class.pgh-day-hour-action-button-mobile]=\"isMobile()\"\n      mat-stroked-button\n      color=\"primary\"\n      (click)=\"onClickWeekDay()\"\n      [class.pgh-active-button]=\"selectedOption() === 'weekday'\"\n      class=\"me-md-2\"\n    >\n      \u0628\u0647\u200C\u062C\u0632 \u0622\u062E\u0631 \u0647\u0641\u062A\u0647\u200C\u0647\u0627\n    </button>\n  </div>\n  <div [class.pgh-day-hour-table-mobile]=\"isMobile()\">\n    <table>\n      <tr>\n        <td></td>\n        @for (i of hourItems(); track i) {\n        <td\n          (mouseover)=\"onHourHovered(i.hour)\"\n          (mouseleave)=\"onMouseLeave(i.hour)\"\n          class=\"pgh-hour-item\"\n          (click)=\"onHourSelected(i.hour)\"\n        >\n          <div class=\"pgh-hour-item-title\">{{ i.hour }}:00</div>\n        </td>\n        }\n      </tr>\n\n      @for (d of allDays(); track d) {\n      <tr>\n        <td\n          class=\"text-end pgh-day-title\"\n          (click)=\"onDaySelected(d.id)\"\n          [class.pgh-day-selected]=\"d.isDaySelected\"\n          (mouseover)=\"onDayHovered(d.id)\"\n          (mouseleave)=\"onDayLeave(d.id)\"\n        >\n          {{ d.name | pghReplaceWith : daysDictionary }}\n        </td>\n        @for (h of d.hours; track h; let i = $index) {\n        <td class=\"text-end pgh-day-cell\" (click)=\"onCellSelected(h)\">\n          <div\n            [matTooltip]=\"(d.name | pghReplaceWith : daysDictionary) + ' ' + '\u0633\u0627\u0639\u062A ' + h.hourId\"\n            [class.pgh-isHovered]=\"h.isHourHovered\"\n            [class.pgh-isSelected]=\"h.isHourSelected\"\n            class=\"box pgh-day-cell-info\"\n          ></div>\n        </td>\n        }\n      </tr>\n      }\n    </table>\n  </div>\n</div>\n", styles: [".pgh-hour-item{width:30px;height:42px;position:relative;cursor:pointer;transition:background-color .15s ease}.pgh-hour-item:hover{color:var(--primary)}.pgh-hour-item-title{transform:rotate(-90deg);position:absolute;bottom:12px;left:-5px;width:39px;text-align:end}.pgh-day-title{width:70px;padding-block:11px 4px;padding-inline:9px;cursor:pointer;transition:all .15s ease}.pgh-day-title:hover{color:var(--primary)}.pgh-day-cell{min-width:35px;min-height:35px;position:relative;cursor:pointer}.pgh-day-cell-info{position:absolute;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);background-color:var(--gray-300);transition:background-color .15s ease}.pgh-active-button,.pgh-isSelected{background:var(--primary)!important;color:var(--fff)!important;transition:all .15s ease}.pgh-isHovered,.pgh-day-cell:hover{opacity:.7}.pgh-day-hour-container-mobile{display:block;height:1000px}.pgh-day-hour-table-mobile{transform:rotate(90deg) translate(320px);display:block;direction:ltr}.pgh-day-hour-action-button-mobile{padding-block:0;padding-inline:10px;line-height:27px}.pgh-day-hour-action-button-mobile span{font-size:10px}\n"], dependencies: [{ kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: i4.PghReplaceWithPipe, name: "pghReplaceWith" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDayHourPickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-day-hour-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  [class.pgh-day-hour-container-mobile]=\"isMobile()\"\n  class=\"d-flex flex-column align-items-center p-3\"\n>\n  <div class=\"mb-3\">\n    <button\n      [class.pgh-day-hour-action-button-mobile]=\"isMobile()\"\n      mat-stroked-button\n      color=\"primary\"\n      (click)=\"onClickAlways()\"\n      class=\"me-md-2\"\n      [class.pgh-active-button]=\"selectedOption() === 'always'\"\n    >\n      \u0647\u0645\u0647 \u0631\u0648\u0632\u0647\u0627\n    </button>\n    <button\n      [class.pgh-day-hour-action-button-mobile]=\"isMobile()\"\n      mat-stroked-button\n      color=\"primary\"\n      (click)=\"onClickWeekend()\"\n      [class.pgh-active-button]=\"selectedOption() === 'weekend'\"\n      class=\"me-md-2\"\n    >\n      \u0641\u0642\u0637 \u0622\u062E\u0631 \u0647\u0641\u062A\u0647\u200C\u0647\u0627\n    </button>\n    <button\n      [class.pgh-day-hour-action-button-mobile]=\"isMobile()\"\n      mat-stroked-button\n      color=\"primary\"\n      (click)=\"onClickWeekDay()\"\n      [class.pgh-active-button]=\"selectedOption() === 'weekday'\"\n      class=\"me-md-2\"\n    >\n      \u0628\u0647\u200C\u062C\u0632 \u0622\u062E\u0631 \u0647\u0641\u062A\u0647\u200C\u0647\u0627\n    </button>\n  </div>\n  <div [class.pgh-day-hour-table-mobile]=\"isMobile()\">\n    <table>\n      <tr>\n        <td></td>\n        @for (i of hourItems(); track i) {\n        <td\n          (mouseover)=\"onHourHovered(i.hour)\"\n          (mouseleave)=\"onMouseLeave(i.hour)\"\n          class=\"pgh-hour-item\"\n          (click)=\"onHourSelected(i.hour)\"\n        >\n          <div class=\"pgh-hour-item-title\">{{ i.hour }}:00</div>\n        </td>\n        }\n      </tr>\n\n      @for (d of allDays(); track d) {\n      <tr>\n        <td\n          class=\"text-end pgh-day-title\"\n          (click)=\"onDaySelected(d.id)\"\n          [class.pgh-day-selected]=\"d.isDaySelected\"\n          (mouseover)=\"onDayHovered(d.id)\"\n          (mouseleave)=\"onDayLeave(d.id)\"\n        >\n          {{ d.name | pghReplaceWith : daysDictionary }}\n        </td>\n        @for (h of d.hours; track h; let i = $index) {\n        <td class=\"text-end pgh-day-cell\" (click)=\"onCellSelected(h)\">\n          <div\n            [matTooltip]=\"(d.name | pghReplaceWith : daysDictionary) + ' ' + '\u0633\u0627\u0639\u062A ' + h.hourId\"\n            [class.pgh-isHovered]=\"h.isHourHovered\"\n            [class.pgh-isSelected]=\"h.isHourSelected\"\n            class=\"box pgh-day-cell-info\"\n          ></div>\n        </td>\n        }\n      </tr>\n      }\n    </table>\n  </div>\n</div>\n", styles: [".pgh-hour-item{width:30px;height:42px;position:relative;cursor:pointer;transition:background-color .15s ease}.pgh-hour-item:hover{color:var(--primary)}.pgh-hour-item-title{transform:rotate(-90deg);position:absolute;bottom:12px;left:-5px;width:39px;text-align:end}.pgh-day-title{width:70px;padding-block:11px 4px;padding-inline:9px;cursor:pointer;transition:all .15s ease}.pgh-day-title:hover{color:var(--primary)}.pgh-day-cell{min-width:35px;min-height:35px;position:relative;cursor:pointer}.pgh-day-cell-info{position:absolute;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);background-color:var(--gray-300);transition:background-color .15s ease}.pgh-active-button,.pgh-isSelected{background:var(--primary)!important;color:var(--fff)!important;transition:all .15s ease}.pgh-isHovered,.pgh-day-cell:hover{opacity:.7}.pgh-day-hour-container-mobile{display:block;height:1000px}.pgh-day-hour-table-mobile{transform:rotate(90deg) translate(320px);display:block;direction:ltr}.pgh-day-hour-action-button-mobile{padding-block:0;padding-inline:10px;line-height:27px}.pgh-day-hour-action-button-mobile span{font-size:10px}\n"] }]
        }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i0.ChangeDetectorRef }] });

class PghDayHourPickerModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDayHourPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghDayHourPickerModule, declarations: [PghDayHourPickerComponent], imports: [CommonModule,
            PghReplaceWithModule,
            MatTooltipModule,
            MatButtonModule,
            MatIconModule,
            PghLoaderModule], exports: [PghDayHourPickerComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDayHourPickerModule, imports: [CommonModule,
            PghReplaceWithModule,
            MatTooltipModule,
            MatButtonModule,
            MatIconModule,
            PghLoaderModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDayHourPickerModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [PghDayHourPickerComponent],
                    imports: [
                        CommonModule,
                        PghReplaceWithModule,
                        MatTooltipModule,
                        MatButtonModule,
                        MatIconModule,
                        PghLoaderModule,
                    ],
                    exports: [PghDayHourPickerComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { PghDayHourPickerComponent, PghDayHourPickerModule };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-day-hour-picker.mjs.map