purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-04-03 07:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added prettier and tailwindcss class sorter. First pass with the new formatter. This is a huge change, but it is long overdue.

Browse Source
This commit is contained in:
Sercan Yemen 2024-05-27 11:48:46 +03:00
parent 34138ad5fa
commit 48a7707b45
117 changed files with 3883 additions and 3572 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
.eslintrc.json
View File

@ -1,95 +0,0 @@
{
"root": true,
"env": {
"es6": true
},
"parserOptions": {
"ecmaVersion": 2018
},
"ignorePatterns": [
"projects/**/*"
],
"overrides": [
{
"files": [
"*.ts"
],
"parserOptions": {
"project": [
"tsconfig.json"
],
"createDefaultProgram": true
},
"extends": [
"plugin:@angular-eslint/ng-cli-compat",
"plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "",
"style": "kebab-case"
}
],
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "",
"style": "camelCase"
}
],
"@typescript-eslint/dot-notation": "off",
"@typescript-eslint/explicit-function-return-type": "error",
"@typescript-eslint/explicit-member-accessibility": [
"off",
{
"accessibility": "explicit"
}
],
"@typescript-eslint/no-inferrable-types": "off",
"arrow-parens": [
"error",
"as-needed",
{
"requireForBlockBody": true
}
],
"brace-style": [
"off",
"off"
],
"import/order": "off",
"max-len": [
"error",
{
"ignorePattern": "^import |^export | implements",
"code": 180
}
],
"no-underscore-dangle": "off",
"object-shorthand": "off",
"quote-props": [
"error",
"consistent"
],
"quotes": [
"error",
"single"
]
}
},
{
"files": [
"*.html"
],
"extends": [
"plugin:@angular-eslint/template/recommended"
],
"rules": {}
}
]
}

11
.prettierrc Normal file
View File

@ -0,0 +1,11 @@
{
"printWidth": 80,
"semi": true,
"bracketSameLine": false,
"trailingComma": "es5",
"tabWidth": 4,
"singleQuote": true,
"bracketSpacing": true,
"arrowParens": "always",
"plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
}

17
angular.json
View File

@ -20,9 +20,7 @@
"outputPath": "dist/fuse", "outputPath": "dist/fuse",
"index": "src/index.html", "index": "src/index.html",
"browser": "src/main.ts", "browser": "src/main.ts",
"polyfills": [ "polyfills": ["zone.js"],
"zone.js"
],
"tsConfig": "tsconfig.app.json", "tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss", "inlineStyleLanguage": "scss",
"allowedCommonJsDependencies": [ "allowedCommonJsDependencies": [
@ -44,9 +42,7 @@
} }
], ],
"stylePreprocessorOptions": { "stylePreprocessorOptions": {
"includePaths": [ "includePaths": ["src/@fuse/styles"]
"src/@fuse/styles"
]
}, },
"styles": [ "styles": [
"src/@fuse/styles/tailwind.scss", "src/@fuse/styles/tailwind.scss",
@ -100,10 +96,7 @@
"test": { "test": {
"builder": "@angular-devkit/build-angular:karma", "builder": "@angular-devkit/build-angular:karma",
"options": { "options": {
"polyfills": [ "polyfills": ["zone.js", "zone.js/testing"],
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json", "tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss", "inlineStyleLanguage": "scss",
"assets": [ "assets": [
@ -112,9 +105,7 @@
"input": "public" "input": "public"
} }
], ],
"styles": [ "styles": ["src/styles/styles.scss"],
"src/styles/styles.scss"
],
"scripts": [] "scripts": []
} }
} }

116
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "fuse-angular", "name": "fuse-angular",
"version": "19.1.0", "version": "20.0.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "fuse-angular", "name": "fuse-angular",
"version": "19.1.0", "version": "20.0.0",
"license": "https://themeforest.net/licenses/standard", "license": "https://themeforest.net/licenses/standard",
"dependencies": { "dependencies": {
"@angular/animations": "18.0.0", "@angular/animations": "18.0.0",
@ -56,6 +56,9 @@
"karma-jasmine-html-reporter": "2.1.0", "karma-jasmine-html-reporter": "2.1.0",
"lodash": "4.17.21", "lodash": "4.17.21",
"postcss": "8.4.38", "postcss": "8.4.38",
"prettier": "3.2.5",
"prettier-plugin-organize-imports": "3.2.4",
"prettier-plugin-tailwindcss": "0.5.14",
"tailwindcss": "3.4.3", "tailwindcss": "3.4.3",
"typescript": "5.4.5" "typescript": "5.4.5"
} }
@ -11184,6 +11187,115 @@
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true "dev": true
}, },
"node_modules/prettier": {
"version": "3.2.5",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
"integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
"dev": true,
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prettier-plugin-organize-imports": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.4.tgz",
"integrity": "sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==",
"dev": true,
"peerDependencies": {
"@volar/vue-language-plugin-pug": "^1.0.4",
"@volar/vue-typescript": "^1.0.4",
"prettier": ">=2.0",
"typescript": ">=2.9"
},
"peerDependenciesMeta": {
"@volar/vue-language-plugin-pug": {
"optional": true
},
"@volar/vue-typescript": {
"optional": true
}
}
},
"node_modules/prettier-plugin-tailwindcss": {
"version": "0.5.14",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.14.tgz",
"integrity": "sha512-Puaz+wPUAhFp8Lo9HuciYKM2Y2XExESjeT+9NQoVFXZsPPnc9VYss2SpxdQ6vbatmt8/4+SN0oe0I1cPDABg9Q==",
"dev": true,
"engines": {
"node": ">=14.21.3"
},
"peerDependencies": {
"@ianvs/prettier-plugin-sort-imports": "*",
"@prettier/plugin-pug": "*",
"@shopify/prettier-plugin-liquid": "*",
"@trivago/prettier-plugin-sort-imports": "*",
"@zackad/prettier-plugin-twig-melody": "*",
"prettier": "^3.0",
"prettier-plugin-astro": "*",
"prettier-plugin-css-order": "*",
"prettier-plugin-import-sort": "*",
"prettier-plugin-jsdoc": "*",
"prettier-plugin-marko": "*",
"prettier-plugin-organize-attributes": "*",
"prettier-plugin-organize-imports": "*",
"prettier-plugin-sort-imports": "*",
"prettier-plugin-style-order": "*",
"prettier-plugin-svelte": "*"
},
"peerDependenciesMeta": {
"@ianvs/prettier-plugin-sort-imports": {
"optional": true
},
"@prettier/plugin-pug": {
"optional": true
},
"@shopify/prettier-plugin-liquid": {
"optional": true
},
"@trivago/prettier-plugin-sort-imports": {
"optional": true
},
"@zackad/prettier-plugin-twig-melody": {
"optional": true
},
"prettier-plugin-astro": {
"optional": true
},
"prettier-plugin-css-order": {
"optional": true
},
"prettier-plugin-import-sort": {
"optional": true
},
"prettier-plugin-jsdoc": {
"optional": true
},
"prettier-plugin-marko": {
"optional": true
},
"prettier-plugin-organize-attributes": {
"optional": true
},
"prettier-plugin-organize-imports": {
"optional": true
},
"prettier-plugin-sort-imports": {
"optional": true
},
"prettier-plugin-style-order": {
"optional": true
},
"prettier-plugin-svelte": {
"optional": true
}
}
},
"node_modules/proc-log": { "node_modules/proc-log": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz", "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",

3
package.json
View File

@ -60,6 +60,9 @@
"karma-jasmine-html-reporter": "2.1.0", "karma-jasmine-html-reporter": "2.1.0",
"lodash": "4.17.21", "lodash": "4.17.21",
"postcss": "8.4.38", "postcss": "8.4.38",
"prettier": "3.2.5",
"prettier-plugin-organize-imports": "3.2.4",
"prettier-plugin-tailwindcss": "0.5.14",
"tailwindcss": "3.4.3", "tailwindcss": "3.4.3",
"typescript": "5.4.5" "typescript": "5.4.5"
} }

6
src/@fuse/animations/defaults.ts
View File

@ -1,13 +1,11 @@
export class FuseAnimationCurves export class FuseAnimationCurves {
{
static standard = 'cubic-bezier(0.4, 0.0, 0.2, 1)'; static standard = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
static deceleration = 'cubic-bezier(0.0, 0.0, 0.2, 1)'; static deceleration = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
static acceleration = 'cubic-bezier(0.4, 0.0, 1, 1)'; static acceleration = 'cubic-bezier(0.4, 0.0, 1, 1)';
static sharp = 'cubic-bezier(0.4, 0.0, 0.6, 1)'; static sharp = 'cubic-bezier(0.4, 0.0, 0.6, 1)';
} }
export class FuseAnimationDurations export class FuseAnimationDurations {
{
static complex = '375ms'; static complex = '375ms';
static entering = '225ms'; static entering = '225ms';
static exiting = '195ms'; static exiting = '195ms';

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

@ -1,34 +1,37 @@
import { animate, state, style, transition, trigger } from '@angular/animations'; import {
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults'; animate,
state,
style,
transition,
trigger,
} from '@angular/animations';
import {
FuseAnimationCurves,
FuseAnimationDurations,
} from '@fuse/animations/defaults';
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Expand / collapse // @ Expand / collapse
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const expandCollapse = trigger('expandCollapse', const expandCollapse = trigger('expandCollapse', [
[ state(
state('void, collapsed', 'void, collapsed',
style({ style({
height: '0', height: '0',
}), })
), ),
state('*, expanded', state('*, expanded', style('*')),
style('*'),
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('void <=> false, collapsed <=> false, expanded <=> false', []), transition('void <=> false, collapsed <=> false, expanded <=> false', []),
// Transition // Transition
transition('void <=> *, collapsed <=> expanded', transition('void <=> *, collapsed <=> expanded', animate('{{timings}}'), {
animate('{{timings}}'), params: {
{ timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
params: { },
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`, }),
}, ]);
},
),
],
);
export { expandCollapse }; export { expandCollapse };

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

@ -1,330 +1,330 @@
import { animate, state, style, transition, trigger } from '@angular/animations'; import {
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults'; animate,
state,
style,
transition,
trigger,
} from '@angular/animations';
import {
FuseAnimationCurves,
FuseAnimationDurations,
} from '@fuse/animations/defaults';
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Fade in // @ Fade in
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const fadeIn = trigger('fadeIn', const fadeIn = trigger('fadeIn', [
[ state(
state('void', 'void',
style({ style({
opacity: 0, opacity: 0,
}), })
), ),
state('*', state(
style({ '*',
opacity: 1, style({
}), opacity: 1,
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('void => false', []), transition('void => false', []),
// Transition // Transition
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Fade in top // @ Fade in top
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const fadeInTop = trigger('fadeInTop', const fadeInTop = trigger('fadeInTop', [
[ state(
state('void', 'void',
style({ style({
opacity : 0, opacity: 0,
transform: 'translate3d(0, -100%, 0)', transform: 'translate3d(0, -100%, 0)',
}), })
), ),
state('*', state(
style({ '*',
opacity : 1, style({
transform: 'translate3d(0, 0, 0)', opacity: 1,
}), transform: 'translate3d(0, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('void => false', []), transition('void => false', []),
// Transition // Transition
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Fade in bottom // @ Fade in bottom
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const fadeInBottom = trigger('fadeInBottom', const fadeInBottom = trigger('fadeInBottom', [
[ state(
state('void', 'void',
style({ style({
opacity : 0, opacity: 0,
transform: 'translate3d(0, 100%, 0)', transform: 'translate3d(0, 100%, 0)',
}), })
), ),
state('*', state(
style({ '*',
opacity : 1, style({
transform: 'translate3d(0, 0, 0)', opacity: 1,
}), transform: 'translate3d(0, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('void => false', []), transition('void => false', []),
// Transition // Transition
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Fade in left // @ Fade in left
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const fadeInLeft = trigger('fadeInLeft', const fadeInLeft = trigger('fadeInLeft', [
[ state(
state('void', 'void',
style({ style({
opacity : 0, opacity: 0,
transform: 'translate3d(-100%, 0, 0)', transform: 'translate3d(-100%, 0, 0)',
}), })
), ),
state('*', state(
style({ '*',
opacity : 1, style({
transform: 'translate3d(0, 0, 0)', opacity: 1,
}), transform: 'translate3d(0, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('void => false', []), transition('void => false', []),
// Transition // Transition
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Fade in right // @ Fade in right
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const fadeInRight = trigger('fadeInRight', const fadeInRight = trigger('fadeInRight', [
[ state(
state('void', 'void',
style({ style({
opacity : 0, opacity: 0,
transform: 'translate3d(100%, 0, 0)', transform: 'translate3d(100%, 0, 0)',
}), })
), ),
state('*', state(
style({ '*',
opacity : 1, style({
transform: 'translate3d(0, 0, 0)', opacity: 1,
}), transform: 'translate3d(0, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('void => false', []), transition('void => false', []),
// Transition // Transition
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Fade out // @ Fade out
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const fadeOut = trigger('fadeOut', const fadeOut = trigger('fadeOut', [
[ state(
state('*', '*',
style({ style({
opacity: 1, opacity: 1,
}), })
), ),
state('void', state(
style({ 'void',
opacity: 0, style({
}), opacity: 0,
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('false => void', []), transition('false => void', []),
// Transition // Transition
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Fade out top // @ Fade out top
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const fadeOutTop = trigger('fadeOutTop', const fadeOutTop = trigger('fadeOutTop', [
[ state(
state('*', '*',
style({ style({
opacity : 1, opacity: 1,
transform: 'translate3d(0, 0, 0)', transform: 'translate3d(0, 0, 0)',
}), })
), ),
state('void', state(
style({ 'void',
opacity : 0, style({
transform: 'translate3d(0, -100%, 0)', opacity: 0,
}), transform: 'translate3d(0, -100%, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('false => void', []), transition('false => void', []),
// Transition // Transition
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Fade out bottom // @ Fade out bottom
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const fadeOutBottom = trigger('fadeOutBottom', const fadeOutBottom = trigger('fadeOutBottom', [
[ state(
state('*', '*',
style({ style({
opacity : 1, opacity: 1,
transform: 'translate3d(0, 0, 0)', transform: 'translate3d(0, 0, 0)',
}), })
), ),
state('void', state(
style({ 'void',
opacity : 0, style({
transform: 'translate3d(0, 100%, 0)', opacity: 0,
}), transform: 'translate3d(0, 100%, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('false => void', []), transition('false => void', []),
// Transition // Transition
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Fade out left // @ Fade out left
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const fadeOutLeft = trigger('fadeOutLeft', const fadeOutLeft = trigger('fadeOutLeft', [
[ state(
state('*', '*',
style({ style({
opacity : 1, opacity: 1,
transform: 'translate3d(0, 0, 0)', transform: 'translate3d(0, 0, 0)',
}), })
), ),
state('void', state(
style({ 'void',
opacity : 0, style({
transform: 'translate3d(-100%, 0, 0)', opacity: 0,
}), transform: 'translate3d(-100%, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('false => void', []), transition('false => void', []),
// Transition // Transition
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Fade out right // @ Fade out right
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const fadeOutRight = trigger('fadeOutRight', const fadeOutRight = trigger('fadeOutRight', [
[ state(
state('*', '*',
style({ style({
opacity : 1, opacity: 1,
transform: 'translate3d(0, 0, 0)', transform: 'translate3d(0, 0, 0)',
}), })
), ),
state('void', state(
style({ 'void',
opacity : 0, style({
transform: 'translate3d(100%, 0, 0)', opacity: 0,
}), transform: 'translate3d(100%, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('false => void', []), transition('false => void', []),
// Transition // Transition
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`, },
}, }),
}, ]);
),
],
);
export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight }; export {
fadeIn,
fadeInBottom,
fadeInLeft,
fadeInRight,
fadeInTop,
fadeOut,
fadeOutBottom,
fadeOutLeft,
fadeOutRight,
fadeOutTop,
};

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

@ -1,15 +1,50 @@
import { expandCollapse } from '@fuse/animations/expand-collapse'; import { expandCollapse } from '@fuse/animations/expand-collapse';
import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@fuse/animations/fade'; import {
fadeIn,
fadeInBottom,
fadeInLeft,
fadeInRight,
fadeInTop,
fadeOut,
fadeOutBottom,
fadeOutLeft,
fadeOutRight,
fadeOutTop,
} from '@fuse/animations/fade';
import { shake } from '@fuse/animations/shake'; import { shake } from '@fuse/animations/shake';
import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@fuse/animations/slide'; import {
slideInBottom,
slideInLeft,
slideInRight,
slideInTop,
slideOutBottom,
slideOutLeft,
slideOutRight,
slideOutTop,
} from '@fuse/animations/slide';
import { zoomIn, zoomOut } from '@fuse/animations/zoom'; import { zoomIn, zoomOut } from '@fuse/animations/zoom';
export const fuseAnimations = [ export const fuseAnimations = [
expandCollapse, expandCollapse,
fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeIn,
fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeInTop,
fadeInBottom,
fadeInLeft,
fadeInRight,
fadeOut,
fadeOutTop,
fadeOutBottom,
fadeOutLeft,
fadeOutRight,
shake, shake,
slideInTop, slideInBottom, slideInLeft, slideInRight, slideInTop,
slideOutTop, slideOutBottom, slideOutLeft, slideOutRight, slideInBottom,
zoomIn, zoomOut, slideInLeft,
slideInRight,
slideOutTop,
slideOutBottom,
slideOutLeft,
slideOutRight,
zoomIn,
zoomOut,
]; ];

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

@ -1,73 +1,78 @@
import { animate, keyframes, style, transition, trigger } from '@angular/animations'; import {
animate,
keyframes,
style,
transition,
trigger,
} from '@angular/animations';
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Shake // @ Shake
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const shake = trigger('shake', const shake = trigger('shake', [
[ // Prevent the transition if the state is false
transition('void => false', []),
// Prevent the transition if the state is false // Transition
transition('void => false', []), transition(
'void => *, * => true',
// Transition [
transition('void => *, * => true', animate(
[ '{{timings}}',
animate('{{timings}}', keyframes([
keyframes([ style({
style({ transform: 'translate3d(0, 0, 0)',
transform: 'translate3d(0, 0, 0)', offset: 0,
offset : 0, }),
}), style({
style({ transform: 'translate3d(-10px, 0, 0)',
transform: 'translate3d(-10px, 0, 0)', offset: 0.1,
offset : 0.1, }),
}), style({
style({ transform: 'translate3d(10px, 0, 0)',
transform: 'translate3d(10px, 0, 0)', offset: 0.2,
offset : 0.2, }),
}), style({
style({ transform: 'translate3d(-10px, 0, 0)',
transform: 'translate3d(-10px, 0, 0)', offset: 0.3,
offset : 0.3, }),
}), style({
style({ transform: 'translate3d(10px, 0, 0)',
transform: 'translate3d(10px, 0, 0)', offset: 0.4,
offset : 0.4, }),
}), style({
style({ transform: 'translate3d(-10px, 0, 0)',
transform: 'translate3d(-10px, 0, 0)', offset: 0.5,
offset : 0.5, }),
}), style({
style({ transform: 'translate3d(10px, 0, 0)',
transform: 'translate3d(10px, 0, 0)', offset: 0.6,
offset : 0.6, }),
}), style({
style({ transform: 'translate3d(-10px, 0, 0)',
transform: 'translate3d(-10px, 0, 0)', offset: 0.7,
offset : 0.7, }),
}), style({
style({ transform: 'translate3d(10px, 0, 0)',
transform: 'translate3d(10px, 0, 0)', offset: 0.8,
offset : 0.8, }),
}), style({
style({ transform: 'translate3d(-10px, 0, 0)',
transform: 'translate3d(-10px, 0, 0)', offset: 0.9,
offset : 0.9, }),
}), style({
style({ transform: 'translate3d(0, 0, 0)',
transform: 'translate3d(0, 0, 0)', offset: 1,
offset : 1, }),
}), ])
]), ),
), ],
], {
{ params: {
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 }; export { shake };

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

@ -1,252 +1,254 @@
import { animate, state, style, transition, trigger } from '@angular/animations'; import {
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults'; animate,
state,
style,
transition,
trigger,
} from '@angular/animations';
import {
FuseAnimationCurves,
FuseAnimationDurations,
} from '@fuse/animations/defaults';
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Slide in top // @ Slide in top
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const slideInTop = trigger('slideInTop', const slideInTop = trigger('slideInTop', [
[ state(
state('void', 'void',
style({ style({
transform: 'translate3d(0, -100%, 0)', transform: 'translate3d(0, -100%, 0)',
}), })
), ),
state('*', state(
style({ '*',
transform: 'translate3d(0, 0, 0)', style({
}), transform: 'translate3d(0, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('void => false', []), transition('void => false', []),
// Transition // Transition
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Slide in bottom // @ Slide in bottom
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const slideInBottom = trigger('slideInBottom', const slideInBottom = trigger('slideInBottom', [
[ state(
state('void', 'void',
style({ style({
transform: 'translate3d(0, 100%, 0)', transform: 'translate3d(0, 100%, 0)',
}), })
), ),
state('*', state(
style({ '*',
transform: 'translate3d(0, 0, 0)', style({
}), transform: 'translate3d(0, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('void => false', []), transition('void => false', []),
// Transition // Transition
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Slide in left // @ Slide in left
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const slideInLeft = trigger('slideInLeft', const slideInLeft = trigger('slideInLeft', [
[ state(
state('void', 'void',
style({ style({
transform: 'translate3d(-100%, 0, 0)', transform: 'translate3d(-100%, 0, 0)',
}), })
), ),
state('*', state(
style({ '*',
transform: 'translate3d(0, 0, 0)', style({
}), transform: 'translate3d(0, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('void => false', []), transition('void => false', []),
// Transition // Transition
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Slide in right // @ Slide in right
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const slideInRight = trigger('slideInRight', const slideInRight = trigger('slideInRight', [
[ state(
state('void', 'void',
style({ style({
transform: 'translate3d(100%, 0, 0)', transform: 'translate3d(100%, 0, 0)',
}), })
), ),
state('*', state(
style({ '*',
transform: 'translate3d(0, 0, 0)', style({
}), transform: 'translate3d(0, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('void => false', []), transition('void => false', []),
// Transition // Transition
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Slide out top // @ Slide out top
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const slideOutTop = trigger('slideOutTop', const slideOutTop = trigger('slideOutTop', [
[ state(
state('*', '*',
style({ style({
transform: 'translate3d(0, 0, 0)', transform: 'translate3d(0, 0, 0)',
}), })
), ),
state('void', state(
style({ 'void',
transform: 'translate3d(0, -100%, 0)', style({
}), transform: 'translate3d(0, -100%, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('false => void', []), transition('false => void', []),
// Transition // Transition
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Slide out bottom // @ Slide out bottom
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const slideOutBottom = trigger('slideOutBottom', const slideOutBottom = trigger('slideOutBottom', [
[ state(
state('*', '*',
style({ style({
transform: 'translate3d(0, 0, 0)', transform: 'translate3d(0, 0, 0)',
}), })
), ),
state('void', state(
style({ 'void',
transform: 'translate3d(0, 100%, 0)', style({
}), transform: 'translate3d(0, 100%, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('false => void', []), transition('false => void', []),
// Transition // Transition
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Slide out left // @ Slide out left
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const slideOutLeft = trigger('slideOutLeft', const slideOutLeft = trigger('slideOutLeft', [
[ state(
state('*', '*',
style({ style({
transform: 'translate3d(0, 0, 0)', transform: 'translate3d(0, 0, 0)',
}), })
), ),
state('void', state(
style({ 'void',
transform: 'translate3d(-100%, 0, 0)', style({
}), transform: 'translate3d(-100%, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('false => void', []), transition('false => void', []),
// Transition // Transition
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`, },
}, }),
}, ]);
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Slide out right // @ Slide out right
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const slideOutRight = trigger('slideOutRight', const slideOutRight = trigger('slideOutRight', [
[ state(
state('*', '*',
style({ style({
transform: 'translate3d(0, 0, 0)', transform: 'translate3d(0, 0, 0)',
}), })
), ),
state('void', state(
style({ 'void',
transform: 'translate3d(100%, 0, 0)', style({
}), transform: 'translate3d(100%, 0, 0)',
), })
),
// Prevent the transition if the state is false // Prevent the transition if the state is false
transition('false => void', []), transition('false => void', []),
// Transition // Transition
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'), {
{ params: {
params: { timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`, },
}, }),
}, ]);
),
],
);
export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight }; export {
slideInBottom,
slideInLeft,
slideInRight,
slideInTop,
slideOutBottom,
slideOutLeft,
slideOutRight,
slideOutTop,
};

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

@ -1,73 +1,75 @@
import { animate, state, style, transition, trigger } from '@angular/animations'; import {
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults'; animate,
state,
style,
transition,
trigger,
} from '@angular/animations';
import {
FuseAnimationCurves,
FuseAnimationDurations,
} from '@fuse/animations/defaults';
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Zoom in // @ Zoom in
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const zoomIn = trigger('zoomIn', const zoomIn = trigger('zoomIn', [
[ state(
'void',
style({
opacity: 0,
transform: 'scale(0.5)',
})
),
state('void', state(
style({ '*',
opacity : 0, style({
transform: 'scale(0.5)', opacity: 1,
}), transform: 'scale(1)',
), })
),
state('*', // Prevent the transition if the state is false
style({ transition('void => false', []),
opacity : 1,
transform: 'scale(1)',
}),
),
// Prevent the transition if the state is false // Transition
transition('void => false', []), transition('void => *', animate('{{timings}}'), {
params: {
// Transition timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
transition('void => *', animate('{{timings}}'), },
{ }),
params: { ]);
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Zoom out // @ Zoom out
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const zoomOut = trigger('zoomOut', const zoomOut = trigger('zoomOut', [
[ state(
'*',
style({
opacity: 1,
transform: 'scale(1)',
})
),
state('*', state(
style({ 'void',
opacity : 1, style({
transform: 'scale(1)', opacity: 0,
}), transform: 'scale(0.5)',
), })
),
state('void', // Prevent the transition if the state is false
style({ transition('false => void', []),
opacity : 0,
transform: 'scale(0.5)',
}),
),
// Prevent the transition if the state is false // Transition
transition('false => void', []), transition('* => void', animate('{{timings}}'), {
params: {
// Transition timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
transition('* => void', animate('{{timings}}'), },
{ }),
params: { ]);
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
export { zoomIn, zoomOut }; export { zoomIn, zoomOut };

48
src/@fuse/components/alert/alert.component.html
View File

@ -1,19 +1,14 @@
<div <div
class="fuse-alert-container" class="fuse-alert-container"
*ngIf="!dismissible || dismissible && !dismissed" *ngIf="!dismissible || (dismissible && !dismissed)"
[@fadeIn]="!dismissed" [@fadeIn]="!dismissed"
[@fadeOut]="!dismissed"> [@fadeOut]="!dismissed"
>
<!-- Border --> <!-- Border -->
<div <div class="fuse-alert-border" *ngIf="appearance === 'border'"></div>
class="fuse-alert-border"
*ngIf="appearance === 'border'"></div>
<!-- Icon --> <!-- Icon -->
<div <div class="fuse-alert-icon" *ngIf="showIcon">
class="fuse-alert-icon"
*ngIf="showIcon">
<!-- Custom icon --> <!-- Custom icon -->
<div class="fuse-alert-custom-icon"> <div class="fuse-alert-custom-icon">
<ng-content select="[fuseAlertIcon]"></ng-content> <ng-content select="[fuseAlertIcon]"></ng-content>
@ -21,46 +16,50 @@
<!-- Default icons --> <!-- Default icons -->
<div class="fuse-alert-default-icon"> <div class="fuse-alert-default-icon">
<mat-icon <mat-icon
*ngIf="type === 'primary'" *ngIf="type === 'primary'"
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon> [svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
<mat-icon <mat-icon
*ngIf="type === 'accent'" *ngIf="type === 'accent'"
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon> [svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
<mat-icon <mat-icon
*ngIf="type === 'warn'" *ngIf="type === 'warn'"
[svgIcon]="'heroicons_solid:x-circle'"></mat-icon> [svgIcon]="'heroicons_solid:x-circle'"
></mat-icon>
<mat-icon <mat-icon
*ngIf="type === 'basic'" *ngIf="type === 'basic'"
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon> [svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
<mat-icon <mat-icon
*ngIf="type === 'info'" *ngIf="type === 'info'"
[svgIcon]="'heroicons_solid:information-circle'"></mat-icon> [svgIcon]="'heroicons_solid:information-circle'"
></mat-icon>
<mat-icon <mat-icon
*ngIf="type === 'success'" *ngIf="type === 'success'"
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon> [svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
<mat-icon <mat-icon
*ngIf="type === 'warning'" *ngIf="type === 'warning'"
[svgIcon]="'heroicons_solid:exclamation-triangle'"></mat-icon> [svgIcon]="'heroicons_solid:exclamation-triangle'"
></mat-icon>
<mat-icon <mat-icon
*ngIf="type === 'error'" *ngIf="type === 'error'"
[svgIcon]="'heroicons_solid:x-circle'"></mat-icon> [svgIcon]="'heroicons_solid:x-circle'"
></mat-icon>
</div> </div>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="fuse-alert-content"> <div class="fuse-alert-content">
<div class="fuse-alert-title"> <div class="fuse-alert-title">
<ng-content select="[fuseAlertTitle]"></ng-content> <ng-content select="[fuseAlertTitle]"></ng-content>
</div> </div>
@ -68,15 +67,14 @@
<div class="fuse-alert-message"> <div class="fuse-alert-message">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
</div> </div>
<!-- Dismiss button --> <!-- Dismiss button -->
<button <button
class="fuse-alert-dismiss-button" class="fuse-alert-dismiss-button"
mat-icon-button mat-icon-button
(click)="dismiss()"> (click)="dismiss()"
>
<mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon> <mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
</button> </button>
</div> </div>

86
src/@fuse/components/alert/alert.component.scss
View File

@ -33,7 +33,6 @@ fuse-alert {
} }
.fuse-alert-default-icon { .fuse-alert-default-icon {
.mat-icon { .mat-icon {
@apply icon-size-5; @apply icon-size-5;
} }
@ -70,7 +69,6 @@ fuse-alert {
/* Alert that comes after the title */ /* Alert that comes after the title */
+ .fuse-alert-message { + .fuse-alert-message {
&:not(:empty) { &:not(:empty) {
margin-top: 4px; margin-top: 4px;
} }
@ -108,9 +106,7 @@ fuse-alert {
/* Dismissible */ /* Dismissible */
&.fuse-alert-dismissible { &.fuse-alert-dismissible {
.fuse-alert-container { .fuse-alert-container {
.fuse-alert-content { .fuse-alert-content {
margin-right: 32px; margin-right: 32px;
} }
@ -118,9 +114,7 @@ fuse-alert {
} }
&:not(.fuse-alert-dismissible) { &:not(.fuse-alert-dismissible) {
.fuse-alert-container { .fuse-alert-container {
.fuse-alert-dismiss-button { .fuse-alert-dismiss-button {
display: none !important; display: none !important;
} }
@ -129,12 +123,11 @@ fuse-alert {
/* Border */ /* Border */
&.fuse-alert-appearance-border { &.fuse-alert-appearance-border {
.fuse-alert-container { .fuse-alert-container {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: 6px; border-radius: 6px;
@apply shadow-md bg-card; @apply bg-card shadow-md;
.fuse-alert-border { .fuse-alert-border {
position: absolute; position: absolute;
@ -151,9 +144,7 @@ fuse-alert {
/* Primary */ /* Primary */
&.fuse-alert-type-primary { &.fuse-alert-type-primary {
.fuse-alert-container { .fuse-alert-container {
.fuse-alert-border { .fuse-alert-border {
@apply bg-primary; @apply bg-primary;
} }
@ -188,9 +179,7 @@ fuse-alert {
/* Accent */ /* Accent */
&.fuse-alert-type-accent { &.fuse-alert-type-accent {
.fuse-alert-container { .fuse-alert-container {
.fuse-alert-border { .fuse-alert-border {
@apply bg-accent; @apply bg-accent;
} }
@ -225,9 +214,7 @@ fuse-alert {
/* Warn */ /* Warn */
&.fuse-alert-type-warn { &.fuse-alert-type-warn {
.fuse-alert-container { .fuse-alert-container {
.fuse-alert-border { .fuse-alert-border {
@apply bg-warn; @apply bg-warn;
} }
@ -262,9 +249,7 @@ fuse-alert {
/* Basic */ /* Basic */
&.fuse-alert-type-basic { &.fuse-alert-type-basic {
.fuse-alert-container { .fuse-alert-container {
.fuse-alert-border { .fuse-alert-border {
@apply bg-gray-600; @apply bg-gray-600;
} }
@ -299,9 +284,7 @@ fuse-alert {
/* Info */ /* Info */
&.fuse-alert-type-info { &.fuse-alert-type-info {
.fuse-alert-container { .fuse-alert-container {
.fuse-alert-border { .fuse-alert-border {
@apply bg-blue-600; @apply bg-blue-600;
} }
@ -336,9 +319,7 @@ fuse-alert {
/* Success */ /* Success */
&.fuse-alert-type-success { &.fuse-alert-type-success {
.fuse-alert-container { .fuse-alert-container {
.fuse-alert-border { .fuse-alert-border {
@apply bg-green-500; @apply bg-green-500;
} }
@ -373,9 +354,7 @@ fuse-alert {
/* Warning */ /* Warning */
&.fuse-alert-type-warning { &.fuse-alert-type-warning {
.fuse-alert-container { .fuse-alert-container {
.fuse-alert-border { .fuse-alert-border {
@apply bg-amber-500; @apply bg-amber-500;
} }
@ -410,9 +389,7 @@ fuse-alert {
/* Error */ /* Error */
&.fuse-alert-type-error { &.fuse-alert-type-error {
.fuse-alert-container { .fuse-alert-container {
.fuse-alert-border { .fuse-alert-border {
@apply bg-red-600; @apply bg-red-600;
} }
@ -448,7 +425,6 @@ fuse-alert {
/* Fill */ /* Fill */
&.fuse-alert-appearance-fill { &.fuse-alert-appearance-fill {
.fuse-alert-container { .fuse-alert-container {
border-radius: 6px; border-radius: 6px;
@ -459,7 +435,6 @@ fuse-alert {
/* Primary */ /* Primary */
&.fuse-alert-type-primary { &.fuse-alert-type-primary {
.fuse-alert-container { .fuse-alert-container {
@apply bg-primary-600; @apply bg-primary-600;
@ -476,14 +451,13 @@ fuse-alert {
} }
code { code {
@apply text-primary-800 bg-primary-200; @apply bg-primary-200 text-primary-800;
} }
} }
} }
/* Accent */ /* Accent */
&.fuse-alert-type-accent { &.fuse-alert-type-accent {
.fuse-alert-container { .fuse-alert-container {
@apply bg-accent-600; @apply bg-accent-600;
@ -500,14 +474,13 @@ fuse-alert {
} }
code { code {
@apply text-accent-800 bg-accent-200; @apply bg-accent-200 text-accent-800;
} }
} }
} }
/* Warn */ /* Warn */
&.fuse-alert-type-warn { &.fuse-alert-type-warn {
.fuse-alert-container { .fuse-alert-container {
@apply bg-warn-600; @apply bg-warn-600;
@ -524,14 +497,13 @@ fuse-alert {
} }
code { code {
@apply text-warn-800 bg-warn-200; @apply bg-warn-200 text-warn-800;
} }
} }
} }
/* Basic */ /* Basic */
&.fuse-alert-type-basic { &.fuse-alert-type-basic {
.fuse-alert-container { .fuse-alert-container {
@apply bg-gray-600; @apply bg-gray-600;
@ -555,7 +527,6 @@ fuse-alert {
/* Info */ /* Info */
&.fuse-alert-type-info { &.fuse-alert-type-info {
.fuse-alert-container { .fuse-alert-container {
@apply bg-blue-600; @apply bg-blue-600;
@ -579,7 +550,6 @@ fuse-alert {
/* Success */ /* Success */
&.fuse-alert-type-success { &.fuse-alert-type-success {
.fuse-alert-container { .fuse-alert-container {
@apply bg-green-600; @apply bg-green-600;
@ -603,7 +573,6 @@ fuse-alert {
/* Warning */ /* Warning */
&.fuse-alert-type-warning { &.fuse-alert-type-warning {
.fuse-alert-container { .fuse-alert-container {
@apply bg-amber-500; @apply bg-amber-500;
@ -627,7 +596,6 @@ fuse-alert {
/* Error */ /* Error */
&.fuse-alert-type-error { &.fuse-alert-type-error {
.fuse-alert-container { .fuse-alert-container {
@apply bg-red-600; @apply bg-red-600;
@ -652,16 +620,14 @@ fuse-alert {
/* Outline */ /* Outline */
&.fuse-alert-appearance-outline { &.fuse-alert-appearance-outline {
.fuse-alert-container { .fuse-alert-container {
border-radius: 6px; border-radius: 6px;
} }
/* Primary */ /* Primary */
&.fuse-alert-type-primary { &.fuse-alert-type-primary {
.fuse-alert-container { .fuse-alert-container {
@apply bg-primary-50 ring-1 ring-primary-400 ring-inset; @apply bg-primary-50 ring-1 ring-inset ring-primary-400;
.fuse-alert-icon { .fuse-alert-icon {
@apply text-primary-600; @apply text-primary-600;
@ -677,7 +643,7 @@ fuse-alert {
} }
code { code {
@apply text-primary-800 bg-primary-200; @apply bg-primary-200 text-primary-800;
} }
.dark & { .dark & {
@ -701,9 +667,8 @@ fuse-alert {
/* Accent */ /* Accent */
&.fuse-alert-type-accent { &.fuse-alert-type-accent {
.fuse-alert-container { .fuse-alert-container {
@apply bg-accent-100 ring-1 ring-accent-400 ring-inset; @apply bg-accent-100 ring-1 ring-inset ring-accent-400;
.fuse-alert-icon { .fuse-alert-icon {
@apply text-accent-600; @apply text-accent-600;
@ -719,7 +684,7 @@ fuse-alert {
} }
code { code {
@apply text-accent-800 bg-accent-200; @apply bg-accent-200 text-accent-800;
} }
.dark & { .dark & {
@ -743,9 +708,8 @@ fuse-alert {
/* Warn */ /* Warn */
&.fuse-alert-type-warn { &.fuse-alert-type-warn {
.fuse-alert-container { .fuse-alert-container {
@apply bg-warn-50 ring-1 ring-warn-400 ring-inset; @apply bg-warn-50 ring-1 ring-inset ring-warn-400;
.fuse-alert-icon { .fuse-alert-icon {
@apply text-warn-600; @apply text-warn-600;
@ -761,7 +725,7 @@ fuse-alert {
} }
code { code {
@apply text-warn-800 bg-warn-200; @apply bg-warn-200 text-warn-800;
} }
.dark & { .dark & {
@ -785,9 +749,8 @@ fuse-alert {
/* Basic */ /* Basic */
&.fuse-alert-type-basic { &.fuse-alert-type-basic {
.fuse-alert-container { .fuse-alert-container {
@apply bg-gray-100 ring-1 ring-gray-400 ring-inset; @apply bg-gray-100 ring-1 ring-inset ring-gray-400;
.fuse-alert-icon { .fuse-alert-icon {
@apply text-gray-600; @apply text-gray-600;
@ -827,9 +790,8 @@ fuse-alert {
/* Info */ /* Info */
&.fuse-alert-type-info { &.fuse-alert-type-info {
.fuse-alert-container { .fuse-alert-container {
@apply bg-blue-50 ring-1 ring-blue-400 ring-inset; @apply bg-blue-50 ring-1 ring-inset ring-blue-400;
.fuse-alert-icon { .fuse-alert-icon {
@apply text-blue-600; @apply text-blue-600;
@ -869,9 +831,8 @@ fuse-alert {
/* Success */ /* Success */
&.fuse-alert-type-success { &.fuse-alert-type-success {
.fuse-alert-container { .fuse-alert-container {
@apply bg-green-50 ring-1 ring-green-400 ring-inset; @apply bg-green-50 ring-1 ring-inset ring-green-400;
.fuse-alert-icon { .fuse-alert-icon {
@apply text-green-600; @apply text-green-600;
@ -911,9 +872,8 @@ fuse-alert {
/* Warning */ /* Warning */
&.fuse-alert-type-warning { &.fuse-alert-type-warning {
.fuse-alert-container { .fuse-alert-container {
@apply bg-amber-50 ring-1 ring-amber-400 ring-inset; @apply bg-amber-50 ring-1 ring-inset ring-amber-400;
.fuse-alert-icon { .fuse-alert-icon {
@apply text-amber-600; @apply text-amber-600;
@ -953,9 +913,8 @@ fuse-alert {
/* Error */ /* Error */
&.fuse-alert-type-error { &.fuse-alert-type-error {
.fuse-alert-container { .fuse-alert-container {
@apply bg-red-50 ring-1 ring-red-400 ring-inset; @apply bg-red-50 ring-1 ring-inset ring-red-400;
.fuse-alert-icon { .fuse-alert-icon {
@apply text-red-600; @apply text-red-600;
@ -996,14 +955,12 @@ fuse-alert {
/* Soft */ /* Soft */
&.fuse-alert-appearance-soft { &.fuse-alert-appearance-soft {
.fuse-alert-container { .fuse-alert-container {
border-radius: 6px; border-radius: 6px;
} }
/* Primary */ /* Primary */
&.fuse-alert-type-primary { &.fuse-alert-type-primary {
.fuse-alert-container { .fuse-alert-container {
@apply bg-primary-50; @apply bg-primary-50;
@ -1021,7 +978,7 @@ fuse-alert {
} }
code { code {
@apply text-primary-800 bg-primary-200; @apply bg-primary-200 text-primary-800;
} }
.dark & { .dark & {
@ -1045,7 +1002,6 @@ fuse-alert {
/* Accent */ /* Accent */
&.fuse-alert-type-accent { &.fuse-alert-type-accent {
.fuse-alert-container { .fuse-alert-container {
@apply bg-accent-100; @apply bg-accent-100;
@ -1063,7 +1019,7 @@ fuse-alert {
} }
code { code {
@apply text-accent-800 bg-accent-200; @apply bg-accent-200 text-accent-800;
} }
.dark & { .dark & {
@ -1087,7 +1043,6 @@ fuse-alert {
/* Warn */ /* Warn */
&.fuse-alert-type-warn { &.fuse-alert-type-warn {
.fuse-alert-container { .fuse-alert-container {
@apply bg-warn-50; @apply bg-warn-50;
@ -1105,7 +1060,7 @@ fuse-alert {
} }
code { code {
@apply text-warn-800 bg-warn-200; @apply bg-warn-200 text-warn-800;
} }
.dark & { .dark & {
@ -1129,7 +1084,6 @@ fuse-alert {
/* Basic */ /* Basic */
&.fuse-alert-type-basic { &.fuse-alert-type-basic {
.fuse-alert-container { .fuse-alert-container {
@apply bg-gray-100; @apply bg-gray-100;
@ -1171,7 +1125,6 @@ fuse-alert {
/* Info */ /* Info */
&.fuse-alert-type-info { &.fuse-alert-type-info {
.fuse-alert-container { .fuse-alert-container {
@apply bg-blue-50; @apply bg-blue-50;
@ -1213,7 +1166,6 @@ fuse-alert {
/* Success */ /* Success */
&.fuse-alert-type-success { &.fuse-alert-type-success {
.fuse-alert-container { .fuse-alert-container {
@apply bg-green-50; @apply bg-green-50;
@ -1255,7 +1207,6 @@ fuse-alert {
/* Warning */ /* Warning */
&.fuse-alert-type-warning { &.fuse-alert-type-warning {
.fuse-alert-container { .fuse-alert-container {
@apply bg-amber-50; @apply bg-amber-50;
@ -1297,7 +1248,6 @@ fuse-alert {
/* Error */ /* Error */
&.fuse-alert-type-error { &.fuse-alert-type-error {
.fuse-alert-container { .fuse-alert-container {
@apply bg-red-50; @apply bg-red-50;

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

@ -1,27 +1,43 @@
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgIf } from '@angular/common'; import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, inject, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
EventEmitter,
HostBinding,
Input,
OnChanges,
OnDestroy,
OnInit,
Output,
SimpleChanges,
ViewEncapsulation,
inject,
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseAlertService } from '@fuse/components/alert/alert.service'; import { FuseAlertService } from '@fuse/components/alert/alert.service';
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types'; import {
FuseAlertAppearance,
FuseAlertType,
} from '@fuse/components/alert/alert.types';
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { filter, Subject, takeUntil } from 'rxjs'; import { Subject, filter, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-alert', selector: 'fuse-alert',
templateUrl : './alert.component.html', templateUrl: './alert.component.html',
styleUrls : ['./alert.component.scss'], styleUrls: ['./alert.component.scss'],
encapsulation : ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
animations : fuseAnimations, animations: fuseAnimations,
exportAs : 'fuseAlert', exportAs: 'fuseAlert',
standalone : true, standalone: true,
imports : [NgIf, MatIconModule, MatButtonModule], imports: [NgIf, MatIconModule, MatButtonModule],
}) })
export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
{
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
static ngAcceptInputType_dismissible: BooleanInput; static ngAcceptInputType_dismissible: BooleanInput;
static ngAcceptInputType_dismissed: BooleanInput; static ngAcceptInputType_dismissed: BooleanInput;
@ -38,7 +54,8 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
@Input() name: string = this._fuseUtilsService.randomId(); @Input() name: string = this._fuseUtilsService.randomId();
@Input() showIcon: boolean = true; @Input() showIcon: boolean = true;
@Input() type: FuseAlertType = 'primary'; @Input() type: FuseAlertType = 'primary';
@Output() readonly dismissedChanged: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() readonly dismissedChanged: EventEmitter<boolean> =
new EventEmitter<boolean>();
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -49,25 +66,24 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
/** /**
* Host binding for component classes * Host binding for component classes
*/ */
@HostBinding('class') get classList(): any @HostBinding('class') get classList(): any {
{
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
return { return {
'fuse-alert-appearance-border' : this.appearance === 'border', 'fuse-alert-appearance-border': this.appearance === 'border',
'fuse-alert-appearance-fill' : this.appearance === 'fill', 'fuse-alert-appearance-fill': this.appearance === 'fill',
'fuse-alert-appearance-outline': this.appearance === 'outline', 'fuse-alert-appearance-outline': this.appearance === 'outline',
'fuse-alert-appearance-soft' : this.appearance === 'soft', 'fuse-alert-appearance-soft': this.appearance === 'soft',
'fuse-alert-dismissed' : this.dismissed, 'fuse-alert-dismissed': this.dismissed,
'fuse-alert-dismissible' : this.dismissible, 'fuse-alert-dismissible': this.dismissible,
'fuse-alert-show-icon' : this.showIcon, 'fuse-alert-show-icon': this.showIcon,
'fuse-alert-type-primary' : this.type === 'primary', 'fuse-alert-type-primary': this.type === 'primary',
'fuse-alert-type-accent' : this.type === 'accent', 'fuse-alert-type-accent': this.type === 'accent',
'fuse-alert-type-warn' : this.type === 'warn', 'fuse-alert-type-warn': this.type === 'warn',
'fuse-alert-type-basic' : this.type === 'basic', 'fuse-alert-type-basic': this.type === 'basic',
'fuse-alert-type-info' : this.type === 'info', 'fuse-alert-type-info': this.type === 'info',
'fuse-alert-type-success' : this.type === 'success', 'fuse-alert-type-success': this.type === 'success',
'fuse-alert-type-warning' : this.type === 'warning', '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 */ /* eslint-enable @typescript-eslint/naming-convention */
} }
@ -81,46 +97,46 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
* *
* @param changes * @param changes
*/ */
ngOnChanges(changes: SimpleChanges): void ngOnChanges(changes: SimpleChanges): void {
{
// Dismissed // Dismissed
if ( 'dismissed' in changes ) if ('dismissed' in changes) {
{
// Coerce the value to a boolean // Coerce the value to a boolean
this.dismissed = coerceBooleanProperty(changes.dismissed.currentValue); this.dismissed = coerceBooleanProperty(
changes.dismissed.currentValue
);
// Dismiss/show the alert // Dismiss/show the alert
this._toggleDismiss(this.dismissed); this._toggleDismiss(this.dismissed);
} }
// Dismissible // Dismissible
if ( 'dismissible' in changes ) if ('dismissible' in changes) {
{
// Coerce the value to a boolean // Coerce the value to a boolean
this.dismissible = coerceBooleanProperty(changes.dismissible.currentValue); this.dismissible = coerceBooleanProperty(
changes.dismissible.currentValue
);
} }
// Show icon // Show icon
if ( 'showIcon' in changes ) if ('showIcon' in changes) {
{
// Coerce the value to a boolean // Coerce the value to a boolean
this.showIcon = coerceBooleanProperty(changes.showIcon.currentValue); this.showIcon = coerceBooleanProperty(
changes.showIcon.currentValue
);
} }
} }
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to the dismiss calls // Subscribe to the dismiss calls
this._fuseAlertService.onDismiss this._fuseAlertService.onDismiss
.pipe( .pipe(
filter(name => this.name === name), filter((name) => this.name === name),
takeUntil(this._unsubscribeAll), takeUntil(this._unsubscribeAll)
) )
.subscribe(() => .subscribe(() => {
{
// Dismiss the alert // Dismiss the alert
this.dismiss(); this.dismiss();
}); });
@ -128,11 +144,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
// Subscribe to the show calls // Subscribe to the show calls
this._fuseAlertService.onShow this._fuseAlertService.onShow
.pipe( .pipe(
filter(name => this.name === name), filter((name) => this.name === name),
takeUntil(this._unsubscribeAll), takeUntil(this._unsubscribeAll)
) )
.subscribe(() => .subscribe(() => {
{
// Show the alert // Show the alert
this.show(); this.show();
}); });
@ -141,8 +156,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -155,11 +169,9 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
/** /**
* Dismiss the alert * Dismiss the alert
*/ */
dismiss(): void dismiss(): void {
{
// Return if the alert is already dismissed // Return if the alert is already dismissed
if ( this.dismissed ) if (this.dismissed) {
{
return; return;
} }
@ -170,11 +182,9 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
/** /**
* Show the dismissed alert * Show the dismissed alert
*/ */
show(): void show(): void {
{
// Return if the alert is already showing // Return if the alert is already showing
if ( !this.dismissed ) if (!this.dismissed) {
{
return; return;
} }
@ -192,11 +202,9 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
* @param dismissed * @param dismissed
* @private * @private
*/ */
private _toggleDismiss(dismissed: boolean): void private _toggleDismiss(dismissed: boolean): void {
{
// Return if the alert is not dismissible // Return if the alert is not dismissible
if ( !this.dismissible ) if (!this.dismissible) {
{
return; return;
} }

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

@ -1,11 +1,13 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs'; import { Observable, ReplaySubject } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FuseAlertService export class FuseAlertService {
{ private readonly _onDismiss: ReplaySubject<string> =
private readonly _onDismiss: ReplaySubject<string> = new ReplaySubject<string>(1); new ReplaySubject<string>(1);
private readonly _onShow: ReplaySubject<string> = new ReplaySubject<string>(1); private readonly _onShow: ReplaySubject<string> = new ReplaySubject<string>(
1
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -14,16 +16,14 @@ export class FuseAlertService
/** /**
* Getter for onDismiss * Getter for onDismiss
*/ */
get onDismiss(): Observable<any> get onDismiss(): Observable<any> {
{
return this._onDismiss.asObservable(); return this._onDismiss.asObservable();
} }
/** /**
* Getter for onShow * Getter for onShow
*/ */
get onShow(): Observable<any> get onShow(): Observable<any> {
{
return this._onShow.asObservable(); return this._onShow.asObservable();
} }
@ -36,11 +36,9 @@ export class FuseAlertService
* *
* @param name * @param name
*/ */
dismiss(name: string): void dismiss(name: string): void {
{
// Return if the name is not provided // Return if the name is not provided
if ( !name ) if (!name) {
{
return; return;
} }
@ -53,16 +51,13 @@ export class FuseAlertService
* *
* @param name * @param name
*/ */
show(name: string): void show(name: string): void {
{
// Return if the name is not provided // Return if the name is not provided
if ( !name ) if (!name) {
{
return; return;
} }
// Execute the observable // Execute the observable
this._onShow.next(name); this._onShow.next(name);
} }
} }

6
src/@fuse/components/alert/alert.types.ts
View File

@ -1,8 +1,4 @@
export type FuseAlertAppearance = export type FuseAlertAppearance = 'border' | 'fill' | 'outline' | 'soft';
| 'border'
| 'fill'
| 'outline'
| 'soft';
export type FuseAlertType = export type FuseAlertType =
| 'primary' | 'primary'

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

@ -1,6 +1,5 @@
<!-- Flippable card --> <!-- Flippable card -->
<ng-container *ngIf="flippable"> <ng-container *ngIf="flippable">
<!-- Front --> <!-- Front -->
<div class="fuse-card-front"> <div class="fuse-card-front">
<ng-content select="[fuseCardFront]"></ng-content> <ng-content select="[fuseCardFront]"></ng-content>
@ -10,21 +9,15 @@
<div class="fuse-card-back"> <div class="fuse-card-back">
<ng-content select="[fuseCardBack]"></ng-content> <ng-content select="[fuseCardBack]"></ng-content>
</div> </div>
</ng-container> </ng-container>
<!-- Normal card --> <!-- Normal card -->
<ng-container *ngIf="!flippable"> <ng-container *ngIf="!flippable">
<!-- Content --> <!-- Content -->
<ng-content></ng-content> <ng-content></ng-content>
<!-- Expansion --> <!-- Expansion -->
<div <div class="fuse-card-expansion" *ngIf="expanded" [@expandCollapse]>
class="fuse-card-expansion"
*ngIf="expanded"
[@expandCollapse]>
<ng-content select="[fuseCardExpansion]"></ng-content> <ng-content select="[fuseCardExpansion]"></ng-content>
</div> </div>
</ng-container> </ng-container>

10
src/@fuse/components/card/card.component.scss
View File

@ -2,7 +2,7 @@ fuse-card {
position: relative; position: relative;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
@apply rounded-2xl shadow bg-card; @apply bg-card rounded-2xl shadow;
/* Flippable */ /* Flippable */
&.fuse-card-flippable { &.fuse-card-flippable {
@ -15,7 +15,6 @@ fuse-card {
@apply shadow-none; @apply shadow-none;
&.fuse-card-face-back { &.fuse-card-face-back {
.fuse-card-front { .fuse-card-front {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
@ -35,9 +34,12 @@ fuse-card {
flex-direction: column; flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
z-index: 10; z-index: 10;
transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s; transition:
transform 0.5s ease-out 0s,
visibility 0s ease-in 0.2s,
opacity 0s ease-in 0.2s;
backface-visibility: hidden; backface-visibility: hidden;
@apply rounded-2xl shadow bg-card; @apply bg-card rounded-2xl shadow;
} }
.fuse-card-front { .fuse-card-front {

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

@ -1,21 +1,27 @@
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgIf } from '@angular/common'; import { NgIf } from '@angular/common';
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; import {
Component,
HostBinding,
Input,
OnChanges,
SimpleChanges,
ViewEncapsulation,
} from '@angular/core';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseCardFace } from '@fuse/components/card/card.types'; import { FuseCardFace } from '@fuse/components/card/card.types';
@Component({ @Component({
selector : 'fuse-card', selector: 'fuse-card',
templateUrl : './card.component.html', templateUrl: './card.component.html',
styleUrls : ['./card.component.scss'], styleUrls: ['./card.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
animations : fuseAnimations, animations: fuseAnimations,
exportAs : 'fuseCard', exportAs: 'fuseCard',
standalone : true, standalone: true,
imports : [NgIf], imports: [NgIf],
}) })
export class FuseCardComponent implements OnChanges export class FuseCardComponent implements OnChanges {
{
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
static ngAcceptInputType_expanded: BooleanInput; static ngAcceptInputType_expanded: BooleanInput;
static ngAcceptInputType_flippable: BooleanInput; static ngAcceptInputType_flippable: BooleanInput;
@ -32,14 +38,13 @@ export class FuseCardComponent implements OnChanges
/** /**
* Host binding for component classes * Host binding for component classes
*/ */
@HostBinding('class') get classList(): any @HostBinding('class') get classList(): any {
{
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
return { return {
'fuse-card-expanded' : this.expanded, 'fuse-card-expanded': this.expanded,
'fuse-card-face-back' : this.flippable && this.face === 'back', 'fuse-card-face-back': this.flippable && this.face === 'back',
'fuse-card-face-front': this.flippable && this.face === 'front', '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 */ /* eslint-enable @typescript-eslint/naming-convention */
} }
@ -53,20 +58,21 @@ export class FuseCardComponent implements OnChanges
* *
* @param changes * @param changes
*/ */
ngOnChanges(changes: SimpleChanges): void ngOnChanges(changes: SimpleChanges): void {
{
// Expanded // Expanded
if ( 'expanded' in changes ) if ('expanded' in changes) {
{
// Coerce the value to a boolean // Coerce the value to a boolean
this.expanded = coerceBooleanProperty(changes.expanded.currentValue); this.expanded = coerceBooleanProperty(
changes.expanded.currentValue
);
} }
// Flippable // Flippable
if ( 'flippable' in changes ) if ('flippable' in changes) {
{
// Coerce the value to a boolean // Coerce the value to a boolean
this.flippable = coerceBooleanProperty(changes.flippable.currentValue); this.flippable = coerceBooleanProperty(
changes.flippable.currentValue
);
} }
} }
} }

4
src/@fuse/components/card/card.types.ts
View File

@ -1,3 +1 @@
export type FuseCardFace = export type FuseCardFace = 'front' | 'back';
| 'front'
| 'back';

7
src/@fuse/components/drawer/drawer.component.scss
View File

@ -12,14 +12,15 @@ fuse-drawer {
min-width: var(--fuse-drawer-width); min-width: var(--fuse-drawer-width);
max-width: var(--fuse-drawer-width); max-width: var(--fuse-drawer-width);
z-index: 300; z-index: 300;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
@apply bg-card; @apply bg-card;
/* Animations */ /* Animations */
&.fuse-drawer-animations-enabled { &.fuse-drawer-animations-enabled {
transition-duration: 400ms; transition-duration: 400ms;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-property: visibility, margin-left, margin-right, transform, width, max-width, min-width; transition-property: visibility, margin-left, margin-right, transform,
width, max-width, min-width;
.fuse-drawer-content { .fuse-drawer-content {
transition-duration: 400ms; transition-duration: 400ms;
@ -42,7 +43,6 @@ fuse-drawer {
/* Left position */ /* Left position */
&.fuse-drawer-position-left { &.fuse-drawer-position-left {
/* Side mode */ /* Side mode */
&.fuse-drawer-mode-side { &.fuse-drawer-mode-side {
margin-left: calc(var(--fuse-drawer-width) * -1); margin-left: calc(var(--fuse-drawer-width) * -1);
@ -70,7 +70,6 @@ fuse-drawer {
/* Right position */ /* Right position */
&.fuse-drawer-position-right { &.fuse-drawer-position-right {
/* Side mode */ /* Side mode */
&.fuse-drawer-mode-side { &.fuse-drawer-mode-side {
margin-right: calc(var(--fuse-drawer-width) * -1); margin-right: calc(var(--fuse-drawer-width) * -1);

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

@ -1,20 +1,42 @@
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import {
animate,
AnimationBuilder,
AnimationPlayer,
style,
} from '@angular/animations';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, inject, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core'; import {
Component,
ElementRef,
EventEmitter,
HostBinding,
HostListener,
inject,
Input,
OnChanges,
OnDestroy,
OnInit,
Output,
Renderer2,
SimpleChanges,
ViewEncapsulation,
} from '@angular/core';
import { FuseDrawerService } from '@fuse/components/drawer/drawer.service'; import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types'; import {
FuseDrawerMode,
FuseDrawerPosition,
} from '@fuse/components/drawer/drawer.types';
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; import { FuseUtilsService } from '@fuse/services/utils/utils.service';
@Component({ @Component({
selector : 'fuse-drawer', selector: 'fuse-drawer',
templateUrl : './drawer.component.html', templateUrl: './drawer.component.html',
styleUrls : ['./drawer.component.scss'], styleUrls: ['./drawer.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
exportAs : 'fuseDrawer', exportAs: 'fuseDrawer',
standalone : true, standalone: true,
}) })
export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
{
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
static ngAcceptInputType_fixed: BooleanInput; static ngAcceptInputType_fixed: BooleanInput;
static ngAcceptInputType_opened: BooleanInput; static ngAcceptInputType_opened: BooleanInput;
@ -33,10 +55,14 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
@Input() opened: boolean = false; @Input() opened: boolean = false;
@Input() position: FuseDrawerPosition = 'left'; @Input() position: FuseDrawerPosition = 'left';
@Input() transparentOverlay: boolean = false; @Input() transparentOverlay: boolean = false;
@Output() readonly fixedChanged: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() readonly fixedChanged: EventEmitter<boolean> =
@Output() readonly modeChanged: EventEmitter<FuseDrawerMode> = new EventEmitter<FuseDrawerMode>(); new EventEmitter<boolean>();
@Output() readonly openedChanged: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() readonly modeChanged: EventEmitter<FuseDrawerMode> =
@Output() readonly positionChanged: EventEmitter<FuseDrawerPosition> = new EventEmitter<FuseDrawerPosition>(); new EventEmitter<FuseDrawerMode>();
@Output() readonly openedChanged: EventEmitter<boolean> =
new EventEmitter<boolean>();
@Output() readonly positionChanged: EventEmitter<FuseDrawerPosition> =
new EventEmitter<FuseDrawerPosition>();
private _animationsEnabled: boolean = false; private _animationsEnabled: boolean = false;
private readonly _handleOverlayClick = (): void => this.close(); private readonly _handleOverlayClick = (): void => this.close();
@ -51,15 +77,14 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
/** /**
* Host binding for component classes * Host binding for component classes
*/ */
@HostBinding('class') get classList(): any @HostBinding('class') get classList(): any {
{
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
return { return {
'fuse-drawer-animations-enabled' : this._animationsEnabled, 'fuse-drawer-animations-enabled': this._animationsEnabled,
'fuse-drawer-fixed' : this.fixed, 'fuse-drawer-fixed': this.fixed,
'fuse-drawer-hover' : this._hovered, 'fuse-drawer-hover': this._hovered,
[`fuse-drawer-mode-${this.mode}`] : true, [`fuse-drawer-mode-${this.mode}`]: true,
'fuse-drawer-opened' : this.opened, 'fuse-drawer-opened': this.opened,
[`fuse-drawer-position-${this.position}`]: true, [`fuse-drawer-position-${this.position}`]: true,
}; };
/* eslint-enable @typescript-eslint/naming-convention */ /* eslint-enable @typescript-eslint/naming-convention */
@ -68,10 +93,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
/** /**
* Host binding for component inline styles * Host binding for component inline styles
*/ */
@HostBinding('style') get styleList(): any @HostBinding('style') get styleList(): any {
{
return { return {
'visibility': this.opened ? 'visible' : 'hidden', visibility: this.opened ? 'visible' : 'hidden',
}; };
} }
@ -85,8 +109,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
* @private * @private
*/ */
@HostListener('mouseenter') @HostListener('mouseenter')
private _onMouseenter(): void private _onMouseenter(): void {
{
// Enable the animations // Enable the animations
this._enableAnimations(); this._enableAnimations();
@ -100,8 +123,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
* @private * @private
*/ */
@HostListener('mouseleave') @HostListener('mouseleave')
private _onMouseleave(): void private _onMouseleave(): void {
{
// Enable the animations // Enable the animations
this._enableAnimations(); this._enableAnimations();
@ -118,11 +140,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
* *
* @param changes * @param changes
*/ */
ngOnChanges(changes: SimpleChanges): void ngOnChanges(changes: SimpleChanges): void {
{
// Fixed // Fixed
if ( 'fixed' in changes ) if ('fixed' in changes) {
{
// Coerce the value to a boolean // Coerce the value to a boolean
this.fixed = coerceBooleanProperty(changes.fixed.currentValue); this.fixed = coerceBooleanProperty(changes.fixed.currentValue);
@ -131,8 +151,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
} }
// Mode // Mode
if ( 'mode' in changes ) if ('mode' in changes) {
{
// Get the previous and current values // Get the previous and current values
const previousMode = changes.mode.previousValue; const previousMode = changes.mode.previousValue;
const currentMode = changes.mode.currentValue; const currentMode = changes.mode.currentValue;
@ -141,18 +160,15 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
this._disableAnimations(); this._disableAnimations();
// If the mode changes: 'over -> side' // If the mode changes: 'over -> side'
if ( previousMode === 'over' && currentMode === 'side' ) if (previousMode === 'over' && currentMode === 'side') {
{
// Hide the overlay // Hide the overlay
this._hideOverlay(); this._hideOverlay();
} }
// If the mode changes: 'side -> over' // If the mode changes: 'side -> over'
if ( previousMode === 'side' && currentMode === 'over' ) if (previousMode === 'side' && currentMode === 'over') {
{
// If the drawer is opened // If the drawer is opened
if ( this.opened ) if (this.opened) {
{
// Show the overlay // Show the overlay
this._showOverlay(); this._showOverlay();
} }
@ -164,15 +180,13 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
// Enable the animations after a delay // Enable the animations after a delay
// The delay must be bigger than the current transition-duration // The delay must be bigger than the current transition-duration
// to make sure nothing will be animated while the mode is changing // to make sure nothing will be animated while the mode is changing
setTimeout(() => setTimeout(() => {
{
this._enableAnimations(); this._enableAnimations();
}, 500); }, 500);
} }
// Opened // Opened
if ( 'opened' in changes ) if ('opened' in changes) {
{
// Coerce the value to a boolean // Coerce the value to a boolean
const open = coerceBooleanProperty(changes.opened.currentValue); const open = coerceBooleanProperty(changes.opened.currentValue);
@ -181,25 +195,24 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
} }
// Position // Position
if ( 'position' in changes ) if ('position' in changes) {
{
// Execute the observable // Execute the observable
this.positionChanged.next(this.position); this.positionChanged.next(this.position);
} }
// Transparent overlay // Transparent overlay
if ( 'transparentOverlay' in changes ) if ('transparentOverlay' in changes) {
{
// Coerce the value to a boolean // Coerce the value to a boolean
this.transparentOverlay = coerceBooleanProperty(changes.transparentOverlay.currentValue); this.transparentOverlay = coerceBooleanProperty(
changes.transparentOverlay.currentValue
);
} }
} }
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Register the drawer // Register the drawer
this._fuseDrawerService.registerComponent(this.name, this); this._fuseDrawerService.registerComponent(this.name, this);
} }
@ -207,11 +220,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Finish the animation // Finish the animation
if ( this._player ) if (this._player) {
{
this._player.finish(); this._player.finish();
} }
@ -226,11 +237,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
/** /**
* Open the drawer * Open the drawer
*/ */
open(): void open(): void {
{
// Return if the drawer has already opened // Return if the drawer has already opened
if ( this.opened ) if (this.opened) {
{
return; return;
} }
@ -241,11 +250,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
/** /**
* Close the drawer * Close the drawer
*/ */
close(): void close(): void {
{
// Return if the drawer has already closed // Return if the drawer has already closed
if ( !this.opened ) if (!this.opened) {
{
return; return;
} }
@ -256,14 +263,10 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
/** /**
* Toggle the drawer * Toggle the drawer
*/ */
toggle(): void toggle(): void {
{ if (this.opened) {
if ( this.opened )
{
this.close(); this.close();
} } else {
else
{
this.open(); this.open();
} }
} }
@ -277,11 +280,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
* *
* @private * @private
*/ */
private _enableAnimations(): void private _enableAnimations(): void {
{
// Return if the animations are already enabled // Return if the animations are already enabled
if ( this._animationsEnabled ) if (this._animationsEnabled) {
{
return; return;
} }
@ -294,11 +295,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
* *
* @private * @private
*/ */
private _disableAnimations(): void private _disableAnimations(): void {
{
// Return if the animations are already disabled // Return if the animations are already disabled
if ( !this._animationsEnabled ) if (!this._animationsEnabled) {
{
return; return;
} }
@ -311,8 +310,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
* *
* @private * @private
*/ */
private _showOverlay(): void private _showOverlay(): void {
{
// Create the backdrop element // Create the backdrop element
this._overlay = this._renderer2.createElement('div'); this._overlay = this._renderer2.createElement('div');
@ -320,25 +318,31 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
this._overlay.classList.add('fuse-drawer-overlay'); this._overlay.classList.add('fuse-drawer-overlay');
// Add a class depending on the fixed option // Add a class depending on the fixed option
if ( this.fixed ) if (this.fixed) {
{
this._overlay.classList.add('fuse-drawer-overlay-fixed'); this._overlay.classList.add('fuse-drawer-overlay-fixed');
} }
// Add a class depending on the transparentOverlay option // Add a class depending on the transparentOverlay option
if ( this.transparentOverlay ) if (this.transparentOverlay) {
{
this._overlay.classList.add('fuse-drawer-overlay-transparent'); this._overlay.classList.add('fuse-drawer-overlay-transparent');
} }
// Append the backdrop to the parent of the drawer // Append the backdrop to the parent of the drawer
this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay); this._renderer2.appendChild(
this._elementRef.nativeElement.parentElement,
this._overlay
);
// Create enter animation and attach it to the player // Create enter animation and attach it to the player
this._player = this._animationBuilder.build([ this._player = this._animationBuilder
style({opacity: 0}), .build([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})), style({ opacity: 0 }),
]).create(this._overlay); animate(
'300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
style({ opacity: 1 })
),
])
.create(this._overlay);
// Play the animation // Play the animation
this._player.play(); this._player.play();
@ -352,29 +356,33 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
* *
* @private * @private
*/ */
private _hideOverlay(): void private _hideOverlay(): void {
{ if (!this._overlay) {
if ( !this._overlay )
{
return; return;
} }
// Create the leave animation and attach it to the player // Create the leave animation and attach it to the player
this._player = this._animationBuilder.build([ this._player = this._animationBuilder
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})), .build([
]).create(this._overlay); animate(
'300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
style({ opacity: 0 })
),
])
.create(this._overlay);
// Play the animation // Play the animation
this._player.play(); this._player.play();
// Once the animation is done... // Once the animation is done...
this._player.onDone(() => this._player.onDone(() => {
{
// If the overlay still exists... // If the overlay still exists...
if ( this._overlay ) if (this._overlay) {
{
// Remove the event listener // Remove the event listener
this._overlay.removeEventListener('click', this._handleOverlayClick); this._overlay.removeEventListener(
'click',
this._handleOverlayClick
);
// Remove the overlay // Remove the overlay
this._overlay.parentNode.removeChild(this._overlay); this._overlay.parentNode.removeChild(this._overlay);
@ -389,8 +397,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
* @param open * @param open
* @private * @private
*/ */
private _toggleOpened(open: boolean): void private _toggleOpened(open: boolean): void {
{
// Set the opened // Set the opened
this.opened = open; this.opened = open;
@ -398,16 +405,13 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
this._enableAnimations(); this._enableAnimations();
// If the mode is 'over' // If the mode is 'over'
if ( this.mode === 'over' ) if (this.mode === 'over') {
{
// If the drawer opens, show the overlay // If the drawer opens, show the overlay
if ( open ) if (open) {
{
this._showOverlay(); this._showOverlay();
} }
// Otherwise, close the overlay // Otherwise, close the overlay
else else {
{
this._hideOverlay(); this._hideOverlay();
} }
} }

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

@ -1,10 +1,12 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component'; import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FuseDrawerService export class FuseDrawerService {
{ private _componentRegistry: Map<string, FuseDrawerComponent> = new Map<
private _componentRegistry: Map<string, FuseDrawerComponent> = new Map<string, FuseDrawerComponent>(); string,
FuseDrawerComponent
>();
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Public methods // @ Public methods
@ -16,8 +18,7 @@ export class FuseDrawerService
* @param name * @param name
* @param component * @param component
*/ */
registerComponent(name: string, component: FuseDrawerComponent): void registerComponent(name: string, component: FuseDrawerComponent): void {
{
this._componentRegistry.set(name, component); this._componentRegistry.set(name, component);
} }
@ -26,8 +27,7 @@ export class FuseDrawerService
* *
* @param name * @param name
*/ */
deregisterComponent(name: string): void deregisterComponent(name: string): void {
{
this._componentRegistry.delete(name); this._componentRegistry.delete(name);
} }
@ -36,8 +36,7 @@ export class FuseDrawerService
* *
* @param name * @param name
*/ */
getComponent(name: string): FuseDrawerComponent | undefined getComponent(name: string): FuseDrawerComponent | undefined {
{
return this._componentRegistry.get(name); return this._componentRegistry.get(name);
} }
} }

8
src/@fuse/components/drawer/drawer.types.ts
View File

@ -1,7 +1,3 @@
export type FuseDrawerMode = export type FuseDrawerMode = 'over' | 'side';
| 'over'
| 'side';
export type FuseDrawerPosition = export type FuseDrawerPosition = 'left' | 'right';
| 'left'
| 'right';

3
src/@fuse/components/fullscreen/fullscreen.component.html
View File

@ -2,7 +2,8 @@
<button <button
mat-icon-button mat-icon-button
[matTooltip]="tooltip || 'Toggle Fullscreen'" [matTooltip]="tooltip || 'Toggle Fullscreen'"
(click)="toggleFullscreen()"> (click)="toggleFullscreen()"
>
<ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container> <ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container>
</button> </button>

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

@ -1,5 +1,12 @@
import { DOCUMENT, NgTemplateOutlet } from '@angular/common'; import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input, TemplateRef, ViewEncapsulation } from '@angular/core'; import {
ChangeDetectionStrategy,
Component,
Input,
TemplateRef,
ViewEncapsulation,
inject,
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
@ -11,10 +18,14 @@ import { MatTooltipModule } from '@angular/material/tooltip';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'fuseFullscreen', exportAs: 'fuseFullscreen',
standalone: true, standalone: true,
imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule], imports: [
MatButtonModule,
MatTooltipModule,
NgTemplateOutlet,
MatIconModule,
],
}) })
export class FuseFullscreenComponent export class FuseFullscreenComponent {
{
private _document = inject(DOCUMENT); private _document = inject(DOCUMENT);
@Input() iconTpl: TemplateRef<any>; @Input() iconTpl: TemplateRef<any>;
@ -27,10 +38,8 @@ export class FuseFullscreenComponent
/** /**
* Toggle the fullscreen mode * Toggle the fullscreen mode
*/ */
toggleFullscreen(): void toggleFullscreen(): void {
{ if (!this._document.fullscreenEnabled) {
if (!this._document.fullscreenEnabled)
{
console.log('Fullscreen is not available in this browser.'); console.log('Fullscreen is not available in this browser.');
return; return;
} }
@ -39,17 +48,12 @@ export class FuseFullscreenComponent
const fullScreen = this._document.fullscreenElement; const fullScreen = this._document.fullscreenElement;
// Toggle the fullscreen // Toggle the fullscreen
if (fullScreen) if (fullScreen) {
{
this._document.exitFullscreen(); this._document.exitFullscreen();
} } else {
else this._document.documentElement.requestFullscreen().catch(() => {
{ console.error('Entering fullscreen mode failed.');
this._document.documentElement.requestFullscreen() });
.catch(() =>
{
console.error('Entering fullscreen mode failed.');
});
} }
} }
} }

3
src/@fuse/components/highlight/highlight.component.html
View File

@ -1,9 +1,8 @@
<ng-content></ng-content> <ng-content></ng-content>
<!-- @formatter:off --> <!-- prettier-ignore -->
<ng-template let-highlightedCode="highlightedCode" let-lang="lang"> <ng-template let-highlightedCode="highlightedCode" let-lang="lang">
<div class="fuse-highlight fuse-highlight-code-container"> <div class="fuse-highlight fuse-highlight-code-container">
<pre [ngClass]="'language-' + lang"><code [ngClass]="'language-' + lang" [innerHTML]="highlightedCode"></code></pre> <pre [ngClass]="'language-' + lang"><code [ngClass]="'language-' + lang" [innerHTML]="highlightedCode"></code></pre>
</div> </div>
</ng-template> </ng-template>
<!-- @formatter:on -->

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

@ -1,20 +1,34 @@
import { NgClass } from '@angular/common'; import { NgClass } from '@angular/common';
import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EmbeddedViewRef, inject, Input, OnChanges, SecurityContext, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
ElementRef,
EmbeddedViewRef,
inject,
Input,
OnChanges,
SecurityContext,
SimpleChanges,
TemplateRef,
ViewChild,
ViewContainerRef,
ViewEncapsulation,
} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import { FuseHighlightService } from '@fuse/components/highlight/highlight.service'; import { FuseHighlightService } from '@fuse/components/highlight/highlight.service';
@Component({ @Component({
selector : 'textarea[fuse-highlight]', selector: 'textarea[fuse-highlight]',
templateUrl : './highlight.component.html', templateUrl: './highlight.component.html',
styleUrls : ['./highlight.component.scss'], styleUrls: ['./highlight.component.scss'],
encapsulation : ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseHighlight', exportAs: 'fuseHighlight',
standalone : true, standalone: true,
imports : [NgClass], imports: [NgClass],
}) })
export class FuseHighlightComponent implements OnChanges, AfterViewInit export class FuseHighlightComponent implements OnChanges, AfterViewInit {
{
private _domSanitizer = inject(DomSanitizer); private _domSanitizer = inject(DomSanitizer);
private _elementRef = inject(ElementRef); private _elementRef = inject(ElementRef);
private _fuseHighlightService = inject(FuseHighlightService); private _fuseHighlightService = inject(FuseHighlightService);
@ -36,14 +50,11 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
* *
* @param changes * @param changes
*/ */
ngOnChanges(changes: SimpleChanges): void ngOnChanges(changes: SimpleChanges): void {
{
// Code & Lang // Code & Lang
if ( 'code' in changes || 'lang' in changes ) if ('code' in changes || 'lang' in changes) {
{
// Return if the viewContainerRef is not available // Return if the viewContainerRef is not available
if ( !this._viewContainerRef.length ) if (!this._viewContainerRef.length) {
{
return; return;
} }
@ -55,18 +66,15 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
/** /**
* After view init * After view init
*/ */
ngAfterViewInit(): void ngAfterViewInit(): void {
{
// Return if there is no language set // Return if there is no language set
if ( !this.lang ) if (!this.lang) {
{
return; return;
} }
// If there is no code input, get the code from // If there is no code input, get the code from
// the textarea // the textarea
if ( !this.code ) if (!this.code) {
{
// Get the code // Get the code
this.code = this._elementRef.nativeElement.value; this.code = this._elementRef.nativeElement.value;
} }
@ -84,41 +92,42 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
* *
* @private * @private
*/ */
private _highlightAndInsert(): void private _highlightAndInsert(): void {
{
// Return if the template reference is not available // Return if the template reference is not available
if ( !this.templateRef ) if (!this.templateRef) {
{
return; return;
} }
// Return if the code or language is not defined // Return if the code or language is not defined
if ( !this.code || !this.lang ) if (!this.code || !this.lang) {
{
return; return;
} }
// Destroy the component if there is already one // Destroy the component if there is already one
if ( this._viewRef ) if (this._viewRef) {
{
this._viewRef.destroy(); this._viewRef.destroy();
this._viewRef = null; this._viewRef = null;
} }
// Highlight and sanitize the code just in case // Highlight and sanitize the code just in case
this.highlightedCode = this._domSanitizer.sanitize(SecurityContext.HTML, this._fuseHighlightService.highlight(this.code, this.lang)); this.highlightedCode = this._domSanitizer.sanitize(
SecurityContext.HTML,
this._fuseHighlightService.highlight(this.code, this.lang)
);
// Return if the highlighted code is null // Return if the highlighted code is null
if ( this.highlightedCode === null ) if (this.highlightedCode === null) {
{
return; return;
} }
// Render and insert the template // Render and insert the template
this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, { this._viewRef = this._viewContainerRef.createEmbeddedView(
highlightedCode: this.highlightedCode, this.templateRef,
lang : this.lang, {
}); highlightedCode: this.highlightedCode,
lang: this.lang,
}
);
// Detect the changes // Detect the changes
this._viewRef.detectChanges(); this._viewRef.detectChanges();

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

@ -1,9 +1,8 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import hljs from 'highlight.js'; import hljs from 'highlight.js';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FuseHighlightService export class FuseHighlightService {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Public methods // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -11,13 +10,12 @@ export class FuseHighlightService
/** /**
* Highlight * Highlight
*/ */
highlight(code: string, language: string): string highlight(code: string, language: string): string {
{
// Format the code // Format the code
code = this._format(code); code = this._format(code);
// Highlight and return the code // Highlight and return the code
return hljs.highlight(code, {language}).value; return hljs.highlight(code, { language }).value;
} }
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -32,32 +30,28 @@ export class FuseHighlightService
* @param code * @param code
* @private * @private
*/ */
private _format(code: string): string private _format(code: string): string {
{
let indentation = 0; let indentation = 0;
// Split the code into lines and store the lines // Split the code into lines and store the lines
const lines = code.split('\n'); const lines = code.split('\n');
// Trim the empty lines around the code block // Trim the empty lines around the code block
while ( lines.length && lines[0].trim() === '' ) while (lines.length && lines[0].trim() === '') {
{
lines.shift(); lines.shift();
} }
while ( lines.length && lines[lines.length - 1].trim() === '' ) while (lines.length && lines[lines.length - 1].trim() === '') {
{
lines.pop(); lines.pop();
} }
// Iterate through the lines // Iterate through the lines
lines.filter(line => line.length) lines
.forEach((line, index) => .filter((line) => line.length)
{ .forEach((line, index) => {
// Always get the indentation of the first line so we can // Always get the indentation of the first line so we can
// have something to compare with // have something to compare with
if ( index === 0 ) if (index === 0) {
{
indentation = line.search(/\S|$/); indentation = line.search(/\S|$/);
return; return;
} }
@ -68,6 +62,6 @@ export class FuseHighlightService
// Iterate through the lines one more time, remove the extra // Iterate through the lines one more time, remove the extra
// indentation, join them together and return it // indentation, join them together and return it
return lines.map(line => line.substring(indentation)).join('\n'); return lines.map((line) => line.substring(indentation)).join('\n');
} }
} }

4
src/@fuse/components/loading-bar/loading-bar.component.html
View File

@ -1,5 +1,3 @@
<ng-container *ngIf="show"> <ng-container *ngIf="show">
<mat-progress-bar <mat-progress-bar [mode]="mode" [value]="progress"></mat-progress-bar>
[mode]="mode"
[value]="progress"></mat-progress-bar>
</ng-container> </ng-container>

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

@ -1,21 +1,29 @@
import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgIf } from '@angular/common'; import { NgIf } from '@angular/common';
import { Component, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core'; import {
Component,
inject,
Input,
OnChanges,
OnDestroy,
OnInit,
SimpleChanges,
ViewEncapsulation,
} from '@angular/core';
import { MatProgressBarModule } from '@angular/material/progress-bar'; import { MatProgressBarModule } from '@angular/material/progress-bar';
import { FuseLoadingService } from '@fuse/services/loading'; import { FuseLoadingService } from '@fuse/services/loading';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-loading-bar', selector: 'fuse-loading-bar',
templateUrl : './loading-bar.component.html', templateUrl: './loading-bar.component.html',
styleUrls : ['./loading-bar.component.scss'], styleUrls: ['./loading-bar.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
exportAs : 'fuseLoadingBar', exportAs: 'fuseLoadingBar',
standalone : true, standalone: true,
imports : [NgIf, MatProgressBarModule], imports: [NgIf, MatProgressBarModule],
}) })
export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy {
{
private _fuseLoadingService = inject(FuseLoadingService); private _fuseLoadingService = inject(FuseLoadingService);
@Input() autoMode: boolean = true; @Input() autoMode: boolean = true;
@ -33,50 +41,44 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
* *
* @param changes * @param changes
*/ */
ngOnChanges(changes: SimpleChanges): void ngOnChanges(changes: SimpleChanges): void {
{
// Auto mode // Auto mode
if ( 'autoMode' in changes ) if ('autoMode' in changes) {
{
// Set the auto mode in the service // Set the auto mode in the service
this._fuseLoadingService.setAutoMode(coerceBooleanProperty(changes.autoMode.currentValue)); this._fuseLoadingService.setAutoMode(
coerceBooleanProperty(changes.autoMode.currentValue)
);
} }
} }
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to the service // Subscribe to the service
this._fuseLoadingService.mode$ this._fuseLoadingService.mode$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => .subscribe((value) => {
{
this.mode = value; this.mode = value;
}); });
this._fuseLoadingService.progress$ this._fuseLoadingService.progress$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => .subscribe((value) => {
{
this.progress = value; this.progress = value;
}); });
this._fuseLoadingService.show$ this._fuseLoadingService.show$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => .subscribe((value) => {
{
this.show = value; this.show = value;
}); });
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();

7
src/@fuse/components/masonry/masonry.component.html
View File

@ -1,3 +1,8 @@
<div class="flex"> <div class="flex">
<ng-container *ngTemplateOutlet="columnsTemplate; context: { $implicit: distributedColumns }"></ng-container> <ng-container
*ngTemplateOutlet="
columnsTemplate;
context: { $implicit: distributedColumns }
"
></ng-container>
</div> </div>

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

@ -1,18 +1,25 @@
import { NgTemplateOutlet } from '@angular/common'; import { NgTemplateOutlet } from '@angular/common';
import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core'; import {
AfterViewInit,
Component,
Input,
OnChanges,
SimpleChanges,
TemplateRef,
ViewEncapsulation,
} from '@angular/core';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
@Component({ @Component({
selector : 'fuse-masonry', selector: 'fuse-masonry',
templateUrl : './masonry.component.html', templateUrl: './masonry.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
animations : fuseAnimations, animations: fuseAnimations,
exportAs : 'fuseMasonry', exportAs: 'fuseMasonry',
standalone : true, standalone: true,
imports : [NgTemplateOutlet], imports: [NgTemplateOutlet],
}) })
export class FuseMasonryComponent implements OnChanges, AfterViewInit export class FuseMasonryComponent implements OnChanges, AfterViewInit {
{
@Input() columnsTemplate: TemplateRef<any>; @Input() columnsTemplate: TemplateRef<any>;
@Input() columns: number; @Input() columns: number;
@Input() items: any[] = []; @Input() items: any[] = [];
@ -27,18 +34,15 @@ export class FuseMasonryComponent implements OnChanges, AfterViewInit
* *
* @param changes * @param changes
*/ */
ngOnChanges(changes: SimpleChanges): void ngOnChanges(changes: SimpleChanges): void {
{
// Columns // Columns
if ( 'columns' in changes ) if ('columns' in changes) {
{
// Distribute the items // Distribute the items
this._distributeItems(); this._distributeItems();
} }
// Items // Items
if ( 'items' in changes ) if ('items' in changes) {
{
// Distribute the items // Distribute the items
this._distributeItems(); this._distributeItems();
} }
@ -47,8 +51,7 @@ export class FuseMasonryComponent implements OnChanges, AfterViewInit
/** /**
* After view init * After view init
*/ */
ngAfterViewInit(): void ngAfterViewInit(): void {
{
// Distribute the items for the first time // Distribute the items for the first time
this._distributeItems(); this._distributeItems();
} }
@ -60,21 +63,20 @@ export class FuseMasonryComponent implements OnChanges, AfterViewInit
/** /**
* Distribute items into columns * Distribute items into columns
*/ */
private _distributeItems(): void private _distributeItems(): void {
{
// Return an empty array if there are no items // Return an empty array if there are no items
if ( this.items.length === 0 ) if (this.items.length === 0) {
{
this.distributedColumns = []; this.distributedColumns = [];
return; return;
} }
// Prepare the distributed columns array // Prepare the distributed columns array
this.distributedColumns = Array.from(Array(this.columns), item => ({items: []})); this.distributedColumns = Array.from(Array(this.columns), (item) => ({
items: [],
}));
// Distribute the items to columns // Distribute the items to columns
for ( let i = 0; i < this.items.length; i++ ) for (let i = 0; i < this.items.length; i++) {
{
this.distributedColumns[i % this.columns].items.push(this.items[i]); this.distributedColumns[i % this.columns].items.push(this.items[i]);
} }
} }

81
src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
View File

@ -2,13 +2,19 @@
<div <div
class="fuse-horizontal-navigation-item-wrapper" class="fuse-horizontal-navigation-item-wrapper"
[class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle" [class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
[ngClass]="item.classes?.wrapper"> [ngClass]="item.classes?.wrapper"
>
<!-- Item with an internal link --> <!-- Item with an internal link -->
<ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled"> <ng-container
*ngIf="
item.link && !item.externalLink && !item.function && !item.disabled
"
>
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" [ngClass]="{
'fuse-horizontal-navigation-item-active-forced': item.active
}"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[fragment]="item.fragment ?? null" [fragment]="item.fragment ?? null"
[preserveFragment]="item.preserveFragment ?? false" [preserveFragment]="item.preserveFragment ?? false"
@ -16,18 +22,24 @@
[queryParamsHandling]="item.queryParamsHandling ?? null" [queryParamsHandling]="item.queryParamsHandling ?? null"
[routerLinkActive]="'fuse-horizontal-navigation-item-active'" [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions" [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container> </ng-container>
<!-- Item with an external link --> <!-- Item with an external link -->
<ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled"> <ng-container
*ngIf="
item.link && item.externalLink && !item.function && !item.disabled
"
>
<a <a
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'" [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container> </ng-container>
@ -36,18 +48,27 @@
<ng-container *ngIf="!item.link && item.function && !item.disabled"> <ng-container *ngIf="!item.link && item.function && !item.disabled">
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" [ngClass]="{
'fuse-horizontal-navigation-item-active-forced': item.active
}"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container> </ng-container>
<!-- Item with an internal link and function --> <!-- Item with an internal link and function -->
<ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled"> <ng-container
*ngIf="
item.link && !item.externalLink && item.function && !item.disabled
"
>
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" [ngClass]="{
'fuse-horizontal-navigation-item-active-forced': item.active
}"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[fragment]="item.fragment ?? null" [fragment]="item.fragment ?? null"
[preserveFragment]="item.preserveFragment ?? false" [preserveFragment]="item.preserveFragment ?? false"
@ -56,20 +77,26 @@
[routerLinkActive]="'fuse-horizontal-navigation-item-active'" [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions" [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container> </ng-container>
<!-- Item with an external link and function --> <!-- Item with an external link and function -->
<ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled"> <ng-container
*ngIf="
item.link && item.externalLink && item.function && !item.disabled
"
>
<a <a
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'" [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)" (click)="item.function(item)"
mat-menu-item> mat-menu-item
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container> </ng-container>
@ -78,43 +105,47 @@
<ng-container *ngIf="!item.link && !item.function && !item.disabled"> <ng-container *ngIf="!item.link && !item.function && !item.disabled">
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" [ngClass]="{
[matTooltip]="item.tooltip || ''"> 'fuse-horizontal-navigation-item-active-forced': item.active
}"
[matTooltip]="item.tooltip || ''"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container> </ng-container>
<!-- Item is disabled --> <!-- Item is disabled -->
<ng-container *ngIf="item.disabled"> <ng-container *ngIf="item.disabled">
<div class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"> <div
class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container> </ng-container>
</div> </div>
<!-- Item template --> <!-- Item template -->
<ng-template #itemTemplate> <ng-template #itemTemplate>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> <ng-container *ngIf="item.icon">
<mat-icon <mat-icon
class="fuse-horizontal-navigation-item-icon" class="fuse-horizontal-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"
></mat-icon>
</ng-container> </ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-horizontal-navigation-item-title-wrapper"> <div class="fuse-horizontal-navigation-item-title-wrapper">
<div class="fuse-horizontal-navigation-item-title"> <div class="fuse-horizontal-navigation-item-title">
<span [ngClass]="item.classes?.title"> <span [ngClass]="item.classes?.title">
{{item.title}} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> <ng-container *ngIf="item.subtitle">
<div class="fuse-horizontal-navigation-item-subtitle text-hint"> <div class="fuse-horizontal-navigation-item-subtitle text-hint">
<span [ngClass]="item.classes?.subtitle"> <span [ngClass]="item.classes?.subtitle">
{{item.subtitle}} {{ item.subtitle }}
</span> </span>
</div> </div>
</ng-container> </ng-container>
@ -125,10 +156,10 @@
<div class="fuse-horizontal-navigation-item-badge"> <div class="fuse-horizontal-navigation-item-badge">
<div <div
class="fuse-horizontal-navigation-item-badge-content" class="fuse-horizontal-navigation-item-badge-content"
[ngClass]="item.badge.classes"> [ngClass]="item.badge.classes"
{{item.badge.title}} >
{{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> </ng-container>
</ng-template> </ng-template>

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

@ -1,9 +1,21 @@
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common'; import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
OnDestroy,
OnInit,
inject,
} from '@angular/core';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu'; import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router'; import {
IsActiveMatchOptions,
RouterLink,
RouterLinkActive,
} from '@angular/router';
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@ -11,13 +23,23 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-horizontal-navigation-basic-item', selector: 'fuse-horizontal-navigation-basic-item',
templateUrl : './basic.component.html', templateUrl: './basic.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true, standalone: true,
imports : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule], imports: [
NgClass,
NgIf,
RouterLink,
RouterLinkActive,
MatTooltipModule,
NgTemplateOutlet,
MatMenuModule,
MatIconModule,
],
}) })
export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy export class FuseHorizontalNavigationBasicItemComponent
implements OnInit, OnDestroy
{ {
private _changeDetectorRef = inject(ChangeDetectorRef); private _changeDetectorRef = inject(ChangeDetectorRef);
private _fuseNavigationService = inject(FuseNavigationService); private _fuseNavigationService = inject(FuseNavigationService);
@ -30,7 +52,8 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
// We are not assigning the item.isActiveMatchOptions directly to the // We are not assigning the item.isActiveMatchOptions directly to the
// [routerLinkActiveOptions] because if it's "undefined" initially, the router // [routerLinkActiveOptions] because if it's "undefined" initially, the router
// will throw an error and stop working. // will throw an error and stop working.
isActiveMatchOptions: IsActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions; isActiveMatchOptions: IsActiveMatchOptions =
this._fuseUtilsService.subsetMatchOptions;
private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent; private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -42,8 +65,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Set the "isActiveMatchOptions" either from item's // Set the "isActiveMatchOptions" either from item's
// "isActiveMatchOptions" or the equivalent form of // "isActiveMatchOptions" or the equivalent form of
// item's "exactMatch" option // item's "exactMatch" option
@ -53,26 +75,25 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
: this._fuseUtilsService.subsetMatchOptions; : this._fuseUtilsService.subsetMatchOptions;
// Get the parent navigation component // Get the parent navigation component
this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name); this._fuseHorizontalNavigationComponent =
this._fuseNavigationService.getComponent(this.name);
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe( this._fuseHorizontalNavigationComponent.onRefreshed
takeUntil(this._unsubscribeAll), .pipe(takeUntil(this._unsubscribeAll))
).subscribe(() => .subscribe(() => {
{ // Mark for check
// Mark for check this._changeDetectorRef.markForCheck();
this._changeDetectorRef.markForCheck(); });
});
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();

96
src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
View File

@ -1,105 +1,123 @@
<ng-container *ngIf="!child"> <ng-container *ngIf="!child">
<div <div
[ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen, [ngClass]="{
'fuse-horizontal-navigation-menu-active-forced': item.active}" 'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
'fuse-horizontal-navigation-menu-active-forced': item.active
}"
[matMenuTriggerFor]="matMenu" [matMenuTriggerFor]="matMenu"
(onMenuOpen)="triggerChangeDetection()" (onMenuOpen)="triggerChangeDetection()"
(onMenuClose)="triggerChangeDetection()" (onMenuClose)="triggerChangeDetection()"
#trigger="matMenuTrigger"> #trigger="matMenuTrigger"
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container> >
<ng-container
*ngTemplateOutlet="itemTemplate; context: { $implicit: item }"
></ng-container>
</div> </div>
</ng-container> </ng-container>
<mat-menu <mat-menu
class="fuse-horizontal-navigation-menu-panel" class="fuse-horizontal-navigation-menu-panel"
[overlapTrigger]="false" [overlapTrigger]="false"
#matMenu="matMenu"> #matMenu="matMenu"
>
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
<!-- Basic --> <!-- Basic -->
<ng-container *ngIf="item.type === 'basic'"> <ng-container *ngIf="item.type === 'basic'">
<div <div
class="fuse-horizontal-navigation-menu-item" class="fuse-horizontal-navigation-menu-item"
[disabled]="item.disabled" [disabled]="item.disabled"
mat-menu-item> mat-menu-item
>
<fuse-horizontal-navigation-basic-item <fuse-horizontal-navigation-basic-item
[item]="item" [item]="item"
[name]="name"></fuse-horizontal-navigation-basic-item> [name]="name"
></fuse-horizontal-navigation-basic-item>
</div> </div>
</ng-container> </ng-container>
<!-- Branch: aside, collapsable, group --> <!-- Branch: aside, collapsable, group -->
<ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"> <ng-container
*ngIf="
item.type === 'aside' ||
item.type === 'collapsable' ||
item.type === 'group'
"
>
<div <div
class="fuse-horizontal-navigation-menu-item" class="fuse-horizontal-navigation-menu-item"
[disabled]="item.disabled" [disabled]="item.disabled"
[matMenuTriggerFor]="branch.matMenu" [matMenuTriggerFor]="branch.matMenu"
mat-menu-item> mat-menu-item
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container> >
<ng-container
*ngTemplateOutlet="
itemTemplate;
context: { $implicit: item }
"
></ng-container>
<fuse-horizontal-navigation-branch-item <fuse-horizontal-navigation-branch-item
[child]="true" [child]="true"
[item]="item" [item]="item"
[name]="name" [name]="name"
#branch></fuse-horizontal-navigation-branch-item> #branch
></fuse-horizontal-navigation-branch-item>
</div> </div>
</ng-container> </ng-container>
<!-- Divider --> <!-- Divider -->
<ng-container *ngIf="item.type === 'divider'"> <ng-container *ngIf="item.type === 'divider'">
<div <div class="fuse-horizontal-navigation-menu-item" mat-menu-item>
class="fuse-horizontal-navigation-menu-item"
mat-menu-item>
<fuse-horizontal-navigation-divider-item <fuse-horizontal-navigation-divider-item
[item]="item" [item]="item"
[name]="name"></fuse-horizontal-navigation-divider-item> [name]="name"
></fuse-horizontal-navigation-divider-item>
</div> </div>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</mat-menu> </mat-menu>
<!-- Item template --> <!-- Item template -->
<ng-template <ng-template let-item #itemTemplate>
let-item
#itemTemplate>
<div <div
class="fuse-horizontal-navigation-item-wrapper" class="fuse-horizontal-navigation-item-wrapper"
[class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle" [class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
[ngClass]="item.classes?.wrapper"> [ngClass]="item.classes?.wrapper"
>
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled, [ngClass]="{
'fuse-horizontal-navigation-item-active-forced': item.active}" 'fuse-horizontal-navigation-item-disabled': item.disabled,
[matTooltip]="item.tooltip || ''"> 'fuse-horizontal-navigation-item-active-forced': item.active
}"
[matTooltip]="item.tooltip || ''"
>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> <ng-container *ngIf="item.icon">
<mat-icon <mat-icon
class="fuse-horizontal-navigation-item-icon" class="fuse-horizontal-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"
></mat-icon>
</ng-container> </ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-horizontal-navigation-item-title-wrapper"> <div class="fuse-horizontal-navigation-item-title-wrapper">
<div class="fuse-horizontal-navigation-item-title"> <div class="fuse-horizontal-navigation-item-title">
<span [ngClass]="item.classes?.title"> <span [ngClass]="item.classes?.title">
{{item.title}} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> <ng-container *ngIf="item.subtitle">
<div class="fuse-horizontal-navigation-item-subtitle text-hint"> <div
class="fuse-horizontal-navigation-item-subtitle text-hint"
>
<span [ngClass]="item.classes?.subtitle"> <span [ngClass]="item.classes?.subtitle">
{{item.subtitle}} {{ item.subtitle }}
</span> </span>
</div> </div>
</ng-container> </ng-container>
@ -110,12 +128,12 @@
<div class="fuse-horizontal-navigation-item-badge"> <div class="fuse-horizontal-navigation-item-badge">
<div <div
class="fuse-horizontal-navigation-item-badge-content" class="fuse-horizontal-navigation-item-badge-content"
[ngClass]="item.badge.classes"> [ngClass]="item.badge.classes"
{{item.badge.title}} >
{{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
</div> </div>
</ng-template> </ng-template>

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

@ -1,6 +1,16 @@
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common'; import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, inject, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
OnDestroy,
OnInit,
ViewChild,
forwardRef,
inject,
} from '@angular/core';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatMenu, MatMenuModule } from '@angular/material/menu'; import { MatMenu, MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
@ -12,13 +22,25 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-horizontal-navigation-branch-item', selector: 'fuse-horizontal-navigation-branch-item',
templateUrl : './branch.component.html', templateUrl: './branch.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true, standalone: true,
imports : [NgIf, NgClass, MatMenuModule, NgTemplateOutlet, NgFor, FuseHorizontalNavigationBasicItemComponent, forwardRef(() => FuseHorizontalNavigationBranchItemComponent), FuseHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule], imports: [
NgIf,
NgClass,
MatMenuModule,
NgTemplateOutlet,
NgFor,
FuseHorizontalNavigationBasicItemComponent,
forwardRef(() => FuseHorizontalNavigationBranchItemComponent),
FuseHorizontalNavigationDividerItemComponent,
MatTooltipModule,
MatIconModule,
],
}) })
export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy export class FuseHorizontalNavigationBranchItemComponent
implements OnInit, OnDestroy
{ {
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
static ngAcceptInputType_child: BooleanInput; static ngAcceptInputType_child: BooleanInput;
@ -30,7 +52,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
@Input() child: boolean = false; @Input() child: boolean = false;
@Input() item: FuseNavigationItem; @Input() item: FuseNavigationItem;
@Input() name: string; @Input() name: string;
@ViewChild('matMenu', {static: true}) matMenu: MatMenu; @ViewChild('matMenu', { static: true }) matMenu: MatMenu;
private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent; private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -42,26 +64,24 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Get the parent navigation component // Get the parent navigation component
this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name); this._fuseHorizontalNavigationComponent =
this._fuseNavigationService.getComponent(this.name);
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe( this._fuseHorizontalNavigationComponent.onRefreshed
takeUntil(this._unsubscribeAll), .pipe(takeUntil(this._unsubscribeAll))
).subscribe(() => .subscribe(() => {
{ // Mark for check
// Mark for check this._changeDetectorRef.markForCheck();
this._changeDetectorRef.markForCheck(); });
});
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -74,8 +94,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
/** /**
* Trigger the change detection * Trigger the change detection
*/ */
triggerChangeDetection(): void triggerChangeDetection(): void {
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
} }
@ -86,8 +105,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
} }

3
src/@fuse/components/navigation/horizontal/components/divider/divider.component.html
View File

@ -1,4 +1,5 @@
<!-- Divider --> <!-- Divider -->
<div <div
class="fuse-horizontal-navigation-item-wrapper divider" class="fuse-horizontal-navigation-item-wrapper divider"
[ngClass]="item.classes?.wrapper"></div> [ngClass]="item.classes?.wrapper"
></div>

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

@ -1,18 +1,27 @@
import { NgClass } from '@angular/common'; import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
inject,
Input,
OnDestroy,
OnInit,
} from '@angular/core';
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-horizontal-navigation-divider-item', selector: 'fuse-horizontal-navigation-divider-item',
templateUrl : './divider.component.html', templateUrl: './divider.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true, standalone: true,
imports : [NgClass], imports: [NgClass],
}) })
export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy export class FuseHorizontalNavigationDividerItemComponent
implements OnInit, OnDestroy
{ {
private _changeDetectorRef = inject(ChangeDetectorRef); private _changeDetectorRef = inject(ChangeDetectorRef);
private _fuseNavigationService = inject(FuseNavigationService); private _fuseNavigationService = inject(FuseNavigationService);
@ -30,26 +39,24 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Get the parent navigation component // Get the parent navigation component
this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name); this._fuseHorizontalNavigationComponent =
this._fuseNavigationService.getComponent(this.name);
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe( this._fuseHorizontalNavigationComponent.onRefreshed
takeUntil(this._unsubscribeAll), .pipe(takeUntil(this._unsubscribeAll))
).subscribe(() => .subscribe(() => {
{ // Mark for check
// Mark for check this._changeDetectorRef.markForCheck();
this._changeDetectorRef.markForCheck(); });
});
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();

3
src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.html
View File

@ -1,4 +1,5 @@
<!-- Spacer --> <!-- Spacer -->
<div <div
class="fuse-horizontal-navigation-item-wrapper" class="fuse-horizontal-navigation-item-wrapper"
[ngClass]="item.classes?.wrapper"></div> [ngClass]="item.classes?.wrapper"
></div>

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

@ -1,18 +1,27 @@
import { NgClass } from '@angular/common'; import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
inject,
Input,
OnDestroy,
OnInit,
} from '@angular/core';
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-horizontal-navigation-spacer-item', selector: 'fuse-horizontal-navigation-spacer-item',
templateUrl : './spacer.component.html', templateUrl: './spacer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true, standalone: true,
imports : [NgClass], imports: [NgClass],
}) })
export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy export class FuseHorizontalNavigationSpacerItemComponent
implements OnInit, OnDestroy
{ {
private _changeDetectorRef = inject(ChangeDetectorRef); private _changeDetectorRef = inject(ChangeDetectorRef);
private _fuseNavigationService = inject(FuseNavigationService); private _fuseNavigationService = inject(FuseNavigationService);
@ -30,26 +39,24 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Get the parent navigation component // Get the parent navigation component
this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name); this._fuseHorizontalNavigationComponent =
this._fuseNavigationService.getComponent(this.name);
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe( this._fuseHorizontalNavigationComponent.onRefreshed
takeUntil(this._unsubscribeAll), .pipe(takeUntil(this._unsubscribeAll))
).subscribe(() => .subscribe(() => {
{ // Mark for check
// Mark for check this._changeDetectorRef.markForCheck();
this._changeDetectorRef.markForCheck(); });
});
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();

27
src/@fuse/components/navigation/horizontal/horizontal.component.html
View File

@ -1,24 +1,31 @@
<div class="fuse-horizontal-navigation-wrapper"> <div class="fuse-horizontal-navigation-wrapper">
<ng-container *ngFor="let item of navigation; trackBy: trackByFn"> <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
<!-- Basic --> <!-- Basic -->
<ng-container *ngIf="item.type === 'basic'"> <ng-container *ngIf="item.type === 'basic'">
<fuse-horizontal-navigation-basic-item <fuse-horizontal-navigation-basic-item
class="fuse-horizontal-navigation-menu-item" class="fuse-horizontal-navigation-menu-item"
[item]="item" [item]="item"
[name]="name"></fuse-horizontal-navigation-basic-item> [name]="name"
></fuse-horizontal-navigation-basic-item>
</ng-container> </ng-container>
<!-- Branch: aside, collapsable, group --> <!-- Branch: aside, collapsable, group -->
<ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"> <ng-container
*ngIf="
item.type === 'aside' ||
item.type === 'collapsable' ||
item.type === 'group'
"
>
<fuse-horizontal-navigation-branch-item <fuse-horizontal-navigation-branch-item
class="fuse-horizontal-navigation-menu-item" class="fuse-horizontal-navigation-menu-item"
[item]="item" [item]="item"
[name]="name"></fuse-horizontal-navigation-branch-item> [name]="name"
></fuse-horizontal-navigation-branch-item>
</ng-container> </ng-container>
<!-- Spacer --> <!-- Spacer -->
@ -26,11 +33,9 @@
<fuse-horizontal-navigation-spacer-item <fuse-horizontal-navigation-spacer-item
class="fuse-horizontal-navigation-menu-item" class="fuse-horizontal-navigation-menu-item"
[item]="item" [item]="item"
[name]="name"></fuse-horizontal-navigation-spacer-item> [name]="name"
></fuse-horizontal-navigation-spacer-item>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</div> </div>

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

@ -1,6 +1,5 @@
/* Root navigation specific */ /* Root navigation specific */
fuse-horizontal-navigation { fuse-horizontal-navigation {
.fuse-horizontal-navigation-wrapper { .fuse-horizontal-navigation-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
@ -8,11 +7,8 @@ fuse-horizontal-navigation {
/* Basic, Branch */ /* Basic, Branch */
fuse-horizontal-navigation-basic-item, fuse-horizontal-navigation-basic-item,
fuse-horizontal-navigation-branch-item { fuse-horizontal-navigation-branch-item {
@screen sm { @screen sm {
&:hover { &:hover {
.fuse-horizontal-navigation-item-wrapper { .fuse-horizontal-navigation-item-wrapper {
@apply bg-hover; @apply bg-hover;
} }
@ -37,10 +33,8 @@ fuse-horizontal-navigation {
/* Basic - When item active (current link) */ /* Basic - When item active (current link) */
fuse-horizontal-navigation-basic-item { fuse-horizontal-navigation-basic-item {
.fuse-horizontal-navigation-item-active, .fuse-horizontal-navigation-item-active,
.fuse-horizontal-navigation-item-active-forced { .fuse-horizontal-navigation-item-active-forced {
.fuse-horizontal-navigation-item-title { .fuse-horizontal-navigation-item-title {
@apply text-primary #{'!important'}; @apply text-primary #{'!important'};
} }
@ -61,10 +55,8 @@ fuse-horizontal-navigation {
/* Branch - When menu open */ /* Branch - When menu open */
fuse-horizontal-navigation-branch-item { fuse-horizontal-navigation-branch-item {
.fuse-horizontal-navigation-menu-active, .fuse-horizontal-navigation-menu-active,
.fuse-horizontal-navigation-menu-active-forced { .fuse-horizontal-navigation-menu-active-forced {
.fuse-horizontal-navigation-item-wrapper { .fuse-horizontal-navigation-item-wrapper {
@apply bg-hover; @apply bg-hover;
} }
@ -80,7 +72,6 @@ fuse-horizontal-navigation {
/* Menu panel specific */ /* Menu panel specific */
.fuse-horizontal-navigation-menu-panel { .fuse-horizontal-navigation-menu-panel {
.fuse-horizontal-navigation-menu-item { .fuse-horizontal-navigation-menu-item {
height: auto; height: auto;
min-height: 0; min-height: 0;
@ -109,13 +100,10 @@ fuse-horizontal-navigation {
/* Navigation menu item common */ /* Navigation menu item common */
.fuse-horizontal-navigation-menu-item { .fuse-horizontal-navigation-menu-item {
/* Basic - When item active (current link) */ /* Basic - When item active (current link) */
fuse-horizontal-navigation-basic-item { fuse-horizontal-navigation-basic-item {
.fuse-horizontal-navigation-item-active, .fuse-horizontal-navigation-item-active,
.fuse-horizontal-navigation-item-active-forced { .fuse-horizontal-navigation-item-active-forced {
.fuse-horizontal-navigation-item-title { .fuse-horizontal-navigation-item-title {
@apply text-primary #{'!important'}; @apply text-primary #{'!important'};
} }
@ -138,7 +126,6 @@ fuse-horizontal-navigation {
width: 100%; width: 100%;
&.fuse-horizontal-navigation-item-has-subtitle { &.fuse-horizontal-navigation-item-has-subtitle {
.fuse-horizontal-navigation-item { .fuse-horizontal-navigation-item {
min-height: 56px; min-height: 56px;
} }
@ -156,7 +143,6 @@ fuse-horizontal-navigation {
text-decoration: none; text-decoration: none;
.fuse-horizontal-navigation-item-title-wrapper { .fuse-horizontal-navigation-item-title-wrapper {
.fuse-horizontal-navigation-item-subtitle { .fuse-horizontal-navigation-item-subtitle {
font-size: 12px; font-size: 12px;
} }

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

@ -1,5 +1,16 @@
import { NgFor, NgIf } from '@angular/common'; import { NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
OnChanges,
OnDestroy,
OnInit,
SimpleChanges,
ViewEncapsulation,
inject,
} from '@angular/core';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@ -10,17 +21,24 @@ import { FuseHorizontalNavigationBranchItemComponent } from './components/branch
import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer/spacer.component'; import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer/spacer.component';
@Component({ @Component({
selector : 'fuse-horizontal-navigation', selector: 'fuse-horizontal-navigation',
templateUrl : './horizontal.component.html', templateUrl: './horizontal.component.html',
styleUrls : ['./horizontal.component.scss'], styleUrls: ['./horizontal.component.scss'],
animations : fuseAnimations, animations: fuseAnimations,
encapsulation : ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseHorizontalNavigation', exportAs: 'fuseHorizontalNavigation',
standalone : true, standalone: true,
imports : [NgFor, NgIf, FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBranchItemComponent, FuseHorizontalNavigationSpacerItemComponent], imports: [
NgFor,
NgIf,
FuseHorizontalNavigationBasicItemComponent,
FuseHorizontalNavigationBranchItemComponent,
FuseHorizontalNavigationSpacerItemComponent,
],
}) })
export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy export class FuseHorizontalNavigationComponent
implements OnChanges, OnInit, OnDestroy
{ {
private _changeDetectorRef = inject(ChangeDetectorRef); private _changeDetectorRef = inject(ChangeDetectorRef);
private _fuseNavigationService = inject(FuseNavigationService); private _fuseNavigationService = inject(FuseNavigationService);
@ -41,11 +59,9 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
* *
* @param changes * @param changes
*/ */
ngOnChanges(changes: SimpleChanges): void ngOnChanges(changes: SimpleChanges): void {
{
// Navigation // Navigation
if ( 'navigation' in changes ) if ('navigation' in changes) {
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
} }
@ -54,11 +70,9 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Make sure the name input is not an empty string // Make sure the name input is not an empty string
if ( this.name === '' ) if (this.name === '') {
{
this.name = this._fuseUtilsService.randomId(); this.name = this._fuseUtilsService.randomId();
} }
@ -69,8 +83,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Deregister the navigation component from the registry // Deregister the navigation component from the registry
this._fuseNavigationService.deregisterComponent(this.name); this._fuseNavigationService.deregisterComponent(this.name);
@ -86,8 +99,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
/** /**
* Refresh the component to apply the changes * Refresh the component to apply the changes
*/ */
refresh(): void refresh(): void {
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
@ -101,8 +113,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
} }

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

@ -1,11 +1,13 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FuseNavigationService export class FuseNavigationService {
{
private _componentRegistry: Map<string, any> = new Map<string, any>(); private _componentRegistry: Map<string, any> = new Map<string, any>();
private _navigationStore: Map<string, FuseNavigationItem[]> = new Map<string, any>(); private _navigationStore: Map<string, FuseNavigationItem[]> = new Map<
string,
any
>();
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Public methods // @ Public methods
@ -17,8 +19,7 @@ export class FuseNavigationService
* @param name * @param name
* @param component * @param component
*/ */
registerComponent(name: string, component: any): void registerComponent(name: string, component: any): void {
{
this._componentRegistry.set(name, component); this._componentRegistry.set(name, component);
} }
@ -27,8 +28,7 @@ export class FuseNavigationService
* *
* @param name * @param name
*/ */
deregisterComponent(name: string): void deregisterComponent(name: string): void {
{
this._componentRegistry.delete(name); this._componentRegistry.delete(name);
} }
@ -37,8 +37,7 @@ export class FuseNavigationService
* *
* @param name * @param name
*/ */
getComponent<T>(name: string): T getComponent<T>(name: string): T {
{
return this._componentRegistry.get(name); return this._componentRegistry.get(name);
} }
@ -48,8 +47,7 @@ export class FuseNavigationService
* @param key * @param key
* @param navigation * @param navigation
*/ */
storeNavigation(key: string, navigation: FuseNavigationItem[]): void storeNavigation(key: string, navigation: FuseNavigationItem[]): void {
{
// Add to the store // Add to the store
this._navigationStore.set(key, navigation); this._navigationStore.set(key, navigation);
} }
@ -59,8 +57,7 @@ export class FuseNavigationService
* *
* @param key * @param key
*/ */
getNavigation(key: string): FuseNavigationItem[] getNavigation(key: string): FuseNavigationItem[] {
{
return this._navigationStore.get(key) ?? []; return this._navigationStore.get(key) ?? [];
} }
@ -69,12 +66,12 @@ export class FuseNavigationService
* *
* @param key * @param key
*/ */
deleteNavigation(key: string): void deleteNavigation(key: string): void {
{
// Check if the navigation exists // Check if the navigation exists
if ( !this._navigationStore.has(key) ) if (!this._navigationStore.has(key)) {
{ console.warn(
console.warn(`Navigation with the key '${key}' does not exist in the store.`); `Navigation with the key '${key}' does not exist in the store.`
);
} }
// Delete from the storage // Delete from the storage
@ -88,20 +85,22 @@ export class FuseNavigationService
* @param navigation * @param navigation
* @param flatNavigation * @param flatNavigation
*/ */
getFlatNavigation(navigation: FuseNavigationItem[], flatNavigation: FuseNavigationItem[] = []): FuseNavigationItem[] getFlatNavigation(
{ navigation: FuseNavigationItem[],
for ( const item of navigation ) flatNavigation: FuseNavigationItem[] = []
{ ): FuseNavigationItem[] {
if ( item.type === 'basic' ) for (const item of navigation) {
{ if (item.type === 'basic') {
flatNavigation.push(item); flatNavigation.push(item);
continue; continue;
} }
if ( item.type === 'aside' || item.type === 'collapsable' || item.type === 'group' ) if (
{ item.type === 'aside' ||
if ( item.children ) item.type === 'collapsable' ||
{ item.type === 'group'
) {
if (item.children) {
this.getFlatNavigation(item.children, flatNavigation); this.getFlatNavigation(item.children, flatNavigation);
} }
} }
@ -117,21 +116,19 @@ export class FuseNavigationService
* @param id * @param id
* @param navigation * @param navigation
*/ */
getItem(id: string, navigation: FuseNavigationItem[]): FuseNavigationItem | null getItem(
{ id: string,
for ( const item of navigation ) navigation: FuseNavigationItem[]
{ ): FuseNavigationItem | null {
if ( item.id === id ) for (const item of navigation) {
{ if (item.id === id) {
return item; return item;
} }
if ( item.children ) if (item.children) {
{
const childItem = this.getItem(id, item.children); const childItem = this.getItem(id, item.children);
if ( childItem ) if (childItem) {
{
return childItem; return childItem;
} }
} }
@ -151,22 +148,17 @@ export class FuseNavigationService
getItemParent( getItemParent(
id: string, id: string,
navigation: FuseNavigationItem[], navigation: FuseNavigationItem[],
parent: FuseNavigationItem[] | FuseNavigationItem, parent: FuseNavigationItem[] | FuseNavigationItem
): FuseNavigationItem[] | FuseNavigationItem | null ): FuseNavigationItem[] | FuseNavigationItem | null {
{ for (const item of navigation) {
for ( const item of navigation ) if (item.id === id) {
{
if ( item.id === id )
{
return parent; return parent;
} }
if ( item.children ) if (item.children) {
{
const childItem = this.getItemParent(id, item.children, item); const childItem = this.getItemParent(id, item.children, item);
if ( childItem ) if (childItem) {
{
return childItem; return childItem;
} }
} }

32
src/@fuse/components/navigation/navigation.types.ts
View File

@ -1,17 +1,14 @@
import { IsActiveMatchOptions, Params, QueryParamsHandling } from '@angular/router'; import {
IsActiveMatchOptions,
Params,
QueryParamsHandling,
} from '@angular/router';
export interface FuseNavigationItem export interface FuseNavigationItem {
{
id?: string; id?: string;
title?: string; title?: string;
subtitle?: string; subtitle?: string;
type: type: 'aside' | 'basic' | 'collapsable' | 'divider' | 'group' | 'spacer';
| 'aside'
| 'basic'
| 'collapsable'
| 'divider'
| 'group'
| 'spacer';
hidden?: (item: FuseNavigationItem) => boolean; hidden?: (item: FuseNavigationItem) => boolean;
active?: boolean; active?: boolean;
disabled?: boolean; disabled?: boolean;
@ -22,12 +19,7 @@ export interface FuseNavigationItem
queryParams?: Params | null; queryParams?: Params | null;
queryParamsHandling?: QueryParamsHandling | null; queryParamsHandling?: QueryParamsHandling | null;
externalLink?: boolean; externalLink?: boolean;
target?: target?: '_blank' | '_self' | '_parent' | '_top' | string;
| '_blank'
| '_self'
| '_parent'
| '_top'
| string;
exactMatch?: boolean; exactMatch?: boolean;
isActiveMatchOptions?: IsActiveMatchOptions; isActiveMatchOptions?: IsActiveMatchOptions;
function?: (item: FuseNavigationItem) => void; function?: (item: FuseNavigationItem) => void;
@ -52,10 +44,6 @@ export type FuseVerticalNavigationAppearance =
| 'dense' | 'dense'
| 'thin'; | 'thin';
export type FuseVerticalNavigationMode = export type FuseVerticalNavigationMode = 'over' | 'side';
| 'over'
| 'side';
export type FuseVerticalNavigationPosition = export type FuseVerticalNavigationPosition = 'left' | 'right';
| 'left'
| 'right';

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

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

57
src/@fuse/components/navigation/vertical/components/aside/aside.component.html
View File

@ -1,34 +1,37 @@
<div <div
class="fuse-vertical-navigation-item-wrapper" class="fuse-vertical-navigation-item-wrapper"
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
[ngClass]="item.classes?.wrapper"> [ngClass]="item.classes?.wrapper"
>
<div <div
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-active': active, [ngClass]="{
'fuse-vertical-navigation-item-disabled': item.disabled, 'fuse-vertical-navigation-item-active': active,
'fuse-vertical-navigation-item-active-forced': item.active}" 'fuse-vertical-navigation-item-disabled': item.disabled,
[matTooltip]="item.tooltip || ''"> 'fuse-vertical-navigation-item-active-forced': item.active
}"
[matTooltip]="item.tooltip || ''"
>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> <ng-container *ngIf="item.icon">
<mat-icon <mat-icon
class="fuse-vertical-navigation-item-icon" class="fuse-vertical-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"
></mat-icon>
</ng-container> </ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-vertical-navigation-item-title-wrapper"> <div class="fuse-vertical-navigation-item-title-wrapper">
<div class="fuse-vertical-navigation-item-title"> <div class="fuse-vertical-navigation-item-title">
<span [ngClass]="item.classes?.title"> <span [ngClass]="item.classes?.title">
{{item.title}} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> <ng-container *ngIf="item.subtitle">
<div class="fuse-vertical-navigation-item-subtitle"> <div class="fuse-vertical-navigation-item-subtitle">
<span [ngClass]="item.classes?.subtitle"> <span [ngClass]="item.classes?.subtitle">
{{item.subtitle}} {{ item.subtitle }}
</span> </span>
</div> </div>
</ng-container> </ng-container>
@ -39,30 +42,28 @@
<div class="fuse-vertical-navigation-item-badge"> <div class="fuse-vertical-navigation-item-badge">
<div <div
class="fuse-vertical-navigation-item-badge-content" class="fuse-vertical-navigation-item-badge-content"
[ngClass]="item.badge.classes"> [ngClass]="item.badge.classes"
{{item.badge.title}} >
{{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
</div> </div>
<ng-container *ngIf="!skipChildren"> <ng-container *ngIf="!skipChildren">
<div class="fuse-vertical-navigation-item-children"> <div class="fuse-vertical-navigation-item-children">
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
<!-- Basic --> <!-- Basic -->
<ng-container *ngIf="item.type === 'basic'"> <ng-container *ngIf="item.type === 'basic'">
<fuse-vertical-navigation-basic-item <fuse-vertical-navigation-basic-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-basic-item> [name]="name"
></fuse-vertical-navigation-basic-item>
</ng-container> </ng-container>
<!-- Collapsable --> <!-- Collapsable -->
@ -70,34 +71,34 @@
<fuse-vertical-navigation-collapsable-item <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-collapsable-item>
</ng-container> </ng-container>
<!-- Divider --> <!-- Divider -->
<ng-container *ngIf="item.type === 'divider'"> <ng-container *ngIf="item.type === 'divider'">
<fuse-vertical-navigation-divider-item <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-divider-item> [name]="name"
></fuse-vertical-navigation-divider-item>
</ng-container> </ng-container>
<!-- Group --> <!-- Group -->
<ng-container *ngIf="item.type === 'group'"> <ng-container *ngIf="item.type === 'group'">
<fuse-vertical-navigation-group-item <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-group-item> [name]="name"
></fuse-vertical-navigation-group-item>
</ng-container> </ng-container>
<!-- Spacer --> <!-- Spacer -->
<ng-container *ngIf="item.type === 'spacer'"> <ng-container *ngIf="item.type === 'spacer'">
<fuse-vertical-navigation-spacer-item <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-spacer-item> [name]="name"
></fuse-vertical-navigation-spacer-item>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</div> </div>
</ng-container> </ng-container>

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

@ -1,6 +1,16 @@
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { NgClass, NgFor, NgIf } from '@angular/common'; import { NgClass, NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
OnChanges,
OnDestroy,
OnInit,
SimpleChanges,
inject,
} from '@angular/core';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { NavigationEnd, Router } from '@angular/router'; import { NavigationEnd, Router } from '@angular/router';
@ -12,16 +22,28 @@ import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/nav
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component'; import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component'; import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { filter, Subject, takeUntil } from 'rxjs'; import { Subject, filter, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-aside-item', selector: 'fuse-vertical-navigation-aside-item',
templateUrl : './aside.component.html', templateUrl: './aside.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true, standalone: true,
imports : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent], imports: [
NgClass,
MatTooltipModule,
NgIf,
MatIconModule,
NgFor,
FuseVerticalNavigationBasicItemComponent,
FuseVerticalNavigationCollapsableItemComponent,
FuseVerticalNavigationDividerItemComponent,
FuseVerticalNavigationGroupItemComponent,
FuseVerticalNavigationSpacerItemComponent,
],
}) })
export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy export class FuseVerticalNavigationAsideItemComponent
implements OnChanges, OnInit, OnDestroy
{ {
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
static ngAcceptInputType_autoCollapse: BooleanInput; static ngAcceptInputType_autoCollapse: BooleanInput;
@ -51,11 +73,9 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
* *
* @param changes * @param changes
*/ */
ngOnChanges(changes: SimpleChanges): void ngOnChanges(changes: SimpleChanges): void {
{
// Active item id // Active item id
if ( 'activeItemId' in changes ) if ('activeItemId' in changes) {
{
// Mark if active // Mark if active
this._markIfActive(this._router.url); this._markIfActive(this._router.url);
} }
@ -64,41 +84,41 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Mark if active // Mark if active
this._markIfActive(this._router.url); this._markIfActive(this._router.url);
// Attach a listener to the NavigationEnd event // Attach a listener to the NavigationEnd event
this._router.events this._router.events
.pipe( .pipe(
filter((event): event is NavigationEnd => event instanceof NavigationEnd), filter(
takeUntil(this._unsubscribeAll), (event): event is NavigationEnd =>
event instanceof NavigationEnd
),
takeUntil(this._unsubscribeAll)
) )
.subscribe((event: NavigationEnd) => .subscribe((event: NavigationEnd) => {
{
// Mark if active // Mark if active
this._markIfActive(event.urlAfterRedirects); this._markIfActive(event.urlAfterRedirects);
}); });
// Get the parent navigation component // Get the parent navigation component
this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name); this._fuseVerticalNavigationComponent =
this._fuseNavigationService.getComponent(this.name);
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed
takeUntil(this._unsubscribeAll), .pipe(takeUntil(this._unsubscribeAll))
).subscribe(() => .subscribe(() => {
{ // Mark for check
// Mark for check this._changeDetectorRef.markForCheck();
this._changeDetectorRef.markForCheck(); });
});
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -114,8 +134,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
@ -131,34 +150,33 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
* @param currentUrl * @param currentUrl
* @private * @private
*/ */
private _hasActiveChild(item: FuseNavigationItem, currentUrl: string): boolean private _hasActiveChild(
{ item: FuseNavigationItem,
currentUrl: string
): boolean {
const children = item.children; const children = item.children;
if ( !children ) if (!children) {
{
return false; return false;
} }
for ( const child of children ) for (const child of children) {
{ if (child.children) {
if ( child.children ) if (this._hasActiveChild(child, currentUrl)) {
{
if ( this._hasActiveChild(child, currentUrl) )
{
return true; return true;
} }
} }
// Skip items other than 'basic' // Skip items other than 'basic'
if ( child.type !== 'basic' ) if (child.type !== 'basic') {
{
continue; continue;
} }
// Check if the child has a link and is active // Check if the child has a link and is active
if ( child.link && this._router.isActive(child.link, child.exactMatch || false) ) if (
{ child.link &&
this._router.isActive(child.link, child.exactMatch || false)
) {
return true; return true;
} }
} }
@ -171,15 +189,13 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
* *
* @private * @private
*/ */
private _markIfActive(currentUrl: string): void private _markIfActive(currentUrl: string): void {
{
// Check if the activeItemId is equals to this item id // Check if the activeItemId is equals to this item id
this.active = this.activeItemId === this.item.id; this.active = this.activeItemId === this.item.id;
// If the aside has a children that is active, // If the aside has a children that is active,
// always mark it as active // always mark it as active
if ( this._hasActiveChild(this.item, currentUrl) ) if (this._hasActiveChild(this.item, currentUrl)) {
{
this.active = true; this.active = true;
} }

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

@ -2,13 +2,19 @@
<div <div
class="fuse-vertical-navigation-item-wrapper" class="fuse-vertical-navigation-item-wrapper"
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
[ngClass]="item.classes?.wrapper"> [ngClass]="item.classes?.wrapper"
>
<!-- Item with an internal link --> <!-- Item with an internal link -->
<ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled"> <ng-container
*ngIf="
item.link && !item.externalLink && !item.function && !item.disabled
"
>
<a <a
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" [ngClass]="{
'fuse-vertical-navigation-item-active-forced': item.active
}"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[fragment]="item.fragment ?? null" [fragment]="item.fragment ?? null"
[preserveFragment]="item.preserveFragment ?? false" [preserveFragment]="item.preserveFragment ?? false"
@ -16,18 +22,24 @@
[queryParamsHandling]="item.queryParamsHandling ?? null" [queryParamsHandling]="item.queryParamsHandling ?? null"
[routerLinkActive]="'fuse-vertical-navigation-item-active'" [routerLinkActive]="'fuse-vertical-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions" [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container> </ng-container>
<!-- Item with an external link --> <!-- Item with an external link -->
<ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled"> <ng-container
*ngIf="
item.link && item.externalLink && !item.function && !item.disabled
"
>
<a <a
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'" [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container> </ng-container>
@ -36,18 +48,27 @@
<ng-container *ngIf="!item.link && item.function && !item.disabled"> <ng-container *ngIf="!item.link && item.function && !item.disabled">
<div <div
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" [ngClass]="{
'fuse-vertical-navigation-item-active-forced': item.active
}"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container> </ng-container>
<!-- Item with an internal link and function --> <!-- Item with an internal link and function -->
<ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled"> <ng-container
*ngIf="
item.link && !item.externalLink && item.function && !item.disabled
"
>
<a <a
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" [ngClass]="{
'fuse-vertical-navigation-item-active-forced': item.active
}"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[fragment]="item.fragment ?? null" [fragment]="item.fragment ?? null"
[preserveFragment]="item.preserveFragment ?? false" [preserveFragment]="item.preserveFragment ?? false"
@ -56,19 +77,25 @@
[routerLinkActive]="'fuse-vertical-navigation-item-active'" [routerLinkActive]="'fuse-vertical-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions" [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container> </ng-container>
<!-- Item with an external link and function --> <!-- Item with an external link and function -->
<ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled"> <ng-container
*ngIf="
item.link && item.externalLink && item.function && !item.disabled
"
>
<a <a
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'" [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
</ng-container> </ng-container>
@ -77,8 +104,11 @@
<ng-container *ngIf="!item.link && !item.function && !item.disabled"> <ng-container *ngIf="!item.link && !item.function && !item.disabled">
<div <div
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" [ngClass]="{
[matTooltip]="item.tooltip || ''"> 'fuse-vertical-navigation-item-active-forced': item.active
}"
[matTooltip]="item.tooltip || ''"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container> </ng-container>
@ -87,35 +117,35 @@
<ng-container *ngIf="item.disabled"> <ng-container *ngIf="item.disabled">
<div <div
class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled" class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
[matTooltip]="item.tooltip || ''"> [matTooltip]="item.tooltip || ''"
>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
</ng-container> </ng-container>
</div> </div>
<!-- Item template --> <!-- Item template -->
<ng-template #itemTemplate> <ng-template #itemTemplate>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> <ng-container *ngIf="item.icon">
<mat-icon <mat-icon
class="fuse-vertical-navigation-item-icon" class="fuse-vertical-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"
></mat-icon>
</ng-container> </ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-vertical-navigation-item-title-wrapper"> <div class="fuse-vertical-navigation-item-title-wrapper">
<div class="fuse-vertical-navigation-item-title"> <div class="fuse-vertical-navigation-item-title">
<span [ngClass]="item.classes?.title"> <span [ngClass]="item.classes?.title">
{{item.title}} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> <ng-container *ngIf="item.subtitle">
<div class="fuse-vertical-navigation-item-subtitle"> <div class="fuse-vertical-navigation-item-subtitle">
<span [ngClass]="item.classes?.subtitle"> <span [ngClass]="item.classes?.subtitle">
{{item.subtitle}} {{ item.subtitle }}
</span> </span>
</div> </div>
</ng-container> </ng-container>
@ -126,10 +156,10 @@
<div class="fuse-vertical-navigation-item-badge"> <div class="fuse-vertical-navigation-item-badge">
<div <div
class="fuse-vertical-navigation-item-badge-content" class="fuse-vertical-navigation-item-badge-content"
[ngClass]="item.badge.classes"> [ngClass]="item.badge.classes"
{{item.badge.title}} >
{{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> </ng-container>
</ng-template> </ng-template>

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

@ -1,8 +1,20 @@
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common'; import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
OnDestroy,
OnInit,
inject,
} from '@angular/core';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router'; import {
IsActiveMatchOptions,
RouterLink,
RouterLinkActive,
} from '@angular/router';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
@ -10,13 +22,22 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-basic-item', selector: 'fuse-vertical-navigation-basic-item',
templateUrl : './basic.component.html', templateUrl: './basic.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true, standalone: true,
imports : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule], imports: [
NgClass,
NgIf,
RouterLink,
RouterLinkActive,
MatTooltipModule,
NgTemplateOutlet,
MatIconModule,
],
}) })
export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy export class FuseVerticalNavigationBasicItemComponent
implements OnInit, OnDestroy
{ {
private _changeDetectorRef = inject(ChangeDetectorRef); private _changeDetectorRef = inject(ChangeDetectorRef);
private _fuseNavigationService = inject(FuseNavigationService); private _fuseNavigationService = inject(FuseNavigationService);
@ -29,7 +50,8 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
// We are not assigning the item.isActiveMatchOptions directly to the // We are not assigning the item.isActiveMatchOptions directly to the
// [routerLinkActiveOptions] because if it's "undefined" initially, the router // [routerLinkActiveOptions] because if it's "undefined" initially, the router
// will throw an error and stop working. // will throw an error and stop working.
isActiveMatchOptions: IsActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions; isActiveMatchOptions: IsActiveMatchOptions =
this._fuseUtilsService.subsetMatchOptions;
private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent; private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -41,8 +63,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Set the "isActiveMatchOptions" either from item's // Set the "isActiveMatchOptions" either from item's
// "isActiveMatchOptions" or the equivalent form of // "isActiveMatchOptions" or the equivalent form of
// item's "exactMatch" option // item's "exactMatch" option
@ -52,26 +73,25 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
: this._fuseUtilsService.subsetMatchOptions; : this._fuseUtilsService.subsetMatchOptions;
// Get the parent navigation component // Get the parent navigation component
this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name); this._fuseVerticalNavigationComponent =
this._fuseNavigationService.getComponent(this.name);
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed
takeUntil(this._unsubscribeAll), .pipe(takeUntil(this._unsubscribeAll))
).subscribe(() => .subscribe(() => {
{ // Mark for check
// Mark for check this._changeDetectorRef.markForCheck();
this._changeDetectorRef.markForCheck(); });
});
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();

55
src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
View File

@ -1,33 +1,34 @@
<div <div
class="fuse-vertical-navigation-item-wrapper" class="fuse-vertical-navigation-item-wrapper"
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
[ngClass]="item.classes?.wrapper"> [ngClass]="item.classes?.wrapper"
>
<div <div
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}" [ngClass]="{ 'fuse-vertical-navigation-item-disabled': item.disabled }"
[matTooltip]="item.tooltip || ''" [matTooltip]="item.tooltip || ''"
(click)="toggleCollapsable()"> (click)="toggleCollapsable()"
>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> <ng-container *ngIf="item.icon">
<mat-icon <mat-icon
class="fuse-vertical-navigation-item-icon" class="fuse-vertical-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"
></mat-icon>
</ng-container> </ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-vertical-navigation-item-title-wrapper"> <div class="fuse-vertical-navigation-item-title-wrapper">
<div class="fuse-vertical-navigation-item-title"> <div class="fuse-vertical-navigation-item-title">
<span [ngClass]="item.classes?.title"> <span [ngClass]="item.classes?.title">
{{item.title}} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> <ng-container *ngIf="item.subtitle">
<div class="fuse-vertical-navigation-item-subtitle"> <div class="fuse-vertical-navigation-item-subtitle">
<span [ngClass]="item.classes?.subtitle"> <span [ngClass]="item.classes?.subtitle">
{{item.subtitle}} {{ item.subtitle }}
</span> </span>
</div> </div>
</ng-container> </ng-container>
@ -38,8 +39,9 @@
<div class="fuse-vertical-navigation-item-badge"> <div class="fuse-vertical-navigation-item-badge">
<div <div
class="fuse-vertical-navigation-item-badge-content" class="fuse-vertical-navigation-item-badge-content"
[ngClass]="item.badge.classes"> [ngClass]="item.badge.classes"
{{item.badge.title}} >
{{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> </ng-container>
@ -47,27 +49,27 @@
<!-- Arrow --> <!-- Arrow -->
<mat-icon <mat-icon
class="fuse-vertical-navigation-item-arrow icon-size-4" class="fuse-vertical-navigation-item-arrow icon-size-4"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon> [svgIcon]="'heroicons_solid:chevron-right'"
></mat-icon>
</div> </div>
</div> </div>
<div <div
class="fuse-vertical-navigation-item-children" class="fuse-vertical-navigation-item-children"
*ngIf="!isCollapsed" *ngIf="!isCollapsed"
@expandCollapse> @expandCollapse
>
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
<!-- Basic --> <!-- Basic -->
<ng-container *ngIf="item.type === 'basic'"> <ng-container *ngIf="item.type === 'basic'">
<fuse-vertical-navigation-basic-item <fuse-vertical-navigation-basic-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-basic-item> [name]="name"
></fuse-vertical-navigation-basic-item>
</ng-container> </ng-container>
<!-- Collapsable --> <!-- Collapsable -->
@ -75,32 +77,33 @@
<fuse-vertical-navigation-collapsable-item <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-collapsable-item>
</ng-container> </ng-container>
<!-- Divider --> <!-- Divider -->
<ng-container *ngIf="item.type === 'divider'"> <ng-container *ngIf="item.type === 'divider'">
<fuse-vertical-navigation-divider-item <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-divider-item> [name]="name"
></fuse-vertical-navigation-divider-item>
</ng-container> </ng-container>
<!-- Group --> <!-- Group -->
<ng-container *ngIf="item.type === 'group'"> <ng-container *ngIf="item.type === 'group'">
<fuse-vertical-navigation-group-item <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-group-item> [name]="name"
></fuse-vertical-navigation-group-item>
</ng-container> </ng-container>
<!-- Spacer --> <!-- Spacer -->
<ng-container *ngIf="item.type === 'spacer'"> <ng-container *ngIf="item.type === 'spacer'">
<fuse-vertical-navigation-spacer-item <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-spacer-item> [name]="name"
></fuse-vertical-navigation-spacer-item>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</div> </div>

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

@ -1,6 +1,16 @@
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { NgClass, NgFor, NgIf } from '@angular/common'; import { NgClass, NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostBinding, inject, Input, OnDestroy, OnInit } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
HostBinding,
Input,
OnDestroy,
OnInit,
forwardRef,
inject,
} from '@angular/core';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { NavigationEnd, Router } from '@angular/router'; import { NavigationEnd, Router } from '@angular/router';
@ -12,17 +22,29 @@ import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/nav
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component'; import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component'; import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { filter, Subject, takeUntil } from 'rxjs'; import { Subject, filter, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-collapsable-item', selector: 'fuse-vertical-navigation-collapsable-item',
templateUrl : './collapsable.component.html', templateUrl: './collapsable.component.html',
animations : fuseAnimations, animations: fuseAnimations,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true, standalone: true,
imports : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, forwardRef(() => FuseVerticalNavigationCollapsableItemComponent), FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent], imports: [
NgClass,
MatTooltipModule,
NgIf,
MatIconModule,
NgFor,
FuseVerticalNavigationBasicItemComponent,
forwardRef(() => FuseVerticalNavigationCollapsableItemComponent),
FuseVerticalNavigationDividerItemComponent,
FuseVerticalNavigationGroupItemComponent,
FuseVerticalNavigationSpacerItemComponent,
],
}) })
export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy export class FuseVerticalNavigationCollapsableItemComponent
implements OnInit, OnDestroy
{ {
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
static ngAcceptInputType_autoCollapse: BooleanInput; static ngAcceptInputType_autoCollapse: BooleanInput;
@ -48,12 +70,11 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
/** /**
* Host binding for component classes * Host binding for component classes
*/ */
@HostBinding('class') get classList(): any @HostBinding('class') get classList(): any {
{
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
return { return {
'fuse-vertical-navigation-item-collapsed': this.isCollapsed, '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 */ /* eslint-enable @typescript-eslint/naming-convention */
} }
@ -65,22 +86,19 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Get the parent navigation component // Get the parent navigation component
this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name); this._fuseVerticalNavigationComponent =
this._fuseNavigationService.getComponent(this.name);
// If the item has a children that has a matching url with the current url, expand... // If the item has a children that has a matching url with the current url, expand...
if ( this._hasActiveChild(this.item, this._router.url) ) if (this._hasActiveChild(this.item, this._router.url)) {
{
this.expand(); this.expand();
} }
// Otherwise... // Otherwise...
else else {
{
// If the autoCollapse is on, collapse... // If the autoCollapse is on, collapse...
if ( this.autoCollapse ) if (this.autoCollapse) {
{
this.collapse(); this.collapse();
} }
} }
@ -88,49 +106,40 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
// Listen for the onCollapsableItemCollapsed from the service // Listen for the onCollapsableItemCollapsed from the service
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((collapsedItem) => .subscribe((collapsedItem) => {
{
// Check if the collapsed item is null // Check if the collapsed item is null
if ( collapsedItem === null ) if (collapsedItem === null) {
{
return; return;
} }
// Collapse if this is a children of the collapsed item // Collapse if this is a children of the collapsed item
if ( this._isChildrenOf(collapsedItem, this.item) ) if (this._isChildrenOf(collapsedItem, this.item)) {
{
this.collapse(); this.collapse();
} }
}); });
// Listen for the onCollapsableItemExpanded from the service if the autoCollapse is on // Listen for the onCollapsableItemExpanded from the service if the autoCollapse is on
if ( this.autoCollapse ) if (this.autoCollapse) {
{
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((expandedItem) => .subscribe((expandedItem) => {
{
// Check if the expanded item is null // Check if the expanded item is null
if ( expandedItem === null ) if (expandedItem === null) {
{
return; return;
} }
// Check if this is a parent of the expanded item // Check if this is a parent of the expanded item
if ( this._isChildrenOf(this.item, expandedItem) ) if (this._isChildrenOf(this.item, expandedItem)) {
{
return; return;
} }
// Check if this has a children with a matching url with the current active url // Check if this has a children with a matching url with the current active url
if ( this._hasActiveChild(this.item, this._router.url) ) if (this._hasActiveChild(this.item, this._router.url)) {
{
return; return;
} }
// Check if this is the expanded item // Check if this is the expanded item
if ( this.item === expandedItem ) if (this.item === expandedItem) {
{
return; return;
} }
@ -142,42 +151,39 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
// Attach a listener to the NavigationEnd event // Attach a listener to the NavigationEnd event
this._router.events this._router.events
.pipe( .pipe(
filter((event): event is NavigationEnd => event instanceof NavigationEnd), filter(
takeUntil(this._unsubscribeAll), (event): event is NavigationEnd =>
event instanceof NavigationEnd
),
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 the item has a children that has a matching url with the current url, expand...
if ( this._hasActiveChild(this.item, event.urlAfterRedirects) ) if (this._hasActiveChild(this.item, event.urlAfterRedirects)) {
{
this.expand(); this.expand();
} }
// Otherwise... // Otherwise...
else else {
{
// If the autoCollapse is on, collapse... // If the autoCollapse is on, collapse...
if ( this.autoCollapse ) if (this.autoCollapse) {
{
this.collapse(); this.collapse();
} }
} }
}); });
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed
takeUntil(this._unsubscribeAll), .pipe(takeUntil(this._unsubscribeAll))
).subscribe(() => .subscribe(() => {
{ // Mark for check
// Mark for check this._changeDetectorRef.markForCheck();
this._changeDetectorRef.markForCheck(); });
});
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -190,17 +196,14 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
/** /**
* Collapse * Collapse
*/ */
collapse(): void collapse(): void {
{
// Return if the item is disabled // Return if the item is disabled
if ( this.item.disabled ) if (this.item.disabled) {
{
return; return;
} }
// Return if the item is already collapsed // Return if the item is already collapsed
if ( this.isCollapsed ) if (this.isCollapsed) {
{
return; return;
} }
@ -212,23 +215,22 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
// Execute the observable // Execute the observable
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed.next(this.item); this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed.next(
this.item
);
} }
/** /**
* Expand * Expand
*/ */
expand(): void expand(): void {
{
// Return if the item is disabled // Return if the item is disabled
if ( this.item.disabled ) if (this.item.disabled) {
{
return; return;
} }
// Return if the item is already expanded // Return if the item is already expanded
if ( !this.isCollapsed ) if (!this.isCollapsed) {
{
return; return;
} }
@ -240,21 +242,19 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
// Execute the observable // Execute the observable
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded.next(this.item); this._fuseVerticalNavigationComponent.onCollapsableItemExpanded.next(
this.item
);
} }
/** /**
* Toggle collapsable * Toggle collapsable
*/ */
toggleCollapsable(): void toggleCollapsable(): void {
{
// Toggle collapse/expand // Toggle collapse/expand
if ( this.isCollapsed ) if (this.isCollapsed) {
{
this.expand(); this.expand();
} } else {
else
{
this.collapse(); this.collapse();
} }
} }
@ -265,8 +265,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
@ -282,28 +281,28 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
* @param currentUrl * @param currentUrl
* @private * @private
*/ */
private _hasActiveChild(item: FuseNavigationItem, currentUrl: string): boolean private _hasActiveChild(
{ item: FuseNavigationItem,
currentUrl: string
): boolean {
const children = item.children; const children = item.children;
if ( !children ) if (!children) {
{
return false; return false;
} }
for ( const child of children ) for (const child of children) {
{ if (child.children) {
if ( child.children ) if (this._hasActiveChild(child, currentUrl)) {
{
if ( this._hasActiveChild(child, currentUrl) )
{
return true; return true;
} }
} }
// Check if the child has a link and is active // Check if the child has a link and is active
if ( child.link && this._router.isActive(child.link, child.exactMatch || false) ) if (
{ child.link &&
this._router.isActive(child.link, child.exactMatch || false)
) {
return true; return true;
} }
} }
@ -319,26 +318,23 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
* @param item * @param item
* @private * @private
*/ */
private _isChildrenOf(parent: FuseNavigationItem, item: FuseNavigationItem): boolean private _isChildrenOf(
{ parent: FuseNavigationItem,
item: FuseNavigationItem
): boolean {
const children = parent.children; const children = parent.children;
if ( !children ) if (!children) {
{
return false; return false;
} }
if ( children.indexOf(item) > -1 ) if (children.indexOf(item) > -1) {
{
return true; return true;
} }
for ( const child of children ) for (const child of children) {
{ if (child.children) {
if ( child.children ) if (this._isChildrenOf(child, item)) {
{
if ( this._isChildrenOf(child, item) )
{
return true; return true;
} }
} }

3
src/@fuse/components/navigation/vertical/components/divider/divider.component.html
View File

@ -1,4 +1,5 @@
<!-- Divider --> <!-- Divider -->
<div <div
class="fuse-vertical-navigation-item-wrapper divider" class="fuse-vertical-navigation-item-wrapper divider"
[ngClass]="item.classes?.wrapper"></div> [ngClass]="item.classes?.wrapper"
></div>

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

@ -1,18 +1,27 @@
import { NgClass } from '@angular/common'; import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
inject,
Input,
OnDestroy,
OnInit,
} from '@angular/core';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-divider-item', selector: 'fuse-vertical-navigation-divider-item',
templateUrl : './divider.component.html', templateUrl: './divider.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true, standalone: true,
imports : [NgClass], imports: [NgClass],
}) })
export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy export class FuseVerticalNavigationDividerItemComponent
implements OnInit, OnDestroy
{ {
private _changeDetectorRef = inject(ChangeDetectorRef); private _changeDetectorRef = inject(ChangeDetectorRef);
private _fuseNavigationService = inject(FuseNavigationService); private _fuseNavigationService = inject(FuseNavigationService);
@ -30,26 +39,24 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Get the parent navigation component // Get the parent navigation component
this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name); this._fuseVerticalNavigationComponent =
this._fuseNavigationService.getComponent(this.name);
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed
takeUntil(this._unsubscribeAll), .pipe(takeUntil(this._unsubscribeAll))
).subscribe(() => .subscribe(() => {
{ // Mark for check
// Mark for check this._changeDetectorRef.markForCheck();
this._changeDetectorRef.markForCheck(); });
});
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();

38
src/@fuse/components/navigation/vertical/components/group/group.component.html
View File

@ -2,29 +2,29 @@
<div <div
class="fuse-vertical-navigation-item-wrapper" class="fuse-vertical-navigation-item-wrapper"
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
[ngClass]="item.classes?.wrapper"> [ngClass]="item.classes?.wrapper"
>
<div class="fuse-vertical-navigation-item"> <div class="fuse-vertical-navigation-item">
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="item.icon"> <ng-container *ngIf="item.icon">
<mat-icon <mat-icon
class="fuse-vertical-navigation-item-icon" class="fuse-vertical-navigation-item-icon"
[ngClass]="item.classes?.icon" [ngClass]="item.classes?.icon"
[svgIcon]="item.icon"></mat-icon> [svgIcon]="item.icon"
></mat-icon>
</ng-container> </ng-container>
<!-- Title & Subtitle --> <!-- Title & Subtitle -->
<div class="fuse-vertical-navigation-item-title-wrapper"> <div class="fuse-vertical-navigation-item-title-wrapper">
<div class="fuse-vertical-navigation-item-title"> <div class="fuse-vertical-navigation-item-title">
<span [ngClass]="item.classes?.title"> <span [ngClass]="item.classes?.title">
{{item.title}} {{ item.title }}
</span> </span>
</div> </div>
<ng-container *ngIf="item.subtitle"> <ng-container *ngIf="item.subtitle">
<div class="fuse-vertical-navigation-item-subtitle"> <div class="fuse-vertical-navigation-item-subtitle">
<span [ngClass]="item.classes?.subtitle"> <span [ngClass]="item.classes?.subtitle">
{{item.subtitle}} {{ item.subtitle }}
</span> </span>
</div> </div>
</ng-container> </ng-container>
@ -35,26 +35,24 @@
<div class="fuse-vertical-navigation-item-badge"> <div class="fuse-vertical-navigation-item-badge">
<div <div
class="fuse-vertical-navigation-item-badge-content" class="fuse-vertical-navigation-item-badge-content"
[ngClass]="item.badge.classes"> [ngClass]="item.badge.classes"
{{item.badge.title}} >
{{ item.badge.title }}
</div> </div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
</div> </div>
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
<!-- Basic --> <!-- Basic -->
<ng-container *ngIf="item.type === 'basic'"> <ng-container *ngIf="item.type === 'basic'">
<fuse-vertical-navigation-basic-item <fuse-vertical-navigation-basic-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-basic-item> [name]="name"
></fuse-vertical-navigation-basic-item>
</ng-container> </ng-container>
<!-- Collapsable --> <!-- Collapsable -->
@ -62,30 +60,32 @@
<fuse-vertical-navigation-collapsable-item <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-collapsable-item>
</ng-container> </ng-container>
<!-- Divider --> <!-- Divider -->
<ng-container *ngIf="item.type === 'divider'"> <ng-container *ngIf="item.type === 'divider'">
<fuse-vertical-navigation-divider-item <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-divider-item> [name]="name"
></fuse-vertical-navigation-divider-item>
</ng-container> </ng-container>
<!-- Group --> <!-- Group -->
<ng-container *ngIf="item.type === 'group'"> <ng-container *ngIf="item.type === 'group'">
<fuse-vertical-navigation-group-item <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-group-item> [name]="name"
></fuse-vertical-navigation-group-item>
</ng-container> </ng-container>
<!-- Spacer --> <!-- Spacer -->
<ng-container *ngIf="item.type === 'spacer'"> <ng-container *ngIf="item.type === 'spacer'">
<fuse-vertical-navigation-spacer-item <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-spacer-item> [name]="name"
></fuse-vertical-navigation-spacer-item>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>

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

@ -1,6 +1,15 @@
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { NgClass, NgFor, NgIf } from '@angular/common'; import { NgClass, NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, inject, Input, OnDestroy, OnInit } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
OnDestroy,
OnInit,
forwardRef,
inject,
} from '@angular/core';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@ -12,13 +21,24 @@ import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/ver
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-group-item', selector: 'fuse-vertical-navigation-group-item',
templateUrl : './group.component.html', templateUrl: './group.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true, standalone: true,
imports : [NgClass, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, forwardRef(() => FuseVerticalNavigationGroupItemComponent), FuseVerticalNavigationSpacerItemComponent], imports: [
NgClass,
NgIf,
MatIconModule,
NgFor,
FuseVerticalNavigationBasicItemComponent,
FuseVerticalNavigationCollapsableItemComponent,
FuseVerticalNavigationDividerItemComponent,
forwardRef(() => FuseVerticalNavigationGroupItemComponent),
FuseVerticalNavigationSpacerItemComponent,
],
}) })
export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy export class FuseVerticalNavigationGroupItemComponent
implements OnInit, OnDestroy
{ {
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
static ngAcceptInputType_autoCollapse: BooleanInput; static ngAcceptInputType_autoCollapse: BooleanInput;
@ -41,26 +61,24 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Get the parent navigation component // Get the parent navigation component
this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name); this._fuseVerticalNavigationComponent =
this._fuseNavigationService.getComponent(this.name);
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed
takeUntil(this._unsubscribeAll), .pipe(takeUntil(this._unsubscribeAll))
).subscribe(() => .subscribe(() => {
{ // Mark for check
// Mark for check this._changeDetectorRef.markForCheck();
this._changeDetectorRef.markForCheck(); });
});
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -76,8 +94,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
} }

3
src/@fuse/components/navigation/vertical/components/spacer/spacer.component.html
View File

@ -1,4 +1,5 @@
<!-- Spacer --> <!-- Spacer -->
<div <div
class="fuse-vertical-navigation-item-wrapper" class="fuse-vertical-navigation-item-wrapper"
[ngClass]="item.classes?.wrapper"></div> [ngClass]="item.classes?.wrapper"
></div>

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

@ -1,18 +1,27 @@
import { NgClass } from '@angular/common'; import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
inject,
Input,
OnDestroy,
OnInit,
} from '@angular/core';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-spacer-item', selector: 'fuse-vertical-navigation-spacer-item',
templateUrl : './spacer.component.html', templateUrl: './spacer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true, standalone: true,
imports : [NgClass], imports: [NgClass],
}) })
export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy export class FuseVerticalNavigationSpacerItemComponent
implements OnInit, OnDestroy
{ {
private _changeDetectorRef = inject(ChangeDetectorRef); private _changeDetectorRef = inject(ChangeDetectorRef);
private _fuseNavigationService = inject(FuseNavigationService); private _fuseNavigationService = inject(FuseNavigationService);
@ -30,26 +39,24 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Get the parent navigation component // Get the parent navigation component
this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name); this._fuseVerticalNavigationComponent =
this._fuseNavigationService.getComponent(this.name);
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed
takeUntil(this._unsubscribeAll), .pipe(takeUntil(this._unsubscribeAll))
).subscribe(() => .subscribe(() => {
{ // Mark for check
// Mark for check this._changeDetectorRef.markForCheck();
this._changeDetectorRef.markForCheck(); });
});
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();

19
src/@fuse/components/navigation/vertical/styles/appearances/compact.scss
View File

@ -4,7 +4,6 @@
} }
fuse-vertical-navigation { fuse-vertical-navigation {
/* Compact appearance overrides */ /* Compact appearance overrides */
&.fuse-vertical-navigation-appearance-compact { &.fuse-vertical-navigation-appearance-compact {
width: var(--fuse-vertical-navigation-compact-width); width: var(--fuse-vertical-navigation-compact-width);
@ -13,10 +12,11 @@ fuse-vertical-navigation {
/* Left positioned */ /* Left positioned */
&.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-position-left {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-left: calc(var(--fuse-vertical-navigation-compact-width) * -1); margin-left: calc(
var(--fuse-vertical-navigation-compact-width) * -1
);
} }
/* Opened */ /* Opened */
@ -27,10 +27,11 @@ fuse-vertical-navigation {
/* Right positioned */ /* Right positioned */
&.fuse-vertical-navigation-position-right { &.fuse-vertical-navigation-position-right {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-right: calc(var(--fuse-vertical-navigation-compact-width) * -1); margin-right: calc(
var(--fuse-vertical-navigation-compact-width) * -1
);
} }
/* Opened */ /* Opened */
@ -47,13 +48,10 @@ fuse-vertical-navigation {
/* Wrapper */ /* Wrapper */
.fuse-vertical-navigation-wrapper { .fuse-vertical-navigation-wrapper {
/* Content */ /* Content */
.fuse-vertical-navigation-content { .fuse-vertical-navigation-content {
> fuse-vertical-navigation-aside-item, > fuse-vertical-navigation-aside-item,
> fuse-vertical-navigation-basic-item { > fuse-vertical-navigation-basic-item {
.fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item-wrapper {
margin: 4px 8px 0 8px; margin: 4px 8px 0 8px;
@ -91,13 +89,12 @@ fuse-vertical-navigation {
} }
> fuse-vertical-navigation-collapsable-item { > fuse-vertical-navigation-collapsable-item {
display: none display: none;
} }
> fuse-vertical-navigation-group-item { > fuse-vertical-navigation-group-item {
> .fuse-vertical-navigation-item-wrapper { > .fuse-vertical-navigation-item-wrapper {
display: none display: none;
} }
} }
} }

56
src/@fuse/components/navigation/vertical/styles/appearances/default.scss
View File

@ -25,7 +25,8 @@ fuse-vertical-navigation {
&.fuse-vertical-navigation-animations-enabled { &.fuse-vertical-navigation-animations-enabled {
transition-duration: 400ms; transition-duration: 400ms;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-property: visibility, margin-left, margin-right, transform, width, max-width, min-width; transition-property: visibility, margin-left, margin-right, transform,
width, max-width, min-width;
/* Wrapper */ /* Wrapper */
.fuse-vertical-navigation-wrapper { .fuse-vertical-navigation-wrapper {
@ -44,7 +45,6 @@ fuse-vertical-navigation {
/* Left position */ /* Left position */
&.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-position-left {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-left: calc(#{var(--fuse-vertical-navigation-width)} * -1); margin-left: calc(#{var(--fuse-vertical-navigation-width)} * -1);
@ -72,7 +72,6 @@ fuse-vertical-navigation {
/* Right position */ /* Right position */
&.fuse-vertical-navigation-position-right { &.fuse-vertical-navigation-position-right {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-right: calc(var(--fuse-vertical-navigation-width) * -1); margin-right: calc(var(--fuse-vertical-navigation-width) * -1);
@ -137,7 +136,6 @@ fuse-vertical-navigation {
/* Header */ /* Header */
.fuse-vertical-navigation-header { .fuse-vertical-navigation-header {
} }
/* Content */ /* Content */
@ -160,7 +158,6 @@ fuse-vertical-navigation {
/* Footer */ /* Footer */
.fuse-vertical-navigation-footer { .fuse-vertical-navigation-footer {
} }
} }
@ -195,7 +192,6 @@ fuse-vertical-navigation {
} }
&.fuse-vertical-navigation-position-right { &.fuse-vertical-navigation-position-right {
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; left: auto;
right: var(--fuse-vertical-navigation-width); right: var(--fuse-vertical-navigation-width);
@ -219,7 +215,6 @@ fuse-vertical-navigation {
user-select: none; user-select: none;
.fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
position: relative; position: relative;
display: flex; display: flex;
@ -243,7 +238,6 @@ fuse-vertical-navigation {
} }
.fuse-vertical-navigation-item-title-wrapper { .fuse-vertical-navigation-item-title-wrapper {
.fuse-vertical-navigation-item-subtitle { .fuse-vertical-navigation-item-subtitle {
font-size: 11px; font-size: 11px;
line-height: 1.5; line-height: 1.5;
@ -272,7 +266,6 @@ fuse-vertical-navigation {
fuse-vertical-navigation-basic-item, fuse-vertical-navigation-basic-item,
fuse-vertical-navigation-collapsable-item, fuse-vertical-navigation-collapsable-item,
fuse-vertical-navigation-group-item { fuse-vertical-navigation-group-item {
> .fuse-vertical-navigation-item-wrapper { > .fuse-vertical-navigation-item-wrapper {
margin: 0 12px; margin: 0 12px;
} }
@ -291,23 +284,17 @@ fuse-vertical-navigation {
/* Aside */ /* Aside */
fuse-vertical-navigation-aside-item { fuse-vertical-navigation-aside-item {
} }
/* Basic */ /* Basic */
fuse-vertical-navigation-basic-item { fuse-vertical-navigation-basic-item {
} }
/* Collapsable */ /* Collapsable */
fuse-vertical-navigation-collapsable-item { fuse-vertical-navigation-collapsable-item {
> .fuse-vertical-navigation-item-wrapper { > .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
.fuse-vertical-navigation-item-badge { .fuse-vertical-navigation-item-badge {
+ .fuse-vertical-navigation-item-arrow { + .fuse-vertical-navigation-item-arrow {
margin-left: 8px; margin-left: 8px;
} }
@ -317,18 +304,16 @@ fuse-vertical-navigation {
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
margin-left: auto; margin-left: auto;
transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1), transition:
color 375ms cubic-bezier(0.25, 0.8, 0.25, 1); transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
color 375ms cubic-bezier(0.25, 0.8, 0.25, 1);
} }
} }
} }
&.fuse-vertical-navigation-item-expanded { &.fuse-vertical-navigation-item-expanded {
> .fuse-vertical-navigation-item-wrapper { > .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
.fuse-vertical-navigation-item-arrow { .fuse-vertical-navigation-item-arrow {
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -337,7 +322,6 @@ fuse-vertical-navigation {
} }
> .fuse-vertical-navigation-item-children { > .fuse-vertical-navigation-item-children {
> *:first-child { > *:first-child {
margin-top: 6px; margin-top: 6px;
} }
@ -346,7 +330,6 @@ fuse-vertical-navigation {
padding-bottom: 6px; padding-bottom: 6px;
> .fuse-vertical-navigation-item-children { > .fuse-vertical-navigation-item-children {
> *:last-child { > *:last-child {
padding-bottom: 0; padding-bottom: 0;
} }
@ -368,21 +351,18 @@ fuse-vertical-navigation {
/* 2nd level */ /* 2nd level */
.fuse-vertical-navigation-item-children { .fuse-vertical-navigation-item-children {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
padding-left: 72px; padding-left: 72px;
} }
/* 3rd level */ /* 3rd level */
.fuse-vertical-navigation-item-children { .fuse-vertical-navigation-item-children {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
padding-left: 88px; padding-left: 88px;
} }
/* 4th level */ /* 4th level */
.fuse-vertical-navigation-item-children { .fuse-vertical-navigation-item-children {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
padding-left: 104px; padding-left: 104px;
} }
@ -404,18 +384,14 @@ fuse-vertical-navigation {
/* Group */ /* Group */
fuse-vertical-navigation-group-item { fuse-vertical-navigation-group-item {
> .fuse-vertical-navigation-item-wrapper { > .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
.fuse-vertical-navigation-item-badge, .fuse-vertical-navigation-item-badge,
.fuse-vertical-navigation-item-icon { .fuse-vertical-navigation-item-icon {
display: none !important; display: none !important;
} }
.fuse-vertical-navigation-item-title-wrapper { .fuse-vertical-navigation-item-title-wrapper {
.fuse-vertical-navigation-item-title { .fuse-vertical-navigation-item-title {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
@ -474,9 +450,7 @@ fuse-vertical-navigation-aside-item,
fuse-vertical-navigation-basic-item, fuse-vertical-navigation-basic-item,
fuse-vertical-navigation-collapsable-item, fuse-vertical-navigation-collapsable-item,
fuse-vertical-navigation-group-item { fuse-vertical-navigation-group-item {
.fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
color: currentColor; color: currentColor;
@ -485,7 +459,6 @@ fuse-vertical-navigation-group-item {
} }
.fuse-vertical-navigation-item-title-wrapper { .fuse-vertical-navigation-item-title-wrapper {
.fuse-vertical-navigation-item-title { .fuse-vertical-navigation-item-title {
@apply text-current opacity-80; @apply text-current opacity-80;
} }
@ -502,14 +475,10 @@ fuse-vertical-navigation-group-item {
fuse-vertical-navigation-aside-item, fuse-vertical-navigation-aside-item,
fuse-vertical-navigation-basic-item, fuse-vertical-navigation-basic-item,
fuse-vertical-navigation-collapsable-item { fuse-vertical-navigation-collapsable-item {
> .fuse-vertical-navigation-item-wrapper { > .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
/* Active state */ /* Active state */
&:not(.fuse-vertical-navigation-item-disabled) { &:not(.fuse-vertical-navigation-item-disabled) {
&.fuse-vertical-navigation-item-active, &.fuse-vertical-navigation-item-active,
&.fuse-vertical-navigation-item-active-forced { &.fuse-vertical-navigation-item-active-forced {
@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12; @apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;
@ -529,8 +498,9 @@ fuse-vertical-navigation-collapsable-item {
} }
/* Hover state */ /* Hover state */
&:not(.fuse-vertical-navigation-item-active-forced):not(.fuse-vertical-navigation-item-active):not(.fuse-vertical-navigation-item-disabled) { &:not(.fuse-vertical-navigation-item-active-forced):not(
.fuse-vertical-navigation-item-active
):not(.fuse-vertical-navigation-item-disabled) {
&:hover { &:hover {
@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12; @apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;
@ -554,14 +524,10 @@ fuse-vertical-navigation-collapsable-item {
/* Collapsable */ /* Collapsable */
fuse-vertical-navigation-collapsable-item { fuse-vertical-navigation-collapsable-item {
/* Expanded state */ /* Expanded state */
&.fuse-vertical-navigation-item-expanded { &.fuse-vertical-navigation-item-expanded {
> .fuse-vertical-navigation-item-wrapper { > .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
.fuse-vertical-navigation-item-icon { .fuse-vertical-navigation-item-icon {
@apply opacity-100; @apply opacity-100;
} }
@ -581,15 +547,11 @@ fuse-vertical-navigation-collapsable-item {
/* Group */ /* Group */
fuse-vertical-navigation-group-item { fuse-vertical-navigation-group-item {
> .fuse-vertical-navigation-item-wrapper { > .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
.fuse-vertical-navigation-item-title-wrapper { .fuse-vertical-navigation-item-title-wrapper {
.fuse-vertical-navigation-item-title { .fuse-vertical-navigation-item-title {
@apply opacity-100 text-primary-600 dark:text-primary-400; @apply text-primary-600 opacity-100 dark:text-primary-400;
} }
} }
} }

70
src/@fuse/components/navigation/vertical/styles/appearances/dense.scss
View File

@ -5,10 +5,8 @@
} }
fuse-vertical-navigation { fuse-vertical-navigation {
/* Dense appearance overrides */ /* Dense appearance overrides */
&.fuse-vertical-navigation-appearance-dense { &.fuse-vertical-navigation-appearance-dense {
&:not(.fuse-vertical-navigation-mode-over) { &:not(.fuse-vertical-navigation-mode-over) {
width: var(--fuse-vertical-navigation-dense-width); width: var(--fuse-vertical-navigation-dense-width);
min-width: var(--fuse-vertical-navigation-dense-width); min-width: var(--fuse-vertical-navigation-dense-width);
@ -16,10 +14,11 @@ fuse-vertical-navigation {
/* Left positioned */ /* Left positioned */
&.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-position-left {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-left: calc(var(--fuse-vertical-navigation-dense-width) * -1); margin-left: calc(
var(--fuse-vertical-navigation-dense-width) * -1
);
} }
/* Opened */ /* Opened */
@ -30,10 +29,11 @@ fuse-vertical-navigation {
/* Right positioned */ /* Right positioned */
&.fuse-vertical-navigation-position-right { &.fuse-vertical-navigation-position-right {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-right: calc(var(--fuse-vertical-navigation-dense-width) * -1); margin-right: calc(
var(--fuse-vertical-navigation-dense-width) * -1
);
} }
/* Opened */ /* Opened */
@ -48,7 +48,6 @@ fuse-vertical-navigation {
} }
&.fuse-vertical-navigation-hover { &.fuse-vertical-navigation-hover {
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; left: auto;
right: var(--fuse-vertical-navigation-width); right: var(--fuse-vertical-navigation-width);
@ -59,33 +58,38 @@ fuse-vertical-navigation {
/* Wrapper */ /* Wrapper */
.fuse-vertical-navigation-wrapper { .fuse-vertical-navigation-wrapper {
/* Content */ /* Content */
.fuse-vertical-navigation-content { .fuse-vertical-navigation-content {
fuse-vertical-navigation-aside-item, fuse-vertical-navigation-aside-item,
fuse-vertical-navigation-basic-item, fuse-vertical-navigation-basic-item,
fuse-vertical-navigation-collapsable-item, fuse-vertical-navigation-collapsable-item,
fuse-vertical-navigation-group-item { fuse-vertical-navigation-group-item {
.fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); width: calc(
min-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); var(--fuse-vertical-navigation-dense-width) -
max-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); 24px
);
min-width: calc(
var(--fuse-vertical-navigation-dense-width) -
24px
);
max-width: calc(
var(--fuse-vertical-navigation-dense-width) -
24px
);
.fuse-vertical-navigation-item-arrow, .fuse-vertical-navigation-item-arrow,
.fuse-vertical-navigation-item-badge, .fuse-vertical-navigation-item-badge,
.fuse-vertical-navigation-item-title-wrapper { .fuse-vertical-navigation-item-title-wrapper {
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); transition: opacity 400ms
cubic-bezier(0.25, 0.8, 0.25, 1);
} }
} }
} }
} }
fuse-vertical-navigation-group-item { fuse-vertical-navigation-group-item {
&:first-of-type { &:first-of-type {
margin-top: 0; margin-top: 0;
} }
@ -93,16 +97,14 @@ fuse-vertical-navigation {
} }
} }
&:not(.fuse-vertical-navigation-hover):not(.fuse-vertical-navigation-mode-over) { &:not(.fuse-vertical-navigation-hover):not(
.fuse-vertical-navigation-mode-over
) {
/* Wrapper */ /* Wrapper */
.fuse-vertical-navigation-wrapper { .fuse-vertical-navigation-wrapper {
/* Content */ /* Content */
.fuse-vertical-navigation-content { .fuse-vertical-navigation-content {
.fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
padding: 10px 16px; padding: 10px 16px;
@ -116,18 +118,14 @@ fuse-vertical-navigation {
} }
fuse-vertical-navigation-collapsable-item { fuse-vertical-navigation-collapsable-item {
.fuse-vertical-navigation-item-children { .fuse-vertical-navigation-item-children {
display: none; display: none;
} }
} }
fuse-vertical-navigation-group-item { fuse-vertical-navigation-group-item {
> .fuse-vertical-navigation-item-wrapper { > .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
@ -149,24 +147,28 @@ fuse-vertical-navigation {
/* Hover */ /* Hover */
&.fuse-vertical-navigation-hover { &.fuse-vertical-navigation-hover {
.fuse-vertical-navigation-wrapper { .fuse-vertical-navigation-wrapper {
width: var(--fuse-vertical-navigation-width); width: var(--fuse-vertical-navigation-width);
.fuse-vertical-navigation-content { .fuse-vertical-navigation-content {
.fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
width: calc(var(--fuse-vertical-navigation-width) - 24px); width: calc(
min-width: calc(var(--fuse-vertical-navigation-width) - 24px); var(--fuse-vertical-navigation-width) - 24px
max-width: calc(var(--fuse-vertical-navigation-width) - 24px); );
min-width: calc(
var(--fuse-vertical-navigation-width) - 24px
);
max-width: calc(
var(--fuse-vertical-navigation-width) - 24px
);
.fuse-vertical-navigation-item-arrow, .fuse-vertical-navigation-item-arrow,
.fuse-vertical-navigation-item-badge, .fuse-vertical-navigation-item-badge,
.fuse-vertical-navigation-item-title-wrapper { .fuse-vertical-navigation-item-title-wrapper {
white-space: nowrap; white-space: nowrap;
animation: removeWhiteSpaceNoWrap 1ms linear 350ms; animation: removeWhiteSpaceNoWrap 1ms linear
350ms;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
} }
@ -183,10 +185,10 @@ fuse-vertical-navigation {
@keyframes removeWhiteSpaceNoWrap { @keyframes removeWhiteSpaceNoWrap {
0% { 0% {
white-space: nowrap white-space: nowrap;
} }
99% { 99% {
white-space: nowrap white-space: nowrap;
} }
100% { 100% {
white-space: normal; white-space: normal;

18
src/@fuse/components/navigation/vertical/styles/appearances/thin.scss
View File

@ -4,7 +4,6 @@
} }
fuse-vertical-navigation { fuse-vertical-navigation {
/* Thin appearance overrides */ /* Thin appearance overrides */
&.fuse-vertical-navigation-appearance-thin { &.fuse-vertical-navigation-appearance-thin {
width: var(--fuse-vertical-navigation-thin-width); width: var(--fuse-vertical-navigation-thin-width);
@ -13,9 +12,10 @@ fuse-vertical-navigation {
/* Left positioned */ /* Left positioned */
&.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-position-left {
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-left: calc(var(--fuse-vertical-navigation-thin-width) * -1); margin-left: calc(
var(--fuse-vertical-navigation-thin-width) * -1
);
} }
&.fuse-vertical-navigation-opened { &.fuse-vertical-navigation-opened {
@ -25,9 +25,10 @@ fuse-vertical-navigation {
/* Right positioned */ /* Right positioned */
&.fuse-vertical-navigation-position-right { &.fuse-vertical-navigation-position-right {
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-right: calc(var(--fuse-vertical-navigation-thin-width) * -1); margin-right: calc(
var(--fuse-vertical-navigation-thin-width) * -1
);
} }
&.fuse-vertical-navigation-opened { &.fuse-vertical-navigation-opened {
@ -42,10 +43,8 @@ fuse-vertical-navigation {
/* Wrapper */ /* Wrapper */
.fuse-vertical-navigation-wrapper { .fuse-vertical-navigation-wrapper {
/* Content */ /* Content */
.fuse-vertical-navigation-content { .fuse-vertical-navigation-content {
> fuse-vertical-navigation-aside-item, > fuse-vertical-navigation-aside-item,
> fuse-vertical-navigation-basic-item { > fuse-vertical-navigation-basic-item {
flex-direction: column; flex-direction: column;
@ -79,13 +78,12 @@ fuse-vertical-navigation {
} }
> fuse-vertical-navigation-collapsable-item { > fuse-vertical-navigation-collapsable-item {
display: none display: none;
} }
> fuse-vertical-navigation-group-item { > fuse-vertical-navigation-group-item {
> .fuse-vertical-navigation-item-wrapper { > .fuse-vertical-navigation-item-wrapper {
display: none display: none;
} }
} }
} }

73
src/@fuse/components/navigation/vertical/vertical.component.html
View File

@ -1,5 +1,4 @@
<div class="fuse-vertical-navigation-wrapper"> <div class="fuse-vertical-navigation-wrapper">
<!-- Header --> <!-- Header -->
<div class="fuse-vertical-navigation-header"> <div class="fuse-vertical-navigation-header">
<ng-content select="[fuseVerticalNavigationHeader]"></ng-content> <ng-content select="[fuseVerticalNavigationHeader]"></ng-content>
@ -9,20 +8,25 @@
<div <div
class="fuse-vertical-navigation-content" class="fuse-vertical-navigation-content"
fuseScrollbar fuseScrollbar
[fuseScrollbarOptions]="{wheelPropagation: inner, suppressScrollX: true}" [fuseScrollbarOptions]="{
#navigationContent> wheelPropagation: inner,
suppressScrollX: true
}"
#navigationContent
>
<!-- Content header --> <!-- Content header -->
<div class="fuse-vertical-navigation-content-header"> <div class="fuse-vertical-navigation-content-header">
<ng-content select="[fuseVerticalNavigationContentHeader]"></ng-content> <ng-content
select="[fuseVerticalNavigationContentHeader]"
></ng-content>
</div> </div>
<!-- Items --> <!-- Items -->
<ng-container *ngFor="let item of navigation; trackBy: trackByFn"> <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
<!-- Aside --> <!-- Aside -->
<ng-container *ngIf="item.type === 'aside'"> <ng-container *ngIf="item.type === 'aside'">
<fuse-vertical-navigation-aside-item <fuse-vertical-navigation-aside-item
@ -31,14 +35,16 @@
[activeItemId]="activeAsideItemId" [activeItemId]="activeAsideItemId"
[autoCollapse]="autoCollapse" [autoCollapse]="autoCollapse"
[skipChildren]="true" [skipChildren]="true"
(click)="toggleAside(item)"></fuse-vertical-navigation-aside-item> (click)="toggleAside(item)"
></fuse-vertical-navigation-aside-item>
</ng-container> </ng-container>
<!-- Basic --> <!-- Basic -->
<ng-container *ngIf="item.type === 'basic'"> <ng-container *ngIf="item.type === 'basic'">
<fuse-vertical-navigation-basic-item <fuse-vertical-navigation-basic-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-basic-item> [name]="name"
></fuse-vertical-navigation-basic-item>
</ng-container> </ng-container>
<!-- Collapsable --> <!-- Collapsable -->
@ -46,14 +52,16 @@
<fuse-vertical-navigation-collapsable-item <fuse-vertical-navigation-collapsable-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item> [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-collapsable-item>
</ng-container> </ng-container>
<!-- Divider --> <!-- Divider -->
<ng-container *ngIf="item.type === 'divider'"> <ng-container *ngIf="item.type === 'divider'">
<fuse-vertical-navigation-divider-item <fuse-vertical-navigation-divider-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-divider-item> [name]="name"
></fuse-vertical-navigation-divider-item>
</ng-container> </ng-container>
<!-- Group --> <!-- Group -->
@ -61,32 +69,32 @@
<fuse-vertical-navigation-group-item <fuse-vertical-navigation-group-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item> [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-group-item>
</ng-container> </ng-container>
<!-- Spacer --> <!-- Spacer -->
<ng-container *ngIf="item.type === 'spacer'"> <ng-container *ngIf="item.type === 'spacer'">
<fuse-vertical-navigation-spacer-item <fuse-vertical-navigation-spacer-item
[item]="item" [item]="item"
[name]="name"></fuse-vertical-navigation-spacer-item> [name]="name"
></fuse-vertical-navigation-spacer-item>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
<!-- Content footer --> <!-- Content footer -->
<div class="fuse-vertical-navigation-content-footer"> <div class="fuse-vertical-navigation-content-footer">
<ng-content select="[fuseVerticalNavigationContentFooter]"></ng-content> <ng-content
select="[fuseVerticalNavigationContentFooter]"
></ng-content>
</div> </div>
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="fuse-vertical-navigation-footer"> <div class="fuse-vertical-navigation-footer">
<ng-content select="[fuseVerticalNavigationFooter]"></ng-content> <ng-content select="[fuseVerticalNavigationFooter]"></ng-content>
</div> </div>
</div> </div>
<!-- Aside --> <!-- Aside -->
@ -94,29 +102,34 @@
<div <div
class="fuse-vertical-navigation-aside-wrapper" class="fuse-vertical-navigation-aside-wrapper"
fuseScrollbar fuseScrollbar
[fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}" [fuseScrollbarOptions]="{
wheelPropagation: false,
suppressScrollX: true
}"
[@fadeInLeft]="position === 'left'" [@fadeInLeft]="position === 'left'"
[@fadeInRight]="position === 'right'" [@fadeInRight]="position === 'right'"
[@fadeOutLeft]="position === 'left'" [@fadeOutLeft]="position === 'left'"
[@fadeOutRight]="position === 'right'"> [@fadeOutRight]="position === 'right'"
>
<!-- Items --> <!-- Items -->
<ng-container *ngFor="let item of navigation; trackBy: trackByFn"> <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
<!-- Skip the hidden items --> <!-- Skip the hidden items -->
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> <ng-container
*ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
>
<!-- Aside --> <!-- Aside -->
<ng-container *ngIf="item.type === 'aside' && item.id === activeAsideItemId"> <ng-container
*ngIf="
item.type === 'aside' && item.id === activeAsideItemId
"
>
<fuse-vertical-navigation-aside-item <fuse-vertical-navigation-aside-item
[item]="item" [item]="item"
[name]="name" [name]="name"
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item> [autoCollapse]="autoCollapse"
></fuse-vertical-navigation-aside-item>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</div> </div>
</ng-container> </ng-container>

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

@ -1,12 +1,43 @@
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import {
animate,
AnimationBuilder,
AnimationPlayer,
style,
} from '@angular/animations';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay'; import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { DOCUMENT, NgFor, NgIf } from '@angular/common'; 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 {
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 { NavigationEnd, Router } from '@angular/router';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types'; import {
FuseNavigationItem,
FuseVerticalNavigationAppearance,
FuseVerticalNavigationMode,
FuseVerticalNavigationPosition,
} from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component'; import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component'; import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component'; import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
@ -15,20 +46,39 @@ import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navig
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component'; import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive'; import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs'; import {
delay,
filter,
merge,
ReplaySubject,
Subject,
Subscription,
takeUntil,
} from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation', selector: 'fuse-vertical-navigation',
templateUrl : './vertical.component.html', templateUrl: './vertical.component.html',
styleUrls : ['./vertical.component.scss'], styleUrls: ['./vertical.component.scss'],
animations : fuseAnimations, animations: fuseAnimations,
encapsulation : ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseVerticalNavigation', exportAs: 'fuseVerticalNavigation',
standalone : true, standalone: true,
imports : [FuseScrollbarDirective, NgFor, NgIf, FuseVerticalNavigationAsideItemComponent, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent], imports: [
FuseScrollbarDirective,
NgFor,
NgIf,
FuseVerticalNavigationAsideItemComponent,
FuseVerticalNavigationBasicItemComponent,
FuseVerticalNavigationCollapsableItemComponent,
FuseVerticalNavigationDividerItemComponent,
FuseVerticalNavigationGroupItemComponent,
FuseVerticalNavigationSpacerItemComponent,
],
}) })
export class FuseVerticalNavigationComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy export class FuseVerticalNavigationComponent
implements OnChanges, OnInit, AfterViewInit, OnDestroy
{ {
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
static ngAcceptInputType_inner: BooleanInput; static ngAcceptInputType_inner: BooleanInput;
@ -55,15 +105,23 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
@Input() opened: boolean = true; @Input() opened: boolean = true;
@Input() position: FuseVerticalNavigationPosition = 'left'; @Input() position: FuseVerticalNavigationPosition = 'left';
@Input() transparentOverlay: boolean = false; @Input() transparentOverlay: boolean = false;
@Output() readonly appearanceChanged: EventEmitter<FuseVerticalNavigationAppearance> = new EventEmitter<FuseVerticalNavigationAppearance>(); @Output()
@Output() readonly modeChanged: EventEmitter<FuseVerticalNavigationMode> = new EventEmitter<FuseVerticalNavigationMode>(); readonly appearanceChanged: EventEmitter<FuseVerticalNavigationAppearance> =
@Output() readonly openedChanged: EventEmitter<boolean> = new EventEmitter<boolean>(); new EventEmitter<FuseVerticalNavigationAppearance>();
@Output() readonly positionChanged: EventEmitter<FuseVerticalNavigationPosition> = new EventEmitter<FuseVerticalNavigationPosition>(); @Output() readonly modeChanged: EventEmitter<FuseVerticalNavigationMode> =
new EventEmitter<FuseVerticalNavigationMode>();
@Output() readonly openedChanged: EventEmitter<boolean> =
new EventEmitter<boolean>();
@Output()
readonly positionChanged: EventEmitter<FuseVerticalNavigationPosition> =
new EventEmitter<FuseVerticalNavigationPosition>();
@ViewChild('navigationContent') private _navigationContentEl: ElementRef; @ViewChild('navigationContent') private _navigationContentEl: ElementRef;
activeAsideItemId: string | null = null; activeAsideItemId: string | null = null;
onCollapsableItemCollapsed: ReplaySubject<FuseNavigationItem> = new ReplaySubject<FuseNavigationItem>(1); onCollapsableItemCollapsed: ReplaySubject<FuseNavigationItem> =
onCollapsableItemExpanded: ReplaySubject<FuseNavigationItem> = new ReplaySubject<FuseNavigationItem>(1); new ReplaySubject<FuseNavigationItem>(1);
onCollapsableItemExpanded: ReplaySubject<FuseNavigationItem> =
new ReplaySubject<FuseNavigationItem>(1);
onRefreshed: ReplaySubject<boolean> = new ReplaySubject<boolean>(1); onRefreshed: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
private _animationsEnabled: boolean = false; private _animationsEnabled: boolean = false;
private _asideOverlay: HTMLElement; private _asideOverlay: HTMLElement;
@ -73,7 +131,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
private _mutationObserver: MutationObserver; private _mutationObserver: MutationObserver;
private _overlay: HTMLElement; private _overlay: HTMLElement;
private _player: AnimationPlayer; private _player: AnimationPlayer;
private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block(); private _scrollStrategy: ScrollStrategy =
this._scrollStrategyOptions.block();
private _fuseScrollbarDirectives!: QueryList<FuseScrollbarDirective>; private _fuseScrollbarDirectives!: QueryList<FuseScrollbarDirective>;
private _fuseScrollbarDirectivesSubscription: Subscription; private _fuseScrollbarDirectivesSubscription: Subscription;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -81,14 +140,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
/** /**
* Constructor * Constructor
*/ */
constructor() constructor() {
{ this._handleAsideOverlayClick = (): void => {
this._handleAsideOverlayClick = (): void =>
{
this.closeAside(); this.closeAside();
}; };
this._handleOverlayClick = (): void => this._handleOverlayClick = (): void => {
{
this.close(); this.close();
}; };
} }
@ -100,19 +156,20 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
/** /**
* Host binding for component classes * Host binding for component classes
*/ */
@HostBinding('class') get classList(): any @HostBinding('class') get classList(): any {
{
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
return { return {
'fuse-vertical-navigation-animations-enabled' : this._animationsEnabled, 'fuse-vertical-navigation-animations-enabled':
this._animationsEnabled,
[`fuse-vertical-navigation-appearance-${this.appearance}`]: true, [`fuse-vertical-navigation-appearance-${this.appearance}`]: true,
'fuse-vertical-navigation-hover' : this._hovered, 'fuse-vertical-navigation-hover': this._hovered,
'fuse-vertical-navigation-inner' : this.inner, 'fuse-vertical-navigation-inner': this.inner,
'fuse-vertical-navigation-mode-over' : this.mode === 'over', 'fuse-vertical-navigation-mode-over': this.mode === 'over',
'fuse-vertical-navigation-mode-side' : this.mode === 'side', 'fuse-vertical-navigation-mode-side': this.mode === 'side',
'fuse-vertical-navigation-opened' : this.opened, 'fuse-vertical-navigation-opened': this.opened,
'fuse-vertical-navigation-position-left' : this.position === 'left', '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 */ /* eslint-enable @typescript-eslint/naming-convention */
} }
@ -120,10 +177,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
/** /**
* Host binding for component inline styles * Host binding for component inline styles
*/ */
@HostBinding('style') get styleList(): any @HostBinding('style') get styleList(): any {
{
return { return {
'visibility': this.opened ? 'visible' : 'hidden', visibility: this.opened ? 'visible' : 'hidden',
}; };
} }
@ -131,41 +187,34 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* Setter for fuseScrollbarDirectives * Setter for fuseScrollbarDirectives
*/ */
@ViewChildren(FuseScrollbarDirective) @ViewChildren(FuseScrollbarDirective)
set fuseScrollbarDirectives(fuseScrollbarDirectives: QueryList<FuseScrollbarDirective>) set fuseScrollbarDirectives(
{ fuseScrollbarDirectives: QueryList<FuseScrollbarDirective>
) {
// Store the directives // Store the directives
this._fuseScrollbarDirectives = fuseScrollbarDirectives; this._fuseScrollbarDirectives = fuseScrollbarDirectives;
// Return if there are no directives // Return if there are no directives
if ( fuseScrollbarDirectives.length === 0 ) if (fuseScrollbarDirectives.length === 0) {
{
return; return;
} }
// Unsubscribe the previous subscriptions // Unsubscribe the previous subscriptions
if ( this._fuseScrollbarDirectivesSubscription ) if (this._fuseScrollbarDirectivesSubscription) {
{
this._fuseScrollbarDirectivesSubscription.unsubscribe(); this._fuseScrollbarDirectivesSubscription.unsubscribe();
} }
// Update the scrollbars on collapsable items' collapse/expand // Update the scrollbars on collapsable items' collapse/expand
this._fuseScrollbarDirectivesSubscription = this._fuseScrollbarDirectivesSubscription = merge(
merge( this.onCollapsableItemCollapsed,
this.onCollapsableItemCollapsed, this.onCollapsableItemExpanded
this.onCollapsableItemExpanded, )
) .pipe(takeUntil(this._unsubscribeAll), delay(250))
.pipe( .subscribe(() => {
takeUntil(this._unsubscribeAll), // Loop through the scrollbars and update them
delay(250), fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
) fuseScrollbarDirective.update();
.subscribe(() =>
{
// Loop through the scrollbars and update them
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
{
fuseScrollbarDirective.update();
});
}); });
});
} }
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -178,8 +227,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* @private * @private
*/ */
@HostListener('mouseenter') @HostListener('mouseenter')
private _onMouseenter(): void private _onMouseenter(): void {
{
// Enable the animations // Enable the animations
this._enableAnimations(); this._enableAnimations();
@ -193,8 +241,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* @private * @private
*/ */
@HostListener('mouseleave') @HostListener('mouseleave')
private _onMouseleave(): void private _onMouseleave(): void {
{
// Enable the animations // Enable the animations
this._enableAnimations(); this._enableAnimations();
@ -211,25 +258,21 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* *
* @param changes * @param changes
*/ */
ngOnChanges(changes: SimpleChanges): void ngOnChanges(changes: SimpleChanges): void {
{
// Appearance // Appearance
if ( 'appearance' in changes ) if ('appearance' in changes) {
{
// Execute the observable // Execute the observable
this.appearanceChanged.next(changes.appearance.currentValue); this.appearanceChanged.next(changes.appearance.currentValue);
} }
// Inner // Inner
if ( 'inner' in changes ) if ('inner' in changes) {
{
// Coerce the value to a boolean // Coerce the value to a boolean
this.inner = coerceBooleanProperty(changes.inner.currentValue); this.inner = coerceBooleanProperty(changes.inner.currentValue);
} }
// Mode // Mode
if ( 'mode' in changes ) if ('mode' in changes) {
{
// Get the previous and current values // Get the previous and current values
const currentMode = changes.mode.currentValue; const currentMode = changes.mode.currentValue;
const previousMode = changes.mode.previousValue; const previousMode = changes.mode.previousValue;
@ -238,21 +281,18 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._disableAnimations(); this._disableAnimations();
// If the mode changes: 'over -> side' // If the mode changes: 'over -> side'
if ( previousMode === 'over' && currentMode === 'side' ) if (previousMode === 'over' && currentMode === 'side') {
{
// Hide the overlay // Hide the overlay
this._hideOverlay(); this._hideOverlay();
} }
// If the mode changes: 'side -> over' // If the mode changes: 'side -> over'
if ( previousMode === 'side' && currentMode === 'over' ) if (previousMode === 'side' && currentMode === 'over') {
{
// Close the aside // Close the aside
this.closeAside(); this.closeAside();
// If the navigation is opened // If the navigation is opened
if ( this.opened ) if (this.opened) {
{
// Show the overlay // Show the overlay
this._showOverlay(); this._showOverlay();
} }
@ -264,22 +304,19 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// Enable the animations after a delay // Enable the animations after a delay
// The delay must be bigger than the current transition-duration // The delay must be bigger than the current transition-duration
// to make sure nothing will be animated while the mode changing // to make sure nothing will be animated while the mode changing
setTimeout(() => setTimeout(() => {
{
this._enableAnimations(); this._enableAnimations();
}, 500); }, 500);
} }
// Navigation // Navigation
if ( 'navigation' in changes ) if ('navigation' in changes) {
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
} }
// Opened // Opened
if ( 'opened' in changes ) if ('opened' in changes) {
{
// Coerce the value to a boolean // Coerce the value to a boolean
this.opened = coerceBooleanProperty(changes.opened.currentValue); this.opened = coerceBooleanProperty(changes.opened.currentValue);
@ -288,28 +325,26 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
} }
// Position // Position
if ( 'position' in changes ) if ('position' in changes) {
{
// Execute the observable // Execute the observable
this.positionChanged.next(changes.position.currentValue); this.positionChanged.next(changes.position.currentValue);
} }
// Transparent overlay // Transparent overlay
if ( 'transparentOverlay' in changes ) if ('transparentOverlay' in changes) {
{
// Coerce the value to a boolean // Coerce the value to a boolean
this.transparentOverlay = coerceBooleanProperty(changes.transparentOverlay.currentValue); this.transparentOverlay = coerceBooleanProperty(
changes.transparentOverlay.currentValue
);
} }
} }
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Make sure the name input is not an empty string // Make sure the name input is not an empty string
if ( this.name === '' ) if (this.name === '') {
{
this.name = this._fuseUtilsService.randomId(); this.name = this._fuseUtilsService.randomId();
} }
@ -319,21 +354,18 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// Subscribe to the 'NavigationEnd' event // Subscribe to the 'NavigationEnd' event
this._router.events this._router.events
.pipe( .pipe(
filter(event => event instanceof NavigationEnd), filter((event) => event instanceof NavigationEnd),
takeUntil(this._unsubscribeAll), takeUntil(this._unsubscribeAll)
) )
.subscribe(() => .subscribe(() => {
{
// If the mode is 'over' and the navigation is opened... // If the mode is 'over' and the navigation is opened...
if ( this.mode === 'over' && this.opened ) if (this.mode === 'over' && this.opened) {
{
// Close the navigation // Close the navigation
this.close(); this.close();
} }
// If the mode is 'side' and the aside is active... // If the mode is 'side' and the aside is active...
if ( this.mode === 'side' && this.activeAsideItemId ) if (this.mode === 'side' && this.activeAsideItemId) {
{
// Close the aside // Close the aside
this.closeAside(); this.closeAside();
} }
@ -343,74 +375,85 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
/** /**
* After view init * After view init
*/ */
ngAfterViewInit(): void ngAfterViewInit(): void {
{
// Fix for Firefox. // Fix for Firefox.
// //
// Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent, // Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent,
// adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position. // 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 // This fixes the problem by reading the 'top' value from the html element and adding it as a
// 'marginTop' to the navigation itself. // 'marginTop' to the navigation itself.
this._mutationObserver = new MutationObserver((mutations) => this._mutationObserver = new MutationObserver((mutations) => {
{ mutations.forEach((mutation) => {
mutations.forEach((mutation) =>
{
const mutationTarget = mutation.target as HTMLElement; const mutationTarget = mutation.target as HTMLElement;
if ( mutation.attributeName === 'class' ) if (mutation.attributeName === 'class') {
{ if (
if ( mutationTarget.classList.contains('cdk-global-scrollblock') ) mutationTarget.classList.contains(
{ 'cdk-global-scrollblock'
)
) {
const top = parseInt(mutationTarget.style.top, 10); const top = parseInt(mutationTarget.style.top, 10);
this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`); this._renderer2.setStyle(
} this._elementRef.nativeElement,
else 'margin-top',
{ `${Math.abs(top)}px`
this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null); );
} else {
this._renderer2.setStyle(
this._elementRef.nativeElement,
'margin-top',
null
);
} }
} }
}); });
}); });
this._mutationObserver.observe(this._document.documentElement, { this._mutationObserver.observe(this._document.documentElement, {
attributes : true, attributes: true,
attributeFilter: ['class'], attributeFilter: ['class'],
}); });
setTimeout(() => setTimeout(() => {
{
// Return if 'navigation content' element does not exist // Return if 'navigation content' element does not exist
if ( !this._navigationContentEl ) if (!this._navigationContentEl) {
{
return; return;
} }
// If 'navigation content' element doesn't have // If 'navigation content' element doesn't have
// perfect scrollbar activated on it... // perfect scrollbar activated on it...
if ( !this._navigationContentEl.nativeElement.classList.contains('ps') ) if (
{ !this._navigationContentEl.nativeElement.classList.contains(
'ps'
)
) {
// Find the active item // Find the active item
const activeItem = this._navigationContentEl.nativeElement.querySelector('.fuse-vertical-navigation-item-active'); const activeItem =
this._navigationContentEl.nativeElement.querySelector(
'.fuse-vertical-navigation-item-active'
);
// If the active item exists, scroll it into view // If the active item exists, scroll it into view
if ( activeItem ) if (activeItem) {
{
activeItem.scrollIntoView(); activeItem.scrollIntoView();
} }
} }
// Otherwise // Otherwise
else else {
{
// Go through all the scrollbar directives // Go through all the scrollbar directives
this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => this._fuseScrollbarDirectives.forEach(
{ (fuseScrollbarDirective) => {
// Skip if not enabled // Skip if not enabled
if ( !fuseScrollbarDirective.isEnabled() ) if (!fuseScrollbarDirective.isEnabled()) {
{ return;
return; }
}
// Scroll to the active element // Scroll to the active element
fuseScrollbarDirective.scrollToElement('.fuse-vertical-navigation-item-active', -120, true); fuseScrollbarDirective.scrollToElement(
}); '.fuse-vertical-navigation-item-active',
-120,
true
);
}
);
} }
}); });
} }
@ -418,8 +461,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Disconnect the mutation observer // Disconnect the mutation observer
this._mutationObserver.disconnect(); this._mutationObserver.disconnect();
@ -442,8 +484,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
/** /**
* Refresh the component to apply the changes * Refresh the component to apply the changes
*/ */
refresh(): void refresh(): void {
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
@ -454,11 +495,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
/** /**
* Open the navigation * Open the navigation
*/ */
open(): void open(): void {
{
// Return if the navigation is already open // Return if the navigation is already open
if ( this.opened ) if (this.opened) {
{
return; return;
} }
@ -469,11 +508,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
/** /**
* Close the navigation * Close the navigation
*/ */
close(): void close(): void {
{
// Return if the navigation is already closed // Return if the navigation is already closed
if ( !this.opened ) if (!this.opened) {
{
return; return;
} }
@ -487,15 +524,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
/** /**
* Toggle the navigation * Toggle the navigation
*/ */
toggle(): void toggle(): void {
{
// Toggle // Toggle
if ( this.opened ) if (this.opened) {
{
this.close(); this.close();
} } else {
else
{
this.open(); this.open();
} }
} }
@ -505,11 +538,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* *
* @param item * @param item
*/ */
openAside(item: FuseNavigationItem): void openAside(item: FuseNavigationItem): void {
{
// Return if the item is disabled // Return if the item is disabled
if ( item.disabled || !item.id ) if (item.disabled || !item.id) {
{
return; return;
} }
@ -526,8 +557,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
/** /**
* Close the aside * Close the aside
*/ */
closeAside(): void closeAside(): void {
{
// Close // Close
this.activeAsideItemId = null; this.activeAsideItemId = null;
@ -543,15 +573,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* *
* @param item * @param item
*/ */
toggleAside(item: FuseNavigationItem): void toggleAside(item: FuseNavigationItem): void {
{
// Toggle // Toggle
if ( this.activeAsideItemId === item.id ) if (this.activeAsideItemId === item.id) {
{
this.closeAside(); this.closeAside();
} } else {
else
{
this.openAside(item); this.openAside(item);
} }
} }
@ -562,8 +588,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
@ -576,11 +601,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* *
* @private * @private
*/ */
private _enableAnimations(): void private _enableAnimations(): void {
{
// Return if the animations are already enabled // Return if the animations are already enabled
if ( this._animationsEnabled ) if (this._animationsEnabled) {
{
return; return;
} }
@ -593,11 +616,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* *
* @private * @private
*/ */
private _disableAnimations(): void private _disableAnimations(): void {
{
// Return if the animations are already disabled // Return if the animations are already disabled
if ( !this._animationsEnabled ) if (!this._animationsEnabled) {
{
return; return;
} }
@ -610,11 +631,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* *
* @private * @private
*/ */
private _showOverlay(): void private _showOverlay(): void {
{
// Return if there is already an overlay // Return if there is already an overlay
if ( this._asideOverlay ) if (this._asideOverlay) {
{
return; return;
} }
@ -625,21 +644,30 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._overlay.classList.add('fuse-vertical-navigation-overlay'); this._overlay.classList.add('fuse-vertical-navigation-overlay');
// Add a class depending on the transparentOverlay option // Add a class depending on the transparentOverlay option
if ( this.transparentOverlay ) if (this.transparentOverlay) {
{ this._overlay.classList.add(
this._overlay.classList.add('fuse-vertical-navigation-overlay-transparent'); 'fuse-vertical-navigation-overlay-transparent'
);
} }
// Append the overlay to the parent of the navigation // Append the overlay to the parent of the navigation
this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay); this._renderer2.appendChild(
this._elementRef.nativeElement.parentElement,
this._overlay
);
// Enable block scroll strategy // Enable block scroll strategy
this._scrollStrategy.enable(); this._scrollStrategy.enable();
// Create the enter animation and attach it to the player // Create the enter animation and attach it to the player
this._player = this._animationBuilder.build([ this._player = this._animationBuilder
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})), .build([
]).create(this._overlay); animate(
'300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
style({ opacity: 1 })
),
])
.create(this._overlay);
// Play the animation // Play the animation
this._player.play(); this._player.play();
@ -653,29 +681,33 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* *
* @private * @private
*/ */
private _hideOverlay(): void private _hideOverlay(): void {
{ if (!this._overlay) {
if ( !this._overlay )
{
return; return;
} }
// Create the leave animation and attach it to the player // Create the leave animation and attach it to the player
this._player = this._animationBuilder.build([ this._player = this._animationBuilder
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})), .build([
]).create(this._overlay); animate(
'300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
style({ opacity: 0 })
),
])
.create(this._overlay);
// Play the animation // Play the animation
this._player.play(); this._player.play();
// Once the animation is done... // Once the animation is done...
this._player.onDone(() => this._player.onDone(() => {
{
// If the overlay still exists... // If the overlay still exists...
if ( this._overlay ) if (this._overlay) {
{
// Remove the event listener // Remove the event listener
this._overlay.removeEventListener('click', this._handleOverlayClick); this._overlay.removeEventListener(
'click',
this._handleOverlayClick
);
// Remove the overlay // Remove the overlay
this._overlay.parentNode.removeChild(this._overlay); this._overlay.parentNode.removeChild(this._overlay);
@ -692,11 +724,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* *
* @private * @private
*/ */
private _showAsideOverlay(): void private _showAsideOverlay(): void {
{
// Return if there is already an overlay // Return if there is already an overlay
if ( this._asideOverlay ) if (this._asideOverlay) {
{
return; return;
} }
@ -704,23 +734,34 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._asideOverlay = this._renderer2.createElement('div'); this._asideOverlay = this._renderer2.createElement('div');
// Add a class to the aside overlay element // Add a class to the aside overlay element
this._asideOverlay.classList.add('fuse-vertical-navigation-aside-overlay'); this._asideOverlay.classList.add(
'fuse-vertical-navigation-aside-overlay'
);
// Append the aside overlay to the parent of the navigation // Append the aside overlay to the parent of the navigation
this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._asideOverlay); this._renderer2.appendChild(
this._elementRef.nativeElement.parentElement,
this._asideOverlay
);
// Create the enter animation and attach it to the player // Create the enter animation and attach it to the player
this._player = this._player = this._animationBuilder
this._animationBuilder .build([
.build([ animate(
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})), '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
]).create(this._asideOverlay); style({ opacity: 1 })
),
])
.create(this._asideOverlay);
// Play the animation // Play the animation
this._player.play(); this._player.play();
// Add an event listener to the aside overlay // Add an event listener to the aside overlay
this._asideOverlay.addEventListener('click', this._handleAsideOverlayClick); this._asideOverlay.addEventListener(
'click',
this._handleAsideOverlayClick
);
} }
/** /**
@ -728,31 +769,33 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* *
* @private * @private
*/ */
private _hideAsideOverlay(): void private _hideAsideOverlay(): void {
{ if (!this._asideOverlay) {
if ( !this._asideOverlay )
{
return; return;
} }
// Create the leave animation and attach it to the player // Create the leave animation and attach it to the player
this._player = this._player = this._animationBuilder
this._animationBuilder .build([
.build([ animate(
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})), '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
]).create(this._asideOverlay); style({ opacity: 0 })
),
])
.create(this._asideOverlay);
// Play the animation // Play the animation
this._player.play(); this._player.play();
// Once the animation is done... // Once the animation is done...
this._player.onDone(() => this._player.onDone(() => {
{
// If the aside overlay still exists... // If the aside overlay still exists...
if ( this._asideOverlay ) if (this._asideOverlay) {
{
// Remove the event listener // Remove the event listener
this._asideOverlay.removeEventListener('click', this._handleAsideOverlayClick); this._asideOverlay.removeEventListener(
'click',
this._handleAsideOverlayClick
);
// Remove the aside overlay // Remove the aside overlay
this._asideOverlay.parentNode.removeChild(this._asideOverlay); this._asideOverlay.parentNode.removeChild(this._asideOverlay);
@ -767,8 +810,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
* @param open * @param open
* @private * @private
*/ */
private _toggleOpened(open: boolean): void private _toggleOpened(open: boolean): void {
{
// Set the opened // Set the opened
this.opened = open; this.opened = open;
@ -777,14 +819,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// If the navigation opened, and the mode // If the navigation opened, and the mode
// is 'over', show the overlay // is 'over', show the overlay
if ( this.mode === 'over' ) if (this.mode === 'over') {
{ if (this.opened) {
if ( this.opened )
{
this._showOverlay(); this._showOverlay();
} } else {
else
{
this._hideOverlay(); this._hideOverlay();
} }
} }

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

@ -1,14 +1,19 @@
import { Directive, ElementRef, inject, OnDestroy, OnInit } from '@angular/core'; import {
Directive,
ElementRef,
inject,
OnDestroy,
OnInit,
} from '@angular/core';
import { NavigationEnd, Router } from '@angular/router'; import { NavigationEnd, Router } from '@angular/router';
import { filter, Subject, takeUntil } from 'rxjs'; import { filter, Subject, takeUntil } from 'rxjs';
@Directive({ @Directive({
selector : '[fuseScrollReset]', selector: '[fuseScrollReset]',
exportAs : 'fuseScrollReset', exportAs: 'fuseScrollReset',
standalone: true, standalone: true,
}) })
export class FuseScrollResetDirective implements OnInit, OnDestroy export class FuseScrollResetDirective implements OnInit, OnDestroy {
{
private _elementRef = inject(ElementRef); private _elementRef = inject(ElementRef);
private _router = inject(Router); private _router = inject(Router);
@ -21,24 +26,23 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to NavigationEnd event // Subscribe to NavigationEnd event
this._router.events.pipe( this._router.events
filter(event => event instanceof NavigationEnd), .pipe(
takeUntil(this._unsubscribeAll), filter((event) => event instanceof NavigationEnd),
).subscribe(() => takeUntil(this._unsubscribeAll)
{ )
// Reset the element's scroll position to the top .subscribe(() => {
this._elementRef.nativeElement.scrollTop = 0; // Reset the element's scroll position to the top
}); this._elementRef.nativeElement.scrollTop = 0;
});
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();

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

@ -1,21 +1,32 @@
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform'; import { Platform } from '@angular/cdk/platform';
import { Directive, ElementRef, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; import {
import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types'; Directive,
ElementRef,
Input,
OnChanges,
OnDestroy,
OnInit,
SimpleChanges,
inject,
} from '@angular/core';
import {
ScrollbarGeometry,
ScrollbarPosition,
} from '@fuse/directives/scrollbar/scrollbar.types';
import { merge } from 'lodash-es'; import { merge } from 'lodash-es';
import PerfectScrollbar from 'perfect-scrollbar'; import PerfectScrollbar from 'perfect-scrollbar';
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs'; import { Subject, debounceTime, fromEvent, takeUntil } from 'rxjs';
/** /**
* Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar * Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
*/ */
@Directive({ @Directive({
selector : '[fuseScrollbar]', selector: '[fuseScrollbar]',
exportAs : 'fuseScrollbar', exportAs: 'fuseScrollbar',
standalone: true, standalone: true,
}) })
export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
{
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
static ngAcceptInputType_fuseScrollbar: BooleanInput; static ngAcceptInputType_fuseScrollbar: BooleanInput;
/* eslint-enable @typescript-eslint/naming-convention */ /* eslint-enable @typescript-eslint/naming-convention */
@ -38,16 +49,14 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
/** /**
* Getter for _elementRef * Getter for _elementRef
*/ */
get elementRef(): ElementRef get elementRef(): ElementRef {
{
return this._elementRef; return this._elementRef;
} }
/** /**
* Getter for _ps * Getter for _ps
*/ */
get ps(): PerfectScrollbar | null get ps(): PerfectScrollbar | null {
{
return this._ps; return this._ps;
} }
@ -60,46 +69,44 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* *
* @param changes * @param changes
*/ */
ngOnChanges(changes: SimpleChanges): void ngOnChanges(changes: SimpleChanges): void {
{
// Enabled // Enabled
if ( 'fuseScrollbar' in changes ) if ('fuseScrollbar' in changes) {
{
// Interpret empty string as 'true' // Interpret empty string as 'true'
this.fuseScrollbar = coerceBooleanProperty(changes.fuseScrollbar.currentValue); this.fuseScrollbar = coerceBooleanProperty(
changes.fuseScrollbar.currentValue
);
// If enabled, init the directive // If enabled, init the directive
if ( this.fuseScrollbar ) if (this.fuseScrollbar) {
{
this._init(); this._init();
} }
// Otherwise destroy it // Otherwise destroy it
else else {
{
this._destroy(); this._destroy();
} }
} }
// Scrollbar options // Scrollbar options
if ( 'fuseScrollbarOptions' in changes ) if ('fuseScrollbarOptions' in changes) {
{
// Merge the options // Merge the options
this._options = merge({}, this._options, changes.fuseScrollbarOptions.currentValue); this._options = merge(
{},
this._options,
changes.fuseScrollbarOptions.currentValue
);
// Return if not initialized // Return if not initialized
if ( !this._ps ) if (!this._ps) {
{
return; return;
} }
// Destroy and re-init the PerfectScrollbar to update its options // Destroy and re-init the PerfectScrollbar to update its options
setTimeout(() => setTimeout(() => {
{
this._destroy(); this._destroy();
}); });
setTimeout(() => setTimeout(() => {
{
this._init(); this._init();
}); });
} }
@ -108,16 +115,11 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to window resize event // Subscribe to window resize event
fromEvent(window, 'resize') fromEvent(window, 'resize')
.pipe( .pipe(takeUntil(this._unsubscribeAll), debounceTime(150))
takeUntil(this._unsubscribeAll), .subscribe(() => {
debounceTime(150),
)
.subscribe(() =>
{
// Update the PerfectScrollbar // Update the PerfectScrollbar
this.update(); this.update();
}); });
@ -126,8 +128,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
this._destroy(); this._destroy();
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
@ -142,19 +143,16 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
/** /**
* Is enabled * Is enabled
*/ */
isEnabled(): boolean isEnabled(): boolean {
{
return this.fuseScrollbar; return this.fuseScrollbar;
} }
/** /**
* Update the scrollbar * Update the scrollbar
*/ */
update(): void update(): void {
{
// Return if not initialized // Return if not initialized
if ( !this._ps ) if (!this._ps) {
{
return; return;
} }
@ -165,8 +163,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
/** /**
* Destroy the scrollbar * Destroy the scrollbar
*/ */
destroy(): void destroy(): void {
{
this.ngOnDestroy(); this.ngOnDestroy();
} }
@ -175,13 +172,13 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* *
* @param prefix * @param prefix
*/ */
geometry(prefix: string = 'scroll'): ScrollbarGeometry geometry(prefix: string = 'scroll'): ScrollbarGeometry {
{
return new ScrollbarGeometry( return new ScrollbarGeometry(
this._elementRef.nativeElement[prefix + 'Left'], this._elementRef.nativeElement[prefix + 'Left'],
this._elementRef.nativeElement[prefix + 'Top'], this._elementRef.nativeElement[prefix + 'Top'],
this._elementRef.nativeElement[prefix + 'Width'], this._elementRef.nativeElement[prefix + 'Width'],
this._elementRef.nativeElement[prefix + 'Height']); this._elementRef.nativeElement[prefix + 'Height']
);
} }
/** /**
@ -189,22 +186,18 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* *
* @param absolute * @param absolute
*/ */
position(absolute: boolean = false): ScrollbarPosition position(absolute: boolean = false): ScrollbarPosition {
{
let scrollbarPosition; let scrollbarPosition;
if ( !absolute && this._ps ) if (!absolute && this._ps) {
{
scrollbarPosition = new ScrollbarPosition( scrollbarPosition = new ScrollbarPosition(
this._ps.reach.x || 0, this._ps.reach.x || 0,
this._ps.reach.y || 0, this._ps.reach.y || 0
); );
} } else {
else
{
scrollbarPosition = new ScrollbarPosition( scrollbarPosition = new ScrollbarPosition(
this._elementRef.nativeElement.scrollLeft, this._elementRef.nativeElement.scrollLeft,
this._elementRef.nativeElement.scrollTop, this._elementRef.nativeElement.scrollTop
); );
} }
@ -218,21 +211,15 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* @param y * @param y
* @param speed * @param speed
*/ */
scrollTo(x: number, y?: number, speed?: number): void scrollTo(x: number, y?: number, speed?: number): void {
{ if (y == null && speed == null) {
if ( y == null && speed == null )
{
this.animateScrolling('scrollTop', x, speed); this.animateScrolling('scrollTop', x, speed);
} } else {
else if (x != null) {
{
if ( x != null )
{
this.animateScrolling('scrollLeft', x, speed); this.animateScrolling('scrollLeft', x, speed);
} }
if ( y != null ) if (y != null) {
{
this.animateScrolling('scrollTop', y, speed); this.animateScrolling('scrollTop', y, speed);
} }
} }
@ -244,8 +231,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* @param x * @param x
* @param speed * @param speed
*/ */
scrollToX(x: number, speed?: number): void scrollToX(x: number, speed?: number): void {
{
this.animateScrolling('scrollLeft', x, speed); this.animateScrolling('scrollLeft', x, speed);
} }
@ -255,8 +241,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* @param y * @param y
* @param speed * @param speed
*/ */
scrollToY(y: number, speed?: number): void scrollToY(y: number, speed?: number): void {
{
this.animateScrolling('scrollTop', y, speed); this.animateScrolling('scrollTop', y, speed);
} }
@ -266,8 +251,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* @param offset * @param offset
* @param speed * @param speed
*/ */
scrollToTop(offset: number = 0, speed?: number): void scrollToTop(offset: number = 0, speed?: number): void {
{
this.animateScrolling('scrollTop', offset, speed); this.animateScrolling('scrollTop', offset, speed);
} }
@ -277,9 +261,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* @param offset * @param offset
* @param speed * @param speed
*/ */
scrollToBottom(offset: number = 0, speed?: number): void scrollToBottom(offset: number = 0, speed?: number): void {
{ const top =
const top = this._elementRef.nativeElement.scrollHeight - this._elementRef.nativeElement.clientHeight; this._elementRef.nativeElement.scrollHeight -
this._elementRef.nativeElement.clientHeight;
this.animateScrolling('scrollTop', top - offset, speed); this.animateScrolling('scrollTop', top - offset, speed);
} }
@ -289,8 +274,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* @param offset * @param offset
* @param speed * @param speed
*/ */
scrollToLeft(offset: number = 0, speed?: number): void scrollToLeft(offset: number = 0, speed?: number): void {
{
this.animateScrolling('scrollLeft', offset, speed); this.animateScrolling('scrollLeft', offset, speed);
} }
@ -300,9 +284,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* @param offset * @param offset
* @param speed * @param speed
*/ */
scrollToRight(offset: number = 0, speed?: number): void scrollToRight(offset: number = 0, speed?: number): void {
{ const left =
const left = this._elementRef.nativeElement.scrollWidth - this._elementRef.nativeElement.clientWidth; this._elementRef.nativeElement.scrollWidth -
this._elementRef.nativeElement.clientWidth;
this.animateScrolling('scrollLeft', left - offset, speed); this.animateScrolling('scrollLeft', left - offset, speed);
} }
@ -314,22 +299,27 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* @param ignoreVisible If true, scrollToElement won't happen if element is already inside the current viewport * @param ignoreVisible If true, scrollToElement won't happen if element is already inside the current viewport
* @param speed * @param speed
*/ */
scrollToElement(qs: string, offset: number = 0, ignoreVisible: boolean = false, speed?: number): void scrollToElement(
{ qs: string,
offset: number = 0,
ignoreVisible: boolean = false,
speed?: number
): void {
const element = this._elementRef.nativeElement.querySelector(qs); const element = this._elementRef.nativeElement.querySelector(qs);
if ( !element ) if (!element) {
{
return; return;
} }
const elementPos = element.getBoundingClientRect(); const elementPos = element.getBoundingClientRect();
const scrollerPos = this._elementRef.nativeElement.getBoundingClientRect(); const scrollerPos =
this._elementRef.nativeElement.getBoundingClientRect();
if ( this._elementRef.nativeElement.classList.contains('ps--active-x') ) if (this._elementRef.nativeElement.classList.contains('ps--active-x')) {
{ if (
if ( ignoreVisible && elementPos.right <= (scrollerPos.right - Math.abs(offset)) ) ignoreVisible &&
{ elementPos.right <= scrollerPos.right - Math.abs(offset)
) {
return; return;
} }
@ -339,10 +329,11 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
this.animateScrolling('scrollLeft', position + offset, speed); this.animateScrolling('scrollLeft', position + offset, speed);
} }
if ( this._elementRef.nativeElement.classList.contains('ps--active-y') ) if (this._elementRef.nativeElement.classList.contains('ps--active-y')) {
{ if (
if ( ignoreVisible && elementPos.bottom <= (scrollerPos.bottom - Math.abs(offset)) ) ignoreVisible &&
{ elementPos.bottom <= scrollerPos.bottom - Math.abs(offset)
) {
return; return;
} }
@ -360,20 +351,15 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* @param value * @param value
* @param speed * @param speed
*/ */
animateScrolling(target: string, value: number, speed?: number): void animateScrolling(target: string, value: number, speed?: number): void {
{ if (this._animation) {
if ( this._animation )
{
window.cancelAnimationFrame(this._animation); window.cancelAnimationFrame(this._animation);
this._animation = null; this._animation = null;
} }
if ( !speed || typeof window === 'undefined' ) if (!speed || typeof window === 'undefined') {
{
this._elementRef.nativeElement[target] = value; this._elementRef.nativeElement[target] = value;
} } else if (value !== this._elementRef.nativeElement[target]) {
else if ( value !== this._elementRef.nativeElement[target] )
{
let newValue = 0; let newValue = 0;
let scrollCount = 0; let scrollCount = 0;
@ -382,20 +368,18 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
const cosParameter = (oldValue - value) / 2; const cosParameter = (oldValue - value) / 2;
const step = (newTimestamp: number): void => const step = (newTimestamp: number): void => {
{ scrollCount +=
scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp)); Math.PI / (speed / (newTimestamp - oldTimestamp));
newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount)); newValue = Math.round(
value + cosParameter + cosParameter * Math.cos(scrollCount)
);
// Only continue animation if scroll position has not changed // Only continue animation if scroll position has not changed
if ( this._elementRef.nativeElement[target] === oldValue ) if (this._elementRef.nativeElement[target] === oldValue) {
{ if (scrollCount >= Math.PI) {
if ( scrollCount >= Math.PI )
{
this.animateScrolling(target, value, 0); this.animateScrolling(target, value, 0);
} } else {
else
{
this._elementRef.nativeElement[target] = newValue; this._elementRef.nativeElement[target] = newValue;
// On a zoomed out page the resulting offset may differ // On a zoomed out page the resulting offset may differ
@ -420,23 +404,26 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* *
* @private * @private
*/ */
private _init(): void private _init(): void {
{
// Return if already initialized // Return if already initialized
if ( this._ps ) if (this._ps) {
{
return; return;
} }
// Return if on mobile or not on browser // Return if on mobile or not on browser
if ( this._platform.ANDROID || this._platform.IOS || !this._platform.isBrowser ) if (
{ this._platform.ANDROID ||
this._platform.IOS ||
!this._platform.isBrowser
) {
this.fuseScrollbar = false; this.fuseScrollbar = false;
return; return;
} }
// Initialize the PerfectScrollbar // Initialize the PerfectScrollbar
this._ps = new PerfectScrollbar(this._elementRef.nativeElement, {...this._options}); this._ps = new PerfectScrollbar(this._elementRef.nativeElement, {
...this._options,
});
} }
/** /**
@ -444,11 +431,9 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
* *
* @private * @private
*/ */
private _destroy(): void private _destroy(): void {
{
// Return if not initialized // Return if not initialized
if ( !this._ps ) if (!this._ps) {
{
return; return;
} }

12
src/@fuse/directives/scrollbar/scrollbar.types.ts
View File

@ -1,13 +1,11 @@
export class ScrollbarGeometry export class ScrollbarGeometry {
{
public x: number; public x: number;
public y: number; public y: number;
public w: number; public w: number;
public h: number; public h: number;
constructor(x: number, y: number, w: number, h: number) constructor(x: number, y: number, w: number, h: number) {
{
this.x = x; this.x = x;
this.y = y; this.y = y;
this.w = w; this.w = w;
@ -15,13 +13,11 @@ export class ScrollbarGeometry
} }
} }
export class ScrollbarPosition export class ScrollbarPosition {
{
public x: number | 'start' | 'end'; public x: number | 'start' | 'end';
public y: number | 'start' | 'end'; public y: number | 'start' | 'end';
constructor(x: number | 'start' | 'end', y: number | 'start' | 'end') constructor(x: number | 'start' | 'end', y: number | 'start' | 'end') {
{
this.x = x; this.x = x;
this.y = y; this.y = y;
} }

75
src/@fuse/fuse.provider.ts
View File

@ -1,13 +1,26 @@
import { provideHttpClient, withInterceptors } from '@angular/common/http'; import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { APP_INITIALIZER, ENVIRONMENT_INITIALIZER, EnvironmentProviders, importProvidersFrom, inject, Provider } from '@angular/core'; import {
APP_INITIALIZER,
ENVIRONMENT_INITIALIZER,
EnvironmentProviders,
Provider,
importProvidersFrom,
inject,
} from '@angular/core';
import { MATERIAL_SANITY_CHECKS } from '@angular/material/core'; import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
import { MatDialogModule } from '@angular/material/dialog'; import { MatDialogModule } from '@angular/material/dialog';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field'; import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { FUSE_MOCK_API_DEFAULT_DELAY, mockApiInterceptor } from '@fuse/lib/mock-api'; import {
FUSE_MOCK_API_DEFAULT_DELAY,
mockApiInterceptor,
} from '@fuse/lib/mock-api';
import { FuseConfig } from '@fuse/services/config'; import { FuseConfig } from '@fuse/services/config';
import { FUSE_CONFIG } from '@fuse/services/config/config.constants'; import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
import { FuseConfirmationService } from '@fuse/services/confirmation'; import { FuseConfirmationService } from '@fuse/services/confirmation';
import { fuseLoadingInterceptor, FuseLoadingService } from '@fuse/services/loading'; import {
FuseLoadingService,
fuseLoadingInterceptor,
} from '@fuse/services/loading';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FusePlatformService } from '@fuse/services/platform'; import { FusePlatformService } from '@fuse/services/platform';
import { FuseSplashScreenService } from '@fuse/services/splash-screen'; import { FuseSplashScreenService } from '@fuse/services/splash-screen';
@ -17,89 +30,89 @@ export type FuseProviderConfig = {
mockApi?: { mockApi?: {
delay?: number; delay?: number;
services?: any[]; services?: any[];
}, };
fuse?: FuseConfig fuse?: FuseConfig;
} };
/** /**
* Fuse provider * Fuse provider
*/ */
export const provideFuse = (config: FuseProviderConfig): Array<Provider | EnvironmentProviders> => export const provideFuse = (
{ config: FuseProviderConfig
): Array<Provider | EnvironmentProviders> => {
// Base providers // Base providers
const providers: Array<Provider | EnvironmentProviders> = [ const providers: Array<Provider | EnvironmentProviders> = [
{ {
// Disable 'theme' sanity check // Disable 'theme' sanity check
provide : MATERIAL_SANITY_CHECKS, provide: MATERIAL_SANITY_CHECKS,
useValue: { useValue: {
doctype: true, doctype: true,
theme : false, theme: false,
version: true, version: true,
}, },
}, },
{ {
// Use the 'fill' appearance on Angular Material form fields by default // Use the 'fill' appearance on Angular Material form fields by default
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS, provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: { useValue: {
appearance: 'fill', appearance: 'fill',
}, },
}, },
{ {
provide : FUSE_MOCK_API_DEFAULT_DELAY, provide: FUSE_MOCK_API_DEFAULT_DELAY,
useValue: config?.mockApi?.delay ?? 0, useValue: config?.mockApi?.delay ?? 0,
}, },
{ {
provide : FUSE_CONFIG, provide: FUSE_CONFIG,
useValue: config?.fuse ?? {}, useValue: config?.fuse ?? {},
}, },
importProvidersFrom(MatDialogModule), importProvidersFrom(MatDialogModule),
{ {
provide : ENVIRONMENT_INITIALIZER, provide: ENVIRONMENT_INITIALIZER,
useValue: () => inject(FuseConfirmationService), useValue: () => inject(FuseConfirmationService),
multi : true, multi: true,
}, },
provideHttpClient(withInterceptors([fuseLoadingInterceptor])), provideHttpClient(withInterceptors([fuseLoadingInterceptor])),
{ {
provide : ENVIRONMENT_INITIALIZER, provide: ENVIRONMENT_INITIALIZER,
useValue: () => inject(FuseLoadingService), useValue: () => inject(FuseLoadingService),
multi : true, multi: true,
}, },
{ {
provide : ENVIRONMENT_INITIALIZER, provide: ENVIRONMENT_INITIALIZER,
useValue: () => inject(FuseMediaWatcherService), useValue: () => inject(FuseMediaWatcherService),
multi : true, multi: true,
}, },
{ {
provide : ENVIRONMENT_INITIALIZER, provide: ENVIRONMENT_INITIALIZER,
useValue: () => inject(FusePlatformService), useValue: () => inject(FusePlatformService),
multi : true, multi: true,
}, },
{ {
provide : ENVIRONMENT_INITIALIZER, provide: ENVIRONMENT_INITIALIZER,
useValue: () => inject(FuseSplashScreenService), useValue: () => inject(FuseSplashScreenService),
multi : true, multi: true,
}, },
{ {
provide : ENVIRONMENT_INITIALIZER, provide: ENVIRONMENT_INITIALIZER,
useValue: () => inject(FuseUtilsService), useValue: () => inject(FuseUtilsService),
multi : true, multi: true,
}, },
]; ];
// Mock Api services // Mock Api services
if ( config?.mockApi?.services ) if (config?.mockApi?.services) {
{
providers.push( providers.push(
provideHttpClient(withInterceptors([mockApiInterceptor])), provideHttpClient(withInterceptors([mockApiInterceptor])),
{ {
provide : APP_INITIALIZER, provide: APP_INITIALIZER,
deps : [...config.mockApi.services], deps: [...config.mockApi.services],
useFactory: () => (): any => null, useFactory: () => (): any => null,
multi : true, multi: true,
}, }
); );
} }

4
src/@fuse/lib/mock-api/mock-api.constants.ts
View File

@ -1,3 +1,5 @@
import { InjectionToken } from '@angular/core'; import { InjectionToken } from '@angular/core';
export const FUSE_MOCK_API_DEFAULT_DELAY = new InjectionToken<number>('FUSE_MOCK_API_DEFAULT_DELAY'); export const FUSE_MOCK_API_DEFAULT_DELAY = new InjectionToken<number>(
'FUSE_MOCK_API_DEFAULT_DELAY'
);

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

@ -1,23 +1,30 @@
import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest, HttpResponse } from '@angular/common/http'; import {
HttpErrorResponse,
HttpEvent,
HttpHandlerFn,
HttpRequest,
HttpResponse,
} from '@angular/common/http';
import { inject } from '@angular/core'; import { inject } from '@angular/core';
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants'; 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 { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
import { delay, Observable, of, switchMap, throwError } from 'rxjs'; import { Observable, delay, of, switchMap, throwError } from 'rxjs';
export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => export const mockApiInterceptor = (
{ request: HttpRequest<unknown>,
next: HttpHandlerFn
): Observable<HttpEvent<unknown>> => {
const defaultDelay = inject(FUSE_MOCK_API_DEFAULT_DELAY); const defaultDelay = inject(FUSE_MOCK_API_DEFAULT_DELAY);
const fuseMockApiService = inject(FuseMockApiService); const fuseMockApiService = inject(FuseMockApiService);
// Try to get the request handler // Try to get the request handler
const { const { handler, urlParams } = fuseMockApiService.findHandler(
handler, request.method.toUpperCase(),
urlParams, request.url
} = fuseMockApiService.findHandler(request.method.toUpperCase(), request.url); );
// Pass through if the request handler does not exist // Pass through if the request handler does not exist
if ( !handler ) if (!handler) {
{
return next(request); return next(request);
} }
@ -30,15 +37,13 @@ export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHand
// Subscribe to the response function observable // Subscribe to the response function observable
return handler.response.pipe( return handler.response.pipe(
delay(handler.delay ?? defaultDelay ?? 0), delay(handler.delay ?? defaultDelay ?? 0),
switchMap((response) => switchMap((response) => {
{
// If there is no response data, // If there is no response data,
// throw an error response // throw an error response
if ( !response ) if (!response) {
{
response = new HttpErrorResponse({ response = new HttpErrorResponse({
error : 'NOT FOUND', error: 'NOT FOUND',
status : 404, status: 404,
statusText: 'NOT FOUND', statusText: 'NOT FOUND',
}); });
@ -48,16 +53,15 @@ export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHand
// Parse the response data // Parse the response data
const data = { const data = {
status: response[0], status: response[0],
body : response[1], body: response[1],
}; };
// If the status code is in between 200 and 300, // If the status code is in between 200 and 300,
// return a success response // return a success response
if ( data.status >= 200 && data.status < 300 ) if (data.status >= 200 && data.status < 300) {
{
response = new HttpResponse({ response = new HttpResponse({
body : data.body, body: data.body,
status : data.status, status: data.status,
statusText: 'OK', statusText: 'OK',
}); });
@ -67,11 +71,12 @@ export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHand
// For other status codes, // For other status codes,
// throw an error response // throw an error response
response = new HttpErrorResponse({ response = new HttpErrorResponse({
error : data.body.error, error: data.body.error,
status : data.status, status: data.status,
statusText: 'ERROR', statusText: 'ERROR',
}); });
return throwError(response); return throwError(response);
})); })
);
}; };

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

@ -2,8 +2,7 @@ import { HttpRequest } from '@angular/common/http';
import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types'; import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
import { Observable, of, take, throwError } from 'rxjs'; import { Observable, of, take, throwError } from 'rxjs';
export class FuseMockApiHandler export class FuseMockApiHandler {
{
request!: HttpRequest<any>; request!: HttpRequest<any>;
urlParams!: { [key: string]: string }; urlParams!: { [key: string]: string };
@ -17,10 +16,8 @@ export class FuseMockApiHandler
*/ */
constructor( constructor(
public url: string, public url: string,
public delay?: number, public delay?: number
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -29,23 +26,19 @@ export class FuseMockApiHandler
/** /**
* Getter for response callback * Getter for response callback
*/ */
get response(): Observable<any> get response(): Observable<any> {
{
// If the execution limit has been reached, throw an error // If the execution limit has been reached, throw an error
if ( this._replyCount > 0 && this._replyCount <= this._replied ) if (this._replyCount > 0 && this._replyCount <= this._replied) {
{
return throwError('Execution limit has been reached!'); return throwError('Execution limit has been reached!');
} }
// If the response callback has not been set, throw an error // If the response callback has not been set, throw an error
if ( !this._reply ) if (!this._reply) {
{
return throwError('Response callback function does not exist!'); return throwError('Response callback function does not exist!');
} }
// If the request has not been set, throw an error // If the request has not been set, throw an error
if ( !this.request ) if (!this.request) {
{
return throwError('Request does not exist!'); return throwError('Request does not exist!');
} }
@ -54,13 +47,12 @@ export class FuseMockApiHandler
// Execute the reply callback // Execute the reply callback
const replyResult = this._reply({ const replyResult = this._reply({
request : this.request, request: this.request,
urlParams: this.urlParams, urlParams: this.urlParams,
}); });
// If the result of the reply callback is an observable... // If the result of the reply callback is an observable...
if ( replyResult instanceof Observable ) if (replyResult instanceof Observable) {
{
// Return the result as it is // Return the result as it is
return replyResult.pipe(take(1)); return replyResult.pipe(take(1));
} }
@ -78,8 +70,7 @@ export class FuseMockApiHandler
* *
* @param callback * @param callback
*/ */
reply(callback: FuseMockApiReplyCallback): void reply(callback: FuseMockApiReplyCallback): void {
{
// Store the reply // Store the reply
this._reply = callback; this._reply = callback;
} }
@ -89,11 +80,8 @@ export class FuseMockApiHandler
* *
* @param count * @param count
*/ */
replyCount(count: number): void replyCount(count: number): void {
{
// Store the reply count // Store the reply count
this._replyCount = count; this._replyCount = count;
} }
} }

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

@ -3,18 +3,17 @@ import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler'
import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types'; import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
import { compact, fromPairs } from 'lodash-es'; import { compact, fromPairs } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FuseMockApiService export class FuseMockApiService {
{
private _handlers: { [key: string]: Map<string, FuseMockApiHandler> } = { private _handlers: { [key: string]: Map<string, FuseMockApiHandler> } = {
'get' : new Map<string, FuseMockApiHandler>(), get: new Map<string, FuseMockApiHandler>(),
'post' : new Map<string, FuseMockApiHandler>(), post: new Map<string, FuseMockApiHandler>(),
'patch' : new Map<string, FuseMockApiHandler>(), patch: new Map<string, FuseMockApiHandler>(),
'delete' : new Map<string, FuseMockApiHandler>(), delete: new Map<string, FuseMockApiHandler>(),
'put' : new Map<string, FuseMockApiHandler>(), put: new Map<string, FuseMockApiHandler>(),
'head' : new Map<string, FuseMockApiHandler>(), head: new Map<string, FuseMockApiHandler>(),
'jsonp' : new Map<string, FuseMockApiHandler>(), jsonp: new Map<string, FuseMockApiHandler>(),
'options': new Map<string, FuseMockApiHandler>(), options: new Map<string, FuseMockApiHandler>(),
}; };
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -28,11 +27,19 @@ export class FuseMockApiService
* @param method * @param method
* @param url * @param url
*/ */
findHandler(method: string, url: string): { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } findHandler(
{ method: string,
url: string
): {
handler: FuseMockApiHandler | undefined;
urlParams: { [key: string]: string };
} {
// Prepare the return object // Prepare the return object
const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = { const matchingHandler: {
handler : undefined, handler: FuseMockApiHandler | undefined;
urlParams: { [key: string]: string };
} = {
handler: undefined,
urlParams: {}, urlParams: {},
}; };
@ -43,11 +50,9 @@ export class FuseMockApiService
const handlers = this._handlers[method.toLowerCase()]; const handlers = this._handlers[method.toLowerCase()];
// Iterate through the handlers // Iterate through the handlers
handlers.forEach((handler, handlerUrl) => handlers.forEach((handler, handlerUrl) => {
{
// Skip if there is already a matching handler // Skip if there is already a matching handler
if ( matchingHandler.handler ) if (matchingHandler.handler) {
{
return; return;
} }
@ -55,24 +60,32 @@ export class FuseMockApiService
const handlerUrlParts = handlerUrl.split('/'); const handlerUrlParts = handlerUrl.split('/');
// Skip if the lengths of the urls we are comparing are not the same // Skip if the lengths of the urls we are comparing are not the same
if ( urlParts.length !== handlerUrlParts.length ) if (urlParts.length !== handlerUrlParts.length) {
{
return; return;
} }
// Compare // Compare
const matches = handlerUrlParts.every((handlerUrlPart, index) => handlerUrlPart === urlParts[index] || handlerUrlPart.startsWith(':')); const matches = handlerUrlParts.every(
(handlerUrlPart, index) =>
handlerUrlPart === urlParts[index] ||
handlerUrlPart.startsWith(':')
);
// If there is a match... // If there is a match...
if ( matches ) if (matches) {
{
// Assign the matching handler // Assign the matching handler
matchingHandler.handler = handler; matchingHandler.handler = handler;
// Extract and assign the parameters // Extract and assign the parameters
matchingHandler.urlParams = fromPairs(compact(handlerUrlParts.map((handlerUrlPart, index) => matchingHandler.urlParams = fromPairs(
handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined, compact(
))); handlerUrlParts.map((handlerUrlPart, index) =>
handlerUrlPart.startsWith(':')
? [handlerUrlPart.substring(1), urlParts[index]]
: undefined
)
)
);
} }
}); });
@ -85,8 +98,7 @@ export class FuseMockApiService
* @param url - URL address of the mocked API endpoint * @param url - URL address of the mocked API endpoint
* @param delay - Delay of the response in milliseconds * @param delay - Delay of the response in milliseconds
*/ */
onGet(url: string, delay?: number): FuseMockApiHandler onGet(url: string, delay?: number): FuseMockApiHandler {
{
return this._registerHandler('get', url, delay); return this._registerHandler('get', url, delay);
} }
@ -96,8 +108,7 @@ export class FuseMockApiService
* @param url - URL address of the mocked API endpoint * @param url - URL address of the mocked API endpoint
* @param delay - Delay of the response in milliseconds * @param delay - Delay of the response in milliseconds
*/ */
onPost(url: string, delay?: number): FuseMockApiHandler onPost(url: string, delay?: number): FuseMockApiHandler {
{
return this._registerHandler('post', url, delay); return this._registerHandler('post', url, delay);
} }
@ -107,8 +118,7 @@ export class FuseMockApiService
* @param url - URL address of the mocked API endpoint * @param url - URL address of the mocked API endpoint
* @param delay - Delay of the response in milliseconds * @param delay - Delay of the response in milliseconds
*/ */
onPatch(url: string, delay?: number): FuseMockApiHandler onPatch(url: string, delay?: number): FuseMockApiHandler {
{
return this._registerHandler('patch', url, delay); return this._registerHandler('patch', url, delay);
} }
@ -118,8 +128,7 @@ export class FuseMockApiService
* @param url - URL address of the mocked API endpoint * @param url - URL address of the mocked API endpoint
* @param delay - Delay of the response in milliseconds * @param delay - Delay of the response in milliseconds
*/ */
onDelete(url: string, delay?: number): FuseMockApiHandler onDelete(url: string, delay?: number): FuseMockApiHandler {
{
return this._registerHandler('delete', url, delay); return this._registerHandler('delete', url, delay);
} }
@ -129,8 +138,7 @@ export class FuseMockApiService
* @param url - URL address of the mocked API endpoint * @param url - URL address of the mocked API endpoint
* @param delay - Delay of the response in milliseconds * @param delay - Delay of the response in milliseconds
*/ */
onPut(url: string, delay?: number): FuseMockApiHandler onPut(url: string, delay?: number): FuseMockApiHandler {
{
return this._registerHandler('put', url, delay); return this._registerHandler('put', url, delay);
} }
@ -140,8 +148,7 @@ export class FuseMockApiService
* @param url - URL address of the mocked API endpoint * @param url - URL address of the mocked API endpoint
* @param delay - Delay of the response in milliseconds * @param delay - Delay of the response in milliseconds
*/ */
onHead(url: string, delay?: number): FuseMockApiHandler onHead(url: string, delay?: number): FuseMockApiHandler {
{
return this._registerHandler('head', url, delay); return this._registerHandler('head', url, delay);
} }
@ -151,8 +158,7 @@ export class FuseMockApiService
* @param url - URL address of the mocked API endpoint * @param url - URL address of the mocked API endpoint
* @param delay - Delay of the response in milliseconds * @param delay - Delay of the response in milliseconds
*/ */
onJsonp(url: string, delay?: number): FuseMockApiHandler onJsonp(url: string, delay?: number): FuseMockApiHandler {
{
return this._registerHandler('jsonp', url, delay); return this._registerHandler('jsonp', url, delay);
} }
@ -162,8 +168,7 @@ export class FuseMockApiService
* @param url - URL address of the mocked API endpoint * @param url - URL address of the mocked API endpoint
* @param delay - Delay of the response in milliseconds * @param delay - Delay of the response in milliseconds
*/ */
onOptions(url: string, delay?: number): FuseMockApiHandler onOptions(url: string, delay?: number): FuseMockApiHandler {
{
return this._registerHandler('options', url, delay); return this._registerHandler('options', url, delay);
} }
@ -179,8 +184,11 @@ export class FuseMockApiService
* @param delay * @param delay
* @private * @private
*/ */
private _registerHandler(method: FuseMockApiMethods, url: string, delay?: number): FuseMockApiHandler private _registerHandler(
{ method: FuseMockApiMethods,
url: string,
delay?: number
): FuseMockApiHandler {
// Create a new instance of FuseMockApiRequestHandler // Create a new instance of FuseMockApiRequestHandler
const fuseMockHttp = new FuseMockApiHandler(url, delay); const fuseMockHttp = new FuseMockApiHandler(url, delay);

5
src/@fuse/lib/mock-api/mock-api.types.ts
View File

@ -2,7 +2,10 @@ import { HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
export type FuseMockApiReplyCallback = export type FuseMockApiReplyCallback =
| ((data: { request: HttpRequest<any>; urlParams: { [key: string]: string } }) => ([number, string | any]) | Observable<any>) | ((data: {
request: HttpRequest<any>;
urlParams: { [key: string]: string };
}) => [number, string | any] | Observable<any>)
| undefined; | undefined;
export type FuseMockApiMethods = export type FuseMockApiMethods =

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

@ -1,5 +1,4 @@
export class FuseMockApiUtils export class FuseMockApiUtils {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Public methods // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -7,23 +6,23 @@ export class FuseMockApiUtils
/** /**
* Generate a globally unique id * Generate a globally unique id
*/ */
static guid(): string static guid(): string {
{
/* eslint-disable */ /* eslint-disable */
let d = new Date().getTime(); let d = new Date().getTime();
// Use high-precision timer if available // Use high-precision timer if available
if ( typeof performance !== 'undefined' && typeof performance.now === 'function' ) if (
{ typeof performance !== 'undefined' &&
typeof performance.now === 'function'
) {
d += performance.now(); 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; const r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16); d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
}); });
/* eslint-enable */ /* eslint-enable */

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

@ -4,12 +4,11 @@ import { Pipe, PipeTransform } from '@angular/core';
* Finds an object from given source using the given key - value pairs * Finds an object from given source using the given key - value pairs
*/ */
@Pipe({ @Pipe({
name : 'fuseFindByKey', name: 'fuseFindByKey',
pure : false, pure: false,
standalone: true, standalone: true,
}) })
export class FuseFindByKeyPipe implements PipeTransform export class FuseFindByKeyPipe implements PipeTransform {
{
/** /**
* Transform * Transform
* *
@ -17,15 +16,15 @@ export class FuseFindByKeyPipe implements PipeTransform
* @param key Key of the object property to look for * @param key Key of the object property to look for
* @param source Array of objects to find from * @param source Array of objects to find from
*/ */
transform(value: string | string[], key: string, source: any[]): any transform(value: string | string[], key: string, source: any[]): any {
{
// If the given value is an array of strings... // If the given value is an array of strings...
if ( Array.isArray(value) ) if (Array.isArray(value)) {
{ return value.map((item) =>
return value.map(item => source.find(sourceItem => sourceItem[key] === item)); source.find((sourceItem) => sourceItem[key] === item)
);
} }
// If the value is a string... // If the value is a string...
return source.find(sourceItem => sourceItem[key] === value); return source.find((sourceItem) => sourceItem[key] === value);
} }
} }

2
src/@fuse/pipes/find-by-key/public-api.ts
View File

@ -1,2 +1,2 @@
export * from '@fuse/pipes/find-by-key/find-by-key.pipe';
export * from '@fuse/pipes/find-by-key/find-by-key.module'; export * from '@fuse/pipes/find-by-key/find-by-key.module';
export * from '@fuse/pipes/find-by-key/find-by-key.pipe';

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

@ -3,9 +3,8 @@ import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
import { merge } from 'lodash-es'; import { merge } from 'lodash-es';
import { BehaviorSubject, Observable } from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FuseConfigService export class FuseConfigService {
{
private _config = new BehaviorSubject(inject(FUSE_CONFIG)); private _config = new BehaviorSubject(inject(FUSE_CONFIG));
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -15,8 +14,7 @@ export class FuseConfigService
/** /**
* Setter & getter for config * Setter & getter for config
*/ */
set config(value: any) set config(value: any) {
{
// Merge the new config over to the current config // Merge the new config over to the current config
const config = merge({}, this._config.getValue(), value); const config = merge({}, this._config.getValue(), value);
@ -25,8 +23,7 @@ export class FuseConfigService
} }
// eslint-disable-next-line @typescript-eslint/member-ordering // eslint-disable-next-line @typescript-eslint/member-ordering
get config$(): Observable<any> get config$(): Observable<any> {
{
return this._config.asObservable(); return this._config.asObservable();
} }
@ -37,8 +34,7 @@ export class FuseConfigService
/** /**
* Resets the config to the default * Resets the config to the default
*/ */
reset(): void reset(): void {
{
// Set the config // Set the config
this._config.next(this.config); this._config.next(this.config);
} }

3
src/@fuse/services/config/config.types.ts
View File

@ -8,8 +8,7 @@ export type Themes = { id: string; name: string }[];
* AppConfig interface. Update this interface to strictly type your config * AppConfig interface. Update this interface to strictly type your config
* object. * object.
*/ */
export interface FuseConfig export interface FuseConfig {
{
layout: string; layout: string;
scheme: Scheme; scheme: Scheme;
screens: Screens; screens: Screens;

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

@ -4,26 +4,25 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component'; import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
import { merge } from 'lodash-es'; import { merge } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FuseConfirmationService export class FuseConfirmationService {
{
private _matDialog: MatDialog = inject(MatDialog); private _matDialog: MatDialog = inject(MatDialog);
private _defaultConfig: FuseConfirmationConfig = { private _defaultConfig: FuseConfirmationConfig = {
title : 'Confirm action', title: 'Confirm action',
message : 'Are you sure you want to confirm this action?', message: 'Are you sure you want to confirm this action?',
icon : { icon: {
show : true, show: true,
name : 'heroicons_outline:exclamation-triangle', name: 'heroicons_outline:exclamation-triangle',
color: 'warn', color: 'warn',
}, },
actions : { actions: {
confirm: { confirm: {
show : true, show: true,
label: 'Confirm', label: 'Confirm',
color: 'warn', color: 'warn',
}, },
cancel : { cancel: {
show : true, show: true,
label: 'Cancel', label: 'Cancel',
}, },
}, },
@ -34,17 +33,18 @@ export class FuseConfirmationService
// @ Public methods // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
open(config: FuseConfirmationConfig = {}): MatDialogRef<FuseConfirmationDialogComponent> open(
{ config: FuseConfirmationConfig = {}
): MatDialogRef<FuseConfirmationDialogComponent> {
// Merge the user config with the default config // Merge the user config with the default config
const userConfig = merge({}, this._defaultConfig, config); const userConfig = merge({}, this._defaultConfig, config);
// Open the dialog // Open the dialog
return this._matDialog.open(FuseConfirmationDialogComponent, { return this._matDialog.open(FuseConfirmationDialogComponent, {
autoFocus : false, autoFocus: false,
disableClose: !userConfig.dismissible, disableClose: !userConfig.dismissible,
data : userConfig, data: userConfig,
panelClass : 'fuse-confirmation-dialog-panel', panelClass: 'fuse-confirmation-dialog-panel',
}); });
} }
} }

13
src/@fuse/services/confirmation/confirmation.types.ts
View File

@ -1,11 +1,18 @@
export interface FuseConfirmationConfig export interface FuseConfirmationConfig {
{
title?: string; title?: string;
message?: string; message?: string;
icon?: { icon?: {
show?: boolean; show?: boolean;
name?: string; name?: string;
color?: 'primary' | 'accent' | 'warn' | 'basic' | 'info' | 'success' | 'warning' | 'error'; color?:
| 'primary'
| 'accent'
| 'warn'
| 'basic'
| 'info'
| 'success'
| 'warning'
| 'error';
}; };
actions?: { actions?: {
confirm?: { confirm?: {

82
src/@fuse/services/confirmation/dialog/dialog.component.html
View File

@ -1,71 +1,82 @@
<div class="relative flex flex-col w-full h-full"> <div class="relative flex h-full w-full flex-col">
<!-- Dismiss button --> <!-- Dismiss button -->
<ng-container *ngIf="data.dismissible"> <ng-container *ngIf="data.dismissible">
<div class="absolute top-0 right-0 pt-4 pr-4"> <div class="absolute right-0 top-0 pr-4 pt-4">
<button <button mat-icon-button [matDialogClose]="undefined">
mat-icon-button
[matDialogClose]="undefined">
<mat-icon <mat-icon
class="text-secondary" class="text-secondary"
[svgIcon]="'heroicons_outline:x-mark'"></mat-icon> [svgIcon]="'heroicons_outline:x-mark'"
></mat-icon>
</button> </button>
</div> </div>
</ng-container> </ng-container>
<!-- Content --> <!-- Content -->
<div class="flex flex-col sm:flex-row flex-auto items-center sm:items-start p-8 pb-6 sm:pb-8"> <div
class="flex flex-auto flex-col items-center p-8 pb-6 sm:flex-row sm:items-start sm:pb-8"
>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="data.icon.show"> <ng-container *ngIf="data.icon.show">
<div <div
class="flex flex-0 items-center justify-center w-10 h-10 sm:mr-4 rounded-full" class="flex h-10 w-10 flex-0 items-center justify-center rounded-full sm:mr-4"
[ngClass]="{'text-primary-600 bg-primary-100 dark:text-primary-50 dark:bg-primary-600': data.icon.color === 'primary', [ngClass]="{
'text-accent-600 bg-accent-100 dark:text-accent-50 dark:bg-accent-600': data.icon.color === 'accent', 'bg-primary-100 text-primary-600 dark:bg-primary-600 dark:text-primary-50':
'text-warn-600 bg-warn-100 dark:text-warn-50 dark:bg-warn-600': data.icon.color === 'warn', data.icon.color === 'primary',
'text-gray-600 bg-gray-100 dark:text-gray-50 dark:bg-gray-600': data.icon.color === 'basic', 'bg-accent-100 text-accent-600 dark:bg-accent-600 dark:text-accent-50':
'text-blue-600 bg-blue-100 dark:text-blue-50 dark:bg-blue-600': data.icon.color === 'info', data.icon.color === 'accent',
'text-green-500 bg-green-100 dark:text-green-50 dark:bg-green-500': data.icon.color === 'success', 'bg-warn-100 text-warn-600 dark:bg-warn-600 dark:text-warn-50':
'text-amber-500 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': data.icon.color === 'warning', data.icon.color === 'warn',
'text-red-600 bg-red-100 dark:text-red-50 dark:bg-red-600': data.icon.color === 'error' 'bg-gray-100 text-gray-600 dark:bg-gray-600 dark:text-gray-50':
}"> data.icon.color === 'basic',
'bg-blue-100 text-blue-600 dark:bg-blue-600 dark:text-blue-50':
data.icon.color === 'info',
'bg-green-100 text-green-500 dark:bg-green-500 dark:text-green-50':
data.icon.color === 'success',
'bg-amber-100 text-amber-500 dark:bg-amber-500 dark:text-amber-50':
data.icon.color === 'warning',
'bg-red-100 text-red-600 dark:bg-red-600 dark:text-red-50':
data.icon.color === 'error'
}"
>
<mat-icon <mat-icon
class="text-current" class="text-current"
[svgIcon]="data.icon.name"></mat-icon> [svgIcon]="data.icon.name"
></mat-icon>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="data.title || data.message"> <ng-container *ngIf="data.title || data.message">
<div class="flex flex-col items-center sm:items-start mt-4 sm:mt-0 sm:pr-8 space-y-1 text-center sm:text-left"> <div
class="mt-4 flex flex-col items-center space-y-1 text-center sm:mt-0 sm:items-start sm:pr-8 sm:text-left"
>
<!-- Title --> <!-- Title -->
<ng-container *ngIf="data.title"> <ng-container *ngIf="data.title">
<div <div
class="text-xl leading-6 font-medium" class="text-xl font-medium leading-6"
[innerHTML]="data.title"></div> [innerHTML]="data.title"
></div>
</ng-container> </ng-container>
<!-- Message --> <!-- Message -->
<ng-container *ngIf="data.message"> <ng-container *ngIf="data.message">
<div <div
class="text-secondary" class="text-secondary"
[innerHTML]="data.message"></div> [innerHTML]="data.message"
></div>
</ng-container> </ng-container>
</div> </div>
</ng-container> </ng-container>
</div> </div>
<!-- Actions --> <!-- Actions -->
<ng-container *ngIf="data.actions.confirm.show || data.actions.cancel.show"> <ng-container *ngIf="data.actions.confirm.show || data.actions.cancel.show">
<div class="flex items-center justify-center sm:justify-end px-6 py-4 space-x-3 bg-gray-50 dark:bg-black dark:bg-opacity-10"> <div
class="flex items-center justify-center space-x-3 bg-gray-50 px-6 py-4 dark:bg-black dark:bg-opacity-10 sm:justify-end"
>
<!-- Cancel --> <!-- Cancel -->
<ng-container *ngIf="data.actions.cancel.show"> <ng-container *ngIf="data.actions.cancel.show">
<button <button mat-stroked-button [matDialogClose]="'cancelled'">
mat-stroked-button {{ data.actions.cancel.label }}
[matDialogClose]="'cancelled'">
{{data.actions.cancel.label}}
</button> </button>
</ng-container> </ng-container>
@ -74,12 +85,11 @@
<button <button
mat-flat-button mat-flat-button
[color]="data.actions.confirm.color" [color]="data.actions.confirm.color"
[matDialogClose]="'confirmed'"> [matDialogClose]="'confirmed'"
{{data.actions.confirm.label}} >
{{ data.actions.confirm.label }}
</button> </button>
</ng-container> </ng-container>
</div> </div>
</ng-container> </ng-container>
</div> </div>

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

@ -1,23 +1,21 @@
import { NgClass, NgIf } from '@angular/common'; import { NgClass, NgIf } from '@angular/common';
import { Component, inject, ViewEncapsulation } from '@angular/core'; import { Component, ViewEncapsulation, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types'; import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
@Component({ @Component({
selector : 'fuse-confirmation-dialog', selector: 'fuse-confirmation-dialog',
templateUrl : './dialog.component.html', templateUrl: './dialog.component.html',
styles : [ styles: [
` `
.fuse-confirmation-dialog-panel { .fuse-confirmation-dialog-panel {
@screen md { @screen md {
@apply w-128; @apply w-128;
} }
.mat-mdc-dialog-container { .mat-mdc-dialog-container {
.mat-mdc-dialog-surface { .mat-mdc-dialog-surface {
padding: 0 !important; padding: 0 !important;
} }
@ -26,10 +24,9 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
`, `,
], ],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass], imports: [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
}) })
export class FuseConfirmationDialogComponent export class FuseConfirmationDialogComponent {
{
data: FuseConfirmationConfig = inject(MAT_DIALOG_DATA); data: FuseConfirmationConfig = inject(MAT_DIALOG_DATA);
} }

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

@ -1,23 +1,21 @@
import { HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http'; import { HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
import { inject } from '@angular/core'; import { inject } from '@angular/core';
import { FuseLoadingService } from '@fuse/services/loading/loading.service'; import { FuseLoadingService } from '@fuse/services/loading/loading.service';
import { finalize, Observable, take } from 'rxjs'; import { Observable, finalize, take } from 'rxjs';
export const fuseLoadingInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => export const fuseLoadingInterceptor = (
{ req: HttpRequest<unknown>,
next: HttpHandlerFn
): Observable<HttpEvent<unknown>> => {
const fuseLoadingService = inject(FuseLoadingService); const fuseLoadingService = inject(FuseLoadingService);
let handleRequestsAutomatically = false; let handleRequestsAutomatically = false;
fuseLoadingService.auto$ fuseLoadingService.auto$.pipe(take(1)).subscribe((value) => {
.pipe(take(1)) handleRequestsAutomatically = value;
.subscribe((value) => });
{
handleRequestsAutomatically = value;
});
// If the Auto mode is turned off, do nothing // If the Auto mode is turned off, do nothing
if ( !handleRequestsAutomatically ) if (!handleRequestsAutomatically) {
{
return next(req); return next(req);
} }
@ -25,9 +23,9 @@ export const fuseLoadingInterceptor = (req: HttpRequest<unknown>, next: HttpHand
fuseLoadingService._setLoadingStatus(true, req.url); fuseLoadingService._setLoadingStatus(true, req.url);
return next(req).pipe( return next(req).pipe(
finalize(() => finalize(() => {
{
// Set the status to false if there are any errors or the request is completed // Set the status to false if there are any errors or the request is completed
fuseLoadingService._setLoadingStatus(false, req.url); fuseLoadingService._setLoadingStatus(false, req.url);
})); })
);
}; };

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

@ -1,13 +1,19 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FuseLoadingService export class FuseLoadingService {
{ private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true); true
private _mode$: BehaviorSubject<'determinate' | 'indeterminate'> = new BehaviorSubject<'determinate' | 'indeterminate'>('indeterminate'); );
private _progress$: BehaviorSubject<number | null> = new BehaviorSubject<number | null>(0); private _mode$: BehaviorSubject<'determinate' | 'indeterminate'> =
private _show$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); new BehaviorSubject<'determinate' | 'indeterminate'>('indeterminate');
private _progress$: BehaviorSubject<number | null> = new BehaviorSubject<
number | null
>(0);
private _show$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
false
);
private _urlMap: Map<string, boolean> = new Map<string, boolean>(); private _urlMap: Map<string, boolean> = new Map<string, boolean>();
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -17,32 +23,28 @@ export class FuseLoadingService
/** /**
* Getter for auto mode * Getter for auto mode
*/ */
get auto$(): Observable<boolean> get auto$(): Observable<boolean> {
{
return this._auto$.asObservable(); return this._auto$.asObservable();
} }
/** /**
* Getter for mode * Getter for mode
*/ */
get mode$(): Observable<'determinate' | 'indeterminate'> get mode$(): Observable<'determinate' | 'indeterminate'> {
{
return this._mode$.asObservable(); return this._mode$.asObservable();
} }
/** /**
* Getter for progress * Getter for progress
*/ */
get progress$(): Observable<number> get progress$(): Observable<number> {
{
return this._progress$.asObservable(); return this._progress$.asObservable();
} }
/** /**
* Getter for show * Getter for show
*/ */
get show$(): Observable<boolean> get show$(): Observable<boolean> {
{
return this._show$.asObservable(); return this._show$.asObservable();
} }
@ -53,16 +55,14 @@ export class FuseLoadingService
/** /**
* Show the loading bar * Show the loading bar
*/ */
show(): void show(): void {
{
this._show$.next(true); this._show$.next(true);
} }
/** /**
* Hide the loading bar * Hide the loading bar
*/ */
hide(): void hide(): void {
{
this._show$.next(false); this._show$.next(false);
} }
@ -71,8 +71,7 @@ export class FuseLoadingService
* *
* @param value * @param value
*/ */
setAutoMode(value: boolean): void setAutoMode(value: boolean): void {
{
this._auto$.next(value); this._auto$.next(value);
} }
@ -81,8 +80,7 @@ export class FuseLoadingService
* *
* @param value * @param value
*/ */
setMode(value: 'determinate' | 'indeterminate'): void setMode(value: 'determinate' | 'indeterminate'): void {
{
this._mode$.next(value); this._mode$.next(value);
} }
@ -91,10 +89,8 @@ export class FuseLoadingService
* *
* @param value * @param value
*/ */
setProgress(value: number): void setProgress(value: number): void {
{ if (value < 0 || value > 100) {
if ( value < 0 || value > 100 )
{
console.error('Progress value must be between 0 and 100!'); console.error('Progress value must be between 0 and 100!');
return; return;
} }
@ -108,28 +104,22 @@ export class FuseLoadingService
* @param status * @param status
* @param url * @param url
*/ */
_setLoadingStatus(status: boolean, url: string): void _setLoadingStatus(status: boolean, url: string): void {
{
// Return if the url was not provided // Return if the url was not provided
if ( !url ) if (!url) {
{
console.error('The request URL must be provided!'); console.error('The request URL must be provided!');
return; return;
} }
if ( status === true ) if (status === true) {
{
this._urlMap.set(url, status); this._urlMap.set(url, status);
this._show$.next(true); this._show$.next(true);
} } else if (status === false && this._urlMap.has(url)) {
else if ( status === false && this._urlMap.has(url) )
{
this._urlMap.delete(url); this._urlMap.delete(url);
} }
// Only set the status to 'false' if all outgoing requests are completed // Only set the status to 'false' if all outgoing requests are completed
if ( this._urlMap.size === 0 ) if (this._urlMap.size === 0) {
{
this._show$.next(false); this._show$.next(false);
} }
} }

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

@ -1,2 +1,2 @@
export * from '@fuse/services/loading/loading.service';
export * from '@fuse/services/loading/loading.interceptor'; export * from '@fuse/services/loading/loading.interceptor';
export * from '@fuse/services/loading/loading.service';

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

@ -1,54 +1,74 @@
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { inject, Injectable } from '@angular/core'; import { Injectable, inject } from '@angular/core';
import { FuseConfigService } from '@fuse/services/config'; import { FuseConfigService } from '@fuse/services/config';
import { fromPairs } from 'lodash-es'; import { fromPairs } from 'lodash-es';
import { map, Observable, ReplaySubject, switchMap } from 'rxjs'; import { Observable, ReplaySubject, map, switchMap } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FuseMediaWatcherService export class FuseMediaWatcherService {
{
private _breakpointObserver = inject(BreakpointObserver); private _breakpointObserver = inject(BreakpointObserver);
private _fuseConfigService = inject(FuseConfigService); private _fuseConfigService = inject(FuseConfigService);
private _onMediaChange: ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>(1); private _onMediaChange: ReplaySubject<{
matchingAliases: string[];
matchingQueries: any;
}> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>(
1
);
/** /**
* Constructor * Constructor
*/ */
constructor() constructor() {
{ this._fuseConfigService.config$
this._fuseConfigService.config$.pipe( .pipe(
map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))), map((config) =>
switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe( fromPairs(
map((state) => Object.entries(config.screens).map(
{ ([alias, screen]) => [
// Prepare the observable values and set their defaults alias,
const matchingAliases: string[] = []; `(min-width: ${screen})`,
const matchingQueries: any = {}; ]
)
)
),
switchMap((screens) =>
this._breakpointObserver
.observe(Object.values(screens))
.pipe(
map((state) => {
// Prepare the observable values and set their defaults
const matchingAliases: string[] = [];
const matchingQueries: any = {};
// Get the matching breakpoints and use them to fill the subject // Get the matching breakpoints and use them to fill the subject
const matchingBreakpoints = Object.entries(state.breakpoints).filter(([query, matches]) => matches) ?? []; const matchingBreakpoints =
for ( const [query] of matchingBreakpoints ) Object.entries(state.breakpoints).filter(
{ ([query, matches]) => matches
// Find the alias of the matching query ) ?? [];
const matchingAlias = Object.entries(screens).find(([alias, q]) => q === query)[0]; for (const [query] of matchingBreakpoints) {
// Find the alias of the matching query
const matchingAlias = Object.entries(
screens
).find(([alias, q]) => q === query)[0];
// Add the matching query to the observable values // Add the matching query to the observable values
if ( matchingAlias ) if (matchingAlias) {
{ matchingAliases.push(matchingAlias);
matchingAliases.push(matchingAlias); matchingQueries[matchingAlias] = query;
matchingQueries[matchingAlias] = query; }
} }
}
// Execute the observable // Execute the observable
this._onMediaChange.next({ this._onMediaChange.next({
matchingAliases, matchingAliases,
matchingQueries, matchingQueries,
}); });
}), })
)), )
).subscribe(); )
)
.subscribe();
} }
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -58,8 +78,10 @@ export class FuseMediaWatcherService
/** /**
* Getter for _onMediaChange * Getter for _onMediaChange
*/ */
get onMediaChange$(): Observable<{ matchingAliases: string[]; matchingQueries: any }> get onMediaChange$(): Observable<{
{ matchingAliases: string[];
matchingQueries: any;
}> {
return this._onMediaChange.asObservable(); return this._onMediaChange.asObservable();
} }
@ -72,8 +94,7 @@ export class FuseMediaWatcherService
* *
* @param query * @param query
*/ */
onMediaQueryChange$(query: string | string[]): Observable<BreakpointState> onMediaQueryChange$(query: string | string[]): Observable<BreakpointState> {
{
return this._breakpointObserver.observe(query); return this._breakpointObserver.observe(query);
} }
} }

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

@ -1,9 +1,8 @@
import { Platform } from '@angular/cdk/platform'; import { Platform } from '@angular/cdk/platform';
import { inject, Injectable } from '@angular/core'; import { inject, Injectable } from '@angular/core';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FusePlatformService export class FusePlatformService {
{
private _platform = inject(Platform); private _platform = inject(Platform);
osName = 'os-unknown'; osName = 'os-unknown';
@ -11,49 +10,40 @@ export class FusePlatformService
/** /**
* Constructor * Constructor
*/ */
constructor() constructor() {
{
// If the platform is not a browser, return immediately // If the platform is not a browser, return immediately
if ( !this._platform.isBrowser ) if (!this._platform.isBrowser) {
{
return; return;
} }
// Windows // Windows
if ( navigator.userAgent.includes('Win') ) if (navigator.userAgent.includes('Win')) {
{
this.osName = 'os-windows'; this.osName = 'os-windows';
} }
// Mac OS // Mac OS
if ( navigator.userAgent.includes('Mac') ) if (navigator.userAgent.includes('Mac')) {
{
this.osName = 'os-mac'; this.osName = 'os-mac';
} }
// Unix // Unix
if ( navigator.userAgent.includes('X11') ) if (navigator.userAgent.includes('X11')) {
{
this.osName = 'os-unix'; this.osName = 'os-unix';
} }
// Linux // Linux
if ( navigator.userAgent.includes('Linux') ) if (navigator.userAgent.includes('Linux')) {
{
this.osName = 'os-linux'; this.osName = 'os-linux';
} }
// iOS // iOS
if ( this._platform.IOS ) if (this._platform.IOS) {
{
this.osName = 'os-ios'; this.osName = 'os-ios';
} }
// Android // Android
if ( this._platform.ANDROID ) if (this._platform.ANDROID) {
{
this.osName = 'os-android'; this.osName = 'os-android';
} }
} }
} }

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

@ -3,25 +3,22 @@ import { inject, Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router'; import { NavigationEnd, Router } from '@angular/router';
import { filter, take } from 'rxjs'; import { filter, take } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FuseSplashScreenService export class FuseSplashScreenService {
{
private _document = inject(DOCUMENT); private _document = inject(DOCUMENT);
private _router = inject(Router); private _router = inject(Router);
/** /**
* Constructor * Constructor
*/ */
constructor() constructor() {
{
// Hide it on the first NavigationEnd event // Hide it on the first NavigationEnd event
this._router.events this._router.events
.pipe( .pipe(
filter(event => event instanceof NavigationEnd), filter((event) => event instanceof NavigationEnd),
take(1), take(1)
) )
.subscribe(() => .subscribe(() => {
{
this.hide(); this.hide();
}); });
} }
@ -33,16 +30,14 @@ export class FuseSplashScreenService
/** /**
* Show the splash screen * Show the splash screen
*/ */
show(): void show(): void {
{
this._document.body.classList.remove('fuse-splash-screen-hidden'); this._document.body.classList.remove('fuse-splash-screen-hidden');
} }
/** /**
* Hide the splash screen * Hide the splash screen
*/ */
hide(): void hide(): void {
{
this._document.body.classList.add('fuse-splash-screen-hidden'); this._document.body.classList.add('fuse-splash-screen-hidden');
} }
} }

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

@ -1,9 +1,8 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { IsActiveMatchOptions } from '@angular/router'; import { IsActiveMatchOptions } from '@angular/router';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FuseUtilsService export class FuseUtilsService {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -11,26 +10,24 @@ export class FuseUtilsService
/** /**
* Get the equivalent "IsActiveMatchOptions" options for "exact = true". * Get the equivalent "IsActiveMatchOptions" options for "exact = true".
*/ */
get exactMatchOptions(): IsActiveMatchOptions get exactMatchOptions(): IsActiveMatchOptions {
{
return { return {
paths : 'exact', paths: 'exact',
fragment : 'ignored', fragment: 'ignored',
matrixParams: 'ignored', matrixParams: 'ignored',
queryParams : 'exact', queryParams: 'exact',
}; };
} }
/** /**
* Get the equivalent "IsActiveMatchOptions" options for "exact = false". * Get the equivalent "IsActiveMatchOptions" options for "exact = false".
*/ */
get subsetMatchOptions(): IsActiveMatchOptions get subsetMatchOptions(): IsActiveMatchOptions {
{
return { return {
paths : 'subset', paths: 'subset',
fragment : 'ignored', fragment: 'ignored',
matrixParams: 'ignored', matrixParams: 'ignored',
queryParams : 'subset', queryParams: 'subset',
}; };
} }
@ -43,13 +40,12 @@ export class FuseUtilsService
* *
* @param length * @param length
*/ */
randomId(length: number = 10): string randomId(length: number = 10): string {
{ const chars =
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let name = ''; let name = '';
for ( let i = 0; i < 10; i++ ) for (let i = 0; i < 10; i++) {
{
name += chars.charAt(Math.floor(Math.random() * chars.length)); name += chars.charAt(Math.floor(Math.random() * chars.length));
} }

5
src/@fuse/styles/components/example-viewer.scss
View File

@ -6,7 +6,7 @@
flex-direction: column; flex-direction: column;
margin: 32px 0; margin: 32px 0;
overflow: hidden; overflow: hidden;
@apply rounded-2xl shadow bg-card; @apply bg-card rounded-2xl shadow;
.title { .title {
display: flex; display: flex;
@ -32,11 +32,8 @@
} }
mat-tab-group { mat-tab-group {
.mat-tab-body-content { .mat-tab-body-content {
.fuse-highlight { .fuse-highlight {
pre { pre {
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;

144
src/@fuse/styles/overrides/angular-material.scss
View File

@ -8,8 +8,8 @@
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* @ Font smoothing /* @ Font smoothing
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
*[class*=mat-], *[class*='mat-'],
*[class*=mat-mdc-] { *[class*='mat-mdc-'] {
-webkit-font-smoothing: auto !important; -webkit-font-smoothing: auto !important;
-moz-osx-font-smoothing: auto !important; -moz-osx-font-smoothing: auto !important;
@ -23,11 +23,10 @@
/* @ Accordion /* @ Accordion
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
.mat-accordion { .mat-accordion {
.mat-expansion-panel { .mat-expansion-panel {
margin-bottom: 24px; margin-bottom: 24px;
border-radius: 8px !important; border-radius: 8px !important;
transition: box-shadow 225ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: box-shadow 225ms cubic-bezier(0.4, 0, 0.2, 1);
@apply shadow #{'!important'}; @apply shadow #{'!important'};
&:last-child { &:last-child {
@ -40,11 +39,8 @@
} }
&:not(.mat-expanded) { &:not(.mat-expanded) {
.mat-expansion-panel-header { .mat-expansion-panel-header {
&:not([aria-disabled='true']) {
&:not([aria-disabled=true]) {
&.cdk-keyboard-focused, &.cdk-keyboard-focused,
&.cdk-program-focused, &.cdk-program-focused,
&:hover { &:hover {
@ -57,8 +53,7 @@
.mat-expansion-panel-header { .mat-expansion-panel-header {
font-size: 14px; font-size: 14px;
&[aria-disabled=true] { &[aria-disabled='true'] {
.mat-expansion-panel-header-description { .mat-expansion-panel-header-description {
margin-right: 28px; margin-right: 28px;
} }
@ -107,8 +102,7 @@
} }
/* Lower the icon opacity on disabled buttons */ /* Lower the icon opacity on disabled buttons */
&[disabled=true] { &[disabled='true'] {
.mat-icon { .mat-icon {
opacity: 0.38 !important; opacity: 0.38 !important;
} }
@ -157,13 +151,11 @@
border-radius: 9999px !important; border-radius: 9999px !important;
} }
/* Fix the alignment of icons when used within buttons */ /* Fix the alignment of icons when used within buttons */
.mat-mdc-button, .mat-mdc-button,
.mat-mdc-raised-button, .mat-mdc-raised-button,
.mat-mdc-outlined-button, .mat-mdc-outlined-button,
.mat-mdc-unelevated-button { .mat-mdc-unelevated-button {
& > .mat-icon { & > .mat-icon {
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
@ -178,11 +170,8 @@
.mat-mdc-icon-button, .mat-mdc-icon-button,
.mat-mdc-fab, .mat-mdc-fab,
.mat-mdc-mini-fab { .mat-mdc-mini-fab {
.mat-mdc-progress-spinner { .mat-mdc-progress-spinner {
.mdc-circular-progress__indeterminate-container { .mdc-circular-progress__indeterminate-container {
circle { circle {
stroke: currentColor !important; stroke: currentColor !important;
animation-duration: 6000ms; animation-duration: 6000ms;
@ -196,12 +185,15 @@
.mat-mdc-unelevated-button, .mat-mdc-unelevated-button,
.mat-mdc-fab, .mat-mdc-fab,
.mat-mdc-mini-fab { .mat-mdc-mini-fab {
--mat-mdc-button-persistent-ripple-color: theme(
--mat-mdc-button-persistent-ripple-color: theme('colors.gray[400]') !important; 'colors.gray[400]'
) !important;
--mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1) !important; --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1) !important;
.dark & { .dark & {
--mat-mdc-button-persistent-ripple-color: theme('colors.black') !important; --mat-mdc-button-persistent-ripple-color: theme(
'colors.black'
) !important;
--mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1) !important; --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1) !important;
} }
@ -218,12 +210,9 @@
.mat-mdc-button, .mat-mdc-button,
.mat-mdc-icon-button, .mat-mdc-icon-button,
.mat-mdc-outlined-button { .mat-mdc-outlined-button {
&:not([disabled='true']) {
&:not([disabled=true]) {
/* Apply primary color */ /* Apply primary color */
&.mat-primary { &.mat-primary {
.mat-icon { .mat-icon {
@apply text-primary #{'!important'}; @apply text-primary #{'!important'};
} }
@ -231,7 +220,6 @@
/* Apply accent color */ /* Apply accent color */
&.mat-accent { &.mat-accent {
.mat-icon { .mat-icon {
@apply text-accent #{'!important'}; @apply text-accent #{'!important'};
} }
@ -239,7 +227,6 @@
/* Apply warn color */ /* Apply warn color */
&.mat-warn { &.mat-warn {
.mat-icon { .mat-icon {
@apply text-warn #{'!important'}; @apply text-warn #{'!important'};
} }
@ -249,21 +236,19 @@
/* Adjust the border color of outlined buttons */ /* Adjust the border color of outlined buttons */
.mat-mdc-outlined-button { .mat-mdc-outlined-button {
/* Not disabled */ /* Not disabled */
&:not([disabled=true]) { &:not([disabled='true']) {
@apply border-gray-300 dark:border-gray-500 #{'!important'}; @apply border-gray-300 dark:border-gray-500 #{'!important'};
} }
/* Disabled */ /* Disabled */
&[disabled=true] { &[disabled='true'] {
@apply border-gray-300/70 dark:border-gray-600 #{'!important'}; @apply border-gray-300/70 dark:border-gray-600 #{'!important'};
} }
} }
/* Don't wrap the button label text */ /* Don't wrap the button label text */
.mdc-button { .mdc-button {
.mdc-button__label { .mdc-button__label {
white-space: nowrap; white-space: nowrap;
} }
@ -277,7 +262,6 @@
@apply space-x-1; @apply space-x-1;
&.mat-button-toggle-group-appearance-standard { &.mat-button-toggle-group-appearance-standard {
.mat-button-toggle + .mat-button-toggle { .mat-button-toggle + .mat-button-toggle {
background-clip: padding-box; background-clip: padding-box;
} }
@ -290,7 +274,6 @@
font-weight: 500; font-weight: 500;
&.mat-button-toggle-checked { &.mat-button-toggle-checked {
.mat-button-toggle-label-content { .mat-button-toggle-label-content {
@apply text-default #{'!important'}; @apply text-default #{'!important'};
} }
@ -330,7 +313,6 @@
/* @ Dialog /* @ Dialog
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
.mat-mdc-dialog-container { .mat-mdc-dialog-container {
.mdc-dialog__surface { .mdc-dialog__surface {
border-radius: 16px !important; border-radius: 16px !important;
padding: 24px; padding: 24px;
@ -350,7 +332,6 @@
/* "fill" appearance */ /* "fill" appearance */
.mat-mdc-form-field.mat-form-field-appearance-fill { .mat-mdc-form-field.mat-form-field-appearance-fill {
/* Disabled */ /* Disabled */
&.mat-form-field-disabled { &.mat-form-field-disabled {
opacity: 0.7 !important; opacity: 0.7 !important;
@ -358,7 +339,6 @@
/* Invalid */ /* Invalid */
&.mat-form-field-invalid { &.mat-form-field-invalid {
/* Border color */ /* Border color */
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
@apply border-warn dark:border-warn #{'!important'}; @apply border-warn dark:border-warn #{'!important'};
@ -366,7 +346,6 @@
/* Select */ /* Select */
.mat-mdc-select { .mat-mdc-select {
/* Placeholder color */ /* Placeholder color */
.mat-mdc-select-placeholder { .mat-mdc-select-placeholder {
@apply text-warn #{'!important'}; @apply text-warn #{'!important'};
@ -376,7 +355,6 @@
/* Hover */ /* Hover */
&:hover { &:hover {
.mat-mdc-form-field-focus-overlay { .mat-mdc-form-field-focus-overlay {
opacity: 0 !important; opacity: 0 !important;
} }
@ -384,7 +362,6 @@
/* Focused */ /* Focused */
&.mat-focused { &.mat-focused {
.mat-mdc-form-field-focus-overlay { .mat-mdc-form-field-focus-overlay {
opacity: 0 !important; opacity: 0 !important;
} }
@ -392,7 +369,6 @@
/* Focused and valid fields */ /* Focused and valid fields */
&.mat-focused:not(.mat-form-field-invalid) { &.mat-focused:not(.mat-form-field-invalid) {
/* Border color */ /* Border color */
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
@apply border-primary dark:border-primary #{'!important'}; @apply border-primary dark:border-primary #{'!important'};
@ -401,9 +377,7 @@
/* Remove the default arrow for native select */ /* Remove the default arrow for native select */
&.mat-mdc-form-field-type-mat-native-select { &.mat-mdc-form-field-type-mat-native-select {
.mat-mdc-form-field-infix { .mat-mdc-form-field-infix {
select { select {
top: auto; top: auto;
margin-top: 0; margin-top: 0;
@ -432,7 +406,7 @@
border-radius: 6px; border-radius: 6px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
@apply shadow-sm bg-white border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500 #{'!important'}; @apply border-gray-300 bg-white shadow-sm dark:border-gray-500 dark:bg-black dark:bg-opacity-5 #{'!important'};
/* Adjust the top spacing and overflow when mat-label present */ /* Adjust the top spacing and overflow when mat-label present */
&:not(.mdc-text-field--no-label) { &:not(.mdc-text-field--no-label) {
@ -529,17 +503,16 @@
align-items: center; align-items: center;
&:focus { &:focus {
.mat-mdc-select-trigger { .mat-mdc-select-trigger {
.mat-mdc-select-value { .mat-mdc-select-value {
@apply text-primary #{'!important'}; @apply text-primary #{'!important'};
} }
.mat-mdc-select-arrow-wrapper { .mat-mdc-select-arrow-wrapper {
.mat-mdc-select-arrow { .mat-mdc-select-arrow {
border-top-color: var(--fuse-primary) !important; border-top-color: var(
--fuse-primary
) !important;
} }
} }
} }
@ -554,7 +527,6 @@
max-width: none; max-width: none;
mat-mdc-select-trigger { mat-mdc-select-trigger {
.mat-icon { .mat-icon {
margin: 0 !important; margin: 0 !important;
} }
@ -634,11 +606,8 @@
/* Adds better alignment for textarea inputs */ /* Adds better alignment for textarea inputs */
&:has(textarea.mat-mdc-input-element) { &:has(textarea.mat-mdc-input-element) {
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
.mat-mdc-form-field-flex { .mat-mdc-form-field-flex {
.mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-text-prefix, .mat-mdc-form-field-text-prefix,
.mat-mdc-form-field-icon-suffix, .mat-mdc-form-field-icon-suffix,
@ -652,18 +621,14 @@
/* Rounded */ /* Rounded */
&.fuse-mat-rounded { &.fuse-mat-rounded {
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
border-radius: 24px; border-radius: 24px;
} }
/* Emphasized affix */ /* Emphasized affix */
&.fuse-mat-emphasized-affix { &.fuse-mat-emphasized-affix {
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
.mat-mdc-form-field-flex { .mat-mdc-form-field-flex {
.mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-text-prefix { .mat-mdc-form-field-text-prefix {
border-radius: 24px 0 0 24px; border-radius: 24px 0 0 24px;
@ -684,7 +649,9 @@
margin-right: 4px; margin-right: 4px;
} }
> *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) { > *:not(.mat-icon):not(.mat-mdc-icon-button):not(
.mat-mdc-select
):not(.mat-datepicker-toggle) {
margin-right: 12px; margin-right: 12px;
} }
} }
@ -709,7 +676,9 @@
margin-left: 4px !important; margin-left: 4px !important;
} }
> *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) { > *:not(.mat-icon):not(.mat-mdc-icon-button):not(
.mat-mdc-select
):not(.mat-datepicker-toggle) {
margin-left: 12px !important; margin-left: 12px !important;
} }
} }
@ -720,16 +689,12 @@
/* Dense */ /* Dense */
&.fuse-mat-dense { &.fuse-mat-dense {
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
.mat-mdc-form-field-flex { .mat-mdc-form-field-flex {
.mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-text-prefix, .mat-mdc-form-field-text-prefix,
.mat-mdc-form-field-icon-suffix, .mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-text-suffix { .mat-mdc-form-field-text-suffix {
.mat-mdc-icon-button { .mat-mdc-icon-button {
width: 32px !important; width: 32px !important;
min-width: 32px; min-width: 32px;
@ -740,7 +705,6 @@
.mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-text-prefix { .mat-mdc-form-field-text-prefix {
> .mat-mdc-icon-button { > .mat-mdc-icon-button {
margin-left: -6px; margin-left: -6px;
margin-right: 12px; margin-right: 12px;
@ -749,7 +713,6 @@
.mat-mdc-form-field-icon-suffix, .mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-text-suffix { .mat-mdc-form-field-text-suffix {
> .mat-mdc-icon-button { > .mat-mdc-icon-button {
margin-left: 12px; margin-left: 12px;
margin-right: -6px; margin-right: -6px;
@ -769,11 +732,8 @@
/* Adds better alignment for textarea inputs */ /* Adds better alignment for textarea inputs */
&:has(textarea.mat-mdc-input-element) { &:has(textarea.mat-mdc-input-element) {
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
.mat-mdc-form-field-flex { .mat-mdc-form-field-flex {
.mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-text-prefix, .mat-mdc-form-field-text-prefix,
.mat-mdc-form-field-icon-suffix, .mat-mdc-form-field-icon-suffix,
@ -786,18 +746,14 @@
/* Rounded */ /* Rounded */
&.fuse-mat-rounded { &.fuse-mat-rounded {
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
border-radius: 20px; border-radius: 20px;
} }
/* Emphasized affix */ /* Emphasized affix */
&.fuse-mat-emphasized-affix { &.fuse-mat-emphasized-affix {
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
.mat-mdc-form-field-flex { .mat-mdc-form-field-flex {
.mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-text-prefix { .mat-mdc-form-field-text-prefix {
border-radius: 20px 0 0 20px !important; border-radius: 20px 0 0 20px !important;
@ -815,11 +771,8 @@
/* Emphasized affix */ /* Emphasized affix */
&.fuse-mat-emphasized-affix { &.fuse-mat-emphasized-affix {
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
.mat-mdc-form-field-flex { .mat-mdc-form-field-flex {
.mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-text-prefix { .mat-mdc-form-field-text-prefix {
align-self: stretch !important; align-self: stretch !important;
@ -845,7 +798,9 @@
margin-right: 8px; margin-right: 8px;
} }
> *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) { > *:not(.mat-icon):not(.mat-mdc-icon-button):not(
.mat-mdc-select
):not(.mat-datepicker-toggle) {
margin-right: 16px; margin-right: 16px;
} }
} }
@ -875,7 +830,9 @@
margin-left: 8px; margin-left: 8px;
} }
> *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) { > *:not(.mat-icon):not(.mat-mdc-icon-button):not(
.mat-mdc-select
):not(.mat-datepicker-toggle) {
margin-left: 16px; margin-left: 16px;
} }
} }
@ -891,11 +848,8 @@
/* with Textarea */ /* with Textarea */
&:has(textarea.mat-mdc-input-element) { &:has(textarea.mat-mdc-input-element) {
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
.mat-mdc-form-field-flex { .mat-mdc-form-field-flex {
.mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-text-prefix, .mat-mdc-form-field-text-prefix,
.mat-mdc-form-field-icon-suffix, .mat-mdc-form-field-icon-suffix,
@ -909,7 +863,6 @@
/* Bolder border width */ /* Bolder border width */
&.fuse-mat-bold { &.fuse-mat-bold {
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
border-width: 2px !important; border-width: 2px !important;
} }
@ -918,10 +871,8 @@
/* "outline" appearance */ /* "outline" appearance */
.mat-mdc-form-field.mat-form-field-appearance-outline { .mat-mdc-form-field.mat-form-field-appearance-outline {
/* Invalid */ /* Invalid */
&.mat-form-field-invalid { &.mat-form-field-invalid {
.mdc-notched-outline__leading, .mdc-notched-outline__leading,
.mdc-notched-outline__notch, .mdc-notched-outline__notch,
.mdc-notched-outline__trailing { .mdc-notched-outline__trailing {
@ -931,10 +882,8 @@
/* Focused */ /* Focused */
&.mat-focused:not(.mat-form-field-invalid) { &.mat-focused:not(.mat-form-field-invalid) {
/* Primary */ /* Primary */
&.mat-primary { &.mat-primary {
.mdc-notched-outline__leading, .mdc-notched-outline__leading,
.mdc-notched-outline__notch, .mdc-notched-outline__notch,
.mdc-notched-outline__trailing { .mdc-notched-outline__trailing {
@ -944,7 +893,6 @@
/* Accent */ /* Accent */
&.mat-accent { &.mat-accent {
.mdc-notched-outline__leading, .mdc-notched-outline__leading,
.mdc-notched-outline__notch, .mdc-notched-outline__notch,
.mdc-notched-outline__trailing { .mdc-notched-outline__trailing {
@ -954,13 +902,9 @@
} }
&:not(.mat-focused):not(.mat-form-field-invalid) { &:not(.mat-focused):not(.mat-form-field-invalid) {
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
.mat-mdc-form-field-flex { .mat-mdc-form-field-flex {
.mdc-notched-outline { .mdc-notched-outline {
.mdc-notched-outline__leading, .mdc-notched-outline__leading,
.mdc-notched-outline__notch, .mdc-notched-outline__notch,
.mdc-notched-outline__trailing { .mdc-notched-outline__trailing {
@ -974,11 +918,8 @@
/* Remove the extra border on the right side of the notch */ /* Remove the extra border on the right side of the notch */
/* Tailwind's global border setter causes this issue */ /* Tailwind's global border setter causes this issue */
.mat-mdc-text-field-wrapper { .mat-mdc-text-field-wrapper {
.mat-mdc-form-field-flex { .mat-mdc-form-field-flex {
.mdc-notched-outline { .mdc-notched-outline {
.mdc-notched-outline__notch { .mdc-notched-outline__notch {
border-right-style: none !important; border-right-style: none !important;
} }
@ -991,7 +932,6 @@
/* @ Datepicker /* @ Datepicker
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* @ Icon /* @ Icon
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@ -1012,7 +952,6 @@
/* @ Inputs /* @ Inputs
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
.mat-mdc-input-element { .mat-mdc-input-element {
&::placeholder { &::placeholder {
transition: none !important; transition: none !important;
@apply text-hint #{'!important'}; @apply text-hint #{'!important'};
@ -1036,9 +975,7 @@
/* Invalid */ /* Invalid */
.mat-form-field-invalid { .mat-form-field-invalid {
.mat-mdc-input-element { .mat-mdc-input-element {
/* Placeholder color */ /* Placeholder color */
&::placeholder { &::placeholder {
@apply text-warn #{'!important'}; @apply text-warn #{'!important'};
@ -1065,7 +1002,6 @@
min-width: 144px !important; min-width: 144px !important;
.mat-mdc-menu-content { .mat-mdc-menu-content {
.mat-mdc-menu-item { .mat-mdc-menu-item {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1100,7 +1036,6 @@
/* @ Paginator /* @ Paginator
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
.mat-mdc-paginator { .mat-mdc-paginator {
.mat-mdc-paginator-container { .mat-mdc-paginator-container {
padding: 8px 16px; padding: 8px 16px;
justify-content: space-between; justify-content: space-between;
@ -1160,7 +1095,6 @@
} }
.mat-mdc-select-trigger { .mat-mdc-select-trigger {
.mat-mdc-select-value { .mat-mdc-select-value {
position: relative; position: relative;
display: flex; display: flex;
@ -1191,14 +1125,12 @@
/* @ Slide Toggle /* @ Slide Toggle
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* @ Snack bar /* @ Snack bar
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
.mat-mdc-snack-bar-container { .mat-mdc-snack-bar-container {
.mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) { .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
color: #FFFFFF !important; color: #ffffff !important;
.dark & { .dark & {
color: #000000 !important; color: #000000 !important;
@ -1206,12 +1138,10 @@
} }
} }
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* @ Stepper /* @ Stepper
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
.mat-step-icon { .mat-step-icon {
/* Do not override the mat-icon color */ /* Do not override the mat-icon color */
.mat-icon { .mat-icon {
color: currentColor !important; color: currentColor !important;
@ -1227,7 +1157,6 @@
/* @ Table /* @ Table
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
.mat-mdc-table { .mat-mdc-table {
.mdc-data-table__row:not(.mdc-data-table__row--selected):hover { .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
background: none !important; background: none !important;
} }
@ -1237,10 +1166,8 @@
/* @ Tabs /* @ Tabs
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
.mat-mdc-tab-group { .mat-mdc-tab-group {
/* No header */ /* No header */
&.fuse-mat-no-header { &.fuse-mat-no-header {
.mat-mdc-tab-header { .mat-mdc-tab-header {
height: 0 !important; height: 0 !important;
max-height: 0 !important; max-height: 0 !important;
@ -1251,9 +1178,7 @@
} }
&:not(.mat-background-primary):not(.mat-background-accent) { &:not(.mat-background-primary):not(.mat-background-accent) {
.mat-mdc-tab-header { .mat-mdc-tab-header {
.mat-mdc-tab-label-container { .mat-mdc-tab-label-container {
box-shadow: inset 0 -1px var(--fuse-border); box-shadow: inset 0 -1px var(--fuse-border);
} }
@ -1261,7 +1186,6 @@
} }
.mat-mdc-tab-header { .mat-mdc-tab-header {
.mat-mdc-tab-label-container { .mat-mdc-tab-label-container {
margin: 0 24px; margin: 0 24px;
} }
@ -1283,10 +1207,8 @@ textarea.mat-mdc-input-element {
/* @ Toolbar /* @ Toolbar
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
.mat-toolbar { .mat-toolbar {
/* Apply primary contrast color */ /* Apply primary contrast color */
&.mat-primary { &.mat-primary {
.mat-icon { .mat-icon {
@apply text-on-primary #{'!important'}; @apply text-on-primary #{'!important'};
} }
@ -1310,7 +1232,6 @@ textarea.mat-mdc-input-element {
/* Apply accent contrast color */ /* Apply accent contrast color */
&.mat-accent { &.mat-accent {
.mat-icon { .mat-icon {
@apply text-on-accent #{'!important'}; @apply text-on-accent #{'!important'};
} }
@ -1334,7 +1255,6 @@ textarea.mat-mdc-input-element {
/* Apply warn contrast color */ /* Apply warn contrast color */
&.mat-warn { &.mat-warn {
.mat-icon { .mat-icon {
@apply text-on-warn #{'!important'}; @apply text-on-warn #{'!important'};
} }

21
src/@fuse/styles/overrides/highlightjs.scss
View File

@ -3,36 +3,35 @@
/* ----------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------- */
code[class*='language-'], code[class*='language-'],
pre[class*='language-'] { pre[class*='language-'] {
.hljs-comment, .hljs-comment,
.hljs-quote { .hljs-quote {
color: #8B9FC1; color: #8b9fc1;
font-style: italic; font-style: italic;
} }
.hljs-doctag, .hljs-doctag,
.hljs-keyword, .hljs-keyword,
.hljs-formula { .hljs-formula {
color: #22D3EE; color: #22d3ee;
} }
.hljs-name { .hljs-name {
color: #E879F9; color: #e879f9;
} }
.hljs-tag { .hljs-tag {
color: #BAE6FD; color: #bae6fd;
} }
.hljs-section, .hljs-section,
.hljs-selector-tag, .hljs-selector-tag,
.hljs-deletion, .hljs-deletion,
.hljs-subst { .hljs-subst {
color: #F87F71; color: #f87f71;
} }
.hljs-literal { .hljs-literal {
color: #36BEFF; color: #36beff;
} }
.hljs-string, .hljs-string,
@ -40,12 +39,12 @@ pre[class*='language-'] {
.hljs-addition, .hljs-addition,
.hljs-attribute, .hljs-attribute,
.hljs-meta-string { .hljs-meta-string {
color: #BEF264; color: #bef264;
} }
.hljs-built_in, .hljs-built_in,
.hljs-class .hljs-title { .hljs-class .hljs-title {
color: #FFD374; color: #ffd374;
} }
.hljs-attr, .hljs-attr,
@ -56,7 +55,7 @@ pre[class*='language-'] {
.hljs-selector-attr, .hljs-selector-attr,
.hljs-selector-pseudo, .hljs-selector-pseudo,
.hljs-number { .hljs-number {
color: #22D3EE; color: #22d3ee;
} }
.hljs-symbol, .hljs-symbol,
@ -65,7 +64,7 @@ pre[class*='language-'] {
.hljs-meta, .hljs-meta,
.hljs-selector-id, .hljs-selector-id,
.hljs-title { .hljs-title {
color: #E879F9; color: #e879f9;
} }
.hljs-emphasis { .hljs-emphasis {

1
src/@fuse/styles/overrides/perfect-scrollbar.scss
View File

@ -8,7 +8,6 @@
&.ps--focus, &.ps--focus,
&.ps--scrolling-x, &.ps--scrolling-x,
&.ps--scrolling-y { &.ps--scrolling-y {
> .ps__rail-x, > .ps__rail-x,
> .ps__rail-y { > .ps__rail-y {
opacity: 1; opacity: 1;

17
src/@fuse/styles/overrides/quill.scss
View File

@ -17,9 +17,7 @@
} }
.ql-picker { .ql-picker {
&.ql-expanded { &.ql-expanded {
.ql-picker-label { .ql-picker-label {
@apply border-gray-300; @apply border-gray-300;
@ -30,7 +28,7 @@
.ql-picker-options { .ql-picker-options {
z-index: 10 !important; z-index: 10 !important;
@apply border-gray-300 bg-card; @apply bg-card border-gray-300;
.dark & { .dark & {
@apply border-gray-500; @apply border-gray-500;
@ -43,7 +41,6 @@
} }
.ql-picker-options { .ql-picker-options {
.ql-picker-item { .ql-picker-item {
@apply text-default; @apply text-default;
} }
@ -103,10 +100,10 @@
} }
.ql-tooltip { .ql-tooltip {
@apply px-3 py-1 shadow-sm rounded-md bg-gray-100 border-gray-300; @apply rounded-md border-gray-300 bg-gray-100 px-3 py-1 shadow-sm;
.dark & { .dark & {
@apply shadow-lg bg-gray-700 border-gray-700 #{'!important'}; @apply border-gray-700 bg-gray-700 shadow-lg #{'!important'};
} }
// Label // Label
@ -116,10 +113,10 @@
.ql-action, .ql-action,
.ql-remove { .ql-remove {
@apply text-primary border-gray-300; @apply border-gray-300 text-primary;
.dark & { .dark & {
@apply text-primary-400 border-gray-300; @apply border-gray-300 text-primary-400;
} }
} }
@ -132,10 +129,10 @@
} }
input { input {
@apply rounded-sm text-default bg-white border-gray-300 #{'!important'}; @apply text-default rounded-sm border-gray-300 bg-white #{'!important'};
.dark & { .dark & {
@apply bg-gray-700 border-gray-500 #{'!important'}; @apply border-gray-500 bg-gray-700 #{'!important'};
} }
} }
} }

12
src/@fuse/styles/tailwind.scss
View File

@ -3,7 +3,6 @@
/* This injects additional styles into Tailwind's base styles layer. */ /* This injects additional styles into Tailwind's base styles layer. */
@layer base { @layer base {
* { * {
/* Text rendering */ /* Text rendering */
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -64,7 +63,9 @@
} }
/* Set the background and foreground colors */ /* Set the background and foreground colors */
body, .dark, .light { body,
.dark,
.light {
@apply text-default bg-default #{'!important'}; @apply text-default bg-default #{'!important'};
} }
@ -82,9 +83,7 @@
/* Style scrollbars on platforms other than MacOS and iOS */ /* Style scrollbars on platforms other than MacOS and iOS */
@media only screen and (min-width: 960px) { @media only screen and (min-width: 960px) {
body:not(.os-mac) { body:not(.os-mac) {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
@ -127,13 +126,14 @@
/* Print styles */ /* Print styles */
@media print { @media print {
/* Make the base font size smaller for print so everything is scaled nicely */ /* Make the base font size smaller for print so everything is scaled nicely */
html { html {
font-size: 12px !important; font-size: 12px !important;
} }
body, .dark, .light { body,
.dark,
.light {
background: none !important; background: none !important;
} }
} }

303
src/@fuse/styles/themes.scss
View File

@ -1,154 +1,247 @@
@use "sass:map"; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use "user-themes" as userThemes; @use 'user-themes' as userThemes;
/* Set the base colors for light themes */ /* Set the base colors for light themes */
$light-base: ( $light-base: (
foreground: ( foreground: (
base: #000000, base: #000000,
divider: #E2E8F0, /* slate.200 */ divider: #e2e8f0,
dividers: #E2E8F0, /* slate.200 */ /* slate.200 */ dividers: #e2e8f0,
disabled: #94A3B8, /* slate.400 */ /* slate.200 */ disabled: #94a3b8,
disabled-button: #94A3B8, /* slate.400 */ /* slate.400 */ disabled-button: #94a3b8,
disabled-text: #94A3B8, /* slate.400 */ /* slate.400 */ disabled-text: #94a3b8,
elevation: #000000, /* slate.400 */ elevation: #000000,
hint-text: #94A3B8, /* slate.400 */ hint-text: #94a3b8,
secondary-text: #64748B, /* slate.500 */ /* slate.400 */ secondary-text: #64748b,
icon: #64748B, /* slate.500 */ /* slate.500 */ icon: #64748b,
icons: #64748B, /* slate.500 */ /* slate.500 */ icons: #64748b,
mat-icon: #64748B, /* slate.500 */ /* slate.500 */ mat-icon: #64748b,
text: #1E293B, /* slate.800 */ /* slate.500 */ text: #1e293b,
slider-min: #1E293B, /* slate.800 */ /* slate.800 */ slider-min: #1e293b,
slider-off: #CBD5E1, /* slate.300 */ /* slate.800 */ slider-off: #cbd5e1,
slider-off-active: #94A3B8 /* slate.400 */ /* slate.300 */ slider-off-active: #94a3b8 /* slate.400 */,
), ),
background: ( background: (
status-bar: #CBD5E1, /* slate.300 */ status-bar: #cbd5e1,
app-bar: #FFFFFF, /* slate.300 */ app-bar: #ffffff,
background: #F1F5F9, /* slate.100 */ background: #f1f5f9,
hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */ /* slate.100 */ hover: rgba(148, 163, 184, 0.12),
card: #FFFFFF, /* slate.400 + opacity */ card: #ffffff,
dialog: #FFFFFF, dialog: #ffffff,
disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */ disabled-button: rgba(148, 163, 184, 0.38),
raised-button: #FFFFFF, /* slate.400 + opacity */ raised-button: #ffffff,
focused-button: #64748B, /* slate.500 */ focused-button: #64748b,
selected-button: #E2E8F0, /* slate.200 */ /* slate.500 */ selected-button: #e2e8f0,
selected-disabled-button: #E2E8F0, /* slate.200 */ /* slate.200 */ selected-disabled-button: #e2e8f0,
disabled-button-toggle: #CBD5E1, /* slate.300 */ /* slate.200 */ disabled-button-toggle: #cbd5e1,
unselected-chip: #E2E8F0, /* slate.200 */ /* slate.300 */ unselected-chip: #e2e8f0,
disabled-list-option: #CBD5E1, /* slate.300 */ /* slate.200 */ disabled-list-option: #cbd5e1,
tooltip: #1E293B /* slate.800 */ /* slate.300 */ tooltip: #1e293b /* slate.800 */,
) ),
); );
/* Set the base colors for dark themes */ /* Set the base colors for dark themes */
$dark-base: ( $dark-base: (
foreground: ( foreground: (
base: #FFFFFF, base: #ffffff,
divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */ divider: rgba(241, 245, 249, 0.12),
dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */ /* slate.100 + opacity */ dividers: rgba(241, 245, 249, 0.12),
disabled: #475569, /* slate.600 */ /* slate.100 + opacity */ disabled: #475569,
disabled-button: #1E293B, /* slate.800 */ /* slate.600 */ disabled-button: #1e293b,
disabled-text: #475569, /* slate.600 */ /* slate.800 */ disabled-text: #475569,
elevation: #000000, /* slate.600 */ elevation: #000000,
hint-text: #64748B, /* slate.500 */ hint-text: #64748b,
secondary-text: #94A3B8, /* slate.400 */ /* slate.500 */ secondary-text: #94a3b8,
icon: #F1F5F9, /* slate.100 */ /* slate.400 */ icon: #f1f5f9,
icons: #F1F5F9, /* slate.100 */ /* slate.100 */ icons: #f1f5f9,
mat-icon: #94A3B8, /* slate.400 */ /* slate.100 */ mat-icon: #94a3b8,
text: #FFFFFF, /* slate.400 */ text: #ffffff,
slider-min: #FFFFFF, slider-min: #ffffff,
slider-off: #64748B, /* slate.500 */ slider-off: #64748b,
slider-off-active: #94A3B8 /* slate.400 */ /* slate.500 */ slider-off-active: #94a3b8 /* slate.400 */,
), ),
background: ( background: (
status-bar: #0F172A, /* slate.900 */ status-bar: #0f172a,
app-bar: #0F172A, /* slate.900 */ /* slate.900 */ app-bar: #0f172a,
background: #0F172A, /* slate.900 */ /* slate.900 */ background: #0f172a,
hover: rgba(255, 255, 255, 0.05), /* slate.900 */ hover: rgba(255, 255, 255, 0.05),
card: #1E293B, /* slate.800 */ card: #1e293b,
dialog: #1E293B, /* slate.800 */ /* slate.800 */ dialog: #1e293b,
disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */ /* slate.800 */ disabled-button: rgba(15, 23, 42, 0.38),
raised-button: #0F172A, /* slate.900 */ /* slate.900 + opacity */ raised-button: #0f172a,
focused-button: #E2E8F0, /* slate.200 */ /* slate.900 */ focused-button: #e2e8f0,
selected-button: rgba(255, 255, 255, 0.05), /* slate.200 */ selected-button: rgba(255, 255, 255, 0.05),
selected-disabled-button: #1E293B, /* slate.800 */ selected-disabled-button: #1e293b,
disabled-button-toggle: #0F172A, /* slate.900 */ /* slate.800 */ disabled-button-toggle: #0f172a,
unselected-chip: #475569, /* slate.600 */ /* slate.900 */ unselected-chip: #475569,
disabled-list-option: #E2E8F0, /* slate.200 */ /* slate.600 */ disabled-list-option: #e2e8f0,
tooltip: #64748B /* slate.500 */ /* slate.200 */ tooltip: #64748b /* slate.500 */,
) ),
); );
/* Include the core Angular Material styles */ /* Include the core Angular Material styles */
@include mat.core(); @include mat.core();
/* Create a base theme without any color to set the density and typography */ /* Create a base theme without any color to set the density and typography */
@include mat.all-component-themes(( @include mat.all-component-themes(
color: null, (
density: 0, color: null,
typography: mat.m2-define-typography-config( density: 0,
$font-family: theme('fontFamily.sans'), typography:
$headline-1: mat.m2-define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')), mat.m2-define-typography-config(
$headline-2: mat.m2-define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')), $font-family: theme('fontFamily.sans'),
$headline-3: mat.m2-define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')), $headline-1:
$headline-4: mat.m2-define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')), mat.m2-define-typography-level(
$headline-5: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')), 1.875rem,
$headline-6: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')), 2.25rem,
$subtitle-1: mat.m2-define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')), 800,
$subtitle-2: mat.m2-define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')), theme('fontFamily.sans')
$body-1: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')), ),
$body-2: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')), $headline-2:
$caption: mat.m2-define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')), mat.m2-define-typography-level(
$button: mat.m2-define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')), 1.25rem,
$overline: mat.m2-define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans')) 1.75rem,
700,
theme('fontFamily.sans')
),
$headline-3:
mat.m2-define-typography-level(
1.125rem,
1.75rem,
600,
theme('fontFamily.sans')
),
$headline-4:
mat.m2-define-typography-level(
0.875rem,
1.25rem,
600,
theme('fontFamily.sans')
),
$headline-5:
mat.m2-define-typography-level(
0.875rem,
1.5rem,
400,
theme('fontFamily.sans')
),
$headline-6:
mat.m2-define-typography-level(
0.875rem,
1.5rem,
400,
theme('fontFamily.sans')
),
$subtitle-1:
mat.m2-define-typography-level(
1rem,
1.75rem,
400,
theme('fontFamily.sans')
),
$subtitle-2:
mat.m2-define-typography-level(
0.875rem,
1.25rem,
600,
theme('fontFamily.sans')
),
$body-1:
mat.m2-define-typography-level(
0.875rem,
1.5rem,
400,
theme('fontFamily.sans')
),
$body-2:
mat.m2-define-typography-level(
0.875rem,
1.5rem,
400,
theme('fontFamily.sans')
),
$caption:
mat.m2-define-typography-level(
0.75rem,
1rem,
400,
theme('fontFamily.sans')
),
$button:
mat.m2-define-typography-level(
0.875rem,
0.875rem,
500,
theme('fontFamily.sans')
),
$overline:
mat.m2-define-typography-level(
0.75rem,
2rem,
500,
theme('fontFamily.sans')
)
),
) )
)); );
/* Loop through user themes and generate Angular Material themes */ /* Loop through user themes and generate Angular Material themes */
@each $name, $theme in userThemes.$user-themes { @each $name, $theme in userThemes.$user-themes {
/* Generate the palettes */ /* Generate the palettes */
$palettes: (); $palettes: ();
@each $name in (primary, accent, warn) { @each $name in (primary, accent, warn) {
/* Define the Angular Material theme */ /* Define the Angular Material theme */
$palette: mat.m2-define-palette(map.get($theme, $name)); $palette: mat.m2-define-palette(map.get($theme, $name));
/* Replace the default colors on the defined Material palette */ /* Replace the default colors on the defined Material palette */
$palette: map.merge($palette, ( $palette: map.merge(
default: map.get(map.get($theme, $name), DEFAULT), $palette,
lighter: map.get(map.get($theme, $name), 100), (
darker: map.get(map.get($theme, $name), 700), default: map.get(map.get($theme, $name), DEFAULT),
text: map.get(map.get($theme, $name), DEFAULT), lighter: map.get(map.get($theme, $name), 100),
default-contrast: map.get(map.get(map.get($theme, $name), contrast), DEFAULT), darker: map.get(map.get($theme, $name), 700),
lighter-contrast: map.get(map.get(map.get($theme, $name), contrast), 100), text: map.get(map.get($theme, $name), DEFAULT),
darker-contrast: map.get(map.get(map.get($theme, $name), contrast), 700) default-contrast:
)); map.get(map.get(map.get($theme, $name), contrast), DEFAULT),
lighter-contrast:
map.get(map.get(map.get($theme, $name), contrast), 100),
darker-contrast:
map.get(map.get(map.get($theme, $name), contrast), 700),
)
);
$palettes: map.merge($palettes, (#{$name}: $palette)); $palettes: map.merge($palettes, (#{$name}: $palette));
} }
/* Define a light & dark Angular Material theme with the generated palettes */ /* Define a light & dark Angular Material theme with the generated palettes */
$light-theme: mat.m2-define-light-theme(( $light-theme: mat.m2-define-light-theme(
color: $palettes (
)); color: $palettes,
)
);
$dark-theme: mat.m2-define-dark-theme(( $dark-theme: mat.m2-define-dark-theme(
color: $palettes (
)); color: $palettes,
)
);
/* Merge the custom base colors with the generated themes */ /* Merge the custom base colors with the generated themes */
$light-theme-colors: map.merge(map.get($light-theme, color), $light-base); $light-theme-colors: map.merge(map.get($light-theme, color), $light-base);
$light-theme: map.merge( $light-theme: map.merge(
(color: $light-theme-colors), (
$light-theme-colors color: $light-theme-colors,
),
$light-theme-colors
); );
$dark-theme-colors: map.merge(map.get($dark-theme, color), $dark-base); $dark-theme-colors: map.merge(map.get($dark-theme, color), $dark-base);
$dark-theme: map.merge( $dark-theme: map.merge(
(color: $dark-theme-colors), (
$dark-theme-colors color: $dark-theme-colors,
),
$dark-theme-colors
); );
/* Generate and encapsulate Angular Material themes */ /* Generate and encapsulate Angular Material themes */

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

@ -1,50 +1,47 @@
const plugin = require('tailwindcss/plugin'); const plugin = require('tailwindcss/plugin');
module.exports = plugin( module.exports = plugin(
({ ({ matchUtilities, theme }) => {
matchUtilities,
theme,
}) =>
{
matchUtilities( matchUtilities(
{ {
'icon-size': (value) => ({ 'icon-size': (value) => ({
width : value, width: value,
height : value, height: value,
minWidth : value, minWidth: value,
minHeight : value, minHeight: value,
fontSize : value, fontSize: value,
lineHeight: value, lineHeight: value,
[`svg`] : { [`svg`]: {
width : value, width: value,
height: value, height: value,
}, },
}), }),
}, },
{ {
values: theme('iconSize'), values: theme('iconSize'),
}); }
);
}, },
{ {
theme: { theme: {
iconSize: { iconSize: {
3 : '0.75rem', 3: '0.75rem',
3.5: '0.875rem', 3.5: '0.875rem',
4 : '1rem', 4: '1rem',
4.5: '1.125rem', 4.5: '1.125rem',
5 : '1.25rem', 5: '1.25rem',
6 : '1.5rem', 6: '1.5rem',
7 : '1.75rem', 7: '1.75rem',
8 : '2rem', 8: '2rem',
10 : '2.5rem', 10: '2.5rem',
12 : '3rem', 12: '3rem',
14 : '3.5rem', 14: '3.5rem',
16 : '4rem', 16: '4rem',
18 : '4.5rem', 18: '4.5rem',
20 : '5rem', 20: '5rem',
22 : '5.5rem', 22: '5.5rem',
24 : '6rem', 24: '6rem',
}, },
}, },
}, }
); );

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

@ -4,9 +4,14 @@ const fs = require('fs');
const path = require('path'); const path = require('path');
const colors = require('tailwindcss/colors'); const colors = require('tailwindcss/colors');
const plugin = require('tailwindcss/plugin'); const plugin = require('tailwindcss/plugin');
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default; const flattenColorPalette =
const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts'))); require('tailwindcss/lib/util/flattenColorPalette').default;
const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-map'))); const generateContrasts = require(
path.resolve(__dirname, '../utils/generate-contrasts')
);
const jsonToSassMap = require(
path.resolve(__dirname, '../utils/json-to-sass-map')
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Utilities // @ Utilities
@ -19,188 +24,277 @@ const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-ma
* *
* @param theme * @param theme
*/ */
const normalizeTheme = (theme) => const normalizeTheme = (theme) => {
{ return _.fromPairs(
return _.fromPairs(_.map(_.omitBy(theme, (palette, paletteName) => paletteName.startsWith('on') || _.isEmpty(palette)), _.map(
(palette, paletteName) => [ _.omitBy(
paletteName, theme,
{ (palette, paletteName) =>
...palette, paletteName.startsWith('on') || _.isEmpty(palette)
DEFAULT: palette['DEFAULT'] || palette[500], ),
}, (palette, paletteName) => [
], paletteName,
)); {
...palette,
DEFAULT: palette['DEFAULT'] || palette[500],
},
]
)
);
}; };
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ FUSE TailwindCSS Main Plugin // @ FUSE TailwindCSS Main Plugin
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const theming = plugin.withOptions((options) => ({ const theming = plugin.withOptions(
addComponents, (options) =>
e, ({ addComponents, e, theme }) => {
theme, /**
}) => * Create user themes object by going through the provided themes and
{ * merging them with the provided "default" so, we can have a complete
/** * set of color palettes for each user theme.
* Create user themes object by going through the provided themes and */
* merging them with the provided "default" so, we can have a complete const userThemes = _.fromPairs(
* set of color palettes for each user theme. _.map(options.themes, (theme, themeName) => [
*/ themeName,
const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [ _.defaults({}, theme, options.themes['default']),
themeName, ])
_.defaults({}, theme, options.themes['default']), );
]));
/** /**
* Normalize the themes and assign it to the themes object. This will * Normalize the themes and assign it to the themes object. This will
* be the final object that we create a SASS map from * be the final object that we create a SASS map from
*/ */
let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [ let themes = _.fromPairs(
themeName, _.map(userThemes, (theme, themeName) => [
normalizeTheme(theme), themeName,
])); normalizeTheme(theme),
])
);
/** /**
* Go through the themes to generate the contrasts and filter the * Go through the themes to generate the contrasts and filter the
* palettes to only have "primary", "accent" and "warn" objects. * palettes to only have "primary", "accent" and "warn" objects.
*/ */
themes = _.fromPairs(_.map(themes, (theme, themeName) => [ themes = _.fromPairs(
themeName, _.map(themes, (theme, themeName) => [
_.pick( themeName,
_.fromPairs(_.map(theme, (palette, paletteName) => [ _.pick(
paletteName, _.fromPairs(
_.map(theme, (palette, paletteName) => [
paletteName,
{
...palette,
contrast: _.fromPairs(
_.map(
generateContrasts(palette),
(color, hue) => [
hue,
_.get(userThemes[themeName], [
`on-${paletteName}`,
hue,
]) || color,
]
)
),
},
])
),
['primary', 'accent', 'warn']
),
])
);
/**
* Go through the themes and attach appropriate class selectors so,
* we can use them to encapsulate each theme.
*/
themes = _.fromPairs(
_.map(themes, (theme, themeName) => [
themeName,
{ {
...palette, selector: `".theme-${themeName}"`,
contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [ ...theme,
hue,
_.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color,
])),
}, },
])), ])
['primary', 'accent', 'warn'], );
),
]));
/** /* Generate the SASS map using the themes object */
* Go through the themes and attach appropriate class selectors so, const sassMap = jsonToSassMap(
* we can use them to encapsulate each theme. JSON.stringify({ 'user-themes': themes })
*/ );
themes = _.fromPairs(_.map(themes, (theme, themeName) => [
themeName,
{
selector: `".theme-${themeName}"`,
...theme,
},
]));
/* Generate the SASS map using the themes object */ /* Get the file path */
const sassMap = jsonToSassMap(JSON.stringify({'user-themes': themes})); const filename = path.resolve(
__dirname,
'../../styles/user-themes.scss'
);
/* Get the file path */ /* Read the file and get its data */
const filename = path.resolve(__dirname, ('../../styles/user-themes.scss')); let data;
try {
/* Read the file and get its data */ data = fs.readFileSync(filename, { encoding: 'utf8' });
let data; } catch (err) {
try
{
data = fs.readFileSync(filename, {encoding: 'utf8'});
}
catch ( err )
{
console.error(err);
}
/* Write the file if the map has been changed */
if ( data !== sassMap )
{
try
{
fs.writeFileSync(filename, sassMap, {encoding: 'utf8'});
}
catch ( err )
{
console.error(err); console.error(err);
} }
}
/** /* Write the file if the map has been changed */
* Iterate through the user's themes and build Tailwind components containing if (data !== sassMap) {
* CSS Custom Properties using the colors from them. This allows switching try {
* themes by simply replacing a class name as well as nesting them. fs.writeFileSync(filename, sassMap, { encoding: 'utf8' });
*/ } catch (err) {
addComponents( console.error(err);
_.fromPairs(_.map(options.themes, (theme, themeName) => [ }
themeName === 'default' ? 'body, .theme-default' : `.theme-${e(themeName)}`, }
_.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
[
e(paletteName),
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(',')]]))),
])),
);
/** /**
* Generate scheme based css custom properties and utility classes * Iterate through the user's themes and build Tailwind components containing
*/ * CSS Custom Properties using the colors from them. This allows switching
const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) => * themes by simply replacing a class name as well as nesting them.
{ */
const isDark = colorScheme === 'dark'; addComponents(
const background = theme(`fuse.customProps.background.${colorScheme}`); _.fromPairs(
const foreground = theme(`fuse.customProps.foreground.${colorScheme}`); _.map(options.themes, (theme, themeName) => [
const lightSchemeSelectors = 'body.light, .light, .dark .light'; themeName === 'default'
const darkSchemeSelectors = 'body.dark, .dark, .light .dark'; ? 'body, .theme-default'
: `.theme-${e(themeName)}`,
_.fromPairs(
_.flatten(
_.map(
flattenColorPalette(
_.fromPairs(
_.flatten(
_.map(
normalizeTheme(theme),
(palette, paletteName) => [
[
e(paletteName),
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(','),
],
]
)
)
),
])
)
);
return { /**
[(isDark ? darkSchemeSelectors : lightSchemeSelectors)]: { * Generate scheme based css custom properties and utility classes
*/
const schemeCustomProps = _.map(
['light', 'dark'],
(colorScheme) => {
const isDark = colorScheme === 'dark';
const background = theme(
`fuse.customProps.background.${colorScheme}`
);
const foreground = theme(
`fuse.customProps.foreground.${colorScheme}`
);
const lightSchemeSelectors =
'body.light, .light, .dark .light';
const darkSchemeSelectors =
'body.dark, .dark, .light .dark';
/** return {
* If a custom property is not available, browsers will use [isDark ? darkSchemeSelectors : lightSchemeSelectors]: {
* the fallback value. In this case, we want to use '--is-dark' /**
* as the indicator of a dark theme so, we can use it like this: * If a custom property is not available, browsers will use
* background-color: var(--is-dark, red); * the fallback value. In this case, we want to use '--is-dark'
* * as the indicator of a dark theme so, we can use it like this:
* If we set '--is-dark' as "true" on dark themes, the above rule * background-color: var(--is-dark, red);
* won't work because of the said "fallback value" logic. Therefore, *
* we set the '--is-dark' to "false" on light themes and not set it * If we set '--is-dark' as "true" on dark themes, the above rule
* at all on dark themes so that the fallback value can be used on * won't work because of the said "fallback value" logic. Therefore,
* dark themes. * we set the '--is-dark' to "false" on light themes and not set it
* * at all on dark themes so that the fallback value can be used on
* On light themes, since '--is-dark' exists, the above rule will be * dark themes.
* interpolated as: *
* "background-color: false" * On light themes, since '--is-dark' exists, the above rule will be
* * interpolated as:
* On dark themes, since '--is-dark' doesn't exist, the fallback value * "background-color: false"
* will be used ('red' in this case) and the rule will be interpolated as: *
* "background-color: red" * On dark themes, since '--is-dark' doesn't exist, the fallback value
* * will be used ('red' in this case) and the rule will be interpolated as:
* It's easier to understand and remember like this. * "background-color: red"
*/ *
...(!isDark ? {'--is-dark': 'false'} : {}), * It's easier to understand and remember like this.
*/
...(!isDark ? { '--is-dark': 'false' } : {}),
/* Generate custom properties from customProps */ /* Generate custom properties from customProps */
..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))), ..._.fromPairs(
..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))), _.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(','),
],
])
)
),
},
};
}
);
const schemeUtilities = (() => const schemeUtilities = (() => {
{ /* Generate general styles & utilities */
/* Generate general styles & utilities */ return {};
return {}; })();
})();
addComponents(schemeCustomProps); addComponents(schemeCustomProps);
addComponents(schemeUtilities); addComponents(schemeUtilities);
}, },
(options) => (options) => {
{
return { return {
theme: { theme: {
extend: { extend: {
@ -209,58 +303,81 @@ const theming = plugin.withOptions((options) => ({
* are generated for them; "bg-primary", "text-on-primary", "bg-accent-600" etc. * are generated for them; "bg-primary", "text-on-primary", "bg-accent-600" etc.
* This will also allow using arbitrary values with them such as opacity and such. * This will also allow using arbitrary values with them such as opacity and such.
*/ */
colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [ colors: _.fromPairs(
[name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`], _.flatten(
[`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`], _.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>)`,
],
]
)
)
),
}, },
fuse : { fuse: {
customProps: { customProps: {
background: { background: {
light: { light: {
'bg-app-bar' : '#FFFFFF', 'bg-app-bar': '#FFFFFF',
'bg-card' : '#FFFFFF', 'bg-card': '#FFFFFF',
'bg-default' : colors.slate[100], 'bg-default': colors.slate[100],
'bg-dialog' : '#FFFFFF', 'bg-dialog': '#FFFFFF',
'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(), 'bg-hover': chroma(colors.slate[400])
.alpha(0.12)
.css(),
'bg-status-bar': colors.slate[300], 'bg-status-bar': colors.slate[300],
}, },
dark : { dark: {
'bg-app-bar' : colors.slate[900], 'bg-app-bar': colors.slate[900],
'bg-card' : colors.slate[800], 'bg-card': colors.slate[800],
'bg-default' : colors.slate[900], 'bg-default': colors.slate[900],
'bg-dialog' : colors.slate[800], 'bg-dialog': colors.slate[800],
'bg-hover' : 'rgba(255, 255, 255, 0.05)', 'bg-hover': 'rgba(255, 255, 255, 0.05)',
'bg-status-bar': colors.slate[900], 'bg-status-bar': colors.slate[900],
}, },
}, },
foreground: { foreground: {
light: { light: {
'text-default' : colors.slate[800], 'text-default': colors.slate[800],
'text-secondary': colors.slate[500], 'text-secondary': colors.slate[500],
'text-hint' : colors.slate[400], 'text-hint': colors.slate[400],
'text-disabled' : colors.slate[400], 'text-disabled': colors.slate[400],
'border' : colors.slate[200], border: colors.slate[200],
'divider' : colors.slate[200], divider: colors.slate[200],
'icon' : colors.slate[500], icon: colors.slate[500],
'mat-icon' : colors.slate[500], 'mat-icon': colors.slate[500],
}, },
dark : { dark: {
'text-default' : '#FFFFFF', 'text-default': '#FFFFFF',
'text-secondary': colors.slate[400], 'text-secondary': colors.slate[400],
'text-hint' : colors.slate[500], 'text-hint': colors.slate[500],
'text-disabled' : colors.slate[600], 'text-disabled': colors.slate[600],
'border' : chroma(colors.slate[100]).alpha(0.12).css(), border: chroma(colors.slate[100])
'divider' : chroma(colors.slate[100]).alpha(0.12).css(), .alpha(0.12)
'icon' : colors.slate[400], .css(),
'mat-icon' : colors.slate[400], divider: chroma(colors.slate[100])
.alpha(0.12)
.css(),
icon: colors.slate[400],
'mat-icon': colors.slate[400],
}, },
}, },
}, },
}, },
}, },
}; };
}, }
); );
module.exports = theming; module.exports = theming;

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