purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2024-10-30 01:08:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

First pass through updating standalone components.

Browse Source
This commit is contained in:
Sercan Yemen 2023-05-04 11:37:40 +03:00
parent 715ab6a3aa
commit b2cb20634e
573 changed files with 14143 additions and 11263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3606
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

71
package.json
View File

@ -1,6 +1,6 @@
{
"name": "fuse-angular",
"version": "17.2.0",
"version": "18.0.0",
"description": "Fuse - Angular Admin Template and Starter Project",
"author": "https://themeforest.net/user/srcn",
"license": "https://themeforest.net/licenses/standard",
@ -13,55 +13,54 @@
"test": "ng test"
},
"dependencies": {
"@angular/animations": "15.1.1",
"@angular/cdk": "15.1.1",
"@angular/common": "15.1.1",
"@angular/compiler": "15.1.1",
"@angular/core": "15.1.1",
"@angular/forms": "15.1.1",
"@angular/material": "15.1.1",
"@angular/material-luxon-adapter": "15.1.1",
"@angular/platform-browser": "15.1.1",
"@angular/platform-browser-dynamic": "15.1.1",
"@angular/router": "15.1.1",
"@ngneat/transloco": "4.2.2",
"apexcharts": "3.36.3",
"@angular/animations": "15.2.9",
"@angular/cdk": "15.2.9",
"@angular/common": "15.2.9",
"@angular/compiler": "15.2.9",
"@angular/core": "15.2.9",
"@angular/forms": "15.2.9",
"@angular/material": "15.2.9",
"@angular/material-luxon-adapter": "15.2.9",
"@angular/platform-browser": "15.2.9",
"@angular/platform-browser-dynamic": "15.2.9",
"@angular/router": "15.2.9",
"@ngneat/transloco": "4.2.6",
"apexcharts": "3.40.0",
"crypto-js": "3.3.0",
"highlight.js": "11.7.0",
"highlight.js": "11.8.0",
"lodash-es": "4.17.21",
"luxon": "3.2.1",
"ng-apexcharts": "1.7.4",
"ngx-quill": "20.0.1",
"luxon": "3.3.0",
"ng-apexcharts": "1.7.6",
"ngx-quill": "21.0.0",
"perfect-scrollbar": "1.5.5",
"quill": "1.3.7",
"rxjs": "7.8.0",
"tslib": "2.4.1",
"zone.js": "0.12.0"
"rxjs": "7.8.1",
"tslib": "2.5.0",
"zone.js": "0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "15.1.2",
"@angular/cli": "15.1.2",
"@angular/compiler-cli": "15.1.1",
"@tailwindcss/line-clamp": "0.4.2",
"@angular-devkit/build-angular": "15.2.8",
"@angular/cli": "15.2.8",
"@angular/compiler-cli": "15.2.9",
"@tailwindcss/typography": "0.5.9",
"@types/chroma-js": "2.1.4",
"@types/chroma-js": "2.4.0",
"@types/crypto-js": "3.1.47",
"@types/highlight.js": "10.1.0",
"@types/jasmine": "4.3.1",
"@types/lodash": "4.14.191",
"@types/lodash-es": "4.17.6",
"@types/luxon": "3.2.0",
"autoprefixer": "10.4.13",
"@types/lodash": "4.14.194",
"@types/lodash-es": "4.17.7",
"@types/luxon": "3.3.0",
"autoprefixer": "10.4.14",
"chroma-js": "2.4.2",
"jasmine-core": "4.5.0",
"karma": "6.4.1",
"karma-chrome-launcher": "3.1.1",
"jasmine-core": "4.6.0",
"karma": "6.4.2",
"karma-chrome-launcher": "3.2.0",
"karma-coverage": "2.2.0",
"karma-jasmine": "5.1.0",
"karma-jasmine-html-reporter": "2.0.0",
"lodash": "4.17.21",
"postcss": "8.4.21",
"tailwindcss": "3.2.4",
"typescript": "4.9.4"
"postcss": "8.4.23",
"tailwindcss": "3.3.2",
"typescript": "4.9.5"
}
}

16
src/@fuse/animations/expand-collapse.ts
View File

@ -8,12 +8,12 @@ const expandCollapse = trigger('expandCollapse',
[
state('void, collapsed',
style({
height: '0'
})
height: '0',
}),
),
state('*, expanded',
style('*')
style('*'),
),
// Prevent the transition if the state is false
@ -24,11 +24,11 @@ const expandCollapse = trigger('expandCollapse',
animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
export { expandCollapse };

180
src/@fuse/animations/fade.ts
View File

@ -8,14 +8,14 @@ const fadeIn = trigger('fadeIn',
[
state('void',
style({
opacity: 0
})
opacity: 0,
}),
),
state('*',
style({
opacity: 1
})
opacity: 1,
}),
),
// Prevent the transition if the state is false
@ -25,11 +25,11 @@ const fadeIn = trigger('fadeIn',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -40,15 +40,15 @@ const fadeInTop = trigger('fadeInTop',
state('void',
style({
opacity : 0,
transform: 'translate3d(0, -100%, 0)'
})
transform: 'translate3d(0, -100%, 0)',
}),
),
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -58,11 +58,11 @@ const fadeInTop = trigger('fadeInTop',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -73,15 +73,15 @@ const fadeInBottom = trigger('fadeInBottom',
state('void',
style({
opacity : 0,
transform: 'translate3d(0, 100%, 0)'
})
transform: 'translate3d(0, 100%, 0)',
}),
),
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -91,11 +91,11 @@ const fadeInBottom = trigger('fadeInBottom',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -106,15 +106,15 @@ const fadeInLeft = trigger('fadeInLeft',
state('void',
style({
opacity : 0,
transform: 'translate3d(-100%, 0, 0)'
})
transform: 'translate3d(-100%, 0, 0)',
}),
),
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -124,11 +124,11 @@ const fadeInLeft = trigger('fadeInLeft',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -139,15 +139,15 @@ const fadeInRight = trigger('fadeInRight',
state('void',
style({
opacity : 0,
transform: 'translate3d(100%, 0, 0)'
})
transform: 'translate3d(100%, 0, 0)',
}),
),
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -157,11 +157,11 @@ const fadeInRight = trigger('fadeInRight',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -171,14 +171,14 @@ const fadeOut = trigger('fadeOut',
[
state('*',
style({
opacity: 1
})
opacity: 1,
}),
),
state('void',
style({
opacity: 0
})
opacity: 0,
}),
),
// Prevent the transition if the state is false
@ -188,11 +188,11 @@ const fadeOut = trigger('fadeOut',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -203,15 +203,15 @@ const fadeOutTop = trigger('fadeOutTop',
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
opacity : 0,
transform: 'translate3d(0, -100%, 0)'
})
transform: 'translate3d(0, -100%, 0)',
}),
),
// Prevent the transition if the state is false
@ -221,11 +221,11 @@ const fadeOutTop = trigger('fadeOutTop',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -236,15 +236,15 @@ const fadeOutBottom = trigger('fadeOutBottom',
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
opacity : 0,
transform: 'translate3d(0, 100%, 0)'
})
transform: 'translate3d(0, 100%, 0)',
}),
),
// Prevent the transition if the state is false
@ -254,11 +254,11 @@ const fadeOutBottom = trigger('fadeOutBottom',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -269,15 +269,15 @@ const fadeOutLeft = trigger('fadeOutLeft',
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
opacity : 0,
transform: 'translate3d(-100%, 0, 0)'
})
transform: 'translate3d(-100%, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -287,11 +287,11 @@ const fadeOutLeft = trigger('fadeOutLeft',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -302,15 +302,15 @@ const fadeOutRight = trigger('fadeOutRight',
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
opacity : 0,
transform: 'translate3d(100%, 0, 0)'
})
transform: 'translate3d(100%, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -320,11 +320,11 @@ const fadeOutRight = trigger('fadeOutRight',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight };

2
src/@fuse/animations/public-api.ts
View File

@ -11,5 +11,5 @@ export const fuseAnimations = [
shake,
slideInTop, slideInBottom, slideInLeft, slideInRight,
slideOutTop, slideOutBottom, slideOutLeft, slideOutRight,
zoomIn, zoomOut
zoomIn, zoomOut,
];

38
src/@fuse/animations/shake.ts
View File

@ -16,58 +16,58 @@ const shake = trigger('shake',
keyframes([
style({
transform: 'translate3d(0, 0, 0)',
offset : 0
offset : 0,
}),
style({
transform: 'translate3d(-10px, 0, 0)',
offset : 0.1
offset : 0.1,
}),
style({
transform: 'translate3d(10px, 0, 0)',
offset : 0.2
offset : 0.2,
}),
style({
transform: 'translate3d(-10px, 0, 0)',
offset : 0.3
offset : 0.3,
}),
style({
transform: 'translate3d(10px, 0, 0)',
offset : 0.4
offset : 0.4,
}),
style({
transform: 'translate3d(-10px, 0, 0)',
offset : 0.5
offset : 0.5,
}),
style({
transform: 'translate3d(10px, 0, 0)',
offset : 0.6
offset : 0.6,
}),
style({
transform: 'translate3d(-10px, 0, 0)',
offset : 0.7
offset : 0.7,
}),
style({
transform: 'translate3d(10px, 0, 0)',
offset : 0.8
offset : 0.8,
}),
style({
transform: 'translate3d(-10px, 0, 0)',
offset : 0.9
offset : 0.9,
}),
style({
transform: 'translate3d(0, 0, 0)',
offset : 1
})
])
)
offset : 1,
}),
]),
),
],
{
params: {
timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)'
}
}
)
]
timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
},
},
),
],
);
export { shake };

