mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-22 04:07:06 +00:00
Compare commits
32 Commits
v13.6.2-st
...
v14.1.0-st
| Author | SHA1 | Date | |
|---|---|---|---|
|
d9dee128de | ||
|
|
a8337ce617 | ||
|
|
3ceda2cf3f | ||
|
|
805b50707e | ||
|
|
3fd522de31 | ||
|
|
b84fb68a47 | ||
|
|
4a2c7560e8 | ||
|
|
46753d5402 | ||
|
|
9d3e971325 | ||
|
|
9d7c015fe7 | ||
|
|
4b5cac11f2 | ||
|
|
6c62d25c35 | ||
|
|
5c46b1aaa4 | ||
|
|
3a1a7d44b6 | ||
|
|
0076b1ee8a | ||
|
|
c69542679d | ||
|
|
e4ebe2fd7e | ||
|
|
f380d8ca16 | ||
|
|
6b14c1db7f | ||
|
|
20901117d1 | ||
|
|
83e3c85448 | ||
|
|
3d6714008a | ||
|
|
ea954a75de | ||
|
|
4d4b411f76 | ||
|
|
7b5217d009 | ||
|
|
e671100bc5 | ||
|
|
f910615831 | ||
|
|
778679e136 | ||
|
|
c25610ee4e | ||
|
|
3ddd7e4533 | ||
|
|
c21c362b84 | ||
|
|
9f97d74911 |
@@ -14,4 +14,3 @@ last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -31,6 +31,7 @@ chrome-profiler-events*.json
|
||||
.history/*
|
||||
|
||||
# misc
|
||||
/.angular/cache
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
|
||||
11
angular.json
11
angular.json
@@ -1,6 +1,12 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"cli": {
|
||||
"defaultCollection": "@angular-eslint/schematics",
|
||||
"cache": {
|
||||
"enabled": false
|
||||
}
|
||||
},
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"fuse": {
|
||||
@@ -137,8 +143,5 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "fuse",
|
||||
"cli": {
|
||||
"defaultCollection": "@angular-eslint/schematics"
|
||||
}
|
||||
"defaultProject": "fuse"
|
||||
}
|
||||
|
||||
27259
package-lock.json
generated
27259
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
104
package.json
104
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@fuse/starter",
|
||||
"version": "13.6.2",
|
||||
"version": "14.1.0",
|
||||
"description": "Fuse - Angular Admin Template and Starter Project",
|
||||
"author": "https://themeforest.net/user/srcn",
|
||||
"license": "https://themeforest.net/licenses/standard",
|
||||
@@ -14,78 +14,68 @@
|
||||
"lint": "ng lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "12.2.3",
|
||||
"@angular/cdk": "12.2.3",
|
||||
"@angular/common": "12.2.3",
|
||||
"@angular/compiler": "12.2.3",
|
||||
"@angular/core": "12.2.3",
|
||||
"@angular/forms": "12.2.3",
|
||||
"@angular/material": "12.2.3",
|
||||
"@angular/material-moment-adapter": "12.2.3",
|
||||
"@angular/platform-browser": "12.2.3",
|
||||
"@angular/platform-browser-dynamic": "12.2.3",
|
||||
"@angular/router": "12.2.3",
|
||||
"@fullcalendar/angular": "4.4.5-beta",
|
||||
"@fullcalendar/core": "4.4.2",
|
||||
"@fullcalendar/daygrid": "4.4.2",
|
||||
"@fullcalendar/interaction": "4.4.2",
|
||||
"@fullcalendar/list": "4.4.2",
|
||||
"@fullcalendar/moment": "4.4.2",
|
||||
"@fullcalendar/rrule": "4.4.2",
|
||||
"@fullcalendar/timegrid": "4.4.2",
|
||||
"@ngneat/transloco": "2.22.0",
|
||||
"apexcharts": "3.28.1",
|
||||
"@angular/animations": "13.1.1",
|
||||
"@angular/cdk": "13.1.1",
|
||||
"@angular/common": "13.1.1",
|
||||
"@angular/compiler": "13.1.1",
|
||||
"@angular/core": "13.1.1",
|
||||
"@angular/forms": "13.1.1",
|
||||
"@angular/material": "13.1.1",
|
||||
"@angular/material-moment-adapter": "13.1.1",
|
||||
"@angular/platform-browser": "13.1.1",
|
||||
"@angular/platform-browser-dynamic": "13.1.1",
|
||||
"@angular/router": "13.1.1",
|
||||
"@ngneat/transloco": "3.1.1",
|
||||
"apexcharts": "3.32.0",
|
||||
"crypto-js": "3.3.0",
|
||||
"highlight.js": "11.2.0",
|
||||
"highlight.js": "11.3.1",
|
||||
"lodash-es": "4.17.21",
|
||||
"moment": "2.29.1",
|
||||
"ng-apexcharts": "1.5.12",
|
||||
"ngx-markdown": "12.0.1",
|
||||
"ngx-quill": "14.3.0",
|
||||
"perfect-scrollbar": "1.5.2",
|
||||
"ng-apexcharts": "1.6.0",
|
||||
"ngx-markdown": "13.0.0",
|
||||
"ngx-quill": "16.1.1",
|
||||
"perfect-scrollbar": "1.5.3",
|
||||
"quill": "1.3.7",
|
||||
"rrule": "2.6.8",
|
||||
"rxjs": "6.6.7",
|
||||
"rxjs": "7.4.0",
|
||||
"tslib": "2.3.1",
|
||||
"web-animations-js": "2.3.2",
|
||||
"zone.js": "0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "12.2.3",
|
||||
"@angular-eslint/builder": "12.3.1",
|
||||
"@angular-eslint/eslint-plugin": "12.3.1",
|
||||
"@angular-eslint/eslint-plugin-template": "12.3.1",
|
||||
"@angular-eslint/schematics": "12.3.1",
|
||||
"@angular-eslint/template-parser": "12.3.1",
|
||||
"@angular/cli": "12.2.3",
|
||||
"@angular/compiler-cli": "12.2.3",
|
||||
"@tailwindcss/aspect-ratio": "0.2.1",
|
||||
"@tailwindcss/line-clamp": "0.2.1",
|
||||
"@tailwindcss/typography": "0.4.1",
|
||||
"@angular-devkit/build-angular": "13.1.2",
|
||||
"@angular-eslint/builder": "13.0.1",
|
||||
"@angular-eslint/eslint-plugin": "13.0.1",
|
||||
"@angular-eslint/eslint-plugin-template": "13.0.1",
|
||||
"@angular-eslint/schematics": "13.0.1",
|
||||
"@angular-eslint/template-parser": "13.0.1",
|
||||
"@angular/cli": "13.1.2",
|
||||
"@angular/compiler-cli": "13.1.1",
|
||||
"@tailwindcss/aspect-ratio": "0.4.0",
|
||||
"@tailwindcss/line-clamp": "0.3.0",
|
||||
"@tailwindcss/typography": "0.5.0",
|
||||
"@types/chroma-js": "2.1.3",
|
||||
"@types/crypto-js": "3.1.47",
|
||||
"@types/highlight.js": "10.1.0",
|
||||
"@types/jasmine": "3.8.2",
|
||||
"@types/lodash": "4.14.172",
|
||||
"@types/lodash-es": "4.17.4",
|
||||
"@types/node": "12.20.21",
|
||||
"@typescript-eslint/eslint-plugin": "4.30.0",
|
||||
"@typescript-eslint/parser": "4.30.0",
|
||||
"autoprefixer": "10.3.3",
|
||||
"@types/jasmine": "3.10.2",
|
||||
"@types/lodash": "4.14.178",
|
||||
"@types/lodash-es": "4.17.5",
|
||||
"@types/node": "12.20.38",
|
||||
"@typescript-eslint/eslint-plugin": "5.8.0",
|
||||
"@typescript-eslint/parser": "5.8.0",
|
||||
"autoprefixer": "10.4.0",
|
||||
"chroma-js": "2.1.2",
|
||||
"eslint": "7.32.0",
|
||||
"eslint-plugin-import": "2.24.2",
|
||||
"eslint-plugin-jsdoc": "36.0.8",
|
||||
"eslint": "8.5.0",
|
||||
"eslint-plugin-import": "2.25.3",
|
||||
"eslint-plugin-jsdoc": "37.4.0",
|
||||
"eslint-plugin-prefer-arrow": "1.2.3",
|
||||
"jasmine-core": "3.8.0",
|
||||
"karma": "6.3.4",
|
||||
"jasmine-core": "3.10.1",
|
||||
"karma": "6.3.9",
|
||||
"karma-chrome-launcher": "3.1.0",
|
||||
"karma-coverage": "2.0.3",
|
||||
"karma-coverage": "2.1.0",
|
||||
"karma-jasmine": "4.0.1",
|
||||
"karma-jasmine-html-reporter": "1.7.0",
|
||||
"lodash": "4.17.21",
|
||||
"postcss": "8.3.6",
|
||||
"tailwindcss": "2.2.9",
|
||||
"typescript": "4.3.5"
|
||||
"postcss": "8.4.5",
|
||||
"tailwindcss": "3.0.7",
|
||||
"typescript": "4.5.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
|
||||
@@ -145,7 +144,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
<div
|
||||
class="range"
|
||||
(click)="openPickerPanel()"
|
||||
#pickerPanelOrigin>
|
||||
|
||||
<div class="start">
|
||||
<div class="date">{{range.startDate}}</div>
|
||||
<div
|
||||
class="time"
|
||||
*ngIf="range.startTime">{{range.startTime}}</div>
|
||||
</div>
|
||||
|
||||
<div class="separator">-</div>
|
||||
|
||||
<div class="end">
|
||||
<div class="date">{{range.endDate}}</div>
|
||||
<div
|
||||
class="time"
|
||||
*ngIf="range.endTime">{{range.endTime}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ng-template #pickerPanel>
|
||||
|
||||
<!-- Start -->
|
||||
<div class="start">
|
||||
|
||||
<div class="month">
|
||||
<div class="month-header">
|
||||
<button
|
||||
class="previous-button"
|
||||
mat-icon-button
|
||||
(click)="prev()"
|
||||
tabindex="1">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:chevron-left'"></mat-icon>
|
||||
</button>
|
||||
<div class="month-label">{{getMonthLabel(1)}}</div>
|
||||
</div>
|
||||
<mat-month-view
|
||||
[(activeDate)]="activeDates.month1"
|
||||
[dateFilter]="dateFilter()"
|
||||
[dateClass]="dateClass()"
|
||||
(click)="$event.stopImmediatePropagation()"
|
||||
(selectedChange)="onSelectedDateChange($event)"
|
||||
#matMonthView1>
|
||||
</mat-month-view>
|
||||
</div>
|
||||
|
||||
<mat-form-field
|
||||
class="fuse-mat-no-subscript time start-time"
|
||||
*ngIf="timeRange">
|
||||
<input
|
||||
matInput
|
||||
[autocomplete]="'off'"
|
||||
[formControl]="startTimeFormControl"
|
||||
(blur)="updateStartTime($event)"
|
||||
tabindex="3">
|
||||
<mat-label>Start time</mat-label>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- End -->
|
||||
<div class="end">
|
||||
|
||||
<div class="month">
|
||||
<div class="month-header">
|
||||
<div class="month-label">{{getMonthLabel(2)}}</div>
|
||||
<button
|
||||
class="next-button"
|
||||
mat-icon-button
|
||||
(click)="next()"
|
||||
tabindex="2">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:chevron-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-month-view
|
||||
[(activeDate)]="activeDates.month2"
|
||||
[dateFilter]="dateFilter()"
|
||||
[dateClass]="dateClass()"
|
||||
(click)="$event.stopImmediatePropagation()"
|
||||
(selectedChange)="onSelectedDateChange($event)"
|
||||
#matMonthView2>
|
||||
</mat-month-view>
|
||||
</div>
|
||||
|
||||
<mat-form-field
|
||||
class="fuse-mat-no-subscript time end-time"
|
||||
*ngIf="timeRange">
|
||||
<input
|
||||
matInput
|
||||
[formControl]="endTimeFormControl"
|
||||
(blur)="updateEndTime($event)"
|
||||
tabindex="4">
|
||||
<mat-label>End time</mat-label>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
@@ -1,292 +0,0 @@
|
||||
/* Variables */
|
||||
$body-cell-padding: 2px;
|
||||
|
||||
fuse-date-range {
|
||||
display: flex;
|
||||
|
||||
.range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
cursor: pointer;
|
||||
|
||||
.start,
|
||||
.end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
border-radius: 6px;
|
||||
border-width: 1px;
|
||||
line-height: 1;
|
||||
@apply shadow-sm border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500;
|
||||
|
||||
.date {
|
||||
white-space: nowrap;
|
||||
|
||||
+ .time {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 2px;
|
||||
|
||||
@screen sm {
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-date-range-panel {
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
@apply shadow-2xl bg-card;
|
||||
|
||||
.start,
|
||||
.end {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.month {
|
||||
max-width: 196px;
|
||||
min-width: 196px;
|
||||
width: 196px;
|
||||
|
||||
.month-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.previous-button,
|
||||
.next-button {
|
||||
position: absolute;
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
min-height: 24px !important;
|
||||
max-height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
|
||||
.mat-icon {
|
||||
@apply icon-size-5;
|
||||
}
|
||||
}
|
||||
|
||||
.previous-button {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.next-button {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.month-label {
|
||||
font-weight: 500;
|
||||
@apply text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
mat-month-view {
|
||||
display: flex;
|
||||
min-height: 188px;
|
||||
|
||||
.mat-calendar-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
tbody {
|
||||
|
||||
tr {
|
||||
|
||||
&[aria-hidden=true] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
||||
td:first-child {
|
||||
|
||||
&[aria-hidden=true] {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
td:hover {
|
||||
|
||||
&.fuse-date-range {
|
||||
|
||||
&:before {
|
||||
@apply bg-primary-200;
|
||||
}
|
||||
|
||||
.mat-calendar-body-cell-content {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.fuse-date-range-start,
|
||||
&.fuse-date-range-end {
|
||||
|
||||
.mat-calendar-body-cell-content {
|
||||
@apply bg-primary text-on-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-calendar-body-today {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
td.mat-calendar-body-cell {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
padding: $body-cell-padding !important;
|
||||
|
||||
&.fuse-date-range {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: $body-cell-padding;
|
||||
right: 0;
|
||||
bottom: $body-cell-padding;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.fuse-date-range-start {
|
||||
|
||||
&:before {
|
||||
left: $body-cell-padding;
|
||||
border-radius: 999px 0 0 999px;
|
||||
}
|
||||
|
||||
&.fuse-date-range-end,
|
||||
&:last-child {
|
||||
|
||||
&:before {
|
||||
right: $body-cell-padding;
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fuse-date-range-end {
|
||||
|
||||
&:before {
|
||||
right: $body-cell-padding;
|
||||
border-radius: 0 999px 999px 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
||||
&:before {
|
||||
left: $body-cell-padding;
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
||||
&:before {
|
||||
border-radius: 999px 0 0 999px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
||||
&:before {
|
||||
border-radius: 0 999px 999px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-calendar-body-cell-content {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
td.mat-calendar-body-label {
|
||||
|
||||
+ td.mat-calendar-body-cell {
|
||||
|
||||
&.fuse-date-range {
|
||||
|
||||
&:before {
|
||||
border-radius: 999px 0 0 999px;
|
||||
}
|
||||
|
||||
&.fuse-date-range-start {
|
||||
|
||||
&.fuse-date-range-end {
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
|
||||
&.fuse-date-range-end {
|
||||
|
||||
&:before {
|
||||
left: $body-cell-padding;
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 100%;
|
||||
max-width: 196px;
|
||||
}
|
||||
}
|
||||
|
||||
.start {
|
||||
align-items: flex-start;
|
||||
margin-right: 20px;
|
||||
|
||||
.month {
|
||||
|
||||
.month-label {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.end {
|
||||
align-items: flex-end;
|
||||
margin-left: 20px;
|
||||
|
||||
.month {
|
||||
|
||||
.month-label {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,682 +0,0 @@
|
||||
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, OnDestroy, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
|
||||
import { Overlay } from '@angular/cdk/overlay';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
import { MatCalendarCellCssClasses, MatMonthView } from '@angular/material/datepicker';
|
||||
import { Subject } from 'rxjs';
|
||||
import * as moment from 'moment';
|
||||
import { Moment } from 'moment';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-date-range',
|
||||
templateUrl : './date-range.component.html',
|
||||
styleUrls : ['./date-range.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
exportAs : 'fuseDateRange',
|
||||
providers : [
|
||||
{
|
||||
provide : NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => FuseDateRangeComponent),
|
||||
multi : true
|
||||
}
|
||||
]
|
||||
})
|
||||
export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnDestroy
|
||||
{
|
||||
@Output() readonly rangeChanged: EventEmitter<{ start: string; end: string }> = new EventEmitter<{ start: string; end: string }>();
|
||||
@ViewChild('matMonthView1') private _matMonthView1: MatMonthView<any>;
|
||||
@ViewChild('matMonthView2') private _matMonthView2: MatMonthView<any>;
|
||||
@ViewChild('pickerPanelOrigin', {read: ElementRef}) private _pickerPanelOrigin: ElementRef;
|
||||
@ViewChild('pickerPanel') private _pickerPanel: TemplateRef<any>;
|
||||
@HostBinding('class.fuse-date-range') private _defaultClassNames = true;
|
||||
|
||||
activeDates: { month1: Moment | null; month2: Moment | null } = {
|
||||
month1: null,
|
||||
month2: null
|
||||
};
|
||||
setWhichDate: 'start' | 'end' = 'start';
|
||||
startTimeFormControl: FormControl;
|
||||
endTimeFormControl: FormControl;
|
||||
private _dateFormat: string;
|
||||
private _onChange: (value: any) => void;
|
||||
private _onTouched: (value: any) => void;
|
||||
private _programmaticChange!: boolean;
|
||||
private _range: { start: Moment | null; end: Moment | null } = {
|
||||
start: null,
|
||||
end : null
|
||||
};
|
||||
private _timeFormat: string;
|
||||
private _timeRange: boolean;
|
||||
private readonly _timeRegExp: RegExp = new RegExp('^(0[0-9]|1[0-9]|2[0-4]|[0-9]):([0-5][0-9])(A|(?:AM)|P|(?:PM))?$', 'i');
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _elementRef: ElementRef,
|
||||
private _overlay: Overlay,
|
||||
private _renderer2: Renderer2,
|
||||
private _viewContainerRef: ViewContainerRef
|
||||
)
|
||||
{
|
||||
this._onChange = (): void => {
|
||||
};
|
||||
this._onTouched = (): void => {
|
||||
};
|
||||
this.dateFormat = 'DD/MM/YYYY';
|
||||
this.timeFormat = '12';
|
||||
|
||||
// Initialize the component
|
||||
this._init();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Setter & getter for dateFormat input
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
@Input()
|
||||
set dateFormat(value: string)
|
||||
{
|
||||
// Return if the values are the same
|
||||
if ( this._dateFormat === value )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Store the value
|
||||
this._dateFormat = value;
|
||||
}
|
||||
|
||||
get dateFormat(): string
|
||||
{
|
||||
return this._dateFormat;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter & getter for timeFormat input
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
@Input()
|
||||
set timeFormat(value: string)
|
||||
{
|
||||
// Return if the values are the same
|
||||
if ( this._timeFormat === value )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Set format based on the time format input
|
||||
this._timeFormat = value === '12' ? 'hh:mmA' : 'HH:mm';
|
||||
}
|
||||
|
||||
get timeFormat(): string
|
||||
{
|
||||
return this._timeFormat;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter & getter for timeRange input
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
@Input()
|
||||
set timeRange(value: boolean)
|
||||
{
|
||||
// Return if the values are the same
|
||||
if ( this._timeRange === value )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Store the value
|
||||
this._timeRange = value;
|
||||
|
||||
// If the time range turned off...
|
||||
if ( !value )
|
||||
{
|
||||
this.range = {
|
||||
start: this._range.start.clone().startOf('day'),
|
||||
end : this._range.end.clone().endOf('day')
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
get timeRange(): boolean
|
||||
{
|
||||
return this._timeRange;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter & getter for range input
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
@Input()
|
||||
set range(value)
|
||||
{
|
||||
if ( !value )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if the value is an object and has 'start' and 'end' values
|
||||
if ( !value.start || !value.end )
|
||||
{
|
||||
console.error('Range input must have "start" and "end" properties!');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if we are setting an individual date or both of them
|
||||
const whichDate = value.whichDate || null;
|
||||
|
||||
// Get the start and end dates as moment
|
||||
const start = moment(value.start);
|
||||
const end = moment(value.end);
|
||||
|
||||
// If we are only setting the start date...
|
||||
if ( whichDate === 'start' )
|
||||
{
|
||||
// Set the start date
|
||||
this._range.start = start.clone();
|
||||
|
||||
// If the selected start date is after the end date...
|
||||
if ( this._range.start.isAfter(this._range.end) )
|
||||
{
|
||||
// Set the end date to the start date but keep the end date's time
|
||||
const endDate = start.clone().hours(this._range.end.hours()).minutes(this._range.end.minutes()).seconds(this._range.end.seconds());
|
||||
|
||||
// Test this new end date to see if it's ahead of the start date
|
||||
if ( this._range.start.isBefore(endDate) )
|
||||
{
|
||||
// If it's, set the new end date
|
||||
this._range.end = endDate;
|
||||
}
|
||||
else
|
||||
{
|
||||
// Otherwise, set the end date same as the start date
|
||||
this._range.end = start.clone();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If we are only setting the end date...
|
||||
if ( whichDate === 'end' )
|
||||
{
|
||||
// Set the end date
|
||||
this._range.end = end.clone();
|
||||
|
||||
// If the selected end date is before the start date...
|
||||
if ( this._range.start.isAfter(this._range.end) )
|
||||
{
|
||||
// Set the start date to the end date but keep the start date's time
|
||||
const startDate = end.clone().hours(this._range.start.hours()).minutes(this._range.start.minutes()).seconds(this._range.start.seconds());
|
||||
|
||||
// Test this new end date to see if it's ahead of the start date
|
||||
if ( this._range.end.isAfter(startDate) )
|
||||
{
|
||||
// If it's, set the new start date
|
||||
this._range.start = startDate;
|
||||
}
|
||||
else
|
||||
{
|
||||
// Otherwise, set the start date same as the end date
|
||||
this._range.start = end.clone();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If we are setting both dates...
|
||||
if ( !whichDate )
|
||||
{
|
||||
// Set the start date
|
||||
this._range.start = start.clone();
|
||||
|
||||
// If the start date is before the end date, set the end date as normal.
|
||||
// If the start date is after the end date, set the end date same as the start date.
|
||||
this._range.end = start.isBefore(end) ? end.clone() : start.clone();
|
||||
}
|
||||
|
||||
// Prepare another range object that holds the ISO formatted range dates
|
||||
const range = {
|
||||
start: this._range.start.clone().toISOString(),
|
||||
end : this._range.end.clone().toISOString()
|
||||
};
|
||||
|
||||
// Emit the range changed event with the range
|
||||
this.rangeChanged.emit(range);
|
||||
|
||||
// Update the model with the range if the change was not a programmatic change
|
||||
// Because programmatic changes trigger writeValue which triggers onChange and onTouched
|
||||
// internally causing them to trigger twice which breaks the form's pristine and touched
|
||||
// statuses.
|
||||
if ( !this._programmaticChange )
|
||||
{
|
||||
this._onTouched(range);
|
||||
this._onChange(range);
|
||||
}
|
||||
|
||||
// Set the active dates
|
||||
this.activeDates = {
|
||||
month1: this._range.start.clone(),
|
||||
month2: this._range.start.clone().add(1, 'month')
|
||||
};
|
||||
|
||||
// Set the time form controls
|
||||
this.startTimeFormControl.setValue(this._range.start.clone().format(this._timeFormat).toString());
|
||||
this.endTimeFormControl.setValue(this._range.end.clone().format(this._timeFormat).toString());
|
||||
|
||||
// Run ngAfterContentInit on month views to trigger
|
||||
// re-render on month views if they are available
|
||||
if ( this._matMonthView1 && this._matMonthView2 )
|
||||
{
|
||||
this._matMonthView1.ngAfterContentInit();
|
||||
this._matMonthView2.ngAfterContentInit();
|
||||
}
|
||||
|
||||
// Reset the programmatic change status
|
||||
this._programmaticChange = false;
|
||||
}
|
||||
|
||||
get range(): any
|
||||
{
|
||||
// Clone the range start and end
|
||||
const start = this._range.start.clone();
|
||||
const end = this._range.end.clone();
|
||||
|
||||
// Build and return the range object
|
||||
return {
|
||||
startDate: start.clone().format(this.dateFormat),
|
||||
startTime: this.timeRange ? start.clone().format(this.timeFormat) : null,
|
||||
endDate : end.clone().format(this.dateFormat),
|
||||
endTime : this.timeRange ? end.clone().format(this.timeFormat) : null
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Control Value Accessor
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Update the form model on change
|
||||
*
|
||||
* @param fn
|
||||
*/
|
||||
registerOnChange(fn: any): void
|
||||
{
|
||||
this._onChange = fn;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the form model on blur
|
||||
*
|
||||
* @param fn
|
||||
*/
|
||||
registerOnTouched(fn: any): void
|
||||
{
|
||||
this._onTouched = fn;
|
||||
}
|
||||
|
||||
/**
|
||||
* Write to view from model when the form model changes programmatically
|
||||
*
|
||||
* @param range
|
||||
*/
|
||||
writeValue(range: { start: string; end: string }): void
|
||||
{
|
||||
// Set this change as a programmatic one
|
||||
this._programmaticChange = true;
|
||||
|
||||
// Set the range
|
||||
this.range = range;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
// @ TODO: Workaround until "angular/issues/20007" resolved
|
||||
this.writeValue = (): void => {
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Open the picker panel
|
||||
*/
|
||||
openPickerPanel(): void
|
||||
{
|
||||
// Create the overlay
|
||||
const overlayRef = this._overlay.create({
|
||||
panelClass : 'fuse-date-range-panel',
|
||||
backdropClass : '',
|
||||
hasBackdrop : true,
|
||||
scrollStrategy : this._overlay.scrollStrategies.reposition(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._pickerPanelOrigin)
|
||||
.withPositions([
|
||||
{
|
||||
originX : 'start',
|
||||
originY : 'bottom',
|
||||
overlayX: 'start',
|
||||
overlayY: 'top',
|
||||
offsetY : 8
|
||||
},
|
||||
{
|
||||
originX : 'start',
|
||||
originY : 'top',
|
||||
overlayX: 'start',
|
||||
overlayY: 'bottom',
|
||||
offsetY : -8
|
||||
}
|
||||
])
|
||||
});
|
||||
|
||||
// Create a portal from the template
|
||||
const templatePortal = new TemplatePortal(this._pickerPanel, this._viewContainerRef);
|
||||
|
||||
// On backdrop click
|
||||
overlayRef.backdropClick().subscribe(() => {
|
||||
|
||||
// If template portal exists and attached...
|
||||
if ( templatePortal && templatePortal.isAttached )
|
||||
{
|
||||
// Detach it
|
||||
templatePortal.detach();
|
||||
}
|
||||
|
||||
// If overlay exists and attached...
|
||||
if ( overlayRef && overlayRef.hasAttached() )
|
||||
{
|
||||
// Detach it
|
||||
overlayRef.detach();
|
||||
overlayRef.dispose();
|
||||
}
|
||||
});
|
||||
|
||||
// Attach the portal to the overlay
|
||||
overlayRef.attach(templatePortal);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get month label
|
||||
*
|
||||
* @param month
|
||||
*/
|
||||
getMonthLabel(month: number): string
|
||||
{
|
||||
if ( month === 1 )
|
||||
{
|
||||
return this.activeDates.month1.clone().format('MMMM Y');
|
||||
}
|
||||
|
||||
return this.activeDates.month2.clone().format('MMMM Y');
|
||||
}
|
||||
|
||||
/**
|
||||
* Date class function to add/remove class names to calendar days
|
||||
*/
|
||||
dateClass(): any
|
||||
{
|
||||
return (date: Moment): MatCalendarCellCssClasses => {
|
||||
|
||||
// If the date is both start and end date...
|
||||
if ( date.isSame(this._range.start, 'day') && date.isSame(this._range.end, 'day') )
|
||||
{
|
||||
return ['fuse-date-range', 'fuse-date-range-start', 'fuse-date-range-end'];
|
||||
}
|
||||
|
||||
// If the date is the start date...
|
||||
if ( date.isSame(this._range.start, 'day') )
|
||||
{
|
||||
return ['fuse-date-range', 'fuse-date-range-start'];
|
||||
}
|
||||
|
||||
// If the date is the end date...
|
||||
if ( date.isSame(this._range.end, 'day') )
|
||||
{
|
||||
return ['fuse-date-range', 'fuse-date-range-end'];
|
||||
}
|
||||
|
||||
// If the date is in between start and end dates...
|
||||
if ( date.isBetween(this._range.start, this._range.end, 'day') )
|
||||
{
|
||||
return ['fuse-date-range', 'fuse-date-range-mid'];
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Date filter to enable/disable calendar days
|
||||
*/
|
||||
dateFilter(): any
|
||||
{
|
||||
// If we are selecting the end date, disable all the dates that comes before the start date
|
||||
return (date: Moment): boolean => !(this.setWhichDate === 'end' && date.isBefore(this._range.start, 'day'));
|
||||
}
|
||||
|
||||
/**
|
||||
* On selected date change
|
||||
*
|
||||
* @param date
|
||||
*/
|
||||
onSelectedDateChange(date: Moment): void
|
||||
{
|
||||
// Create a new range object
|
||||
const newRange = {
|
||||
start : this._range.start.clone().toISOString(),
|
||||
end : this._range.end.clone().toISOString(),
|
||||
whichDate: null
|
||||
};
|
||||
|
||||
// Replace either the start or the end date with the new one
|
||||
// depending on which date we are setting
|
||||
if ( this.setWhichDate === 'start' )
|
||||
{
|
||||
newRange.start = moment(newRange.start).year(date.year()).month(date.month()).date(date.date()).toISOString();
|
||||
}
|
||||
else
|
||||
{
|
||||
newRange.end = moment(newRange.end).year(date.year()).month(date.month()).date(date.date()).toISOString();
|
||||
}
|
||||
|
||||
// Append the which date to the new range object
|
||||
newRange.whichDate = this.setWhichDate;
|
||||
|
||||
// Switch which date to set on the next run
|
||||
this.setWhichDate = this.setWhichDate === 'start' ? 'end' : 'start';
|
||||
|
||||
// Set the range
|
||||
this.range = newRange;
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to previous month on both views
|
||||
*/
|
||||
prev(): void
|
||||
{
|
||||
this.activeDates.month1 = moment(this.activeDates.month1).subtract(1, 'month');
|
||||
this.activeDates.month2 = moment(this.activeDates.month2).subtract(1, 'month');
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to next month on both views
|
||||
*/
|
||||
next(): void
|
||||
{
|
||||
this.activeDates.month1 = moment(this.activeDates.month1).add(1, 'month');
|
||||
this.activeDates.month2 = moment(this.activeDates.month2).add(1, 'month');
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the start time
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
updateStartTime(event): void
|
||||
{
|
||||
// Parse the time
|
||||
const parsedTime = this._parseTime(event.target.value);
|
||||
|
||||
// Go back to the previous value if the form control is not valid
|
||||
if ( this.startTimeFormControl.invalid )
|
||||
{
|
||||
// Override the time
|
||||
const time = this._range.start.clone().format(this._timeFormat);
|
||||
|
||||
// Set the time
|
||||
this.startTimeFormControl.setValue(time);
|
||||
|
||||
// Do not update the range
|
||||
return;
|
||||
}
|
||||
|
||||
// Append the new time to the start date
|
||||
const startDate = this._range.start.clone().hours(parsedTime.hours()).minutes(parsedTime.minutes());
|
||||
|
||||
// If the new start date is after the current end date,
|
||||
// use the end date's time and set the start date again
|
||||
if ( startDate.isAfter(this._range.end) )
|
||||
{
|
||||
const endDateHours = this._range.end.hours();
|
||||
const endDateMinutes = this._range.end.minutes();
|
||||
|
||||
// Set the start date
|
||||
startDate.hours(endDateHours).minutes(endDateMinutes);
|
||||
}
|
||||
|
||||
// If everything is okay, set the new date
|
||||
this.range = {
|
||||
start : startDate.toISOString(),
|
||||
end : this._range.end.clone().toISOString(),
|
||||
whichDate: 'start'
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the end time
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
updateEndTime(event): void
|
||||
{
|
||||
// Parse the time
|
||||
const parsedTime = this._parseTime(event.target.value);
|
||||
|
||||
// Go back to the previous value if the form control is not valid
|
||||
if ( this.endTimeFormControl.invalid )
|
||||
{
|
||||
// Override the time
|
||||
const time = this._range.end.clone().format(this._timeFormat);
|
||||
|
||||
// Set the time
|
||||
this.endTimeFormControl.setValue(time);
|
||||
|
||||
// Do not update the range
|
||||
return;
|
||||
}
|
||||
|
||||
// Append the new time to the end date
|
||||
const endDate = this._range.end.clone().hours(parsedTime.hours()).minutes(parsedTime.minutes());
|
||||
|
||||
// If the new end date is before the current start date,
|
||||
// use the start date's time and set the end date again
|
||||
if ( endDate.isBefore(this._range.start) )
|
||||
{
|
||||
const startDateHours = this._range.start.hours();
|
||||
const startDateMinutes = this._range.start.minutes();
|
||||
|
||||
// Set the end date
|
||||
endDate.hours(startDateHours).minutes(startDateMinutes);
|
||||
}
|
||||
|
||||
// If everything is okay, set the new date
|
||||
this.range = {
|
||||
start : this._range.start.clone().toISOString(),
|
||||
end : endDate.toISOString(),
|
||||
whichDate: 'end'
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _init(): void
|
||||
{
|
||||
// Start and end time form controls
|
||||
this.startTimeFormControl = new FormControl('', [Validators.pattern(this._timeRegExp)]);
|
||||
this.endTimeFormControl = new FormControl('', [Validators.pattern(this._timeRegExp)]);
|
||||
|
||||
// Set the default range
|
||||
this._programmaticChange = true;
|
||||
this.range = {
|
||||
start: moment().startOf('day').toISOString(),
|
||||
end : moment().add(1, 'day').endOf('day').toISOString()
|
||||
};
|
||||
|
||||
// Set the default time range
|
||||
this._programmaticChange = true;
|
||||
this.timeRange = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse the time from the inputs
|
||||
*
|
||||
* @param value
|
||||
* @private
|
||||
*/
|
||||
private _parseTime(value: string): Moment
|
||||
{
|
||||
// Parse the time using the time regexp
|
||||
const timeArr = value.split(this._timeRegExp).filter(part => part !== '');
|
||||
|
||||
// Get the meridiem
|
||||
const meridiem = timeArr[2] || null;
|
||||
|
||||
// If meridiem exists...
|
||||
if ( meridiem )
|
||||
{
|
||||
// Create a moment using 12-hours format and return it
|
||||
return moment(value, 'hh:mmA').seconds(0);
|
||||
}
|
||||
|
||||
// If meridiem doesn't exist, create a moment using 24-hours format and return in
|
||||
return moment(value, 'HH:mm').seconds(0);
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMomentDateModule } from '@angular/material-moment-adapter';
|
||||
import { FuseDateRangeComponent } from '@fuse/components/date-range/date-range.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseDateRangeComponent
|
||||
],
|
||||
imports : [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
MatButtonModule,
|
||||
MatDatepickerModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatIconModule,
|
||||
MatMomentDateModule
|
||||
],
|
||||
exports : [
|
||||
FuseDateRangeComponent
|
||||
]
|
||||
})
|
||||
export class FuseDateRangeModule
|
||||
{
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from '@fuse/components/date-range/public-api';
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from '@fuse/components/date-range/date-range.component';
|
||||
export * from '@fuse/components/date-range/date-range.module';
|
||||
@@ -9,7 +9,7 @@ import { CommonModule } from '@angular/common';
|
||||
declarations: [
|
||||
FuseFullscreenComponent
|
||||
],
|
||||
imports: [
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatTooltipModule,
|
||||
|
||||
1
src/@fuse/components/loading-bar/index.ts
Normal file
1
src/@fuse/components/loading-bar/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from '@fuse/components/loading-bar/public-api';
|
||||
@@ -0,0 +1,5 @@
|
||||
<ng-container *ngIf="show">
|
||||
<mat-progress-bar
|
||||
[mode]="mode"
|
||||
[value]="progress"></mat-progress-bar>
|
||||
</ng-container>
|
||||
@@ -0,0 +1,7 @@
|
||||
fuse-loading-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
}
|
||||
82
src/@fuse/components/loading-bar/loading-bar.component.ts
Normal file
82
src/@fuse/components/loading-bar/loading-bar.component.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseLoadingService } from '@fuse/services/loading';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-loading-bar',
|
||||
templateUrl : './loading-bar.component.html',
|
||||
styleUrls : ['./loading-bar.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
exportAs : 'fuseLoadingBar'
|
||||
})
|
||||
export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
@Input() autoMode: boolean = true;
|
||||
mode: 'determinate' | 'indeterminate';
|
||||
progress: number = 0;
|
||||
show: boolean = false;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseLoadingService: FuseLoadingService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On changes
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Auto mode
|
||||
if ( 'autoMode' in changes )
|
||||
{
|
||||
// Set the auto mode in the service
|
||||
this._fuseLoadingService.setAutoMode(coerceBooleanProperty(changes.autoMode.currentValue));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to the service
|
||||
this._fuseLoadingService.mode$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((value) => {
|
||||
this.mode = value;
|
||||
});
|
||||
|
||||
this._fuseLoadingService.progress$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((value) => {
|
||||
this.progress = value;
|
||||
});
|
||||
|
||||
this._fuseLoadingService.show$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((value) => {
|
||||
this.show = value;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
20
src/@fuse/components/loading-bar/loading-bar.module.ts
Normal file
20
src/@fuse/components/loading-bar/loading-bar.module.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar/loading-bar.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseLoadingBarComponent
|
||||
],
|
||||
imports : [
|
||||
CommonModule,
|
||||
MatProgressBarModule
|
||||
],
|
||||
exports : [
|
||||
FuseLoadingBarComponent
|
||||
]
|
||||
})
|
||||
export class FuseLoadingBarModule
|
||||
{
|
||||
}
|
||||
2
src/@fuse/components/loading-bar/public-api.ts
Normal file
2
src/@fuse/components/loading-bar/public-api.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from '@fuse/components/loading-bar/loading-bar.component';
|
||||
export * from '@fuse/components/loading-bar/loading-bar.module';
|
||||
@@ -1,7 +1,6 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { IsActiveMatchOptions } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@@ -76,7 +75,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { MatMenu } from '@angular/material/menu';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@@ -64,7 +63,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@@ -56,7 +55,7 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@@ -56,7 +55,7 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
|
||||
this._fuseNavigationService.deregisterComponent(this.name);
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@@ -98,7 +97,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { IsActiveMatchOptions } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@@ -76,7 +75,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
@@ -176,7 +175,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@@ -56,7 +55,7 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@@ -62,7 +61,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@@ -56,7 +55,7 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
/* Variables */
|
||||
$fuse-vertical-navigation-compact-width: 112;
|
||||
$fuse-vertical-navigation-compact-width: 112px;
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
/* Compact appearance overrides */
|
||||
&.fuse-vertical-navigation-appearance-compact {
|
||||
width: #{$fuse-vertical-navigation-compact-width}px;
|
||||
min-width: #{$fuse-vertical-navigation-compact-width}px;
|
||||
max-width: #{$fuse-vertical-navigation-compact-width}px;
|
||||
width: $fuse-vertical-navigation-compact-width;
|
||||
min-width: $fuse-vertical-navigation-compact-width;
|
||||
max-width: $fuse-vertical-navigation-compact-width;
|
||||
|
||||
/* Left positioned */
|
||||
&.fuse-vertical-navigation-position-left {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-left: -#{$fuse-vertical-navigation-compact-width}px;
|
||||
margin-left: -$fuse-vertical-navigation-compact-width;
|
||||
}
|
||||
|
||||
/* Opened */
|
||||
@@ -28,7 +28,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-right: -#{$fuse-vertical-navigation-compact-width}px;
|
||||
margin-right: -$fuse-vertical-navigation-compact-width;
|
||||
}
|
||||
|
||||
/* Opened */
|
||||
@@ -39,7 +39,7 @@ fuse-vertical-navigation {
|
||||
/* Aside wrapper */
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: #{$fuse-vertical-navigation-compact-width}px;
|
||||
right: $fuse-vertical-navigation-compact-width;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -104,7 +104,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Aside wrapper */
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: #{$fuse-vertical-navigation-compact-width}px;
|
||||
left: $fuse-vertical-navigation-compact-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* Variables */
|
||||
$fuse-vertical-navigation-width: 280;
|
||||
$fuse-vertical-navigation-width: 280px;
|
||||
|
||||
fuse-vertical-navigation {
|
||||
position: sticky;
|
||||
@@ -7,9 +7,9 @@ fuse-vertical-navigation {
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
top: 0;
|
||||
width: #{$fuse-vertical-navigation-width}px;
|
||||
min-width: #{$fuse-vertical-navigation-width}px;
|
||||
max-width: #{$fuse-vertical-navigation-width}px;
|
||||
width: $fuse-vertical-navigation-width;
|
||||
min-width: $fuse-vertical-navigation-width;
|
||||
max-width: $fuse-vertical-navigation-width;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
@@ -45,7 +45,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-left: -#{$fuse-vertical-navigation-width}px;
|
||||
margin-left: -$fuse-vertical-navigation-width;
|
||||
|
||||
&.fuse-vertical-navigation-opened {
|
||||
margin-left: 0;
|
||||
@@ -73,7 +73,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-right: -#{$fuse-vertical-navigation-width}px;
|
||||
margin-right: -$fuse-vertical-navigation-width;
|
||||
|
||||
&.fuse-vertical-navigation-opened {
|
||||
margin-right: 0;
|
||||
@@ -170,8 +170,8 @@ fuse-vertical-navigation {
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: #{$fuse-vertical-navigation-width}px;
|
||||
width: #{$fuse-vertical-navigation-width}px;
|
||||
left: $fuse-vertical-navigation-width;
|
||||
width: $fuse-vertical-navigation-width;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
overflow-x: hidden;
|
||||
@@ -196,7 +196,7 @@ fuse-vertical-navigation {
|
||||
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: #{$fuse-vertical-navigation-width}px;
|
||||
right: $fuse-vertical-navigation-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* Variables */
|
||||
$fuse-vertical-navigation-width: 280;
|
||||
$fuse-vertical-navigation-dense-width: 80;
|
||||
$fuse-vertical-navigation-width: 280px;
|
||||
$fuse-vertical-navigation-dense-width: 80px;
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
@@ -8,16 +8,16 @@ fuse-vertical-navigation {
|
||||
&.fuse-vertical-navigation-appearance-dense {
|
||||
|
||||
&:not(.fuse-vertical-navigation-mode-over) {
|
||||
width: #{$fuse-vertical-navigation-dense-width}px;
|
||||
min-width: #{$fuse-vertical-navigation-dense-width}px;
|
||||
max-width: #{$fuse-vertical-navigation-dense-width}px;
|
||||
width: $fuse-vertical-navigation-dense-width;
|
||||
min-width: $fuse-vertical-navigation-dense-width;
|
||||
max-width: $fuse-vertical-navigation-dense-width;
|
||||
|
||||
/* Left positioned */
|
||||
&.fuse-vertical-navigation-position-left {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-left: -#{$fuse-vertical-navigation-dense-width}px;
|
||||
margin-left: -$fuse-vertical-navigation-dense-width;
|
||||
}
|
||||
|
||||
/* Opened */
|
||||
@@ -31,7 +31,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-right: -#{$fuse-vertical-navigation-dense-width}px;
|
||||
margin-right: -$fuse-vertical-navigation-dense-width;
|
||||
}
|
||||
|
||||
/* Opened */
|
||||
@@ -42,14 +42,14 @@ fuse-vertical-navigation {
|
||||
/* Aside wrapper */
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: #{$fuse-vertical-navigation-dense-width}px;
|
||||
right: $fuse-vertical-navigation-dense-width;
|
||||
}
|
||||
|
||||
&.fuse-vertical-navigation-hover {
|
||||
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: #{$fuse-vertical-navigation-width}px;
|
||||
right: $fuse-vertical-navigation-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -69,9 +69,9 @@ fuse-vertical-navigation {
|
||||
.fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
width: #{$fuse-vertical-navigation-width}px - 24px;
|
||||
min-width: #{$fuse-vertical-navigation-width}px - 24px;
|
||||
max-width: #{$fuse-vertical-navigation-width}px - 24px;
|
||||
width: $fuse-vertical-navigation-dense-width - 24px;
|
||||
min-width: $fuse-vertical-navigation-dense-width - 24px;
|
||||
max-width: $fuse-vertical-navigation-dense-width - 24px;
|
||||
|
||||
.fuse-vertical-navigation-item-arrow,
|
||||
.fuse-vertical-navigation-item-badge,
|
||||
@@ -142,20 +142,23 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Aside wrapper */
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: #{$fuse-vertical-navigation-dense-width}px;
|
||||
left: $fuse-vertical-navigation-dense-width;
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
&.fuse-vertical-navigation-hover {
|
||||
|
||||
.fuse-vertical-navigation-wrapper {
|
||||
width: #{$fuse-vertical-navigation-width}px;
|
||||
width: $fuse-vertical-navigation-width;
|
||||
|
||||
.fuse-vertical-navigation-content {
|
||||
|
||||
.fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
width: $fuse-vertical-navigation-width - 24px;
|
||||
min-width: $fuse-vertical-navigation-width - 24px;
|
||||
max-width: $fuse-vertical-navigation-width - 24px;
|
||||
|
||||
.fuse-vertical-navigation-item-arrow,
|
||||
.fuse-vertical-navigation-item-badge,
|
||||
@@ -170,7 +173,7 @@ fuse-vertical-navigation {
|
||||
}
|
||||
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: #{$fuse-vertical-navigation-width}px;
|
||||
left: $fuse-vertical-navigation-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
/* Variables */
|
||||
$fuse-vertical-navigation-thin-width: 80;
|
||||
$fuse-vertical-navigation-thin-width: 80px;
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
/* Thin appearance overrides */
|
||||
&.fuse-vertical-navigation-appearance-thin {
|
||||
width: #{$fuse-vertical-navigation-thin-width}px;
|
||||
min-width: #{$fuse-vertical-navigation-thin-width}px;
|
||||
max-width: #{$fuse-vertical-navigation-thin-width}px;
|
||||
width: $fuse-vertical-navigation-thin-width;
|
||||
min-width: $fuse-vertical-navigation-thin-width;
|
||||
max-width: $fuse-vertical-navigation-thin-width;
|
||||
|
||||
/* Left positioned */
|
||||
&.fuse-vertical-navigation-position-left {
|
||||
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-left: -#{$fuse-vertical-navigation-thin-width}px;
|
||||
margin-left: -$fuse-vertical-navigation-thin-width;
|
||||
}
|
||||
|
||||
&.fuse-vertical-navigation-opened {
|
||||
@@ -25,7 +25,7 @@ fuse-vertical-navigation {
|
||||
&.fuse-vertical-navigation-position-right {
|
||||
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-right: -#{$fuse-vertical-navigation-thin-width}px;
|
||||
margin-right: -$fuse-vertical-navigation-thin-width;
|
||||
}
|
||||
|
||||
&.fuse-vertical-navigation-opened {
|
||||
@@ -34,7 +34,7 @@ fuse-vertical-navigation {
|
||||
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: #{$fuse-vertical-navigation-thin-width}px;
|
||||
right: $fuse-vertical-navigation-thin-width;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -91,7 +91,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Aside wrapper */
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: #{$fuse-vertical-navigation-thin-width}px;
|
||||
left: $fuse-vertical-navigation-thin-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,8 +2,7 @@ import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, E
|
||||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
|
||||
import { merge, ReplaySubject, Subject, Subscription } from 'rxjs';
|
||||
import { delay, filter, takeUntil } from 'rxjs/operators';
|
||||
import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
@@ -382,7 +381,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||
this._fuseNavigationService.deregisterComponent(this.name);
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseScrollReset]',
|
||||
@@ -47,7 +46,7 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,8 +2,7 @@ import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChang
|
||||
import { Router } from '@angular/router';
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { Platform } from '@angular/cdk/platform';
|
||||
import { fromEvent, Subject } from 'rxjs';
|
||||
import { debounceTime, takeUntil } from 'rxjs/operators';
|
||||
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import { merge } from 'lodash-es';
|
||||
import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
|
||||
@@ -138,7 +137,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
||||
this._destroy();
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -2,17 +2,17 @@ import { NgModule, Optional, SkipSelf } from '@angular/core';
|
||||
import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
|
||||
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
||||
import { FuseConfirmationModule } from '@fuse/services/confirmation';
|
||||
import { FuseLoadingModule } from '@fuse/services/loading';
|
||||
import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
|
||||
import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
|
||||
import { FuseTailwindConfigModule } from '@fuse/services/tailwind/tailwind.module';
|
||||
import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
FuseConfirmationModule,
|
||||
FuseLoadingModule,
|
||||
FuseMediaWatcherModule,
|
||||
FuseSplashScreenModule,
|
||||
FuseTailwindConfigModule,
|
||||
FuseUtilsModule
|
||||
],
|
||||
providers: [
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Inject, Injectable } from '@angular/core';
|
||||
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
|
||||
import { Observable, of, throwError } from 'rxjs';
|
||||
import { delay, switchMap } from 'rxjs/operators';
|
||||
import { delay, Observable, of, switchMap, throwError } from 'rxjs';
|
||||
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
|
||||
import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { HttpRequest } from '@angular/common/http';
|
||||
import { Observable, of, throwError } from 'rxjs';
|
||||
import { take } from 'rxjs/operators';
|
||||
import { Observable, of, take, throwError } from 'rxjs';
|
||||
import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
|
||||
|
||||
export class FuseMockApiHandler
|
||||
|
||||
@@ -9,11 +9,14 @@ import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
|
||||
export class FuseMockApiService
|
||||
{
|
||||
private _handlers: { [key: string]: Map<string, FuseMockApiHandler> } = {
|
||||
'delete': new Map<string, FuseMockApiHandler>(),
|
||||
'get' : new Map<string, FuseMockApiHandler>(),
|
||||
'patch' : new Map<string, FuseMockApiHandler>(),
|
||||
'post' : new Map<string, FuseMockApiHandler>(),
|
||||
'put' : new Map<string, FuseMockApiHandler>()
|
||||
'get' : new Map<string, FuseMockApiHandler>(),
|
||||
'post' : new Map<string, FuseMockApiHandler>(),
|
||||
'patch' : new Map<string, FuseMockApiHandler>(),
|
||||
'delete' : new Map<string, FuseMockApiHandler>(),
|
||||
'put' : new Map<string, FuseMockApiHandler>(),
|
||||
'head' : new Map<string, FuseMockApiHandler>(),
|
||||
'jsonp' : new Map<string, FuseMockApiHandler>(),
|
||||
'options': new Map<string, FuseMockApiHandler>()
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -86,18 +89,7 @@ export class FuseMockApiService
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a DELETE request handler
|
||||
*
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @param delay - Delay of the response in milliseconds
|
||||
*/
|
||||
onDelete(url: string, delay?: number): FuseMockApiHandler
|
||||
{
|
||||
return this._registerHandler('delete', url, delay);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a GET request handler
|
||||
* Register GET request handler
|
||||
*
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @param delay - Delay of the response in milliseconds
|
||||
@@ -108,18 +100,7 @@ export class FuseMockApiService
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a PATCH request handler
|
||||
*
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @param delay - Delay of the response in milliseconds
|
||||
*/
|
||||
onPatch(url: string, delay?: number): FuseMockApiHandler
|
||||
{
|
||||
return this._registerHandler('patch', url, delay);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a POST request handler
|
||||
* Register POST request handler
|
||||
*
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @param delay - Delay of the response in milliseconds
|
||||
@@ -130,7 +111,29 @@ export class FuseMockApiService
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a PUT request handler
|
||||
* Register PATCH request handler
|
||||
*
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @param delay - Delay of the response in milliseconds
|
||||
*/
|
||||
onPatch(url: string, delay?: number): FuseMockApiHandler
|
||||
{
|
||||
return this._registerHandler('patch', url, delay);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register DELETE request handler
|
||||
*
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @param delay - Delay of the response in milliseconds
|
||||
*/
|
||||
onDelete(url: string, delay?: number): FuseMockApiHandler
|
||||
{
|
||||
return this._registerHandler('delete', url, delay);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register PUT request handler
|
||||
*
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @param delay - Delay of the response in milliseconds
|
||||
@@ -140,6 +143,39 @@ export class FuseMockApiService
|
||||
return this._registerHandler('put', url, delay);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register HEAD request handler
|
||||
*
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @param delay - Delay of the response in milliseconds
|
||||
*/
|
||||
onHead(url: string, delay?: number): FuseMockApiHandler
|
||||
{
|
||||
return this._registerHandler('head', url, delay);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register JSONP request handler
|
||||
*
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @param delay - Delay of the response in milliseconds
|
||||
*/
|
||||
onJsonp(url: string, delay?: number): FuseMockApiHandler
|
||||
{
|
||||
return this._registerHandler('jsonp', url, delay);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register OPTIONS request handler
|
||||
*
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @param delay - Delay of the response in milliseconds
|
||||
*/
|
||||
onOptions(url: string, delay?: number): FuseMockApiHandler
|
||||
{
|
||||
return this._registerHandler('options', url, delay);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
@@ -8,6 +8,9 @@ export type FuseMockApiReplyCallback =
|
||||
export type FuseMockApiMethods =
|
||||
| 'get'
|
||||
| 'post'
|
||||
| 'put'
|
||||
| 'patch'
|
||||
| 'delete';
|
||||
| 'delete'
|
||||
| 'put'
|
||||
| 'head'
|
||||
| 'jsonp'
|
||||
| 'options';
|
||||
|
||||
@@ -10,7 +10,7 @@ import { CommonModule } from '@angular/common';
|
||||
declarations: [
|
||||
FuseConfirmationDialogComponent
|
||||
],
|
||||
imports: [
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatDialogModule,
|
||||
MatIconModule,
|
||||
|
||||
1
src/@fuse/services/loading/index.ts
Normal file
1
src/@fuse/services/loading/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from '@fuse/services/loading/public-api';
|
||||
48
src/@fuse/services/loading/loading.interceptor.ts
Normal file
48
src/@fuse/services/loading/loading.interceptor.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
|
||||
import { finalize, Observable } from 'rxjs';
|
||||
import { FuseLoadingService } from '@fuse/services/loading/loading.service';
|
||||
|
||||
@Injectable()
|
||||
export class FuseLoadingInterceptor implements HttpInterceptor
|
||||
{
|
||||
handleRequestsAutomatically: boolean;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _fuseLoadingService: FuseLoadingService
|
||||
)
|
||||
{
|
||||
// Subscribe to the auto
|
||||
this._fuseLoadingService.auto$
|
||||
.subscribe((value) => {
|
||||
this.handleRequestsAutomatically = value;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Intercept
|
||||
*
|
||||
* @param req
|
||||
* @param next
|
||||
*/
|
||||
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
|
||||
{
|
||||
// If the Auto mode is turned off, do nothing
|
||||
if ( !this.handleRequestsAutomatically )
|
||||
{
|
||||
return next.handle(req);
|
||||
}
|
||||
|
||||
// Set the loading status to true
|
||||
this._fuseLoadingService._setLoadingStatus(true, req.url);
|
||||
|
||||
return next.handle(req).pipe(
|
||||
finalize(() => {
|
||||
// Set the status to false if there are any errors or the request is completed
|
||||
this._fuseLoadingService._setLoadingStatus(false, req.url);
|
||||
}));
|
||||
}
|
||||
}
|
||||
16
src/@fuse/services/loading/loading.module.ts
Normal file
16
src/@fuse/services/loading/loading.module.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor';
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
{
|
||||
provide : HTTP_INTERCEPTORS,
|
||||
useClass: FuseLoadingInterceptor,
|
||||
multi : true
|
||||
}
|
||||
]
|
||||
})
|
||||
export class FuseLoadingModule
|
||||
{
|
||||
}
|
||||
146
src/@fuse/services/loading/loading.service.ts
Normal file
146
src/@fuse/services/loading/loading.service.ts
Normal file
@@ -0,0 +1,146 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseLoadingService
|
||||
{
|
||||
private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
|
||||
private _mode$: BehaviorSubject<'determinate' | 'indeterminate'> = new BehaviorSubject<'determinate' | 'indeterminate'>('indeterminate');
|
||||
private _progress$: BehaviorSubject<number | null> = new BehaviorSubject<number | null>(0);
|
||||
private _show$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
private _urlMap: Map<string, boolean> = new Map<string, boolean>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for auto mode
|
||||
*/
|
||||
get auto$(): Observable<boolean>
|
||||
{
|
||||
return this._auto$.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for mode
|
||||
*/
|
||||
get mode$(): Observable<'determinate' | 'indeterminate'>
|
||||
{
|
||||
return this._mode$.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for progress
|
||||
*/
|
||||
get progress$(): Observable<number>
|
||||
{
|
||||
return this._progress$.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for show
|
||||
*/
|
||||
get show$(): Observable<boolean>
|
||||
{
|
||||
return this._show$.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Show the loading bar
|
||||
*/
|
||||
show(): void
|
||||
{
|
||||
this._show$.next(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the loading bar
|
||||
*/
|
||||
hide(): void
|
||||
{
|
||||
this._show$.next(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the auto mode
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
setAutoMode(value: boolean): void
|
||||
{
|
||||
this._auto$.next(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the mode
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
setMode(value: 'determinate' | 'indeterminate'): void
|
||||
{
|
||||
this._mode$.next(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the progress of the bar manually
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
setProgress(value: number): void
|
||||
{
|
||||
if ( value < 0 || value > 100 )
|
||||
{
|
||||
console.error('Progress value must be between 0 and 100!');
|
||||
return;
|
||||
}
|
||||
|
||||
this._progress$.next(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the loading status on the given url
|
||||
*
|
||||
* @param status
|
||||
* @param url
|
||||
*/
|
||||
_setLoadingStatus(status: boolean, url: string): void
|
||||
{
|
||||
// Return if the url was not provided
|
||||
if ( !url )
|
||||
{
|
||||
console.error('The request URL must be provided!');
|
||||
return;
|
||||
}
|
||||
|
||||
if ( status === true )
|
||||
{
|
||||
this._urlMap.set(url, status);
|
||||
this._show$.next(true);
|
||||
}
|
||||
else if ( status === false && this._urlMap.has(url) )
|
||||
{
|
||||
this._urlMap.delete(url);
|
||||
}
|
||||
|
||||
// Only set the status to 'false' if all outgoing requests are completed
|
||||
if ( this._urlMap.size === 0 )
|
||||
{
|
||||
this._show$.next(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
2
src/@fuse/services/loading/public-api.ts
Normal file
2
src/@fuse/services/loading/public-api.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from '@fuse/services/loading/loading.service';
|
||||
export * from '@fuse/services/loading/loading.module';
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { map, switchMap } from 'rxjs/operators';
|
||||
import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
|
||||
import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
|
||||
import { fromPairs } from 'lodash-es';
|
||||
import { FuseConfigService } from '@fuse/services/config';
|
||||
|
||||
@Injectable()
|
||||
export class FuseMediaWatcherService
|
||||
@@ -14,11 +14,12 @@ export class FuseMediaWatcherService
|
||||
*/
|
||||
constructor(
|
||||
private _breakpointObserver: BreakpointObserver,
|
||||
private _fuseTailwindConfigService: FuseTailwindService
|
||||
private _fuseConfigService: FuseConfigService
|
||||
)
|
||||
{
|
||||
this._fuseTailwindConfigService.tailwindConfig$.pipe(
|
||||
switchMap(config => this._breakpointObserver.observe(Object.values(config.breakpoints)).pipe(
|
||||
this._fuseConfigService.config$.pipe(
|
||||
map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
|
||||
switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
|
||||
map((state) => {
|
||||
|
||||
// Prepare the observable values and set their defaults
|
||||
@@ -30,7 +31,7 @@ export class FuseMediaWatcherService
|
||||
for ( const [query] of matchingBreakpoints )
|
||||
{
|
||||
// Find the alias of the matching query
|
||||
const matchingAlias = Object.entries(config.breakpoints).find(([alias, q]) => q === query)[0];
|
||||
const matchingAlias = Object.entries(screens).find(([alias, q]) => q === query)[0];
|
||||
|
||||
// Add the matching query to the observable values
|
||||
if ( matchingAlias )
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Inject, Injectable } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { filter, take } from 'rxjs/operators';
|
||||
import { filter, take } from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
export class FuseSplashScreenService
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export * from '@fuse/services/tailwind/public-api';
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from '@fuse/services/tailwind/tailwind.module';
|
||||
export * from '@fuse/services/tailwind/tailwind.service';
|
||||
@@ -1,17 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
FuseTailwindService
|
||||
]
|
||||
})
|
||||
export class FuseTailwindConfigModule
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseTailwindConfigService: FuseTailwindService)
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { fromPairs, map } from 'lodash-es';
|
||||
import * as extractedTailwindConfigStyle from '@fuse/styles/core/tailwind-config.scss';
|
||||
|
||||
@Injectable()
|
||||
export class FuseTailwindService
|
||||
{
|
||||
private _tailwindConfig: ReplaySubject<any> = new ReplaySubject<any>(1);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
// Prepare the config object
|
||||
const config: any = {};
|
||||
|
||||
// Extract the style from the class
|
||||
const regexpForClass = /\.fuse-tailwind-extracted-config\s\{([\s\S]*)\}/g;
|
||||
const style = regexpForClass.exec(extractedTailwindConfigStyle.default)[1].trim();
|
||||
|
||||
// Extract the rules
|
||||
const regexp = /(--[\s\S]*?):'([\s\S]*?)';/g;
|
||||
let rules = regexp.exec(style);
|
||||
|
||||
// Add to the config
|
||||
while ( rules !== null )
|
||||
{
|
||||
const configGroup = /--([\s\S]*?)-/g.exec(rules[1])[1];
|
||||
if ( !config[configGroup] )
|
||||
{
|
||||
config[configGroup] = {};
|
||||
}
|
||||
|
||||
config[configGroup][rules[1].replace(/(--[\s\S]*?-)/g, '')] = rules[2];
|
||||
rules = regexp.exec(style);
|
||||
}
|
||||
|
||||
// Parse the themes objects
|
||||
config.themes = fromPairs(map(config.themes, (value, key) => [key, JSON.parse(value)]));
|
||||
|
||||
// Execute the observable with the config
|
||||
this._tailwindConfig.next(config);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for _tailwindConfig
|
||||
*/
|
||||
get tailwindConfig$(): Observable<any>
|
||||
{
|
||||
return this._tailwindConfig.asObservable();
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
/* @ Any configuration we need from Tailwind's config file will be extracted here so we can import this
|
||||
/* @ file from "config.ts" to access the extracted configuration from TypeScript
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
@variants fuse-tailwind-extracted-config {
|
||||
}
|
||||
@@ -1,13 +1,9 @@
|
||||
/* 1. Core */
|
||||
@import 'core/tailwind-config';
|
||||
|
||||
/* 2. Components */
|
||||
/* 1. Components */
|
||||
@import 'components/example-viewer';
|
||||
@import 'components/input';
|
||||
|
||||
/* 3. Overrides */
|
||||
/* 2. Overrides */
|
||||
@import 'overrides/angular-material';
|
||||
@import 'overrides/fullcalendar';
|
||||
@import 'overrides/highlightjs';
|
||||
@import 'overrides/perfect-scrollbar';
|
||||
@import 'overrides/quill';
|
||||
|
||||
@@ -434,7 +434,7 @@
|
||||
|
||||
/* Border color */
|
||||
.mat-form-field-flex {
|
||||
@apply border-warn #{'!important'};
|
||||
@apply border-warn dark:border-warn #{'!important'};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -446,7 +446,7 @@
|
||||
|
||||
/* Background color */
|
||||
.mat-form-field-flex {
|
||||
@apply bg-card #{'!important'};
|
||||
@apply bg-card dark:bg-card #{'!important'};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -458,7 +458,7 @@
|
||||
|
||||
/* Border color */
|
||||
.mat-form-field-flex {
|
||||
@apply border-primary #{'!important'};
|
||||
@apply border-primary dark:border-primary #{'!important'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,680 +0,0 @@
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
/* @ FullCalendar overrides
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
.fc {
|
||||
|
||||
.fc-view-container {
|
||||
|
||||
/* Day Grid - Month view */
|
||||
.fc-view.fc-dayGridMonth-view {
|
||||
|
||||
.fc-head {
|
||||
|
||||
> tr > .fc-head-container {
|
||||
border: none;
|
||||
|
||||
.fc-row {
|
||||
|
||||
.fc-day-header {
|
||||
border-color: var(--fuse-divider);
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
@apply text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-body {
|
||||
|
||||
> tr > .fc-widget-content {
|
||||
border: none;
|
||||
|
||||
.fc-day-grid {
|
||||
|
||||
.fc-week {
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-day {
|
||||
border-color: var(--fuse-divider);
|
||||
|
||||
&.fc-today {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content-skeleton {
|
||||
|
||||
.fc-day-top {
|
||||
text-align: center;
|
||||
|
||||
&.fc-other-month {
|
||||
opacity: 1;
|
||||
|
||||
.fc-day-number {
|
||||
@apply text-hint;
|
||||
}
|
||||
}
|
||||
|
||||
&.fc-today {
|
||||
|
||||
.fc-day-number {
|
||||
@apply bg-primary text-on-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-day-number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 21px;
|
||||
margin: 4px 0;
|
||||
font-size: 12px;
|
||||
border-radius: 50%;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event-container {
|
||||
|
||||
.fc-day-grid-event {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
margin: 0 6px 4px 6px;
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
@screen sm {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-more {
|
||||
padding: 0 3px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
@apply text-secondary;
|
||||
|
||||
@screen sm {
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-highlight-skeleton {
|
||||
|
||||
.fc-highlight {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-popover {
|
||||
@apply bg-card;
|
||||
|
||||
&.fc-more-popover {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@apply shadow-2xl;
|
||||
|
||||
.fc-header {
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
max-height: 32px;
|
||||
padding: 0 8px;
|
||||
@apply bg-hover;
|
||||
|
||||
.fc-title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-body {
|
||||
max-height: 160px;
|
||||
overflow: hidden auto;
|
||||
|
||||
.fc-event-container {
|
||||
padding: 8px;
|
||||
|
||||
.fc-day-grid-event {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
margin: 0 0 6px 0;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Time Grid - Week view */
|
||||
.fc-view.fc-timeGridWeek-view {
|
||||
|
||||
.fc-head {
|
||||
|
||||
> tr > .fc-head-container {
|
||||
border: none;
|
||||
|
||||
.fc-row {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
border-color: var(--fuse-divider);
|
||||
}
|
||||
|
||||
.fc-day-header {
|
||||
border-color: var(--fuse-divider);
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
@apply text-secondary;
|
||||
|
||||
&.fc-weekday {
|
||||
padding-top: 16px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.055em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.fc-date {
|
||||
padding-bottom: 12px;
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-body {
|
||||
|
||||
> tr > .fc-widget-content {
|
||||
border: none;
|
||||
|
||||
.fc-day-grid {
|
||||
|
||||
.fc-row {
|
||||
min-height: 0;
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
border-color: var(--fuse-divider);
|
||||
}
|
||||
|
||||
.fc-day {
|
||||
border-color: var(--fuse-divider);
|
||||
|
||||
&.fc-today {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content-skeleton {
|
||||
padding-bottom: 0;
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
.fc-event-container {
|
||||
|
||||
.fc-day-grid-event {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
margin: 0 6px 6px 6px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-divider {
|
||||
border: none;
|
||||
background: var(--fuse-divider);
|
||||
}
|
||||
|
||||
.fc-time-grid {
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-axis {
|
||||
border: none;
|
||||
width: 48px !important;
|
||||
|
||||
+ .fc-day {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-day {
|
||||
border-color: var(--fuse-divider);
|
||||
|
||||
&.fc-today {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-slats {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-time {
|
||||
border-color: var(--fuse-divider);
|
||||
}
|
||||
|
||||
.fc-widget-content {
|
||||
border-color: var(--fuse-divider);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content-skeleton {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
.fc-event-container {
|
||||
margin: 0 12px 0 0;
|
||||
|
||||
.fc-time-grid-event {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
.fc-time,
|
||||
.fc-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Time Grid - Day view */
|
||||
.fc-view.fc-timeGridDay-view {
|
||||
|
||||
.fc-head {
|
||||
|
||||
> tr > .fc-head-container {
|
||||
border: none;
|
||||
|
||||
.fc-row {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
border-color: var(--fuse-divider);
|
||||
}
|
||||
|
||||
.fc-day-header {
|
||||
border-color: var(--fuse-divider);
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
@apply text-secondary;
|
||||
|
||||
&.fc-weekday {
|
||||
padding-top: 16px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.055em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.fc-date {
|
||||
padding-bottom: 12px;
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-body {
|
||||
|
||||
> tr > .fc-widget-content {
|
||||
border: none;
|
||||
|
||||
.fc-day-grid {
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-axis {
|
||||
border-color: var(--fuse-divider);
|
||||
}
|
||||
|
||||
.fc-day {
|
||||
border-color: var(--fuse-divider);
|
||||
|
||||
&.fc-today {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-row {
|
||||
min-height: 0;
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content-skeleton {
|
||||
padding-bottom: 0;
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
.fc-event-container {
|
||||
|
||||
.fc-day-grid-event {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
margin: 0 6px 6px 6px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-divider {
|
||||
border: none;
|
||||
border-color: var(--fuse-divider);
|
||||
}
|
||||
|
||||
.fc-time-grid {
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-day {
|
||||
border-color: var(--fuse-divider);
|
||||
|
||||
&.fc-today {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-axis {
|
||||
border: none;
|
||||
width: 48px !important;
|
||||
|
||||
+ .fc-day {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-slats {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-time {
|
||||
border-color: var(--fuse-divider);
|
||||
}
|
||||
|
||||
.fc-widget-content {
|
||||
border-color: var(--fuse-divider);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content-skeleton {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
.fc-event-container {
|
||||
margin: 0 12px 0 0;
|
||||
|
||||
.fc-time-grid-event {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
.fc-time,
|
||||
.fc-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* List - Year view */
|
||||
.fc-view.fc-listYear-view {
|
||||
border: none;
|
||||
|
||||
.fc-list-table {
|
||||
|
||||
.fc-list-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-list-item {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
td {
|
||||
@apply bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
padding: 0 8px;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: var(--fuse-divider);
|
||||
|
||||
&.fc-list-item-date {
|
||||
order: 1;
|
||||
padding-left: 16px;
|
||||
width: 100px;
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
|
||||
@screen sm {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
span {
|
||||
|
||||
&:first-child {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-right: 2px;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
max-width: 32px;
|
||||
font-size: 18px;
|
||||
|
||||
@screen sm {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
+ span {
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.055em;
|
||||
text-transform: uppercase;
|
||||
@apply text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fc-list-item-time {
|
||||
flex: 0 0 auto;
|
||||
order: 3;
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
|
||||
@screen sm {
|
||||
width: 160px;
|
||||
min-width: 160px;
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
&.fc-list-item-marker {
|
||||
flex: 0 0 auto;
|
||||
order: 2;
|
||||
|
||||
.fc-event-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.fc-list-item-title {
|
||||
flex: 1 1 auto;
|
||||
order: 4;
|
||||
padding-right: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Day grid event - Dragging */
|
||||
.fc-day-grid-event {
|
||||
|
||||
&.fc-dragging,
|
||||
&.fc-resizing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
margin: 0 6px 4px 6px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
@use "sass:map";
|
||||
|
||||
/* Include the core Angular Material styles */
|
||||
@@ -72,38 +72,38 @@ body .light {
|
||||
is-dark: map.get(map.get($base-light-theme, color), is-dark),
|
||||
foreground: (
|
||||
base: #000000,
|
||||
divider: #E2E8F0, /* blueGray.200 */
|
||||
dividers: #E2E8F0, /* blueGray.200 */
|
||||
disabled: #94A3B8, /* blueGray.400 */
|
||||
disabled-button: #94A3B8, /* blueGray.400 */
|
||||
disabled-text: #94A3B8, /* blueGray.400 */
|
||||
divider: #E2E8F0, /* slate.200 */
|
||||
dividers: #E2E8F0, /* slate.200 */
|
||||
disabled: #94A3B8, /* slate.400 */
|
||||
disabled-button: #94A3B8, /* slate.400 */
|
||||
disabled-text: #94A3B8, /* slate.400 */
|
||||
elevation: #000000,
|
||||
hint-text: #94A3B8, /* blueGray.400 */
|
||||
secondary-text: #64748B, /* blueGray.500 */
|
||||
icon: #64748B, /* blueGray.500 */
|
||||
icons: #64748B, /* blueGray.500 */
|
||||
mat-icon: #64748B, /* blueGray.500 */
|
||||
text: #1E293B, /* blueGray.800 */
|
||||
slider-min: #1E293B, /* blueGray.800 */
|
||||
slider-off: #CBD5E1, /* blueGray.300 */
|
||||
slider-off-active: #94A3B8 /* blueGray.400 */
|
||||
hint-text: #94A3B8, /* slate.400 */
|
||||
secondary-text: #64748B, /* slate.500 */
|
||||
icon: #64748B, /* slate.500 */
|
||||
icons: #64748B, /* slate.500 */
|
||||
mat-icon: #64748B, /* slate.500 */
|
||||
text: #1E293B, /* slate.800 */
|
||||
slider-min: #1E293B, /* slate.800 */
|
||||
slider-off: #CBD5E1, /* slate.300 */
|
||||
slider-off-active: #94A3B8 /* slate.400 */
|
||||
),
|
||||
background: (
|
||||
status-bar: #CBD5E1, /* blueGray.300 */
|
||||
status-bar: #CBD5E1, /* slate.300 */
|
||||
app-bar: #FFFFFF,
|
||||
background: #F1F5F9, /* blueGray.100 */
|
||||
hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */
|
||||
background: #F1F5F9, /* slate.100 */
|
||||
hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
|
||||
card: #FFFFFF,
|
||||
dialog: #FFFFFF,
|
||||
disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */
|
||||
disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
|
||||
raised-button: #FFFFFF,
|
||||
focused-button: #64748B, /* blueGray.500 */
|
||||
selected-button: #E2E8F0, /* blueGray.200 */
|
||||
selected-disabled-button: #E2E8F0, /* blueGray.200 */
|
||||
disabled-button-toggle: #CBD5E1, /* blueGray.300 */
|
||||
unselected-chip: #E2E8F0, /* blueGray.200 */
|
||||
disabled-list-option: #CBD5E1, /* blueGray.300 */
|
||||
tooltip: #1E293B /* blueGray.800 */
|
||||
focused-button: #64748B, /* slate.500 */
|
||||
selected-button: #E2E8F0, /* slate.200 */
|
||||
selected-disabled-button: #E2E8F0, /* slate.200 */
|
||||
disabled-button-toggle: #CBD5E1, /* slate.300 */
|
||||
unselected-chip: #E2E8F0, /* slate.200 */
|
||||
disabled-list-option: #CBD5E1, /* slate.300 */
|
||||
tooltip: #1E293B /* slate.800 */
|
||||
)
|
||||
)
|
||||
);
|
||||
@@ -126,38 +126,38 @@ body .dark {
|
||||
is-dark: map.get(map.get($base-dark-theme, color), is-dark),
|
||||
foreground: (
|
||||
base: #FFFFFF,
|
||||
divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
|
||||
dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
|
||||
disabled: #475569, /* blueGray.600 */
|
||||
disabled-button: #1E293B, /* blueGray.800 */
|
||||
disabled-text: #475569, /* blueGray.600 */
|
||||
divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
|
||||
dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
|
||||
disabled: #475569, /* slate.600 */
|
||||
disabled-button: #1E293B, /* slate.800 */
|
||||
disabled-text: #475569, /* slate.600 */
|
||||
elevation: #000000,
|
||||
hint-text: #64748B, /* blueGray.500 */
|
||||
secondary-text: #94A3B8, /* blueGray.400 */
|
||||
icon: #F1F5F9, /* blueGray.100 */
|
||||
icons: #F1F5F9, /* blueGray.100 */
|
||||
mat-icon: #94A3B8, /* blueGray.400 */
|
||||
hint-text: #64748B, /* slate.500 */
|
||||
secondary-text: #94A3B8, /* slate.400 */
|
||||
icon: #F1F5F9, /* slate.100 */
|
||||
icons: #F1F5F9, /* slate.100 */
|
||||
mat-icon: #94A3B8, /* slate.400 */
|
||||
text: #FFFFFF,
|
||||
slider-min: #FFFFFF,
|
||||
slider-off: #64748B, /* blueGray.500 */
|
||||
slider-off-active: #94A3B8 /* blueGray.400 */
|
||||
slider-off: #64748B, /* slate.500 */
|
||||
slider-off-active: #94A3B8 /* slate.400 */
|
||||
),
|
||||
background: (
|
||||
status-bar: #0F172A, /* blueGray.900 */
|
||||
app-bar: #0F172A, /* blueGray.900 */
|
||||
background: #0F172A, /* blueGray.900 */
|
||||
status-bar: #0F172A, /* slate.900 */
|
||||
app-bar: #0F172A, /* slate.900 */
|
||||
background: #0F172A, /* slate.900 */
|
||||
hover: rgba(255, 255, 255, 0.05),
|
||||
card: #1E293B, /* blueGray.800 */
|
||||
dialog: #1E293B, /* blueGray.800 */
|
||||
disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */
|
||||
raised-button: #0F172A, /* blueGray.900 */
|
||||
focused-button: #E2E8F0, /* blueGray.200 */
|
||||
card: #1E293B, /* slate.800 */
|
||||
dialog: #1E293B, /* slate.800 */
|
||||
disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
|
||||
raised-button: #0F172A, /* slate.900 */
|
||||
focused-button: #E2E8F0, /* slate.200 */
|
||||
selected-button: rgba(255, 255, 255, 0.05),
|
||||
selected-disabled-button: #1E293B, /* blueGray.800 */
|
||||
disabled-button-toggle: #0F172A, /* blueGray.900 */
|
||||
unselected-chip: #475569, /* blueGray.600 */
|
||||
disabled-list-option: #E2E8F0, /* blueGray.200 */
|
||||
tooltip: #64748B /* blueGray.500 */
|
||||
selected-disabled-button: #1E293B, /* slate.800 */
|
||||
disabled-button-toggle: #0F172A, /* slate.900 */
|
||||
unselected-chip: #475569, /* slate.600 */
|
||||
disabled-list-option: #E2E8F0, /* slate.200 */
|
||||
tooltip: #64748B /* slate.500 */
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
const buildMediaQuery = require('tailwindcss/lib/util/buildMediaQuery').default;
|
||||
|
||||
const extractConfig = plugin(({
|
||||
addVariant,
|
||||
theme
|
||||
}) =>
|
||||
{
|
||||
addVariant('fuse-tailwind-extracted-config', ({container}) =>
|
||||
{
|
||||
// Prepare the extracted config variable
|
||||
let extractedConfig = '';
|
||||
|
||||
// Breakpoints
|
||||
Object.entries(theme('screens')).forEach(([key, value]) =>
|
||||
{
|
||||
extractedConfig = `${extractedConfig} --breakpoints-${key}:'${buildMediaQuery(value)}';`;
|
||||
});
|
||||
|
||||
// Themes
|
||||
(theme('fuse.themes')).forEach((value) =>
|
||||
{
|
||||
Object.entries(value).forEach(([key, value]) =>
|
||||
{
|
||||
extractedConfig = `${extractedConfig} --themes-${key}:'${JSON.stringify(value)}';`;
|
||||
});
|
||||
});
|
||||
|
||||
// Append the extracted config
|
||||
container.append(`
|
||||
.fuse-tailwind-extracted-config {
|
||||
${extractedConfig}
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = extractConfig;
|
||||
@@ -1,17 +1,14 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
|
||||
const iconSize = plugin(({
|
||||
addUtilities,
|
||||
theme,
|
||||
e,
|
||||
variants
|
||||
module.exports = plugin(
|
||||
({
|
||||
matchUtilities,
|
||||
theme
|
||||
}) =>
|
||||
{
|
||||
const values = theme('iconSize');
|
||||
|
||||
addUtilities(
|
||||
Object.entries(values).map(([key, value]) => ({
|
||||
[`.${e(`icon-size-${key}`)}`]: {
|
||||
matchUtilities(
|
||||
{
|
||||
'icon-size': (value) => ({
|
||||
width : value,
|
||||
height : value,
|
||||
minWidth : value,
|
||||
@@ -22,13 +19,14 @@ const iconSize = plugin(({
|
||||
width : value,
|
||||
height: value
|
||||
}
|
||||
}
|
||||
})),
|
||||
variants('iconSize')
|
||||
);
|
||||
})
|
||||
},
|
||||
{
|
||||
values: theme('iconSize')
|
||||
});
|
||||
},
|
||||
{
|
||||
theme : {
|
||||
theme: {
|
||||
iconSize: {
|
||||
3 : '0.75rem',
|
||||
3.5: '0.875rem',
|
||||
@@ -47,10 +45,6 @@ const iconSize = plugin(({
|
||||
22 : '5.5rem',
|
||||
24 : '6rem'
|
||||
}
|
||||
},
|
||||
variants: {
|
||||
iconSize: ['responsive']
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = iconSize;
|
||||
}
|
||||
);
|
||||
|
||||
@@ -102,7 +102,7 @@ const theming = plugin.withOptions((options) => ({
|
||||
// @ Map variable colors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [
|
||||
themeName === 'default' ? 'body' : `body.theme-${e(themeName)}`,
|
||||
themeName === 'default' ? '.theme-default' : `.theme-${e(themeName)}`,
|
||||
_.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
|
||||
[
|
||||
e(paletteName),
|
||||
@@ -185,47 +185,46 @@ const theming = plugin.withOptions((options) => ({
|
||||
light: {
|
||||
'bg-app-bar' : '#FFFFFF',
|
||||
'bg-card' : '#FFFFFF',
|
||||
'bg-default' : colors.blueGray[100],
|
||||
'bg-default' : colors.slate[100],
|
||||
'bg-dialog' : '#FFFFFF',
|
||||
'bg-hover' : chroma(colors.blueGray[400]).alpha(0.12).css(),
|
||||
'bg-status-bar': colors.blueGray[300]
|
||||
'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(),
|
||||
'bg-status-bar': colors.slate[300]
|
||||
},
|
||||
dark : {
|
||||
'bg-app-bar' : colors.blueGray[900],
|
||||
'bg-card' : colors.blueGray[800],
|
||||
'bg-default' : colors.blueGray[900],
|
||||
'bg-dialog' : colors.blueGray[800],
|
||||
'bg-app-bar' : colors.slate[900],
|
||||
'bg-card' : colors.slate[800],
|
||||
'bg-default' : colors.slate[900],
|
||||
'bg-dialog' : colors.slate[800],
|
||||
'bg-hover' : 'rgba(255, 255, 255, 0.05)',
|
||||
'bg-status-bar': colors.blueGray[900]
|
||||
'bg-status-bar': colors.slate[900]
|
||||
}
|
||||
},
|
||||
foreground: {
|
||||
light: {
|
||||
'text-default' : colors.blueGray[800],
|
||||
'text-secondary': colors.blueGray[500],
|
||||
'text-hint' : colors.blueGray[400],
|
||||
'text-disabled' : colors.blueGray[400],
|
||||
'border' : colors.blueGray[200],
|
||||
'divider' : colors.blueGray[200],
|
||||
'icon' : colors.blueGray[500],
|
||||
'mat-icon' : colors.blueGray[500]
|
||||
'text-default' : colors.slate[800],
|
||||
'text-secondary': colors.slate[500],
|
||||
'text-hint' : colors.slate[400],
|
||||
'text-disabled' : colors.slate[400],
|
||||
'border' : colors.slate[200],
|
||||
'divider' : colors.slate[200],
|
||||
'icon' : colors.slate[500],
|
||||
'mat-icon' : colors.slate[500]
|
||||
},
|
||||
dark : {
|
||||
'text-default' : '#FFFFFF',
|
||||
'text-secondary': colors.blueGray[400],
|
||||
'text-hint' : colors.blueGray[500],
|
||||
'text-disabled' : colors.blueGray[600],
|
||||
'border' : chroma(colors.blueGray[100]).alpha(0.12).css(),
|
||||
'divider' : chroma(colors.blueGray[100]).alpha(0.12).css(),
|
||||
'icon' : colors.blueGray[400],
|
||||
'mat-icon' : colors.blueGray[400]
|
||||
'text-secondary': colors.slate[400],
|
||||
'text-hint' : colors.slate[500],
|
||||
'text-disabled' : colors.slate[600],
|
||||
'border' : chroma(colors.slate[100]).alpha(0.12).css(),
|
||||
'divider' : chroma(colors.slate[100]).alpha(0.12).css(),
|
||||
'icon' : colors.slate[400],
|
||||
'mat-icon' : colors.slate[400]
|
||||
}
|
||||
}
|
||||
},
|
||||
themes : generateThemesObject(options.themes)
|
||||
}
|
||||
},
|
||||
variants: {}
|
||||
}
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
|
||||
const utilities = plugin(({
|
||||
module.exports = plugin(({
|
||||
addComponents
|
||||
}) =>
|
||||
{
|
||||
@@ -54,9 +54,6 @@ const utilities = plugin(({
|
||||
'--tw-ring-opacity': '1 !important',
|
||||
'--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important'
|
||||
}
|
||||
},
|
||||
{
|
||||
variants: ['dark', 'responsive', 'group-hover', 'hover']
|
||||
}
|
||||
);
|
||||
|
||||
@@ -65,11 +62,6 @@ const utilities = plugin(({
|
||||
'.bg-hover': {
|
||||
backgroundColor: 'var(--fuse-bg-hover) !important'
|
||||
}
|
||||
},
|
||||
{
|
||||
variants: ['dark', 'group-hover', 'hover']
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
module.exports = utilities;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { Version } from '@fuse/version/version';
|
||||
|
||||
export const FUSE_VERSION = new Version('13.6.2').full;
|
||||
export const FUSE_VERSION = new Version('14.1.0').full;
|
||||
|
||||
@@ -3,4 +3,4 @@
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,8 @@ import { LayoutComponent } from 'app/layout/layout.component';
|
||||
import { InitialDataResolver } from 'app/app.resolvers';
|
||||
|
||||
// @formatter:off
|
||||
// tslint:disable:max-line-length
|
||||
/* eslint-disable max-len */
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
export const appRoutes: Route[] = [
|
||||
|
||||
// Redirect empty path to '/example'
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
|
||||
import { Observable, throwError } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { catchError, Observable, throwError } from 'rxjs';
|
||||
import { AuthService } from 'app/core/auth/auth.service';
|
||||
import { AuthUtils } from 'app/core/auth/auth.utils';
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, of, throwError } from 'rxjs';
|
||||
import { catchError, switchMap } from 'rxjs/operators';
|
||||
import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
|
||||
import { AuthUtils } from 'app/core/auth/auth.utils';
|
||||
import { UserService } from 'app/core/user/user.service';
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanLoad, Route, Router, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { Observable, of, switchMap } from 'rxjs';
|
||||
import { AuthService } from 'app/core/auth/auth.service';
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanLoad, Route, Router, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { Observable, of, switchMap } from 'rxjs';
|
||||
import { AuthService } from 'app/core/auth/auth.service';
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
|
||||
@@ -2,7 +2,9 @@ import { Layout } from 'app/layout/layout.types';
|
||||
|
||||
// Types
|
||||
export type Scheme = 'auto' | 'dark' | 'light';
|
||||
export type Theme = 'default' | string;
|
||||
export type Screens = { [key: string]: string };
|
||||
export type Theme = 'theme-default' | string;
|
||||
export type Themes = { id: string; name: string }[];
|
||||
|
||||
/**
|
||||
* AppConfig interface. Update this interface to strictly type your config
|
||||
@@ -12,7 +14,9 @@ export interface AppConfig
|
||||
{
|
||||
layout: Layout;
|
||||
scheme: Scheme;
|
||||
screens: Screens;
|
||||
theme: Theme;
|
||||
themes: Themes;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -22,9 +26,46 @@ export interface AppConfig
|
||||
* If you need to store global configuration for your app, you can use this
|
||||
* object to set the defaults. To access, update and reset the config, use
|
||||
* FuseConfigService and its methods.
|
||||
*
|
||||
* "Screens" are carried over to the BreakpointObserver for accessing them within
|
||||
* components, and they are required.
|
||||
*
|
||||
* "Themes" are required for Tailwind to generate themes.
|
||||
*/
|
||||
export const appConfig: AppConfig = {
|
||||
layout: 'classy',
|
||||
scheme: 'light',
|
||||
theme : 'default'
|
||||
layout : 'classy',
|
||||
scheme : 'light',
|
||||
screens: {
|
||||
sm: '600px',
|
||||
md: '960px',
|
||||
lg: '1280px',
|
||||
xl: '1440px'
|
||||
},
|
||||
theme : 'theme-default',
|
||||
themes : [
|
||||
{
|
||||
id : 'theme-default',
|
||||
name: 'Default'
|
||||
},
|
||||
{
|
||||
id : 'theme-brand',
|
||||
name: 'Brand'
|
||||
},
|
||||
{
|
||||
id : 'theme-teal',
|
||||
name: 'Teal'
|
||||
},
|
||||
{
|
||||
id : 'theme-rose',
|
||||
name: 'Rose'
|
||||
},
|
||||
{
|
||||
id : 'theme-purple',
|
||||
name: 'Purple'
|
||||
},
|
||||
{
|
||||
id : 'theme-amber',
|
||||
name: 'Amber'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { tap } from 'rxjs/operators';
|
||||
import { Observable, ReplaySubject, tap } from 'rxjs';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
|
||||
@Injectable({
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { map, tap } from 'rxjs/operators';
|
||||
import { map, Observable, ReplaySubject, tap } from 'rxjs';
|
||||
import { User } from 'app/core/user/user.types';
|
||||
|
||||
@Injectable({
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { take } from 'rxjs/operators';
|
||||
import { take } from 'rxjs';
|
||||
import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
#messagesOrigin>
|
||||
<ng-container *ngIf="unreadCount > 0">
|
||||
<span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
|
||||
<span class="flex items-center justify-center flex-shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium">
|
||||
<span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium">
|
||||
{{unreadCount}}
|
||||
</span>
|
||||
</span>
|
||||
@@ -19,7 +19,7 @@
|
||||
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="sm:hidden -ml-1 mr-3">
|
||||
<button
|
||||
mat-icon-button
|
||||
@@ -108,7 +108,7 @@
|
||||
<ng-template #messageContent>
|
||||
<!-- Icon -->
|
||||
<ng-container *ngIf="message.icon && !message.image">
|
||||
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="message.icon">
|
||||
@@ -118,7 +118,7 @@
|
||||
<!-- Image -->
|
||||
<ng-container *ngIf="message.image">
|
||||
<img
|
||||
class="flex-shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
|
||||
class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
|
||||
[src]="message.image"
|
||||
[alt]="'Message image'">
|
||||
</ng-container>
|
||||
|
||||
@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
|
||||
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { Message } from 'app/layout/common/messages/messages.types';
|
||||
import { MessagesService } from 'app/layout/common/messages/messages.service';
|
||||
|
||||
@@ -67,7 +66,7 @@ export class MessagesComponent implements OnInit, OnDestroy
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
// Dispose the overlay
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs';
|
||||
import { Message } from 'app/layout/common/messages/messages.types';
|
||||
import { map, switchMap, take, tap } from 'rxjs/operators';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
#notificationsOrigin>
|
||||
<ng-container *ngIf="unreadCount > 0">
|
||||
<span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
|
||||
<span class="flex items-center justify-center flex-shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium">
|
||||
<span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium">
|
||||
{{unreadCount}}
|
||||
</span>
|
||||
</span>
|
||||
@@ -19,7 +19,7 @@
|
||||
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="sm:hidden -ml-1 mr-3">
|
||||
<button
|
||||
mat-icon-button
|
||||
@@ -109,7 +109,7 @@
|
||||
<ng-template #notificationContent>
|
||||
<!-- Icon -->
|
||||
<ng-container *ngIf="notification.icon && !notification.image">
|
||||
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="notification.icon">
|
||||
@@ -119,7 +119,7 @@
|
||||
<!-- Image -->
|
||||
<ng-container *ngIf="notification.image">
|
||||
<img
|
||||
class="flex-shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
|
||||
class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
|
||||
[src]="notification.image"
|
||||
[alt]="'Notification image'">
|
||||
</ng-container>
|
||||
|
||||
@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
|
||||
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { Notification } from 'app/layout/common/notifications/notifications.types';
|
||||
import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
|
||||
|
||||
@@ -67,7 +66,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
// Dispose the overlay
|
||||
@@ -103,7 +102,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the messages panel
|
||||
* Close the notifications panel
|
||||
*/
|
||||
closePanel(): void
|
||||
{
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs';
|
||||
import { Notification } from 'app/layout/common/notifications/notifications.types';
|
||||
import { map, switchMap, take, tap } from 'rxjs/operators';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="fixed lg:sticky top-0 bottom-0 lg:left-full w-full sm:w-96 lg:w-16 lg:h-screen lg:shadow">
|
||||
<div
|
||||
class="flex flex-col w-full sm:w-96 h-full transform transition-transform duration-400 ease-drawer bg-card"
|
||||
class="flex flex-col w-full sm:w-96 h-full transition-transform duration-400 ease-drawer bg-card"
|
||||
[ngClass]="{'-translate-x-full sm:-translate-x-96 lg:-translate-x-80 shadow': opened, 'translate-x-0': !opened}">
|
||||
|
||||
<!-- Header -->
|
||||
@@ -93,7 +93,7 @@
|
||||
<div class="flex flex-col flex-auto border-l overflow-hidden bg-gray-50 dark:bg-transparent">
|
||||
<ng-container *ngIf="chat; else selectChatOrStartNew">
|
||||
<div class="flex flex-col-reverse overflow-y-auto overscroll-y-contain">
|
||||
<div class="flex flex-col flex-auto flex-shrink p-6">
|
||||
<div class="flex flex-col flex-auto shrink p-6">
|
||||
<ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn">
|
||||
<!-- Start of the day -->
|
||||
<ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')">
|
||||
@@ -108,20 +108,20 @@
|
||||
<div
|
||||
class="flex flex-col"
|
||||
[ngClass]="{'items-end': message.isMine,
|
||||
'items-start': !message.isMine,
|
||||
'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
|
||||
'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
|
||||
'items-start': !message.isMine,
|
||||
'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
|
||||
'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
|
||||
<!-- Bubble -->
|
||||
<div
|
||||
class="relative max-w-3/4 px-3 py-2 rounded-lg"
|
||||
[ngClass]="{'bg-blue-500 text-blue-50': message.isMine,
|
||||
'bg-gray-500 text-gray-50': !message.isMine}">
|
||||
'bg-gray-500 text-gray-50': !message.isMine}">
|
||||
<!-- Speech bubble tail -->
|
||||
<ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine">
|
||||
<div
|
||||
class="absolute bottom-0 w-3 transform"
|
||||
class="absolute bottom-0 w-3"
|
||||
[ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine,
|
||||
'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
|
||||
'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
|
||||
<ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
@@ -140,7 +140,7 @@
|
||||
<div
|
||||
class="my-0.5 text-sm font-medium text-secondary"
|
||||
[ngClass]="{'mr-3': message.isMine,
|
||||
'ml-3': !message.isMine}">
|
||||
'ml-3': !message.isMine}">
|
||||
{{message.createdAt | date:'HH:mm'}}
|
||||
</div>
|
||||
</ng-container>
|
||||
@@ -163,7 +163,7 @@
|
||||
<button
|
||||
mat-icon-button>
|
||||
<mat-icon
|
||||
class="transform rotate-90"
|
||||
class="rotate-90"
|
||||
[svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Component, ElementRef, HostBinding, HostListener, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
|
||||
import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
|
||||
|
||||
@@ -110,7 +109,7 @@ export class QuickChatComponent implements OnInit, OnDestroy
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ import { QuickChatComponent } from 'app/layout/common/quick-chat/quick-chat.comp
|
||||
declarations: [
|
||||
QuickChatComponent
|
||||
],
|
||||
imports: [
|
||||
imports : [
|
||||
RouterModule,
|
||||
MatButtonModule,
|
||||
MatFormFieldModule,
|
||||
@@ -21,7 +21,7 @@ import { QuickChatComponent } from 'app/layout/common/quick-chat/quick-chat.comp
|
||||
MatInputModule,
|
||||
FuseDrawerModule,
|
||||
FuseScrollbarModule,
|
||||
SharedModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
QuickChatComponent
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
|
||||
import { map, switchMap, tap } from 'rxjs/operators';
|
||||
import { BehaviorSubject, map, Observable, of, switchMap, tap, throwError } from 'rxjs';
|
||||
import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
|
||||
|
||||
@Injectable({
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
|
||||
</button>
|
||||
<div
|
||||
class="absolute inset-0 flex items-center flex-shrink-0 z-99 bg-card"
|
||||
class="absolute inset-0 flex items-center shrink-0 z-99 bg-card"
|
||||
*ngIf="opened"
|
||||
@slideInTop
|
||||
@slideOutTop>
|
||||
@@ -55,7 +55,7 @@
|
||||
</ng-container>
|
||||
</mat-autocomplete>
|
||||
<button
|
||||
class="absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5"
|
||||
class="absolute top-1/2 right-5 sm:right-7 shrink-0 w-10 h-10 -mt-5"
|
||||
mat-icon-button
|
||||
(click)="close()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
@@ -118,7 +118,7 @@
|
||||
#contactResult
|
||||
let-result>
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
|
||||
<div class="flex shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
|
||||
<img
|
||||
*ngIf="result.avatar"
|
||||
[src]="result.avatar">
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { Component, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Subject } from 'rxjs';
|
||||
import { debounceTime, filter, map, takeUntil } from 'rxjs/operators';
|
||||
import { debounceTime, filter, map, Subject, takeUntil } from 'rxjs';
|
||||
import { fuseAnimations } from '@fuse/animations/public-api';
|
||||
|
||||
@Component({
|
||||
@@ -138,7 +137,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -38,18 +38,19 @@
|
||||
<!-- Theme -->
|
||||
<div class="text-md font-semibold text-secondary">THEME</div>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
|
||||
<ng-container *ngFor="let theme of themes">
|
||||
<ng-container *ngFor="let theme of config.themes">
|
||||
<div
|
||||
class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
|
||||
[class.ring-2]="config.theme === theme[0]"
|
||||
(click)="setTheme(theme[0])">
|
||||
[class.ring-2]="config.theme === theme.id"
|
||||
[ngClass]="theme.id"
|
||||
(click)="setTheme(theme.id)">
|
||||
<div
|
||||
class="flex-0 w-3 h-3 rounded-full"
|
||||
[style.background-color]="theme[1].primary"></div>
|
||||
class="flex-0 w-3 h-3 rounded-full bg-primary"
|
||||
></div>
|
||||
<div
|
||||
class="ml-2.5 font-medium leading-5 truncate"
|
||||
[class.text-secondary]="config.theme !== theme[0]">
|
||||
{{theme[0] | titlecase}}
|
||||
[class.text-secondary]="config.theme !== theme.id">
|
||||
{{theme.name}}
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseConfigService } from '@fuse/services/config';
|
||||
import { FuseTailwindService } from '@fuse/services/tailwind';
|
||||
import { AppConfig, Scheme, Theme } from 'app/core/config/app.config';
|
||||
import { AppConfig, Scheme, Theme, Themes } from 'app/core/config/app.config';
|
||||
import { Layout } from 'app/layout/layout.types';
|
||||
|
||||
@Component({
|
||||
@@ -28,7 +26,7 @@ export class SettingsComponent implements OnInit, OnDestroy
|
||||
layout: Layout;
|
||||
scheme: 'dark' | 'light';
|
||||
theme: string;
|
||||
themes: [string, any][] = [];
|
||||
themes: Themes;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
@@ -36,8 +34,7 @@ export class SettingsComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
constructor(
|
||||
private _router: Router,
|
||||
private _fuseConfigService: FuseConfigService,
|
||||
private _fuseTailwindService: FuseTailwindService
|
||||
private _fuseConfigService: FuseConfigService
|
||||
)
|
||||
{
|
||||
}
|
||||
@@ -51,13 +48,6 @@ export class SettingsComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the themes
|
||||
this._fuseTailwindService.tailwindConfig$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((config) => {
|
||||
this.themes = Object.entries(config.themes);
|
||||
});
|
||||
|
||||
// Subscribe to config changes
|
||||
this._fuseConfigService.config$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
@@ -74,7 +64,7 @@ export class SettingsComponent implements OnInit, OnDestroy
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ import { MatButtonModule } from '@angular/material/button';
|
||||
declarations: [
|
||||
SettingsComponent
|
||||
],
|
||||
imports: [
|
||||
imports : [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
MatIconModule,
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
|
||||
<div class="sm:hidden -ml-1 mr-3">
|
||||
<button
|
||||
mat-icon-button
|
||||
@@ -128,7 +128,7 @@
|
||||
</a>
|
||||
<!-- Link content template -->
|
||||
<ng-template #linkContent>
|
||||
<div class="relative flex flex-shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<div class="relative flex shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<mat-icon
|
||||
class="absolute opacity-0 group-hover:opacity-100 z-20 icon-size-5"
|
||||
*ngIf="mode === 'modify'"
|
||||
|
||||
@@ -3,8 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
|
||||
import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
|
||||
|
||||
@@ -77,7 +76,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
// Dispose the overlay
|
||||
@@ -116,7 +115,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the messages panel
|
||||
* Close the shortcuts panel
|
||||
*/
|
||||
closePanel(): void
|
||||
{
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { map, switchMap, take, tap } from 'rxjs/operators';
|
||||
import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs';
|
||||
import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
|
||||
|
||||
@Injectable({
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { User } from 'app/core/user/user.types';
|
||||
import { UserService } from 'app/core/user/user.service';
|
||||
|
||||
@@ -61,7 +60,7 @@ export class UserComponent implements OnInit, OnDestroy
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { Component, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
|
||||
import { combineLatest, Subject } from 'rxjs';
|
||||
import { filter, map, takeUntil } from 'rxjs/operators';
|
||||
import { combineLatest, filter, map, Subject, takeUntil } from 'rxjs';
|
||||
import { FuseConfigService } from '@fuse/services/config';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FUSE_VERSION } from '@fuse/version';
|
||||
@@ -111,7 +110,7 @@ export class LayoutComponent implements OnInit, OnDestroy
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
@@ -204,6 +203,6 @@ export class LayoutComponent implements OnInit, OnDestroy
|
||||
});
|
||||
|
||||
// Add class name for the currently selected theme
|
||||
this._document.body.classList.add(`theme-${this.theme}`);
|
||||
this._document.body.classList.add(this.theme);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { FuseDrawerModule } from '@fuse/components/drawer';
|
||||
import { LayoutComponent } from 'app/layout/layout.component';
|
||||
import { EmptyLayoutModule } from 'app/layout/layouts/empty/empty.module';
|
||||
import { CenteredLayoutModule } from 'app/layout/layouts/horizontal/centered/centered.module';
|
||||
@@ -40,13 +37,10 @@ const layoutModules = [
|
||||
declarations: [
|
||||
LayoutComponent
|
||||
],
|
||||
imports: [
|
||||
MatIconModule,
|
||||
MatTooltipModule,
|
||||
FuseDrawerModule,
|
||||
imports : [
|
||||
SharedModule,
|
||||
SettingsModule,
|
||||
...layoutModules,
|
||||
...layoutModules
|
||||
],
|
||||
exports : [
|
||||
LayoutComponent,
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
<!-- Loading bar -->
|
||||
<fuse-loading-bar></fuse-loading-bar>
|
||||
|
||||
<!-- Wrapper -->
|
||||
<div class="flex flex-col flex-auto w-full">
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ export class EmptyLayoutComponent implements OnDestroy
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { EmptyLayoutComponent } from 'app/layout/layouts/empty/empty.component';
|
||||
|
||||
@@ -9,6 +10,7 @@ import { EmptyLayoutComponent } from 'app/layout/layouts/empty/empty.component';
|
||||
],
|
||||
imports : [
|
||||
RouterModule,
|
||||
FuseLoadingBarModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user