ngx-mat-shift-selection/ngx-mat-shift-selection.metadata.json

This is a simple date and time selection component design specificly for job shifts etc, with 24-hours available option.

{"__symbolic":"module","version":4,"metadata":{"NgxMatShiftSelectionService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"NgxMatShiftSelectionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"ngx-mat-shift-selection","template":"<div fxLayout=\"column\" [ngClass]=\"class\" class=\"calendar\">\n  <div fxLayout=\"column\" class=\"calendar-navs\" *ngIf=\"calendarType != 'week'\">\n    <div class=\"month-nav\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n      <button mat-icon-button (click)=\"prevMonth()\">\n        <mat-icon>arrow_back_ios</mat-icon>\n      </button>\n      <span class=\"title p4 mt-1\">{{ currentDate.format(\"MMMM\") }}</span>\n      <button mat-icon-button (click)=\"nextMonth()\">\n        <mat-icon>arrow_forward_ios</mat-icon>\n      </button>\n    </div>\n    <div class=\"year-nav\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n      <button mat-icon-button (click)=\"prevYear()\">\n        <mat-icon>arrow_back_ios</mat-icon>\n      </button>\n      <span class=\"mt-1\">{{ currentDate.format(\"YYYY\") }}</span>\n      <button mat-icon-button (click)=\"nextYear()\">\n        <mat-icon>arrow_forward_ios</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div fxLayout=\"column\" class=\"calendar-navs\" *ngIf=\"calendarType == 'week'\">\n    <div class=\"month-nav\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n      <button mat-icon-button (click)=\"prevWeek()\">\n        <mat-icon>arrow_back_ios</mat-icon>\n      </button>\n      <span class=\"title p4 mt-1\">{{ currentDate.format(\"MMMM YYYY\") }}</span>\n      <button mat-icon-button (click)=\"nextWeek()\">\n        <mat-icon>arrow_forward_ios</mat-icon>\n      </button>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div fxLayout=\"column\" class=\"month-grid\">\n    <div class=\"day-names\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n      <div\n        fxFlex=\"14\"\n        *ngFor=\"let name of dayNames\"\n        class=\"day-name p9\"\n        style=\"text-align: center;\"\n      >\n        {{ name }}\n      </div>\n    </div>\n    <div class=\"weeks\" fxLayout=\"column\">\n      <div\n        *ngFor=\"let week of weeks\"\n        class=\"week\"\n        style=\"text-align: center;\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"space-between center\"\n      >\n        <ng-container *ngFor=\"let day of week\">\n          <div fxFlex=\"14\" class=\"week-date disabled\" *ngIf=\"isPast(day.mDate)\">\n            <span class=\"date-text\">{{ day.mDate.date() }}</span>\n          </div>\n          <div\n            fxFlex=\"14\"\n            class=\"week-date enabled\"\n            *ngIf=\"!isPast(day.mDate)\"\n            (click)=\"selectDate(day)\"\n          >\n            <div\n              fxLayout=\"row\"\n              fxLayoutAlign=\"center center\"\n              [ngClass]=\"{\n                today: day.today,\n                fullTimeSelected: day.isFullTime,\n                selected: day.selected\n              }\"\n            >\n              <span class=\"date-text\">{{ day.mDate.date() }}</span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"row justify-content-between p-05\">\n    <div class=\"col-12 mb-1\">\n      Select All Days\n      <mat-checkbox\n        [checked]=\"selectAll\"\n        (change)=\"selectAllChecked()\"\n      ></mat-checkbox>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <ng-container *ngIf=\"sortedDates.length > 0\">\n    <div class=\"p-05\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <div fxFlex=\"50\">Select Available Time</div>\n      <div fxFlex=\"50\" class=\"text-right\">\n        <mat-checkbox\n          [checked]=\"availableAll\"\n          (change)=\"availableAllChecked()\"\n        >\n      </mat-checkbox>\n      Available 24 Hours\n      </div>\n    </div>\n    <mat-divider></mat-divider>\n  </ng-container>\n  <div *ngFor=\"let availableDate of sortedDates\">\n    <div class=\"mt-1\" *ngIf=\"availableDate.isTimerVisible\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"p-05\">\n        <div fxFlex=\"50\">{{ availableDate.mDate.format(\"LL\") }}</div>\n        <div fxFlex=\"50\" class=\"text-right\">\n          <mat-checkbox\n            [(ngModel)]=\"availableDate.isFullTime\"\n            (ngModelChange)=\"fullTimeChecked(availableDate)\"\n            aria-label=\"Checkbox for following text input\"\n          >\n        </mat-checkbox>\n        Available 24 Hours\n        </div>\n      </div>\n      <div\n        fxLayout=\"row\"\n        fxLayoutAlign=\"start center\"\n        *ngIf=\"!availableDate.isFullTime\"\n        class=\"p-05\"\n      >\n        <mat-form-field fxFlex=\"40\">\n          <input\n            type=\"text\"\n            placeholder=\"Start Time\"\n            aria-label=\"Number\"\n            matInput\n            [(ngModel)]=\"availableDate.startTime\"\n            [matAutocomplete]=\"auto\"\n            (ngModelChange)=\"timeSelected()\"\n          />\n          <mat-autocomplete #auto=\"matAutocomplete\">\n            <mat-option *ngFor=\"let option of time\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n        <span class=\"text-center\" fxFlex=\"20\">to</span>\n        <mat-form-field fxFlex=\"40\">\n          <input\n            type=\"text\"\n            placeholder=\"End Time\"\n            aria-label=\"Number\"\n            matInput\n            [(ngModel)]=\"availableDate.endTime\"\n            [matAutocomplete]=\"auto\"\n            (ngModelChange)=\"timeSelected()\"\n          />\n          <mat-autocomplete #auto=\"matAutocomplete\">\n            <mat-option *ngFor=\"let option of time\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n      </div>\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n</div>\n","styles":[".calendar{display:block;min-width:calc(45px * 7);background-color:transparent}.calendar *{box-sizing:border-box}.calendar .calendar-navs{background-color:transparent}.calendar .month-nav{padding:5px;display:flex;flex-direction:row;justify-content:space-between}.calendar .year-nav{padding:5px;display:flex;flex-direction:row;justify-content:space-between;font-family:Montserrat}.calendar .month-grid .day-names{display:flex;flex-direction:row;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.calendar .month-grid .weeks{display:flex;flex-direction:column}.calendar .month-grid .week{display:flex;flex-direction:row}.calendar .month-grid .day-name,.calendar .month-grid .week-date{text-align:center;padding:5px;display:block;width:45px;display:flex;justify-content:center;align-items:center;font-size:1rem}.calendar .month-grid .day-name{color:#28a1e5}.calendar .month-grid .week-date{height:45px;position:relative;border-radius:50%}.calendar .month-grid .week-date .date-text{z-index:10;font-size:1rem;font-family:Montserrat,sans-serif}.calendar .month-grid .week-date::after{content:\"\";height:calc(45px * .9);width:calc(45px * .9);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;transition:background-color 150ms linear,color 150ms linear;z-index:1}.calendar .month-grid .week-date.enabled{cursor:pointer}.calendar .month-grid .week-date.enabled:hover{opacity:.6}.calendar .month-grid .week-date .selected,.calendar .month-grid .week-date .selected:after{background-color:#28a1e5;color:#fff;width:34px;height:34px;border-radius:50%}.calendar .month-grid .week-date .selected:hover:after{background-color:transparent;width:34px;height:34px;border-radius:50%}.calendar .month-grid .week-date .fullTimeSelected,.calendar .month-grid .week-date .fullTimeSelected:after{background-color:#757374!important;color:#fff;width:34px;height:34px;border-radius:50%}.calendar .month-grid .week-date .fullTimeSelected:hover:after{background-color:transparent;width:34px;height:34px;border-radius:50%}.calendar .month-grid .week-date.disabled{opacity:.6}.calendar .month-grid .today{font-weight:700}.to-span{padding-top:2.5rem;margin-left:1rem;margin-right:1rem}.p-05{padding:.5rem}.time-selector{display:inline-flex}.title{font-size:1.2rem;font-weight:700}.hr-margin{margin-top:1px;margin-bottom:1px}.text-center{text-align:center}.text-right{text-align:right}*{font-size:.8rem}"]}]}],"members":{"selectedDates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3}}]}],"calendarType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"onSelectDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":84,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"selectDate":[{"__symbolic":"method"}],"isToday":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"isDuplicate":[{"__symbolic":"method"}],"areAllSelected":[{"__symbolic":"method"}],"areAllAvailable":[{"__symbolic":"method"}],"isFullTime":[{"__symbolic":"method"}],"isSelectedMonth":[{"__symbolic":"method"}],"isPast":[{"__symbolic":"method"}],"prevMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"nextWeek":[{"__symbolic":"method"}],"prevWeek":[{"__symbolic":"method"}],"firstMonth":[{"__symbolic":"method"}],"lastMonth":[{"__symbolic":"method"}],"prevYear":[{"__symbolic":"method"}],"nextYear":[{"__symbolic":"method"}],"generateCalendar":[{"__symbolic":"method"}],"fillDates":[{"__symbolic":"method"}],"timeChanged":[{"__symbolic":"method"}],"fullTimeChecked":[{"__symbolic":"method"}],"selectAllChecked":[{"__symbolic":"method"}],"availableAllChecked":[{"__symbolic":"method"}],"timeSelected":[{"__symbolic":"method"}]}},"CalendarDate":{"__symbolic":"interface"},"NgxMatShiftSelectionModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxMatShiftSelectionComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDividerModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":28,"character":4}],"exports":[{"__symbolic":"reference","name":"NgxMatShiftSelectionComponent"}]}]}],"members":{}}},"origins":{"NgxMatShiftSelectionService":"./lib/ngx-mat-shift-selection.service","NgxMatShiftSelectionComponent":"./lib/ngx-mat-shift-selection.component","CalendarDate":"./lib/ngx-mat-shift-selection.component","NgxMatShiftSelectionModule":"./lib/ngx-mat-shift-selection.module"},"importAs":"ngx-mat-shift-selection"}