144
src/@fuse/animations/slide.ts
View File

@ -8,14 +8,14 @@ const slideInTop = trigger('slideInTop',
[
state('void',
style({
transform: 'translate3d(0, -100%, 0)'
})
transform: 'translate3d(0, -100%, 0)',
}),
),
state('*',
style({
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -25,11 +25,11 @@ const slideInTop = trigger('slideInTop',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -39,14 +39,14 @@ const slideInBottom = trigger('slideInBottom',
[
state('void',
style({
transform: 'translate3d(0, 100%, 0)'
})
transform: 'translate3d(0, 100%, 0)',
}),
),
state('*',
style({
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -56,11 +56,11 @@ const slideInBottom = trigger('slideInBottom',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -70,14 +70,14 @@ const slideInLeft = trigger('slideInLeft',
[
state('void',
style({
transform: 'translate3d(-100%, 0, 0)'
})
transform: 'translate3d(-100%, 0, 0)',
}),
),
state('*',
style({
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -87,11 +87,11 @@ const slideInLeft = trigger('slideInLeft',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -101,14 +101,14 @@ const slideInRight = trigger('slideInRight',
[
state('void',
style({
transform: 'translate3d(100%, 0, 0)'
})
transform: 'translate3d(100%, 0, 0)',
}),
),
state('*',
style({
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -118,11 +118,11 @@ const slideInRight = trigger('slideInRight',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -132,14 +132,14 @@ const slideOutTop = trigger('slideOutTop',
[
state('*',
style({
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
transform: 'translate3d(0, -100%, 0)'
})
transform: 'translate3d(0, -100%, 0)',
}),
),
// Prevent the transition if the state is false
@ -149,11 +149,11 @@ const slideOutTop = trigger('slideOutTop',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -163,14 +163,14 @@ const slideOutBottom = trigger('slideOutBottom',
[
state('*',
style({
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
transform: 'translate3d(0, 100%, 0)'
})
transform: 'translate3d(0, 100%, 0)',
}),
),
// Prevent the transition if the state is false
@ -180,11 +180,11 @@ const slideOutBottom = trigger('slideOutBottom',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -194,14 +194,14 @@ const slideOutLeft = trigger('slideOutLeft',
[
state('*',
style({
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
transform: 'translate3d(-100%, 0, 0)'
})
transform: 'translate3d(-100%, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -211,11 +211,11 @@ const slideOutLeft = trigger('slideOutLeft',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -225,14 +225,14 @@ const slideOutRight = trigger('slideOutRight',
[
state('*',
style({
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
transform: 'translate3d(100%, 0, 0)'
})
transform: 'translate3d(100%, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -242,11 +242,11 @@ const slideOutRight = trigger('slideOutRight',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight };

36
src/@fuse/animations/zoom.ts
View File

@ -10,15 +10,15 @@ const zoomIn = trigger('zoomIn',
state('void',
style({
opacity : 0,
transform: 'scale(0.5)'
})
transform: 'scale(0.5)',
}),
),
state('*',
style({
opacity : 1,
transform: 'scale(1)'
})
transform: 'scale(1)',
}),
),
// Prevent the transition if the state is false
@ -28,11 +28,11 @@ const zoomIn = trigger('zoomIn',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -44,15 +44,15 @@ const zoomOut = trigger('zoomOut',
state('*',
style({
opacity : 1,
transform: 'scale(1)'
})
transform: 'scale(1)',
}),
),
state('void',
style({
opacity : 0,
transform: 'scale(0.5)'
})
transform: 'scale(0.5)',
}),
),
// Prevent the transition if the state is false
@ -62,11 +62,11 @@ const zoomOut = trigger('zoomOut',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
export { zoomIn, zoomOut };

27
src/@fuse/components/alert/alert.component.ts
View File

@ -1,10 +1,13 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { filter, Subject, takeUntil } from 'rxjs';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { fuseAnimations } from '@fuse/animations';
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
import { FuseAlertService } from '@fuse/components/alert/alert.service';
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { filter, Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-alert',
@ -13,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
animations : fuseAnimations,
exportAs : 'fuseAlert'
exportAs : 'fuseAlert',
standalone : true,
imports : [NgIf, MatIconModule, MatButtonModule],
})
export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
{
@ -39,7 +44,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseAlertService: FuseAlertService,
private _fuseUtilsService: FuseUtilsService
private _fuseUtilsService: FuseUtilsService,
)
{
}
@ -69,7 +74,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
'fuse-alert-type-info' : this.type === 'info',
'fuse-alert-type-success' : this.type === 'success',
'fuse-alert-type-warning' : this.type === 'warning',
'fuse-alert-type-error' : this.type === 'error'
'fuse-alert-type-error' : this.type === 'error',
};
/* eslint-enable @typescript-eslint/naming-convention */
}
@ -119,9 +124,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
this._fuseAlertService.onDismiss
.pipe(
filter(name => this.name === name),
takeUntil(this._unsubscribeAll)
takeUntil(this._unsubscribeAll),
)
.subscribe(() => {
.subscribe(() =>
{
// Dismiss the alert
this.dismiss();
@ -131,9 +137,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
this._fuseAlertService.onShow
.pipe(
filter(name => this.name === name),
takeUntil(this._unsubscribeAll)
takeUntil(this._unsubscribeAll),
)
.subscribe(() => {
.subscribe(() =>
{
// Show the alert
this.show();

22
src/@fuse/components/alert/alert.module.ts
View File

@ -1,22 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { FuseAlertComponent } from '@fuse/components/alert/alert.component';
@NgModule({
declarations: [
FuseAlertComponent
],
imports : [
CommonModule,
MatButtonModule,
MatIconModule
],
exports : [
FuseAlertComponent
]
})
export class FuseAlertModule
{
}

2
src/@fuse/components/alert/alert.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class FuseAlertService
{

1
src/@fuse/components/alert/public-api.ts
View File

@ -1,4 +1,3 @@
export * from '@fuse/components/alert/alert.component';
export * from '@fuse/components/alert/alert.module';
export * from '@fuse/components/alert/alert.service';
export * from '@fuse/components/alert/alert.types';

9
src/@fuse/components/card/card.component.ts
View File

@ -1,5 +1,6 @@
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgIf } from '@angular/common';
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { fuseAnimations } from '@fuse/animations';
import { FuseCardFace } from '@fuse/components/card/card.types';
@ -9,7 +10,9 @@ import { FuseCardFace } from '@fuse/components/card/card.types';
styleUrls : ['./card.component.scss'],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations,
exportAs : 'fuseCard'
exportAs : 'fuseCard',
standalone : true,
imports : [NgIf],
})
export class FuseCardComponent implements OnChanges
{
@ -43,7 +46,7 @@ export class FuseCardComponent implements OnChanges
'fuse-card-expanded' : this.expanded,
'fuse-card-face-back' : this.flippable && this.face === 'back',
'fuse-card-face-front': this.flippable && this.face === 'front',
'fuse-card-flippable' : this.flippable
'fuse-card-flippable' : this.flippable,
};
/* eslint-enable @typescript-eslint/naming-convention */
}

18
src/@fuse/components/card/card.module.ts
View File

@ -1,18 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FuseCardComponent } from '@fuse/components/card/card.component';
@NgModule({
declarations: [
FuseCardComponent
],
imports : [
CommonModule
],
exports : [
FuseCardComponent
]
})
export class FuseCardModule
{
}

1
src/@fuse/components/card/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/components/card/card.component';
export * from '@fuse/components/card/card.module';

30
src/@fuse/components/drawer/drawer.component.ts
View File

@ -1,16 +1,17 @@
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
@Component({
selector : 'fuse-drawer',
templateUrl : './drawer.component.html',
styleUrls : ['./drawer.component.scss'],
encapsulation: ViewEncapsulation.None,
exportAs : 'fuseDrawer'
exportAs : 'fuseDrawer',
standalone : true,
})
export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
{
@ -45,10 +46,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
private _elementRef: ElementRef,
private _renderer2: Renderer2,
private _fuseDrawerService: FuseDrawerService,
private _fuseUtilsService: FuseUtilsService
private _fuseUtilsService: FuseUtilsService,
)
{
this._handleOverlayClick = (): void => {
this._handleOverlayClick = (): void =>
{
this.close();
};
}
@ -69,7 +71,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
'fuse-drawer-hover' : this._hovered,
[`fuse-drawer-mode-${this.mode}`] : true,
'fuse-drawer-opened' : this.opened,
[`fuse-drawer-position-${this.position}`]: true
[`fuse-drawer-position-${this.position}`]: true,
};
/* eslint-enable @typescript-eslint/naming-convention */
}
@ -80,7 +82,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
@HostBinding('style') get styleList(): any
{
return {
'visibility': this.opened ? 'visible' : 'hidden'
'visibility': this.opened ? 'visible' : 'hidden',
};
}
@ -173,7 +175,8 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
// Enable the animations after a delay
// The delay must be bigger than the current transition-duration
// to make sure nothing will be animated while the mode is changing
setTimeout(() => {
setTimeout(() =>
{
this._enableAnimations();
}, 500);
}
@ -345,7 +348,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
// Create enter animation and attach it to the player
this._player = this._animationBuilder.build([
style({opacity: 0}),
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
]).create(this._overlay);
// Play the animation
@ -369,14 +372,15 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
// Create the leave animation and attach it to the player
this._player = this._animationBuilder.build([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
]).create(this._overlay);
// Play the animation
this._player.play();
// Once the animation is done...
this._player.onDone(() => {
this._player.onDone(() =>
{
// If the overlay still exists...
if ( this._overlay )

18
src/@fuse/components/drawer/drawer.module.ts
View File

@ -1,18 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
@NgModule({
declarations: [
FuseDrawerComponent
],
imports : [
CommonModule
],
exports : [
FuseDrawerComponent
]
})
export class FuseDrawerModule
{
}

2
src/@fuse/components/drawer/drawer.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class FuseDrawerService
{

1
src/@fuse/components/drawer/public-api.ts
View File

@ -1,4 +1,3 @@
export * from '@fuse/components/drawer/drawer.component';
export * from '@fuse/components/drawer/drawer.module';
export * from '@fuse/components/drawer/drawer.service';
export * from '@fuse/components/drawer/drawer.types';

9
src/@fuse/components/fullscreen/fullscreen.component.ts
View File

@ -1,5 +1,8 @@
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
@Component({
@ -7,7 +10,9 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
templateUrl : './fullscreen.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseFullscreen'
exportAs : 'fuseFullscreen',
standalone : true,
imports : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
})
export class FuseFullscreenComponent implements OnInit
{

24
src/@fuse/components/fullscreen/fullscreen.module.ts
View File

@ -1,24 +0,0 @@
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [
FuseFullscreenComponent
],
imports : [
MatButtonModule,
MatIconModule,
MatTooltipModule,
CommonModule
],
exports : [
FuseFullscreenComponent
]
})
export class FuseFullscreenModule
{
}

1
src/@fuse/components/fullscreen/public-api.ts
View File

@ -1,3 +1,2 @@
export * from '@fuse/components/fullscreen/fullscreen.component';
export * from '@fuse/components/fullscreen/fullscreen.module';
export * from '@fuse/components/fullscreen/fullscreen.types';

9
src/@fuse/components/highlight/highlight.component.ts
View File

@ -1,3 +1,4 @@
import { NgClass } from '@angular/common';
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EmbeddedViewRef, Input, OnChanges, Renderer2, SecurityContext, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { FuseHighlightService } from '@fuse/components/highlight/highlight.service';
@ -8,7 +9,9 @@ import { FuseHighlightService } from '@fuse/components/highlight/highlight.servi
styleUrls : ['./highlight.component.scss'],
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseHighlight'
exportAs : 'fuseHighlight',
standalone : true,
imports : [NgClass],
})
export class FuseHighlightComponent implements OnChanges, AfterViewInit
{
@ -28,7 +31,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
private _elementRef: ElementRef,
private _renderer2: Renderer2,
private _fuseHighlightService: FuseHighlightService,
private _viewContainerRef: ViewContainerRef
private _viewContainerRef: ViewContainerRef,
)
{
}
@ -123,7 +126,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
// Render and insert the template
this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
highlightedCode: this.highlightedCode,
lang : this.lang
lang : this.lang,
});
// Detect the changes

18
src/@fuse/components/highlight/highlight.module.ts
View File

@ -1,18 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
@NgModule({
declarations: [
FuseHighlightComponent
],
imports : [
CommonModule
],
exports : [
FuseHighlightComponent
]
})
export class FuseHighlightModule
{
}

5
src/@fuse/components/highlight/highlight.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import hljs from 'highlight.js';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class FuseHighlightService
{
@ -61,7 +61,8 @@ export class FuseHighlightService
// Iterate through the lines
lines.filter(line => line.length)
.forEach((line, index) => {
.forEach((line, index) =>
{
// Always get the indentation of the first line so we can
// have something to compare with

1
src/@fuse/components/highlight/public-api.ts
View File

@ -1,3 +1,2 @@
export * from '@fuse/components/highlight/highlight.component';
export * from '@fuse/components/highlight/highlight.module';
export * from '@fuse/components/highlight/highlight.service';

19
src/@fuse/components/loading-bar/loading-bar.component.ts
View File

@ -1,14 +1,18 @@
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Subject, takeUntil } from 'rxjs';
import { NgIf } from '@angular/common';
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { FuseLoadingService } from '@fuse/services/loading';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-loading-bar',
templateUrl : './loading-bar.component.html',
styleUrls : ['./loading-bar.component.scss'],
encapsulation: ViewEncapsulation.None,
exportAs : 'fuseLoadingBar'
exportAs : 'fuseLoadingBar',
standalone : true,
imports : [NgIf, MatProgressBarModule],
})
export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
{
@ -52,19 +56,22 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
// Subscribe to the service
this._fuseLoadingService.mode$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => {
.subscribe((value) =>
{
this.mode = value;
});
this._fuseLoadingService.progress$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => {
.subscribe((value) =>
{
this.progress = value;
});
this._fuseLoadingService.show$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => {
.subscribe((value) =>
{
this.show = value;
});

20
src/@fuse/components/loading-bar/loading-bar.module.ts
View File

@ -1,20 +0,0 @@
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
{
}

1
src/@fuse/components/loading-bar/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/components/loading-bar/loading-bar.component';
export * from '@fuse/components/loading-bar/loading-bar.module';

5
src/@fuse/components/masonry/masonry.component.ts
View File

@ -1,3 +1,4 @@
import { NgTemplateOutlet } from '@angular/common';
import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core';
import { fuseAnimations } from '@fuse/animations';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
@ -7,7 +8,9 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
templateUrl : './masonry.component.html',
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations,
exportAs : 'fuseMasonry'
exportAs : 'fuseMasonry',
standalone : true,
imports : [NgTemplateOutlet],
})
export class FuseMasonryComponent implements OnChanges, AfterViewInit
{

18
src/@fuse/components/masonry/masonry.module.ts
View File

@ -1,18 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FuseMasonryComponent } from '@fuse/components/masonry/masonry.component';
@NgModule({
declarations: [
FuseMasonryComponent
],
imports : [
CommonModule
],
exports : [
FuseMasonryComponent
]
})
export class FuseMasonryModule
{
}

1
src/@fuse/components/masonry/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/components/masonry/masonry.component';
export * from '@fuse/components/masonry/masonry.module';

19
src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
View File

@ -1,15 +1,21 @@
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { IsActiveMatchOptions } from '@angular/router';
import { Subject, takeUntil } from 'rxjs';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
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';
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-horizontal-navigation-basic-item',
templateUrl : './basic.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule],
})
export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy
{
@ -26,7 +32,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService,
private _fuseUtilsService: FuseUtilsService
private _fuseUtilsService: FuseUtilsService,
)
{
// Set the equivalent of {exact: false} as default for active match options.
@ -61,8 +67,9 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
// Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();

22
src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
View File

@ -1,15 +1,22 @@
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, takeUntil } from 'rxjs';
import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatMenu, MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
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';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-horizontal-navigation-branch-item',
templateUrl : './branch.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgIf, NgClass, MatMenuModule, NgTemplateOutlet, NgFor, FuseHorizontalNavigationBasicItemComponent, forwardRef(() => FuseHorizontalNavigationBranchItemComponent), FuseHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule],
})
export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy
{
@ -30,7 +37,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -49,8 +56,9 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
// Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();

14
src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts
View File

@ -1,13 +1,16 @@
import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
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';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-horizontal-navigation-divider-item',
templateUrl : './divider.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass],
})
export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
{
@ -22,7 +25,7 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -41,8 +44,9 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
// Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();

14
src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts
View File

@ -1,13 +1,16 @@
import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
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';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-horizontal-navigation-spacer-item',
templateUrl : './spacer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass],
})
export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
{
@ -22,7 +25,7 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -41,8 +44,9 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
// Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();

14
src/@fuse/components/navigation/horizontal/horizontal.component.ts
View File

@ -1,9 +1,13 @@
import { NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { ReplaySubject, Subject } from 'rxjs';
import { fuseAnimations } from '@fuse/animations';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { ReplaySubject, Subject } from 'rxjs';
import { FuseHorizontalNavigationBasicItemComponent } from './components/basic/basic.component';
import { FuseHorizontalNavigationBranchItemComponent } from './components/branch/branch.component';
import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer/spacer.component';
@Component({
selector : 'fuse-horizontal-navigation',
@ -12,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
animations : fuseAnimations,
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseHorizontalNavigation'
exportAs : 'fuseHorizontalNavigation',
standalone : true,
imports : [NgFor, NgIf, FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBranchItemComponent, FuseHorizontalNavigationSpacerItemComponent],
})
export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
{
@ -28,7 +34,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService,
private _fuseUtilsService: FuseUtilsService
private _fuseUtilsService: FuseUtilsService,
)
{
}

55
src/@fuse/components/navigation/navigation.module.ts
View File

@ -1,55 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseScrollbarModule } from '@fuse/directives/scrollbar/public-api';
import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
import { FuseHorizontalNavigationBranchItemComponent } from '@fuse/components/navigation/horizontal/components/branch/branch.component';
import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
import { FuseHorizontalNavigationSpacerItemComponent } from '@fuse/components/navigation/horizontal/components/spacer/spacer.component';
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
@NgModule({
declarations: [
FuseHorizontalNavigationBasicItemComponent,
FuseHorizontalNavigationBranchItemComponent,
FuseHorizontalNavigationDividerItemComponent,
FuseHorizontalNavigationSpacerItemComponent,
FuseHorizontalNavigationComponent,
FuseVerticalNavigationAsideItemComponent,
FuseVerticalNavigationBasicItemComponent,
FuseVerticalNavigationCollapsableItemComponent,
FuseVerticalNavigationDividerItemComponent,
FuseVerticalNavigationGroupItemComponent,
FuseVerticalNavigationSpacerItemComponent,
FuseVerticalNavigationComponent
],
imports : [
CommonModule,
RouterModule,
MatButtonModule,
MatDividerModule,
MatIconModule,
MatMenuModule,
MatTooltipModule,
FuseScrollbarModule
],
exports : [
FuseHorizontalNavigationComponent,
FuseVerticalNavigationComponent
]
})
export class FuseNavigationModule
{
}

4
src/@fuse/components/navigation/navigation.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class FuseNavigationService
{
@ -160,7 +160,7 @@ export class FuseNavigationService
getItemParent(
id: string,
navigation: FuseNavigationItem[],
parent: FuseNavigationItem[] | FuseNavigationItem
parent: FuseNavigationItem[] | FuseNavigationItem,
): FuseNavigationItem[] | FuseNavigationItem | null
{
for ( const item of navigation )

1
src/@fuse/components/navigation/public-api.ts
View File

@ -1,5 +1,4 @@
export * from '@fuse/components/navigation/horizontal/horizontal.component';
export * from '@fuse/components/navigation/vertical/vertical.component';
export * from '@fuse/components/navigation/navigation.module';
export * from '@fuse/components/navigation/navigation.service';
export * from '@fuse/components/navigation/navigation.types';

32
src/@fuse/components/navigation/vertical/components/aside/aside.component.ts
View File

@ -1,15 +1,25 @@
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 { filter, Subject, takeUntil } from 'rxjs';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { NgClass, NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { NavigationEnd, Router } from '@angular/router';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { filter, Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-vertical-navigation-aside-item',
templateUrl : './aside.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
})
export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy
{
@ -34,7 +44,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _router: Router,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -70,9 +80,10 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
this._router.events
.pipe(
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
takeUntil(this._unsubscribeAll)
takeUntil(this._unsubscribeAll),
)
.subscribe((event: NavigationEnd) => {
.subscribe((event: NavigationEnd) =>
{
// Mark if active
this._markIfActive(event.urlAfterRedirects);
@ -83,8 +94,9 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
// Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();

20
src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
View File

@ -1,15 +1,20 @@
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { IsActiveMatchOptions } from '@angular/router';
import { Subject, takeUntil } from 'rxjs';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-vertical-navigation-basic-item',
templateUrl : './basic.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule],
})
export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy
{
@ -26,7 +31,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService,
private _fuseUtilsService: FuseUtilsService
private _fuseUtilsService: FuseUtilsService,
)
{
// Set the equivalent of {exact: false} as default for active match options.
@ -61,8 +66,9 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
// Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();

39
src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
View File

@ -1,17 +1,26 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { BooleanInput } from '@angular/cdk/coercion';
import { filter, Subject, takeUntil } from 'rxjs';
import { NgClass, NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { NavigationEnd, Router } from '@angular/router';
import { fuseAnimations } from '@fuse/animations';
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';
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { filter, Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-vertical-navigation-collapsable-item',
templateUrl : './collapsable.component.html',
animations : fuseAnimations,
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, forwardRef(() => FuseVerticalNavigationCollapsableItemComponent), FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
})
export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy
{
@ -34,7 +43,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _router: Router,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -51,7 +60,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
/* eslint-disable @typescript-eslint/naming-convention */
return {
'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
'fuse-vertical-navigation-item-expanded' : this.isExpanded
'fuse-vertical-navigation-item-expanded' : this.isExpanded,
};
/* eslint-enable @typescript-eslint/naming-convention */
}
@ -86,7 +95,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
// Listen for the onCollapsableItemCollapsed from the service
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((collapsedItem) => {
.subscribe((collapsedItem) =>
{
// Check if the collapsed item is null
if ( collapsedItem === null )
@ -106,7 +116,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
{
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((expandedItem) => {
.subscribe((expandedItem) =>
{
// Check if the expanded item is null
if ( expandedItem === null )
@ -141,9 +152,10 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
this._router.events
.pipe(
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
takeUntil(this._unsubscribeAll)
takeUntil(this._unsubscribeAll),
)
.subscribe((event: NavigationEnd) => {
.subscribe((event: NavigationEnd) =>
{
// If the item has a children that has a matching url with the current url, expand...
if ( this._hasActiveChild(this.item, event.urlAfterRedirects) )
@ -163,8 +175,9 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
// Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();

16
src/@fuse/components/navigation/vertical/components/divider/divider.component.ts
View File

@ -1,13 +1,16 @@
import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
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';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-vertical-navigation-divider-item',
templateUrl : './divider.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass],
})
export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy
{
@ -22,7 +25,7 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -41,8 +44,9 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
// Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();

23
src/@fuse/components/navigation/vertical/components/group/group.component.ts
View File

@ -1,14 +1,22 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { BooleanInput } from '@angular/cdk/coercion';
import { Subject, takeUntil } from 'rxjs';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { NgClass, NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-vertical-navigation-group-item',
templateUrl : './group.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, forwardRef(() => FuseVerticalNavigationGroupItemComponent), FuseVerticalNavigationSpacerItemComponent],
})
export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy
{
@ -28,7 +36,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -47,8 +55,9 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
// Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();

16
src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts
View File

@ -1,13 +1,16 @@
import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
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';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-vertical-navigation-spacer-item',
templateUrl : './spacer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass],
})
export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy
{
@ -22,7 +25,7 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -41,8 +44,9 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
// Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();

80
src/@fuse/components/navigation/vertical/vertical.component.ts
View File

@ -1,15 +1,21 @@
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
import { NavigationEnd, Router } from '@angular/router';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
import { DOCUMENT, NgFor, NgIf } from '@angular/common';
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { fuseAnimations } from '@fuse/animations';
import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-vertical-navigation',
@ -18,7 +24,9 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
animations : fuseAnimations,
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseVerticalNavigation'
exportAs : 'fuseVerticalNavigation',
standalone : true,
imports : [FuseScrollbarDirective, NgFor, NgIf, FuseVerticalNavigationAsideItemComponent, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
})
export class FuseVerticalNavigationComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy
{
@ -72,13 +80,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
private _router: Router,
private _scrollStrategyOptions: ScrollStrategyOptions,
private _fuseNavigationService: FuseNavigationService,
private _fuseUtilsService: FuseUtilsService
private _fuseUtilsService: FuseUtilsService,
)
{
this._handleAsideOverlayClick = (): void => {
this._handleAsideOverlayClick = (): void =>
{
this.closeAside();
};
this._handleOverlayClick = (): void => {
this._handleOverlayClick = (): void =>
{
this.close();
};
}
@ -102,7 +112,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
'fuse-vertical-navigation-mode-side' : this.mode === 'side',
'fuse-vertical-navigation-opened' : this.opened,
'fuse-vertical-navigation-position-left' : this.position === 'left',
'fuse-vertical-navigation-position-right' : this.position === 'right'
'fuse-vertical-navigation-position-right' : this.position === 'right',
};
/* eslint-enable @typescript-eslint/naming-convention */
}
@ -113,7 +123,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
@HostBinding('style') get styleList(): any
{
return {
'visibility': this.opened ? 'visible' : 'hidden'
'visibility': this.opened ? 'visible' : 'hidden',
};
}
@ -142,16 +152,18 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._fuseScrollbarDirectivesSubscription =
merge(
this.onCollapsableItemCollapsed,
this.onCollapsableItemExpanded
this.onCollapsableItemExpanded,
)
.pipe(
takeUntil(this._unsubscribeAll),
delay(250)
delay(250),
)
.subscribe(() => {
.subscribe(() =>
{
// Loop through the scrollbars and update them
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
{
fuseScrollbarDirective.update();
});
});
@ -253,7 +265,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// Enable the animations after a delay
// The delay must be bigger than the current transition-duration
// to make sure nothing will be animated while the mode changing
setTimeout(() => {
setTimeout(() =>
{
this._enableAnimations();
}, 500);
}
@ -308,9 +321,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._router.events
.pipe(
filter(event => event instanceof NavigationEnd),
takeUntil(this._unsubscribeAll)
takeUntil(this._unsubscribeAll),
)
.subscribe(() => {
.subscribe(() =>
{
// If the mode is 'over' and the navigation is opened...
if ( this.mode === 'over' && this.opened )
@ -339,8 +353,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
// This fixes the problem by reading the 'top' value from the html element and adding it as a
// 'marginTop' to the navigation itself.
this._mutationObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
this._mutationObserver = new MutationObserver((mutations) =>
{
mutations.forEach((mutation) =>
{
const mutationTarget = mutation.target as HTMLElement;
if ( mutation.attributeName === 'class' )
{
@ -358,10 +374,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
});
this._mutationObserver.observe(this._document.documentElement, {
attributes : true,
attributeFilter: ['class']
attributeFilter: ['class'],
});
setTimeout(() => {
setTimeout(() =>
{
// Return if 'navigation content' element does not exist
if ( !this._navigationContentEl )
@ -386,7 +403,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
else
{
// Go through all the scrollbar directives
this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
{
// Skip if not enabled
if ( !fuseScrollbarDirective.isEnabled() )
@ -624,7 +642,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// Create the enter animation and attach it to the player
this._player = this._animationBuilder.build([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
]).create(this._overlay);
// Play the animation
@ -648,14 +666,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// Create the leave animation and attach it to the player
this._player = this._animationBuilder.build([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
]).create(this._overlay);
// Play the animation
this._player.play();
// Once the animation is done...
this._player.onDone(() => {
this._player.onDone(() =>
{
// If the overlay still exists...
if ( this._overlay )
@ -699,7 +718,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._player =
this._animationBuilder
.build([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
]).create(this._asideOverlay);
// Play the animation
@ -725,14 +744,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._player =
this._animationBuilder
.build([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
]).create(this._asideOverlay);
// Play the animation
this._player.play();
// Once the animation is done...
this._player.onDone(() => {
this._player.onDone(() =>
{
// If the aside overlay still exists...
if ( this._asideOverlay )

1
src/@fuse/directives/scroll-reset/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/directives/scroll-reset/scroll-reset.directive';
export * from '@fuse/directives/scroll-reset/scroll-reset.module';

12
src/@fuse/directives/scroll-reset/scroll-reset.directive.ts
View File

@ -3,8 +3,9 @@ import { NavigationEnd, Router } from '@angular/router';
import { filter, Subject, takeUntil } from 'rxjs';
@Directive({
selector: '[fuseScrollReset]',
exportAs: 'fuseScrollReset'
selector : '[fuseScrollReset]',
exportAs : 'fuseScrollReset',
standalone: true,
})
export class FuseScrollResetDirective implements OnInit, OnDestroy
{
@ -15,7 +16,7 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
*/
constructor(
private _elementRef: ElementRef,
private _router: Router
private _router: Router,
)
{
}
@ -32,8 +33,9 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
// Subscribe to NavigationEnd event
this._router.events.pipe(
filter(event => event instanceof NavigationEnd),
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Reset the element's scroll position to the top
this._elementRef.nativeElement.scrollTop = 0;

14
src/@fuse/directives/scroll-reset/scroll-reset.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import { FuseScrollResetDirective } from '@fuse/directives/scroll-reset/scroll-reset.directive';
@NgModule({
declarations: [
FuseScrollResetDirective
],
exports : [
FuseScrollResetDirective
]
})
export class FuseScrollResetModule
{
}

1
src/@fuse/directives/scrollbar/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/directives/scrollbar/scrollbar.directive';
export * from '@fuse/directives/scrollbar/scrollbar.module';

35
src/@fuse/directives/scrollbar/scrollbar.directive.ts
View File

@ -1,18 +1,19 @@
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { Router } from '@angular/router';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform';
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
import PerfectScrollbar from 'perfect-scrollbar';
import { merge } from 'lodash-es';
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { Router } from '@angular/router';
import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
import { merge } from 'lodash-es';
import PerfectScrollbar from 'perfect-scrollbar';
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
/**
* Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
*/
@Directive({
selector: '[fuseScrollbar]',
exportAs: 'fuseScrollbar'
selector : '[fuseScrollbar]',
exportAs : 'fuseScrollbar',
standalone: true,
})
export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
{
@ -34,7 +35,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
constructor(
private _elementRef: ElementRef,
private _platform: Platform,
private _router: Router
private _router: Router,
)
{
}
@ -101,11 +102,13 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
}
// Destroy and re-init the PerfectScrollbar to update its options
setTimeout(() => {
setTimeout(() =>
{
this._destroy();
});
setTimeout(() => {
setTimeout(() =>
{
this._init();
});
}
@ -120,9 +123,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
fromEvent(window, 'resize')
.pipe(
takeUntil(this._unsubscribeAll),
debounceTime(150)
debounceTime(150),
)
.subscribe(() => {
.subscribe(() =>
{
// Update the PerfectScrollbar
this.update();
@ -203,14 +207,14 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
{
scrollbarPosition = new ScrollbarPosition(
this._ps.reach.x || 0,
this._ps.reach.y || 0
this._ps.reach.y || 0,
);
}
else
{
scrollbarPosition = new ScrollbarPosition(
this._elementRef.nativeElement.scrollLeft,
this._elementRef.nativeElement.scrollTop
this._elementRef.nativeElement.scrollTop,
);
}
@ -388,7 +392,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
const cosParameter = (oldValue - value) / 2;
const step = (newTimestamp: number): void => {
const step = (newTimestamp: number): void =>
{
scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));

14
src/@fuse/directives/scrollbar/scrollbar.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
@NgModule({
declarations: [
FuseScrollbarDirective
],
exports : [
FuseScrollbarDirective
]
})
export class FuseScrollbarModule
{
}

14
src/@fuse/fuse.module.ts
View File

@ -15,7 +15,7 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
FuseMediaWatcherModule,
FusePlatformModule,
FuseSplashScreenModule,
FuseUtilsModule
FuseUtilsModule,
],
providers: [
{
@ -24,17 +24,17 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
useValue: {
doctype: true,
theme : false,
version: true
}
version: true,
},
},
{
// Use the 'fill' appearance on Angular Material form fields by default
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: {
appearance: 'fill'
}
}
]
appearance: 'fill',
},
},
],
})
export class FuseModule
{

21
src/@fuse/lib/mock-api/mock-api.interceptor.ts
View File

@ -1,11 +1,11 @@
import { Inject, Injectable } from '@angular/core';
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { delay, Observable, of, switchMap, throwError } from 'rxjs';
import { Inject, Injectable } from '@angular/core';
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
import { delay, Observable, of, switchMap, throwError } from 'rxjs';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class FuseMockApiInterceptor implements HttpInterceptor
{
@ -14,7 +14,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
*/
constructor(
@Inject(FUSE_MOCK_API_DEFAULT_DELAY) private _defaultDelay: number,
private _fuseMockApiService: FuseMockApiService
private _fuseMockApiService: FuseMockApiService,
)
{
}
@ -30,7 +30,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
// Try to get the request handler
const {
handler,
urlParams
urlParams,
} = this._fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
// Pass through if the request handler does not exist
@ -48,7 +48,8 @@ export class FuseMockApiInterceptor implements HttpInterceptor
// Subscribe to the response function observable
return handler.response.pipe(
delay(handler.delay ?? this._defaultDelay ?? 0),
switchMap((response) => {
switchMap((response) =>
{
// If there is no response data,
// throw an error response
@ -57,7 +58,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
response = new HttpErrorResponse({
error : 'NOT FOUND',
status : 404,
statusText: 'NOT FOUND'
statusText: 'NOT FOUND',
});
return throwError(response);
@ -66,7 +67,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
// Parse the response data
const data = {
status: response[0],
body : response[1]
body : response[1],
};
// If the status code is in between 200 and 300,
@ -76,7 +77,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
response = new HttpResponse({
body : data.body,
status : data.status,
statusText: 'OK'
statusText: 'OK',
});
return of(response);
@ -87,7 +88,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
response = new HttpErrorResponse({
error : data.body.error,
status : data.status,
statusText: 'ERROR'
statusText: 'ERROR',
});
return throwError(response);

16
src/@fuse/lib/mock-api/mock-api.module.ts
View File

@ -1,5 +1,5 @@
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor';
@ -8,9 +8,9 @@ import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor'
{
provide : HTTP_INTERCEPTORS,
useClass: FuseMockApiInterceptor,
multi : true
}
]
multi : true,
},
],
})
export class FuseMockApiModule
{
@ -30,13 +30,13 @@ export class FuseMockApiModule
provide : APP_INITIALIZER,
deps : [...mockApiServices],
useFactory: () => (): any => null,
multi : true
multi : true,
},
{
provide : FUSE_MOCK_API_DEFAULT_DELAY,
useValue: config?.delay ?? 0
}
]
useValue: config?.delay ?? 0,
},
],
};
}
}

6
src/@fuse/lib/mock-api/mock-api.request-handler.ts
View File

@ -1,6 +1,6 @@
import { HttpRequest } from '@angular/common/http';
import { Observable, of, take, throwError } from 'rxjs';
import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
import { Observable, of, take, throwError } from 'rxjs';
export class FuseMockApiHandler
{
@ -17,7 +17,7 @@ export class FuseMockApiHandler
*/
constructor(
public url: string,
public delay?: number
public delay?: number,
)
{
}
@ -55,7 +55,7 @@ export class FuseMockApiHandler
// Execute the reply callback
const replyResult = this._reply({
request : this.request,
urlParams: this.urlParams
urlParams: this.urlParams,
});
// If the result of the reply callback is an observable...

13
src/@fuse/lib/mock-api/mock-api.service.ts
View File

@ -1,10 +1,10 @@
import { Injectable } from '@angular/core';
import { compact, fromPairs } from 'lodash-es';
import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler';
import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
import { compact, fromPairs } from 'lodash-es';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class FuseMockApiService
{
@ -16,7 +16,7 @@ export class FuseMockApiService
'put' : new Map<string, FuseMockApiHandler>(),
'head' : new Map<string, FuseMockApiHandler>(),
'jsonp' : new Map<string, FuseMockApiHandler>(),
'options': new Map<string, FuseMockApiHandler>()
'options': new Map<string, FuseMockApiHandler>(),
};
/**
@ -42,7 +42,7 @@ export class FuseMockApiService
// Prepare the return object
const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = {
handler : undefined,
urlParams: {}
urlParams: {},
};
// Split the url
@ -52,7 +52,8 @@ export class FuseMockApiService
const handlers = this._handlers[method.toLowerCase()];
// Iterate through the handlers
handlers.forEach((handler, handlerUrl) => {
handlers.forEach((handler, handlerUrl) =>
{
// Skip if there is already a matching handler
if ( matchingHandler.handler )
@ -80,7 +81,7 @@ export class FuseMockApiService
// Extract and assign the parameters
matchingHandler.urlParams = fromPairs(compact(handlerUrlParts.map((handlerUrlPart, index) =>
handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined
handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined,
)));
}
});

3
src/@fuse/lib/mock-api/mock-api.utils.ts
View File

@ -26,7 +26,8 @@ export class FuseMockApiUtils
d += performance.now();
}
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) =>
{
const r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);

14
src/@fuse/pipes/find-by-key/find-by-key.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import { FuseFindByKeyPipe } from '@fuse/pipes/find-by-key/find-by-key.pipe';
@NgModule({
declarations: [
FuseFindByKeyPipe
],
exports : [
FuseFindByKeyPipe
]
})
export class FuseFindByKeyPipeModule
{
}

5
src/@fuse/pipes/find-by-key/find-by-key.pipe.ts
View File

@ -4,8 +4,9 @@ import { Pipe, PipeTransform } from '@angular/core';
* Finds an object from given source using the given key - value pairs
*/
@Pipe({
name: 'fuseFindByKey',
pure: false
name : 'fuseFindByKey',
pure : false,
standalone: true,
})
export class FuseFindByKeyPipe implements PipeTransform
{

8
src/@fuse/services/config/config.module.ts
View File

@ -1,6 +1,6 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
import { FuseConfigService } from '@fuse/services/config/config.service';
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
import { FuseConfigService } from '@fuse/services/config/config.service';
@NgModule()
export class FuseConfigModule
@ -24,9 +24,9 @@ export class FuseConfigModule
providers: [
{
provide : FUSE_APP_CONFIG,
useValue: config
}
]
useValue: config,
},
],
};
}
}

6
src/@fuse/services/config/config.service.ts
View File

@ -1,10 +1,10 @@
import { Inject, Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { merge } from 'lodash-es';
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
import { merge } from 'lodash-es';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class FuseConfigService
{

14
src/@fuse/services/confirmation/confirmation.module.ts
View File

@ -1,24 +1,22 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service';
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [
FuseConfirmationDialogComponent
],
imports : [
MatButtonModule,
MatDialogModule,
MatIconModule,
CommonModule
CommonModule,
FuseConfirmationDialogComponent,
],
providers: [
FuseConfirmationService,
],
providers : [
FuseConfirmationService
]
})
export class FuseConfirmationModule
{

18
src/@fuse/services/confirmation/confirmation.service.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { merge } from 'lodash-es';
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
import { merge } from 'lodash-es';
@Injectable()
export class FuseConfirmationService
@ -13,27 +13,27 @@ export class FuseConfirmationService
icon : {
show : true,
name : 'heroicons_outline:exclamation',
color: 'warn'
color: 'warn',
},
actions : {
confirm: {
show : true,
label: 'Confirm',
color: 'warn'
color: 'warn',
},
cancel : {
show : true,
label: 'Cancel'
}
label: 'Cancel',
},
dismissible: false
},
dismissible: false,
};
/**
* Constructor
*/
constructor(
private _matDialog: MatDialog
private _matDialog: MatDialog,
)
{
}
@ -52,7 +52,7 @@ export class FuseConfirmationService
autoFocus : false,
disableClose: !userConfig.dismissible,
data : userConfig,
panelClass : 'fuse-confirmation-dialog-panel'
panelClass : 'fuse-confirmation-dialog-panel',
});
}
}

11
src/@fuse/services/confirmation/dialog/dialog.component.ts
View File

@ -1,5 +1,8 @@
import { NgClass, NgIf } from '@angular/common';
import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
@Component({
@ -20,9 +23,11 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
}
}
}
`
`,
],
encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.None,
standalone : true,
imports : [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
})
export class FuseConfirmationDialogComponent
{

12
src/@fuse/services/loading/loading.interceptor.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { finalize, Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { FuseLoadingService } from '@fuse/services/loading/loading.service';
import { finalize, Observable } from 'rxjs';
@Injectable()
export class FuseLoadingInterceptor implements HttpInterceptor
@ -12,12 +12,13 @@ export class FuseLoadingInterceptor implements HttpInterceptor
* Constructor
*/
constructor(
private _fuseLoadingService: FuseLoadingService
private _fuseLoadingService: FuseLoadingService,
)
{
// Subscribe to the auto
this._fuseLoadingService.auto$
.subscribe((value) => {
.subscribe((value) =>
{
this.handleRequestsAutomatically = value;
});
}
@ -40,7 +41,8 @@ export class FuseLoadingInterceptor implements HttpInterceptor
this._fuseLoadingService._setLoadingStatus(true, req.url);
return next.handle(req).pipe(
finalize(() => {
finalize(() =>
{
// Set the status to false if there are any errors or the request is completed
this._fuseLoadingService._setLoadingStatus(false, req.url);
}));

8
src/@fuse/services/loading/loading.module.ts
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor';
@NgModule({
@ -7,9 +7,9 @@ import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.intercept
{
provide : HTTP_INTERCEPTORS,
useClass: FuseLoadingInterceptor,
multi : true
}
]
multi : true,
},
],
})
export class FuseLoadingModule
{

4
src/@fuse/services/loading/loading.service.ts
View File

@ -1,9 +1,9 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class FuseLoadingService
{

4
src/@fuse/services/media-watcher/media-watcher.module.ts
View File

@ -3,8 +3,8 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher/media-watc
@NgModule({
providers: [
FuseMediaWatcherService
]
FuseMediaWatcherService,
],
})
export class FuseMediaWatcherModule
{

17
src/@fuse/services/media-watcher/media-watcher.service.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
import { fromPairs } from 'lodash-es';
import { Injectable } from '@angular/core';
import { FuseConfigService } from '@fuse/services/config';
import { fromPairs } from 'lodash-es';
import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
@Injectable()
export class FuseMediaWatcherService
@ -14,13 +14,14 @@ export class FuseMediaWatcherService
*/
constructor(
private _breakpointObserver: BreakpointObserver,
private _fuseConfigService: FuseConfigService
private _fuseConfigService: FuseConfigService,
)
{
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) => {
map((state) =>
{
// Prepare the observable values and set their defaults
const matchingAliases: string[] = [];
@ -44,10 +45,10 @@ export class FuseMediaWatcherService
// Execute the observable
this._onMediaChange.next({
matchingAliases,
matchingQueries
matchingQueries,
});
})
))
}),
)),
).subscribe();
}

4
src/@fuse/services/platform/platform.module.ts
View File

@ -3,8 +3,8 @@ import { FusePlatformService } from '@fuse/services/platform/platform.service';
@NgModule({
providers: [
FusePlatformService
]
FusePlatformService,
],
})
export class FusePlatformModule
{

4
src/@fuse/services/platform/platform.service.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { Platform } from '@angular/cdk/platform';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class FusePlatformService
{

4
src/@fuse/services/splash-screen/splash-screen.module.ts
View File

@ -3,8 +3,8 @@ import { FuseSplashScreenService } from '@fuse/services/splash-screen/splash-scr
@NgModule({
providers: [
FuseSplashScreenService
]
FuseSplashScreenService,
],
})
export class FuseSplashScreenModule
{

9
src/@fuse/services/splash-screen/splash-screen.service.ts
View File

@ -1,5 +1,5 @@
import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter, take } from 'rxjs';
@ -11,16 +11,17 @@ export class FuseSplashScreenService
*/
constructor(
@Inject(DOCUMENT) private _document: any,
private _router: Router
private _router: Router,
)
{
// Hide it on the first NavigationEnd event
this._router.events
.pipe(
filter(event => event instanceof NavigationEnd),
take(1)
take(1),
)
.subscribe(() => {
.subscribe(() =>
{
this.hide();
});
}

4
src/@fuse/services/utils/utils.module.ts
View File

@ -3,8 +3,8 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
@NgModule({
providers: [
FuseUtilsService
]
FuseUtilsService,
],
})
export class FuseUtilsModule
{

6
src/@fuse/services/utils/utils.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { IsActiveMatchOptions } from '@angular/router';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class FuseUtilsService
{
@ -26,7 +26,7 @@ export class FuseUtilsService
paths : 'exact',
fragment : 'ignored',
matrixParams: 'ignored',
queryParams : 'exact'
queryParams : 'exact',
};
}
@ -39,7 +39,7 @@ export class FuseUtilsService
paths : 'subset',
fragment : 'ignored',
matrixParams: 'ignored',
queryParams : 'subset'
queryParams : 'subset',
};
}

2
src/@fuse/styles/user-themes.scss
View File

File diff suppressed because one or more lines are too long

18
src/@fuse/tailwind/plugins/icon-size.js
View File

@ -3,7 +3,7 @@ const plugin = require('tailwindcss/plugin');
module.exports = plugin(
({
matchUtilities,
theme
theme,
}) =>
{
matchUtilities(
@ -17,12 +17,12 @@ module.exports = plugin(
lineHeight: value,
[`svg`] : {
width : value,
height: value
}
})
height: value,
},
}),
},
{
values: theme('iconSize')
values: theme('iconSize'),
});
},
{
@ -43,8 +43,8 @@ module.exports = plugin(
18 : '4.5rem',
20 : '5rem',
22 : '5.5rem',
24 : '6rem'
}
}
}
24 : '6rem',
},
},
},
);

68
src/@fuse/tailwind/plugins/theming.js
View File

@ -26,9 +26,9 @@ const normalizeTheme = (theme) =>
paletteName,
{
...palette,
DEFAULT: palette['DEFAULT'] || palette[500]
}
]
DEFAULT: palette['DEFAULT'] || palette[500],
},
],
));
};
@ -38,7 +38,7 @@ const normalizeTheme = (theme) =>
const theming = plugin.withOptions((options) => ({
addComponents,
e,
theme
theme,
}) =>
{
/**
@ -48,7 +48,7 @@ const theming = plugin.withOptions((options) => ({
*/
const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
themeName,
_.defaults({}, theme, options.themes['default'])
_.defaults({}, theme, options.themes['default']),
]));
/**
@ -57,7 +57,7 @@ const theming = plugin.withOptions((options) => ({
*/
let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
themeName,
normalizeTheme(theme)
normalizeTheme(theme),
]));
/**
@ -73,12 +73,12 @@ const theming = plugin.withOptions((options) => ({
...palette,
contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
hue,
_.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
]))
}
_.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color,
])),
['primary', 'accent', 'warn']
)
},
])),
['primary', 'accent', 'warn'],
),
]));
/**
@ -89,8 +89,8 @@ const theming = plugin.withOptions((options) => ({
themeName,
{
selector: `".theme-${themeName}"`,
...theme
}
...theme,
},
]));
/* Generate the SASS map using the themes object */
@ -134,15 +134,15 @@ const theming = plugin.withOptions((options) => ({
_.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
[
e(paletteName),
palette
palette,
],
[
`on-${e(paletteName)}`,
_.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
]
])
))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
]))
_.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color])),
],
]),
))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
])),
);
/**
@ -185,8 +185,8 @@ const theming = plugin.withOptions((options) => ({
/* Generate custom properties from customProps */
..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
}
..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
},
};
});
@ -211,8 +211,8 @@ const theming = plugin.withOptions((options) => ({
*/
colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
[name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`],
[`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`]
])))
[`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`],
]))),
},
fuse : {
customProps: {
@ -223,7 +223,7 @@ const theming = plugin.withOptions((options) => ({
'bg-default' : colors.slate[100],
'bg-dialog' : '#FFFFFF',
'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(),
'bg-status-bar': colors.slate[300]
'bg-status-bar': colors.slate[300],
},
dark : {
'bg-app-bar' : colors.slate[900],
@ -231,8 +231,8 @@ const theming = plugin.withOptions((options) => ({
'bg-default' : colors.slate[900],
'bg-dialog' : colors.slate[800],
'bg-hover' : 'rgba(255, 255, 255, 0.05)',
'bg-status-bar': colors.slate[900]
}
'bg-status-bar': colors.slate[900],
},
},
foreground: {
light: {
@ -243,7 +243,7 @@ const theming = plugin.withOptions((options) => ({
'border' : colors.slate[200],
'divider' : colors.slate[200],
'icon' : colors.slate[500],
'mat-icon' : colors.slate[500]
'mat-icon' : colors.slate[500],
},
dark : {
'text-default' : '#FFFFFF',
@ -253,14 +253,14 @@ const theming = plugin.withOptions((options) => ({
'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]
}
}
}
}
}
'mat-icon' : colors.slate[400],
},
},
},
},
},
};
}
},
);
module.exports = theming;

34
src/@fuse/tailwind/plugins/utilities.js
View File

@ -1,7 +1,7 @@
const plugin = require('tailwindcss/plugin');
module.exports = plugin(({
addComponents
addComponents,
}) =>
{
/*
@ -13,55 +13,55 @@ module.exports = plugin(({
{
'.mat-icon' : {
'--tw-text-opacity': '1',
color : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))'
color : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))',
},
'.text-default' : {
'--tw-text-opacity': '1 !important',
color : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important'
color : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important',
},
'.text-secondary' : {
'--tw-text-opacity': '1 !important',
color : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important'
color : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important',
},
'.text-hint' : {
'--tw-text-opacity': '1 !important',
color : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important'
color : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important',
},
'.text-disabled' : {
'--tw-text-opacity': '1 !important',
color : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important'
color : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important',
},
'.divider' : {
color: 'var(--fuse-divider) !important'
color: 'var(--fuse-divider) !important',
},
'.bg-card' : {
'--tw-bg-opacity': '1 !important',
backgroundColor : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important'
backgroundColor : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important',
},
'.bg-default' : {
'--tw-bg-opacity': '1 !important',
backgroundColor : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important'
backgroundColor : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important',
},
'.bg-dialog' : {
'--tw-bg-opacity': '1 !important',
backgroundColor : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important'
backgroundColor : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important',
},
'.ring-bg-default': {
'--tw-ring-opacity': '1 !important',
'--tw-ring-color' : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important'
'--tw-ring-color' : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important',
},
'.ring-bg-card' : {
'--tw-ring-opacity': '1 !important',
'--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important'
}
}
'--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important',
},
},
);
addComponents(
{
'.bg-hover': {
backgroundColor: 'var(--fuse-bg-hover) !important'
}
}
backgroundColor: 'var(--fuse-bg-hover) !important',
},
},
);
});

2
src/@fuse/tailwind/utils/generate-contrasts.js
View File

@ -23,7 +23,7 @@ const generateContrasts = (palette) =>
// Generate the contrasting colors
return _.fromPairs(_.map(palette, ((color, hue) => [
hue,
chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor
chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor,
]
)));
};

14
src/@fuse/tailwind/utils/generate-palette.js
View File

@ -22,7 +22,7 @@ const generatePalette = (config) =>
600: null,
700: null,
800: null,
900: null
900: null,
};
// If a single color is provided,
@ -58,14 +58,14 @@ const generatePalette = (config) =>
colors.unshift(
chroma.scale(['white', palette[500]])
.domain([0, 1])
.mode("lrgb")
.colors(50)[1]
.mode('lrgb')
.colors(50)[1],
);
colors.push(
chroma.scale(['black', palette[500]])
.domain([0, 1])
.mode("lrgb")
.colors(10)[1]
.mode('lrgb')
.colors(10)[1],
);
// Prepare the domains array
@ -74,7 +74,7 @@ const generatePalette = (config) =>
...Object.entries(palette)
.filter(([key, value]) => value)
.map(([key]) => parseInt(key) / 1000),
1
1,
];
// Generate the color scale
@ -93,7 +93,7 @@ const generatePalette = (config) =>
600: scale(0.6).hex(),
700: scale(0.7).hex(),
800: scale(0.8).hex(),
900: scale(0.9).hex()
900: scale(0.9).hex(),
};
};

4
src/@fuse/tailwind/utils/json-to-sass-map.js
View File

@ -13,13 +13,13 @@ module.exports = (data) =>
{
let scss = '';
if ( typeof chunk === "object" && !Array.isArray(chunk) )
if ( typeof chunk === 'object' && !Array.isArray(chunk) )
{
_.mapKeys(chunk, (value, key) =>
{
scss += key + ': ';
if ( typeof value === "object" )
if ( typeof value === 'object' )
{
if ( Array.isArray(value) )
{

3
src/@fuse/validators/validators.ts
View File

@ -20,7 +20,8 @@ export class FuseValidators
*/
static mustMatch(controlPath: string, matchingControlPath: string): ValidatorFn
{
return (formGroup: AbstractControl): ValidationErrors | null => {
return (formGroup: AbstractControl): ValidationErrors | null =>
{
// Get the control and matching control
const control = formGroup.get(controlPath);

5
src/app/app.component.ts
View File

@ -1,9 +1,12 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector : 'app-root',
templateUrl: './app.component.html',
styleUrls : ['./app.component.scss']
styleUrls : ['./app.component.scss'],
standalone : true,
imports : [RouterOutlet],
})
export class AppComponent
{

46
src/app/app.module.ts
View File

@ -1,46 +0,0 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ExtraOptions, PreloadAllModules, RouterModule } from '@angular/router';
import { FuseModule } from '@fuse';
import { FuseConfigModule } from '@fuse/services/config';
import { FuseMockApiModule } from '@fuse/lib/mock-api';
import { CoreModule } from 'app/core/core.module';
import { appConfig } from 'app/core/config/app.config';
import { mockApiServices } from 'app/mock-api';
import { LayoutModule } from 'app/layout/layout.module';
import { AppComponent } from 'app/app.component';
import { appRoutes } from 'app/app.routing';
const routerConfig: ExtraOptions = {
preloadingStrategy : PreloadAllModules,
scrollPositionRestoration: 'enabled'
};
@NgModule({
declarations: [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes, routerConfig),
// Fuse, FuseConfig & FuseMockAPI
FuseModule,
FuseConfigModule.forRoot(appConfig),
FuseMockApiModule.forRoot(mockApiServices),
// Core module of your application
CoreModule,
// Layout module of your application
LayoutModule
],
bootstrap : [
AppComponent
]
})
export class AppModule
{
}

10
src/app/app.resolvers.ts
View File

@ -1,14 +1,14 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { forkJoin, Observable } from 'rxjs';
import { MessagesService } from 'app/layout/common/messages/messages.service';
import { NavigationService } from 'app/core/navigation/navigation.service';
import { MessagesService } from 'app/layout/common/messages/messages.service';
import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
import { forkJoin, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class InitialDataResolver implements Resolve<any>
{
@ -20,7 +20,7 @@ export class InitialDataResolver implements Resolve<any>
private _navigationService: NavigationService,
private _notificationsService: NotificationsService,
private _quickChatService: QuickChatService,
private _shortcutsService: ShortcutsService
private _shortcutsService: ShortcutsService,
)
{
}
@ -43,7 +43,7 @@ export class InitialDataResolver implements Resolve<any>
this._messagesService.getAll(),
this._notificationsService.getAll(),
this._quickChatService.getChats(),
this._shortcutsService.getAll()
this._shortcutsService.getAll(),
]);
}
}

2
src/app/app.routing.ts
View File

@ -1,8 +1,8 @@
import { Route } from '@angular/router';
import { InitialDataResolver } from 'app/app.resolvers';
import { AuthGuard } from 'app/core/auth/guards/auth.guard';
import { NoAuthGuard } from 'app/core/auth/guards/noAuth.guard';
import { LayoutComponent } from 'app/layout/layout.component';
import { InitialDataResolver } from 'app/app.resolvers';
// @formatter:off
/* eslint-disable max-len */

11
src/app/core/auth/auth.interceptor.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { catchError, Observable, throwError } from 'rxjs';
import { Injectable } from '@angular/core';
import { AuthService } from 'app/core/auth/auth.service';
import { AuthUtils } from 'app/core/auth/auth.utils';
import { catchError, Observable, throwError } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor
@ -36,13 +36,14 @@ export class AuthInterceptor implements HttpInterceptor
if ( this._authService.accessToken && !AuthUtils.isTokenExpired(this._authService.accessToken) )
{
newReq = req.clone({
headers: req.headers.set('Authorization', 'Bearer ' + this._authService.accessToken)
headers: req.headers.set('Authorization', 'Bearer ' + this._authService.accessToken),
});
}
// Response
return next.handle(newReq).pipe(
catchError((error) => {
catchError((error) =>
{
// Catch "401 Unauthorized" responses
if ( error instanceof HttpErrorResponse && error.status === 401 )
@ -55,7 +56,7 @@ export class AuthInterceptor implements HttpInterceptor
}
return throwError(error);
})
}),
);
}
}

12
src/app/core/auth/auth.module.ts
View File

@ -1,20 +1,20 @@
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthService } from 'app/core/auth/auth.service';
import { NgModule } from '@angular/core';
import { AuthInterceptor } from 'app/core/auth/auth.interceptor';
import { AuthService } from 'app/core/auth/auth.service';
@NgModule({
imports : [
HttpClientModule
HttpClientModule,
],
providers: [
AuthService,
{
provide : HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi : true
}
]
multi : true,
},
],
})
export class AuthModule
{

20
src/app/core/auth/auth.service.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
import { Injectable } from '@angular/core';
import { AuthUtils } from 'app/core/auth/auth.utils';
import { UserService } from 'app/core/user/user.service';
import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
@Injectable()
export class AuthService
@ -14,7 +14,7 @@ export class AuthService
*/
constructor(
private _httpClient: HttpClient,
private _userService: UserService
private _userService: UserService,
)
{
}
@ -74,7 +74,8 @@ export class AuthService
}
return this._httpClient.post('api/auth/sign-in', credentials).pipe(
switchMap((response: any) => {
switchMap((response: any) =>
{
// Store the access token in the local storage
this.accessToken = response.accessToken;
@ -87,7 +88,7 @@ export class AuthService
// Return a new observable with the response
return of(response);
})
}),
);
}
@ -98,14 +99,15 @@ export class AuthService
{
// Sign in using the token
return this._httpClient.post('api/auth/sign-in-with-token', {
accessToken: this.accessToken
accessToken: this.accessToken,
}).pipe(
catchError(() =>
// Return false
of(false)
of(false),
),
switchMap((response: any) => {
switchMap((response: any) =>
{
// Replace the access token with the new one if it's available on
// the response object.
@ -127,7 +129,7 @@ export class AuthService
// Return true
return of(true);
})
}),
);
}

4
src/app/core/auth/auth.utils.ts
View File

@ -67,7 +67,7 @@ export class AuthUtils
if ( str.length % 4 === 1 )
{
throw new Error(
'\'atob\' failed: The string to be decoded is not correctly encoded.'
'\'atob\' failed: The string to be decoded is not correctly encoded.',
);
}
@ -108,7 +108,7 @@ export class AuthUtils
return decodeURIComponent(
Array.prototype.map
.call(this._b64decode(str), (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
.join('')
.join(''),
);
}

10
src/app/core/auth/guards/auth.guard.ts
View File

@ -1,14 +1,16 @@
import { inject } from '@angular/core';
import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
import { of, switchMap } from 'rxjs';
import { AuthService } from 'app/core/auth/auth.service';
import { of, switchMap } from 'rxjs';
export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
{
const router: Router = inject(Router);
// Check the authentication status
return inject(AuthService).check().pipe(
switchMap((authenticated) => {
switchMap((authenticated) =>
{
// If the user is not authenticated...
if ( !authenticated )
@ -22,6 +24,6 @@ export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
// Allow the access
return of(true);
})
}),
);
};

10
src/app/core/auth/guards/noAuth.guard.ts
View File

@ -1,14 +1,16 @@
import { inject } from '@angular/core';
import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
import { of, switchMap } from 'rxjs';
import { AuthService } from 'app/core/auth/auth.service';
import { of, switchMap } from 'rxjs';
export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
{
const router: Router = inject(Router);
// Check the authentication status
return inject(AuthService).check().pipe(
switchMap((authenticated) => {
switchMap((authenticated) =>
{
// If the user is authenticated...
if ( authenticated )
@ -18,6 +20,6 @@ export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
// Allow the access
return of(true);
})
}),
);
};

18
src/app/core/config/app.config.ts
View File

@ -39,33 +39,33 @@ export const appConfig: AppConfig = {
sm: '600px',
md: '960px',
lg: '1280px',
xl: '1440px'
xl: '1440px',
},
theme : 'theme-default',
themes : [
{
id : 'theme-default',
name: 'Default'
name: 'Default',
},
{
id : 'theme-brand',
name: 'Brand'
name: 'Brand',
},
{
id : 'theme-teal',
name: 'Teal'
name: 'Teal',
},
{
id : 'theme-rose',
name: 'Rose'
name: 'Rose',
},
{
id : 'theme-purple',
name: 'Purple'
name: 'Purple',
},
{
id : 'theme-amber',
name: 'Amber'
}
]
name: 'Amber',
},
],
};

6
src/app/core/core.module.ts
View File

@ -7,8 +7,8 @@ import { TranslocoCoreModule } from 'app/core/transloco/transloco.module';
imports: [
AuthModule,
IconsModule,
TranslocoCoreModule
]
TranslocoCoreModule,
],
})
export class CoreModule
{
@ -16,7 +16,7 @@ export class CoreModule
* Constructor
*/
constructor(
@Optional() @SkipSelf() parentModule?: CoreModule
@Optional() @SkipSelf() parentModule?: CoreModule,
)
{
// Do not allow multiple injections

4
src/app/core/icons/icons.module.ts
View File

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
@NgModule()
export class IconsModule
@ -10,7 +10,7 @@ export class IconsModule
*/
constructor(
private _domSanitizer: DomSanitizer,
private _matIconRegistry: MatIconRegistry
private _matIconRegistry: MatIconRegistry,
)
{
// Register icon sets

11
src/app/core/navigation/navigation.service.ts
View File

@ -1,10 +1,10 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject, tap } from 'rxjs';
import { Injectable } from '@angular/core';
import { Navigation } from 'app/core/navigation/navigation.types';
import { Observable, ReplaySubject, tap } from 'rxjs';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class NavigationService
{
@ -39,9 +39,10 @@ export class NavigationService
get(): Observable<Navigation>
{
return this._httpClient.get<Navigation>('api/common/navigation').pipe(
tap((navigation) => {
tap((navigation) =>
{
this._navigation.next(navigation);
})
}),
);
}
}

6
src/app/core/transloco/transloco.http-loader.ts
View File

@ -1,10 +1,10 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { Translation, TranslocoLoader } from '@ngneat/transloco';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
providedIn: 'root',
})
export class TranslocoHttpLoader implements TranslocoLoader
{

Some files were not shown because too many files have changed in this diff Show More