mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-15 04:45:12 +00:00
Compare commits
No commits in common. "demo" and "v19.0.0" have entirely different histories.
95
.eslintrc.json
Normal file
95
.eslintrc.json
Normal file
@ -0,0 +1,95 @@
|
||||
{
|
||||
"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
11
.prettierrc
@ -1,11 +0,0 @@
|
||||
{
|
||||
"printWidth": 80,
|
||||
"semi": true,
|
||||
"bracketSameLine": false,
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 4,
|
||||
"singleQuote": true,
|
||||
"bracketSpacing": true,
|
||||
"arrowParens": "always",
|
||||
"plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
Envato Standard License
|
||||
|
||||
Copyright (c) Withinpixels <hi@withinpixels.com>
|
||||
Copyright (c) Sercan Yemen <sercanyemen@gmail.com>
|
||||
|
||||
This project is protected by Envato's Standard License. For more information,
|
||||
check the official license page at [https://themeforest.net/licenses/standard](https://themeforest.net/licenses/standard)
|
||||
|
||||
@ -20,7 +20,7 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
|
||||
55
angular.json
55
angular.json
@ -15,26 +15,29 @@
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:application",
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/fuse",
|
||||
"index": "src/index.html",
|
||||
"browser": "src/main.ts",
|
||||
"polyfills": ["zone.js"],
|
||||
"main": "src/main.ts",
|
||||
"polyfills": [
|
||||
"zone.js"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"allowedCommonJsDependencies": [
|
||||
"apexcharts",
|
||||
"highlight.js",
|
||||
"crypto-js/enc-utf8",
|
||||
"crypto-js/hmac-sha256",
|
||||
"crypto-js/enc-base64",
|
||||
"quill-delta"
|
||||
"flat",
|
||||
"quill"
|
||||
],
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
},
|
||||
"src/favicon-16x16.png",
|
||||
"src/favicon-32x32.png",
|
||||
"src/assets",
|
||||
{
|
||||
"glob": "_redirects",
|
||||
"input": "src",
|
||||
@ -42,11 +45,11 @@
|
||||
}
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": ["src/@fuse/styles"]
|
||||
"includePaths": [
|
||||
"src/@fuse/styles"
|
||||
]
|
||||
},
|
||||
"styles": [
|
||||
"src/styles/splash-screen.css",
|
||||
"src/styles/inter.css",
|
||||
"src/@fuse/styles/tailwind.scss",
|
||||
"src/@fuse/styles/themes.scss",
|
||||
"src/styles/vendors.scss",
|
||||
@ -73,9 +76,12 @@
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
@ -84,30 +90,37 @@
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "fuse:build:production"
|
||||
"buildTarget": "fuse:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "fuse:build:development"
|
||||
"buildTarget": "fuse:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n"
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "fuse:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"polyfills": ["zone.js", "zone.js/testing"],
|
||||
"polyfills": [
|
||||
"zone.js",
|
||||
"zone.js/testing"
|
||||
],
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
}
|
||||
"src/favicon-16x16.png",
|
||||
"src/favicon-32x32.png",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles/styles.scss"
|
||||
],
|
||||
"styles": ["src/styles/styles.scss"],
|
||||
"scripts": []
|
||||
}
|
||||
}
|
||||
|
||||
23570
package-lock.json
generated
23570
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
83
package.json
83
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "fuse-angular",
|
||||
"version": "21.0.0",
|
||||
"version": "19.0.0",
|
||||
"description": "Fuse - Angular Admin Template and Starter Project",
|
||||
"author": "https://themeforest.net/user/srcn",
|
||||
"license": "https://themeforest.net/licenses/standard",
|
||||
@ -13,57 +13,54 @@
|
||||
"test": "ng test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "19.0.5",
|
||||
"@angular/cdk": "19.0.4",
|
||||
"@angular/common": "19.0.5",
|
||||
"@angular/compiler": "19.0.5",
|
||||
"@angular/core": "19.0.5",
|
||||
"@angular/forms": "19.0.5",
|
||||
"@angular/material": "19.0.4",
|
||||
"@angular/material-luxon-adapter": "19.0.4",
|
||||
"@angular/platform-browser": "19.0.5",
|
||||
"@angular/platform-browser-dynamic": "19.0.5",
|
||||
"@angular/router": "19.0.5",
|
||||
"@jsverse/transloco": "7.5.1",
|
||||
"apexcharts": "4.3.0",
|
||||
"crypto-js": "4.2.0",
|
||||
"highlight.js": "11.11.1",
|
||||
"@angular/animations": "17.0.3",
|
||||
"@angular/cdk": "17.0.1",
|
||||
"@angular/common": "17.0.3",
|
||||
"@angular/compiler": "17.0.3",
|
||||
"@angular/core": "17.0.3",
|
||||
"@angular/forms": "17.0.3",
|
||||
"@angular/material": "17.0.1",
|
||||
"@angular/material-luxon-adapter": "17.0.1",
|
||||
"@angular/platform-browser": "17.0.3",
|
||||
"@angular/platform-browser-dynamic": "17.0.3",
|
||||
"@angular/router": "17.0.3",
|
||||
"@ngneat/transloco": "6.0.0",
|
||||
"apexcharts": "3.44.0",
|
||||
"crypto-js": "3.3.0",
|
||||
"highlight.js": "11.9.0",
|
||||
"lodash-es": "4.17.21",
|
||||
"luxon": "3.5.0",
|
||||
"ng-apexcharts": "1.15.0",
|
||||
"ngx-quill": "27.0.0",
|
||||
"perfect-scrollbar": "1.5.6",
|
||||
"quill": "2.0.3",
|
||||
"luxon": "3.4.4",
|
||||
"ng-apexcharts": "1.8.0",
|
||||
"ngx-quill": "24.0.2",
|
||||
"perfect-scrollbar": "1.5.5",
|
||||
"quill": "1.3.7",
|
||||
"rxjs": "7.8.1",
|
||||
"tslib": "2.8.1",
|
||||
"zone.js": "0.15.0"
|
||||
"tslib": "2.6.2",
|
||||
"zone.js": "0.14.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "19.0.6",
|
||||
"@angular/cli": "19.0.6",
|
||||
"@angular/compiler-cli": "19.0.5",
|
||||
"@tailwindcss/typography": "0.5.15",
|
||||
"@types/chroma-js": "2.4.5",
|
||||
"@types/crypto-js": "4.2.2",
|
||||
"@angular-devkit/build-angular": "17.0.1",
|
||||
"@angular/cli": "17.0.1",
|
||||
"@angular/compiler-cli": "17.0.3",
|
||||
"@tailwindcss/typography": "0.5.10",
|
||||
"@types/chroma-js": "2.4.3",
|
||||
"@types/crypto-js": "3.1.47",
|
||||
"@types/highlight.js": "10.1.0",
|
||||
"@types/jasmine": "5.1.5",
|
||||
"@types/lodash": "4.17.13",
|
||||
"@types/lodash-es": "4.17.12",
|
||||
"@types/luxon": "3.4.2",
|
||||
"autoprefixer": "10.4.20",
|
||||
"@types/jasmine": "5.1.2",
|
||||
"@types/lodash": "4.14.201",
|
||||
"@types/lodash-es": "4.17.11",
|
||||
"@types/luxon": "3.3.4",
|
||||
"autoprefixer": "10.4.16",
|
||||
"chroma-js": "2.4.2",
|
||||
"jasmine-core": "5.1.2",
|
||||
"karma": "6.4.4",
|
||||
"jasmine-core": "5.1.1",
|
||||
"karma": "6.4.2",
|
||||
"karma-chrome-launcher": "3.2.0",
|
||||
"karma-coverage": "2.2.1",
|
||||
"karma-jasmine": "5.1.0",
|
||||
"karma-jasmine-html-reporter": "2.1.0",
|
||||
"karma-jasmine-html-reporter": "2.0.0",
|
||||
"lodash": "4.17.21",
|
||||
"postcss": "8.4.49",
|
||||
"prettier": "3.4.2",
|
||||
"prettier-plugin-organize-imports": "4.1.0",
|
||||
"prettier-plugin-tailwindcss": "0.6.9",
|
||||
"tailwindcss": "3.4.17",
|
||||
"typescript": "5.6.3"
|
||||
"postcss": "8.4.31",
|
||||
"tailwindcss": "3.3.5",
|
||||
"typescript": "5.2.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
export class FuseAnimationCurves {
|
||||
export class FuseAnimationCurves
|
||||
{
|
||||
static standard = 'cubic-bezier(0.4, 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 sharp = 'cubic-bezier(0.4, 0.0, 0.6, 1)';
|
||||
}
|
||||
|
||||
export class FuseAnimationDurations {
|
||||
export class FuseAnimationDurations
|
||||
{
|
||||
static complex = '375ms';
|
||||
static entering = '225ms';
|
||||
static exiting = '195ms';
|
||||
|
||||
@ -1,37 +1,34 @@
|
||||
import {
|
||||
animate,
|
||||
state,
|
||||
style,
|
||||
transition,
|
||||
trigger,
|
||||
} from '@angular/animations';
|
||||
import {
|
||||
FuseAnimationCurves,
|
||||
FuseAnimationDurations,
|
||||
} from '@fuse/animations/defaults';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Expand / collapse
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const expandCollapse = trigger('expandCollapse', [
|
||||
state(
|
||||
'void, collapsed',
|
||||
style({
|
||||
height: '0',
|
||||
})
|
||||
),
|
||||
const expandCollapse = trigger('expandCollapse',
|
||||
[
|
||||
state('void, collapsed',
|
||||
style({
|
||||
height: '0',
|
||||
}),
|
||||
),
|
||||
|
||||
state('*, expanded', style('*')),
|
||||
state('*, expanded',
|
||||
style('*'),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void <=> false, collapsed <=> false, expanded <=> false', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('void <=> false, collapsed <=> false, expanded <=> false', []),
|
||||
|
||||
// Transition
|
||||
transition('void <=> *, collapsed <=> expanded', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('void <=> *, collapsed <=> expanded',
|
||||
animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
export { expandCollapse };
|
||||
|
||||
@ -1,330 +1,330 @@
|
||||
import {
|
||||
animate,
|
||||
state,
|
||||
style,
|
||||
transition,
|
||||
trigger,
|
||||
} from '@angular/animations';
|
||||
import {
|
||||
FuseAnimationCurves,
|
||||
FuseAnimationDurations,
|
||||
} from '@fuse/animations/defaults';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade in
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeIn = trigger('fadeIn', [
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
})
|
||||
),
|
||||
const fadeIn = trigger('fadeIn',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
opacity: 0,
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
})
|
||||
),
|
||||
state('*',
|
||||
style({
|
||||
opacity: 1,
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade in top
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeInTop = trigger('fadeInTop', [
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
})
|
||||
),
|
||||
const fadeInTop = trigger('fadeInTop',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade in bottom
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeInBottom = trigger('fadeInBottom', [
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
})
|
||||
),
|
||||
const fadeInBottom = trigger('fadeInBottom',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade in left
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeInLeft = trigger('fadeInLeft', [
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
})
|
||||
),
|
||||
const fadeInLeft = trigger('fadeInLeft',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade in right
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeInRight = trigger('fadeInRight', [
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
})
|
||||
),
|
||||
const fadeInRight = trigger('fadeInRight',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade out
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeOut = trigger('fadeOut', [
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
})
|
||||
),
|
||||
const fadeOut = trigger('fadeOut',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
opacity: 1,
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
})
|
||||
),
|
||||
state('void',
|
||||
style({
|
||||
opacity: 0,
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade out top
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeOutTop = trigger('fadeOutTop', [
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
const fadeOutTop = trigger('fadeOutTop',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
})
|
||||
),
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade out bottom
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeOutBottom = trigger('fadeOutBottom', [
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
const fadeOutBottom = trigger('fadeOutBottom',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
})
|
||||
),
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade out left
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeOutLeft = trigger('fadeOutLeft', [
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
const fadeOutLeft = trigger('fadeOutLeft',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade out right
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeOutRight = trigger('fadeOutRight', [
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
const fadeOutRight = trigger('fadeOutRight',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
export {
|
||||
fadeIn,
|
||||
fadeInBottom,
|
||||
fadeInLeft,
|
||||
fadeInRight,
|
||||
fadeInTop,
|
||||
fadeOut,
|
||||
fadeOutBottom,
|
||||
fadeOutLeft,
|
||||
fadeOutRight,
|
||||
fadeOutTop,
|
||||
};
|
||||
export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight };
|
||||
|
||||
@ -1,50 +1,15 @@
|
||||
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 {
|
||||
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';
|
||||
|
||||
export const fuseAnimations = [
|
||||
expandCollapse,
|
||||
fadeIn,
|
||||
fadeInTop,
|
||||
fadeInBottom,
|
||||
fadeInLeft,
|
||||
fadeInRight,
|
||||
fadeOut,
|
||||
fadeOutTop,
|
||||
fadeOutBottom,
|
||||
fadeOutLeft,
|
||||
fadeOutRight,
|
||||
fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight,
|
||||
fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight,
|
||||
shake,
|
||||
slideInTop,
|
||||
slideInBottom,
|
||||
slideInLeft,
|
||||
slideInRight,
|
||||
slideOutTop,
|
||||
slideOutBottom,
|
||||
slideOutLeft,
|
||||
slideOutRight,
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
slideInTop, slideInBottom, slideInLeft, slideInRight,
|
||||
slideOutTop, slideOutBottom, slideOutLeft, slideOutRight,
|
||||
zoomIn, zoomOut,
|
||||
];
|
||||
|
||||
@ -1,78 +1,73 @@
|
||||
import {
|
||||
animate,
|
||||
keyframes,
|
||||
style,
|
||||
transition,
|
||||
trigger,
|
||||
} from '@angular/animations';
|
||||
import { animate, keyframes, style, transition, trigger } from '@angular/animations';
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Shake
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const shake = trigger('shake', [
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
const shake = trigger('shake',
|
||||
[
|
||||
|
||||
// Transition
|
||||
transition(
|
||||
'void => *, * => true',
|
||||
[
|
||||
animate(
|
||||
'{{timings}}',
|
||||
keyframes([
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
offset: 0,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset: 0.1,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset: 0.2,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset: 0.3,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset: 0.4,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset: 0.5,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset: 0.6,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset: 0.7,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset: 0.8,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset: 0.9,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
offset: 1,
|
||||
}),
|
||||
])
|
||||
),
|
||||
],
|
||||
{
|
||||
params: {
|
||||
timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *, * => true',
|
||||
[
|
||||
animate('{{timings}}',
|
||||
keyframes([
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
offset : 0,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.1,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.2,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.3,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.4,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.5,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.6,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.7,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.8,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.9,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
offset : 1,
|
||||
}),
|
||||
]),
|
||||
),
|
||||
],
|
||||
{
|
||||
params: {
|
||||
timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
|
||||
},
|
||||
},
|
||||
}
|
||||
),
|
||||
]);
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
export { shake };
|
||||
|
||||
@ -1,254 +1,252 @@
|
||||
import {
|
||||
animate,
|
||||
state,
|
||||
style,
|
||||
transition,
|
||||
trigger,
|
||||
} from '@angular/animations';
|
||||
import {
|
||||
FuseAnimationCurves,
|
||||
FuseAnimationDurations,
|
||||
} from '@fuse/animations/defaults';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide in top
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideInTop = trigger('slideInTop', [
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
})
|
||||
),
|
||||
const slideInTop = trigger('slideInTop',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide in bottom
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideInBottom = trigger('slideInBottom', [
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
})
|
||||
),
|
||||
const slideInBottom = trigger('slideInBottom',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide in left
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideInLeft = trigger('slideInLeft', [
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
})
|
||||
),
|
||||
const slideInLeft = trigger('slideInLeft',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide in right
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideInRight = trigger('slideInRight', [
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
})
|
||||
),
|
||||
const slideInRight = trigger('slideInRight',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide out top
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideOutTop = trigger('slideOutTop', [
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
const slideOutTop = trigger('slideOutTop',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
})
|
||||
),
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide out bottom
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideOutBottom = trigger('slideOutBottom', [
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
const slideOutBottom = trigger('slideOutBottom',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
})
|
||||
),
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide out left
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideOutLeft = trigger('slideOutLeft', [
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
const slideOutLeft = trigger('slideOutLeft',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide out right
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideOutRight = trigger('slideOutRight', [
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
})
|
||||
),
|
||||
const slideOutRight = trigger('slideOutRight',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
})
|
||||
),
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
export {
|
||||
slideInBottom,
|
||||
slideInLeft,
|
||||
slideInRight,
|
||||
slideInTop,
|
||||
slideOutBottom,
|
||||
slideOutLeft,
|
||||
slideOutRight,
|
||||
slideOutTop,
|
||||
};
|
||||
export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight };
|
||||
|
||||
@ -1,75 +1,73 @@
|
||||
import {
|
||||
animate,
|
||||
state,
|
||||
style,
|
||||
transition,
|
||||
trigger,
|
||||
} from '@angular/animations';
|
||||
import {
|
||||
FuseAnimationCurves,
|
||||
FuseAnimationDurations,
|
||||
} from '@fuse/animations/defaults';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Zoom in
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const zoomIn = trigger('zoomIn', [
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
transform: 'scale(0.5)',
|
||||
})
|
||||
),
|
||||
const zoomIn = trigger('zoomIn',
|
||||
[
|
||||
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
transform: 'scale(1)',
|
||||
})
|
||||
),
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'scale(0.5)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'scale(1)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Zoom out
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const zoomOut = trigger('zoomOut', [
|
||||
state(
|
||||
'*',
|
||||
style({
|
||||
opacity: 1,
|
||||
transform: 'scale(1)',
|
||||
})
|
||||
),
|
||||
const zoomOut = trigger('zoomOut',
|
||||
[
|
||||
|
||||
state(
|
||||
'void',
|
||||
style({
|
||||
opacity: 0,
|
||||
transform: 'scale(0.5)',
|
||||
})
|
||||
),
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'scale(1)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'scale(0.5)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'), {
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
export { zoomIn, zoomOut };
|
||||
|
||||
|
||||
@ -1,93 +1,82 @@
|
||||
@if (!dismissible || (dismissible && !dismissed)) {
|
||||
<div
|
||||
class="fuse-alert-container"
|
||||
*ngIf="!dismissible || dismissible && !dismissed"
|
||||
[@fadeIn]="!dismissed"
|
||||
[@fadeOut]="!dismissed">
|
||||
|
||||
<!-- Border -->
|
||||
<div
|
||||
class="fuse-alert-container"
|
||||
[@fadeIn]="!dismissed"
|
||||
[@fadeOut]="!dismissed"
|
||||
>
|
||||
<!-- Border -->
|
||||
@if (appearance === 'border') {
|
||||
<div class="fuse-alert-border"></div>
|
||||
}
|
||||
class="fuse-alert-border"
|
||||
*ngIf="appearance === 'border'"></div>
|
||||
|
||||
<!-- Icon -->
|
||||
@if (showIcon) {
|
||||
<div class="fuse-alert-icon">
|
||||
<!-- Custom icon -->
|
||||
<div class="fuse-alert-custom-icon">
|
||||
<ng-content select="[fuseAlertIcon]"></ng-content>
|
||||
</div>
|
||||
<!-- Icon -->
|
||||
<div
|
||||
class="fuse-alert-icon"
|
||||
*ngIf="showIcon">
|
||||
|
||||
<!-- Custom icon -->
|
||||
<div class="fuse-alert-custom-icon">
|
||||
<ng-content select="[fuseAlertIcon]"></ng-content>
|
||||
</div>
|
||||
|
||||
<!-- Default icons -->
|
||||
<div class="fuse-alert-default-icon">
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'primary'"
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'accent'"
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'warn'"
|
||||
[svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'basic'"
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'info'"
|
||||
[svgIcon]="'heroicons_solid:information-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'success'"
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'warning'"
|
||||
[svgIcon]="'heroicons_solid:exclamation-triangle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'error'"
|
||||
[svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
|
||||
|
||||
<!-- Default icons -->
|
||||
<div class="fuse-alert-default-icon">
|
||||
@if (type === 'primary') {
|
||||
<mat-icon
|
||||
[svgIcon]="'heroicons_solid:check-circle'"
|
||||
></mat-icon>
|
||||
}
|
||||
|
||||
@if (type === 'accent') {
|
||||
<mat-icon
|
||||
[svgIcon]="'heroicons_solid:check-circle'"
|
||||
></mat-icon>
|
||||
}
|
||||
|
||||
@if (type === 'warn') {
|
||||
<mat-icon
|
||||
[svgIcon]="'heroicons_solid:x-circle'"
|
||||
></mat-icon>
|
||||
}
|
||||
|
||||
@if (type === 'basic') {
|
||||
<mat-icon
|
||||
[svgIcon]="'heroicons_solid:check-circle'"
|
||||
></mat-icon>
|
||||
}
|
||||
|
||||
@if (type === 'info') {
|
||||
<mat-icon
|
||||
[svgIcon]="'heroicons_solid:information-circle'"
|
||||
></mat-icon>
|
||||
}
|
||||
|
||||
@if (type === 'success') {
|
||||
<mat-icon
|
||||
[svgIcon]="'heroicons_solid:check-circle'"
|
||||
></mat-icon>
|
||||
}
|
||||
|
||||
@if (type === 'warning') {
|
||||
<mat-icon
|
||||
[svgIcon]="'heroicons_solid:exclamation-triangle'"
|
||||
></mat-icon>
|
||||
}
|
||||
|
||||
@if (type === 'error') {
|
||||
<mat-icon
|
||||
[svgIcon]="'heroicons_solid:x-circle'"
|
||||
></mat-icon>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Content -->
|
||||
<div class="fuse-alert-content">
|
||||
<div class="fuse-alert-title">
|
||||
<ng-content select="[fuseAlertTitle]"></ng-content>
|
||||
</div>
|
||||
|
||||
<div class="fuse-alert-message">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dismiss button -->
|
||||
<button
|
||||
class="fuse-alert-dismiss-button"
|
||||
mat-icon-button
|
||||
(click)="dismiss()"
|
||||
>
|
||||
<mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Content -->
|
||||
<div class="fuse-alert-content">
|
||||
|
||||
<div class="fuse-alert-title">
|
||||
<ng-content select="[fuseAlertTitle]"></ng-content>
|
||||
</div>
|
||||
|
||||
<div class="fuse-alert-message">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Dismiss button -->
|
||||
<button
|
||||
class="fuse-alert-dismiss-button"
|
||||
mat-icon-button
|
||||
(click)="dismiss()">
|
||||
<mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
@ -33,6 +33,7 @@ fuse-alert {
|
||||
}
|
||||
|
||||
.fuse-alert-default-icon {
|
||||
|
||||
.mat-icon {
|
||||
@apply icon-size-5;
|
||||
}
|
||||
@ -69,6 +70,7 @@ fuse-alert {
|
||||
|
||||
/* Alert that comes after the title */
|
||||
+ .fuse-alert-message {
|
||||
|
||||
&:not(:empty) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
@ -106,7 +108,9 @@ fuse-alert {
|
||||
|
||||
/* Dismissible */
|
||||
&.fuse-alert-dismissible {
|
||||
|
||||
.fuse-alert-container {
|
||||
|
||||
.fuse-alert-content {
|
||||
margin-right: 32px;
|
||||
}
|
||||
@ -114,7 +118,9 @@ fuse-alert {
|
||||
}
|
||||
|
||||
&:not(.fuse-alert-dismissible) {
|
||||
|
||||
.fuse-alert-container {
|
||||
|
||||
.fuse-alert-dismiss-button {
|
||||
display: none !important;
|
||||
}
|
||||
@ -123,11 +129,12 @@ fuse-alert {
|
||||
|
||||
/* Border */
|
||||
&.fuse-alert-appearance-border {
|
||||
|
||||
.fuse-alert-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
@apply bg-card shadow-md;
|
||||
@apply shadow-md bg-card;
|
||||
|
||||
.fuse-alert-border {
|
||||
position: absolute;
|
||||
@ -144,7 +151,9 @@ fuse-alert {
|
||||
|
||||
/* Primary */
|
||||
&.fuse-alert-type-primary {
|
||||
|
||||
.fuse-alert-container {
|
||||
|
||||
.fuse-alert-border {
|
||||
@apply bg-primary;
|
||||
}
|
||||
@ -179,7 +188,9 @@ fuse-alert {
|
||||
|
||||
/* Accent */
|
||||
&.fuse-alert-type-accent {
|
||||
|
||||
.fuse-alert-container {
|
||||
|
||||
.fuse-alert-border {
|
||||
@apply bg-accent;
|
||||
}
|
||||
@ -214,7 +225,9 @@ fuse-alert {
|
||||
|
||||
/* Warn */
|
||||
&.fuse-alert-type-warn {
|
||||
|
||||
.fuse-alert-container {
|
||||
|
||||
.fuse-alert-border {
|
||||
@apply bg-warn;
|
||||
}
|
||||
@ -249,7 +262,9 @@ fuse-alert {
|
||||
|
||||
/* Basic */
|
||||
&.fuse-alert-type-basic {
|
||||
|
||||
.fuse-alert-container {
|
||||
|
||||
.fuse-alert-border {
|
||||
@apply bg-gray-600;
|
||||
}
|
||||
@ -284,7 +299,9 @@ fuse-alert {
|
||||
|
||||
/* Info */
|
||||
&.fuse-alert-type-info {
|
||||
|
||||
.fuse-alert-container {
|
||||
|
||||
.fuse-alert-border {
|
||||
@apply bg-blue-600;
|
||||
}
|
||||
@ -319,7 +336,9 @@ fuse-alert {
|
||||
|
||||
/* Success */
|
||||
&.fuse-alert-type-success {
|
||||
|
||||
.fuse-alert-container {
|
||||
|
||||
.fuse-alert-border {
|
||||
@apply bg-green-500;
|
||||
}
|
||||
@ -354,7 +373,9 @@ fuse-alert {
|
||||
|
||||
/* Warning */
|
||||
&.fuse-alert-type-warning {
|
||||
|
||||
.fuse-alert-container {
|
||||
|
||||
.fuse-alert-border {
|
||||
@apply bg-amber-500;
|
||||
}
|
||||
@ -389,7 +410,9 @@ fuse-alert {
|
||||
|
||||
/* Error */
|
||||
&.fuse-alert-type-error {
|
||||
|
||||
.fuse-alert-container {
|
||||
|
||||
.fuse-alert-border {
|
||||
@apply bg-red-600;
|
||||
}
|
||||
@ -425,6 +448,7 @@ fuse-alert {
|
||||
|
||||
/* Fill */
|
||||
&.fuse-alert-appearance-fill {
|
||||
|
||||
.fuse-alert-container {
|
||||
border-radius: 6px;
|
||||
|
||||
@ -435,6 +459,7 @@ fuse-alert {
|
||||
|
||||
/* Primary */
|
||||
&.fuse-alert-type-primary {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-primary-600;
|
||||
|
||||
@ -451,13 +476,14 @@ fuse-alert {
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-primary-200 text-primary-800;
|
||||
@apply text-primary-800 bg-primary-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Accent */
|
||||
&.fuse-alert-type-accent {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-accent-600;
|
||||
|
||||
@ -474,13 +500,14 @@ fuse-alert {
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-accent-200 text-accent-800;
|
||||
@apply text-accent-800 bg-accent-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Warn */
|
||||
&.fuse-alert-type-warn {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-warn-600;
|
||||
|
||||
@ -497,13 +524,14 @@ fuse-alert {
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-warn-200 text-warn-800;
|
||||
@apply text-warn-800 bg-warn-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Basic */
|
||||
&.fuse-alert-type-basic {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-gray-600;
|
||||
|
||||
@ -527,6 +555,7 @@ fuse-alert {
|
||||
|
||||
/* Info */
|
||||
&.fuse-alert-type-info {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-blue-600;
|
||||
|
||||
@ -550,6 +579,7 @@ fuse-alert {
|
||||
|
||||
/* Success */
|
||||
&.fuse-alert-type-success {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-green-600;
|
||||
|
||||
@ -573,6 +603,7 @@ fuse-alert {
|
||||
|
||||
/* Warning */
|
||||
&.fuse-alert-type-warning {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-amber-500;
|
||||
|
||||
@ -596,6 +627,7 @@ fuse-alert {
|
||||
|
||||
/* Error */
|
||||
&.fuse-alert-type-error {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-red-600;
|
||||
|
||||
@ -620,14 +652,16 @@ fuse-alert {
|
||||
|
||||
/* Outline */
|
||||
&.fuse-alert-appearance-outline {
|
||||
|
||||
.fuse-alert-container {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Primary */
|
||||
&.fuse-alert-type-primary {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-primary-50 ring-1 ring-inset ring-primary-400;
|
||||
@apply bg-primary-50 ring-1 ring-primary-400 ring-inset;
|
||||
|
||||
.fuse-alert-icon {
|
||||
@apply text-primary-600;
|
||||
@ -643,7 +677,7 @@ fuse-alert {
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-primary-200 text-primary-800;
|
||||
@apply text-primary-800 bg-primary-200;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
@ -667,8 +701,9 @@ fuse-alert {
|
||||
|
||||
/* Accent */
|
||||
&.fuse-alert-type-accent {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-accent-100 ring-1 ring-inset ring-accent-400;
|
||||
@apply bg-accent-100 ring-1 ring-accent-400 ring-inset;
|
||||
|
||||
.fuse-alert-icon {
|
||||
@apply text-accent-600;
|
||||
@ -684,7 +719,7 @@ fuse-alert {
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-accent-200 text-accent-800;
|
||||
@apply text-accent-800 bg-accent-200;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
@ -708,8 +743,9 @@ fuse-alert {
|
||||
|
||||
/* Warn */
|
||||
&.fuse-alert-type-warn {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-warn-50 ring-1 ring-inset ring-warn-400;
|
||||
@apply bg-warn-50 ring-1 ring-warn-400 ring-inset;
|
||||
|
||||
.fuse-alert-icon {
|
||||
@apply text-warn-600;
|
||||
@ -725,7 +761,7 @@ fuse-alert {
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-warn-200 text-warn-800;
|
||||
@apply text-warn-800 bg-warn-200;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
@ -749,8 +785,9 @@ fuse-alert {
|
||||
|
||||
/* Basic */
|
||||
&.fuse-alert-type-basic {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-gray-100 ring-1 ring-inset ring-gray-400;
|
||||
@apply bg-gray-100 ring-1 ring-gray-400 ring-inset;
|
||||
|
||||
.fuse-alert-icon {
|
||||
@apply text-gray-600;
|
||||
@ -790,8 +827,9 @@ fuse-alert {
|
||||
|
||||
/* Info */
|
||||
&.fuse-alert-type-info {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-blue-50 ring-1 ring-inset ring-blue-400;
|
||||
@apply bg-blue-50 ring-1 ring-blue-400 ring-inset;
|
||||
|
||||
.fuse-alert-icon {
|
||||
@apply text-blue-600;
|
||||
@ -831,8 +869,9 @@ fuse-alert {
|
||||
|
||||
/* Success */
|
||||
&.fuse-alert-type-success {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-green-50 ring-1 ring-inset ring-green-400;
|
||||
@apply bg-green-50 ring-1 ring-green-400 ring-inset;
|
||||
|
||||
.fuse-alert-icon {
|
||||
@apply text-green-600;
|
||||
@ -872,8 +911,9 @@ fuse-alert {
|
||||
|
||||
/* Warning */
|
||||
&.fuse-alert-type-warning {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-amber-50 ring-1 ring-inset ring-amber-400;
|
||||
@apply bg-amber-50 ring-1 ring-amber-400 ring-inset;
|
||||
|
||||
.fuse-alert-icon {
|
||||
@apply text-amber-600;
|
||||
@ -913,8 +953,9 @@ fuse-alert {
|
||||
|
||||
/* Error */
|
||||
&.fuse-alert-type-error {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-red-50 ring-1 ring-inset ring-red-400;
|
||||
@apply bg-red-50 ring-1 ring-red-400 ring-inset;
|
||||
|
||||
.fuse-alert-icon {
|
||||
@apply text-red-600;
|
||||
@ -955,12 +996,14 @@ fuse-alert {
|
||||
|
||||
/* Soft */
|
||||
&.fuse-alert-appearance-soft {
|
||||
|
||||
.fuse-alert-container {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Primary */
|
||||
&.fuse-alert-type-primary {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-primary-50;
|
||||
|
||||
@ -978,7 +1021,7 @@ fuse-alert {
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-primary-200 text-primary-800;
|
||||
@apply text-primary-800 bg-primary-200;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
@ -1002,6 +1045,7 @@ fuse-alert {
|
||||
|
||||
/* Accent */
|
||||
&.fuse-alert-type-accent {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-accent-100;
|
||||
|
||||
@ -1019,7 +1063,7 @@ fuse-alert {
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-accent-200 text-accent-800;
|
||||
@apply text-accent-800 bg-accent-200;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
@ -1043,6 +1087,7 @@ fuse-alert {
|
||||
|
||||
/* Warn */
|
||||
&.fuse-alert-type-warn {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-warn-50;
|
||||
|
||||
@ -1060,7 +1105,7 @@ fuse-alert {
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-warn-200 text-warn-800;
|
||||
@apply text-warn-800 bg-warn-200;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
@ -1084,6 +1129,7 @@ fuse-alert {
|
||||
|
||||
/* Basic */
|
||||
&.fuse-alert-type-basic {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-gray-100;
|
||||
|
||||
@ -1125,6 +1171,7 @@ fuse-alert {
|
||||
|
||||
/* Info */
|
||||
&.fuse-alert-type-info {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-blue-50;
|
||||
|
||||
@ -1166,6 +1213,7 @@ fuse-alert {
|
||||
|
||||
/* Success */
|
||||
&.fuse-alert-type-success {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-green-50;
|
||||
|
||||
@ -1207,6 +1255,7 @@ fuse-alert {
|
||||
|
||||
/* Warning */
|
||||
&.fuse-alert-type-warning {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-amber-50;
|
||||
|
||||
@ -1248,6 +1297,7 @@ fuse-alert {
|
||||
|
||||
/* Error */
|
||||
&.fuse-alert-type-error {
|
||||
|
||||
.fuse-alert-container {
|
||||
@apply bg-red-50;
|
||||
|
||||
|
||||
@ -1,63 +1,54 @@
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
EventEmitter,
|
||||
HostBinding,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Output,
|
||||
SimpleChanges,
|
||||
ViewEncapsulation,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import { NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { 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 { Subject, filter, takeUntil } from 'rxjs';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-alert',
|
||||
templateUrl: './alert.component.html',
|
||||
styleUrls: ['./alert.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
selector : 'fuse-alert',
|
||||
templateUrl : './alert.component.html',
|
||||
styleUrls : ['./alert.component.scss'],
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
animations: fuseAnimations,
|
||||
exportAs: 'fuseAlert',
|
||||
imports: [MatIconModule, MatButtonModule],
|
||||
animations : fuseAnimations,
|
||||
exportAs : 'fuseAlert',
|
||||
standalone : true,
|
||||
imports : [NgIf, MatIconModule, MatButtonModule],
|
||||
})
|
||||
export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
|
||||
export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
static ngAcceptInputType_dismissible: BooleanInput;
|
||||
static ngAcceptInputType_dismissed: BooleanInput;
|
||||
static ngAcceptInputType_showIcon: BooleanInput;
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
|
||||
private _changeDetectorRef = inject(ChangeDetectorRef);
|
||||
private _fuseAlertService = inject(FuseAlertService);
|
||||
private _fuseUtilsService = inject(FuseUtilsService);
|
||||
|
||||
@Input() appearance: FuseAlertAppearance = 'soft';
|
||||
@Input() dismissed: boolean = false;
|
||||
@Input() dismissible: boolean = false;
|
||||
@Input() name: string = this._fuseUtilsService.randomId();
|
||||
@Input() showIcon: boolean = true;
|
||||
@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>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseAlertService: FuseAlertService,
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -65,24 +56,25 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* Host binding for component classes
|
||||
*/
|
||||
@HostBinding('class') get classList(): any {
|
||||
@HostBinding('class') get classList(): any
|
||||
{
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
return {
|
||||
'fuse-alert-appearance-border': this.appearance === 'border',
|
||||
'fuse-alert-appearance-fill': this.appearance === 'fill',
|
||||
'fuse-alert-appearance-border' : this.appearance === 'border',
|
||||
'fuse-alert-appearance-fill' : this.appearance === 'fill',
|
||||
'fuse-alert-appearance-outline': this.appearance === 'outline',
|
||||
'fuse-alert-appearance-soft': this.appearance === 'soft',
|
||||
'fuse-alert-dismissed': this.dismissed,
|
||||
'fuse-alert-dismissible': this.dismissible,
|
||||
'fuse-alert-show-icon': this.showIcon,
|
||||
'fuse-alert-type-primary': this.type === 'primary',
|
||||
'fuse-alert-type-accent': this.type === 'accent',
|
||||
'fuse-alert-type-warn': this.type === 'warn',
|
||||
'fuse-alert-type-basic': this.type === 'basic',
|
||||
'fuse-alert-type-info': this.type === 'info',
|
||||
'fuse-alert-type-success': this.type === 'success',
|
||||
'fuse-alert-type-warning': this.type === 'warning',
|
||||
'fuse-alert-type-error': this.type === 'error',
|
||||
'fuse-alert-appearance-soft' : this.appearance === 'soft',
|
||||
'fuse-alert-dismissed' : this.dismissed,
|
||||
'fuse-alert-dismissible' : this.dismissible,
|
||||
'fuse-alert-show-icon' : this.showIcon,
|
||||
'fuse-alert-type-primary' : this.type === 'primary',
|
||||
'fuse-alert-type-accent' : this.type === 'accent',
|
||||
'fuse-alert-type-warn' : this.type === 'warn',
|
||||
'fuse-alert-type-basic' : this.type === 'basic',
|
||||
'fuse-alert-type-info' : this.type === 'info',
|
||||
'fuse-alert-type-success' : this.type === 'success',
|
||||
'fuse-alert-type-warning' : this.type === 'warning',
|
||||
'fuse-alert-type-error' : this.type === 'error',
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
}
|
||||
@ -96,46 +88,46 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Dismissed
|
||||
if ('dismissed' in changes) {
|
||||
if ( 'dismissed' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.dismissed = coerceBooleanProperty(
|
||||
changes.dismissed.currentValue
|
||||
);
|
||||
this.dismissed = coerceBooleanProperty(changes.dismissed.currentValue);
|
||||
|
||||
// Dismiss/show the alert
|
||||
this._toggleDismiss(this.dismissed);
|
||||
}
|
||||
|
||||
// Dismissible
|
||||
if ('dismissible' in changes) {
|
||||
if ( 'dismissible' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.dismissible = coerceBooleanProperty(
|
||||
changes.dismissible.currentValue
|
||||
);
|
||||
this.dismissible = coerceBooleanProperty(changes.dismissible.currentValue);
|
||||
}
|
||||
|
||||
// Show icon
|
||||
if ('showIcon' in changes) {
|
||||
if ( 'showIcon' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.showIcon = coerceBooleanProperty(
|
||||
changes.showIcon.currentValue
|
||||
);
|
||||
this.showIcon = coerceBooleanProperty(changes.showIcon.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to the dismiss calls
|
||||
this._fuseAlertService.onDismiss
|
||||
.pipe(
|
||||
filter((name) => this.name === name),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
filter(name => this.name === name),
|
||||
takeUntil(this._unsubscribeAll),
|
||||
)
|
||||
.subscribe(() => {
|
||||
.subscribe(() =>
|
||||
{
|
||||
// Dismiss the alert
|
||||
this.dismiss();
|
||||
});
|
||||
@ -143,10 +135,11 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
|
||||
// Subscribe to the show calls
|
||||
this._fuseAlertService.onShow
|
||||
.pipe(
|
||||
filter((name) => this.name === name),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
filter(name => this.name === name),
|
||||
takeUntil(this._unsubscribeAll),
|
||||
)
|
||||
.subscribe(() => {
|
||||
.subscribe(() =>
|
||||
{
|
||||
// Show the alert
|
||||
this.show();
|
||||
});
|
||||
@ -155,7 +148,8 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
@ -168,9 +162,11 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* Dismiss the alert
|
||||
*/
|
||||
dismiss(): void {
|
||||
dismiss(): void
|
||||
{
|
||||
// Return if the alert is already dismissed
|
||||
if (this.dismissed) {
|
||||
if ( this.dismissed )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -181,9 +177,11 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* Show the dismissed alert
|
||||
*/
|
||||
show(): void {
|
||||
show(): void
|
||||
{
|
||||
// Return if the alert is already showing
|
||||
if (!this.dismissed) {
|
||||
if ( !this.dismissed )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -201,9 +199,11 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
|
||||
* @param dismissed
|
||||
* @private
|
||||
*/
|
||||
private _toggleDismiss(dismissed: boolean): void {
|
||||
private _toggleDismiss(dismissed: boolean): void
|
||||
{
|
||||
// Return if the alert is not dismissible
|
||||
if (!this.dismissible) {
|
||||
if ( !this.dismissible )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,18 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FuseAlertService {
|
||||
private readonly _onDismiss: ReplaySubject<string> =
|
||||
new ReplaySubject<string>(1);
|
||||
private readonly _onShow: ReplaySubject<string> = new ReplaySubject<string>(
|
||||
1
|
||||
);
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseAlertService
|
||||
{
|
||||
private readonly _onDismiss: ReplaySubject<string> = new ReplaySubject<string>(1);
|
||||
private readonly _onShow: ReplaySubject<string> = new ReplaySubject<string>(1);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
@ -16,14 +21,16 @@ export class FuseAlertService {
|
||||
/**
|
||||
* Getter for onDismiss
|
||||
*/
|
||||
get onDismiss(): Observable<any> {
|
||||
get onDismiss(): Observable<any>
|
||||
{
|
||||
return this._onDismiss.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for onShow
|
||||
*/
|
||||
get onShow(): Observable<any> {
|
||||
get onShow(): Observable<any>
|
||||
{
|
||||
return this._onShow.asObservable();
|
||||
}
|
||||
|
||||
@ -36,9 +43,11 @@ export class FuseAlertService {
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
dismiss(name: string): void {
|
||||
dismiss(name: string): void
|
||||
{
|
||||
// Return if the name is not provided
|
||||
if (!name) {
|
||||
if ( !name )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -51,13 +60,16 @@ export class FuseAlertService {
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
show(name: string): void {
|
||||
show(name: string): void
|
||||
{
|
||||
// Return if the name is not provided
|
||||
if (!name) {
|
||||
if ( !name )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Execute the observable
|
||||
this._onShow.next(name);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
export type FuseAlertAppearance = 'border' | 'fill' | 'outline' | 'soft';
|
||||
export type FuseAlertAppearance =
|
||||
| 'border'
|
||||
| 'fill'
|
||||
| 'outline'
|
||||
| 'soft';
|
||||
|
||||
export type FuseAlertType =
|
||||
| 'primary'
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!-- Flippable card -->
|
||||
@if (flippable) {
|
||||
<ng-container *ngIf="flippable">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-card-front">
|
||||
<ng-content select="[fuseCardFront]"></ng-content>
|
||||
@ -9,17 +10,21 @@
|
||||
<div class="fuse-card-back">
|
||||
<ng-content select="[fuseCardBack]"></ng-content>
|
||||
</div>
|
||||
}
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- Normal card -->
|
||||
@if (!flippable) {
|
||||
<ng-container *ngIf="!flippable">
|
||||
|
||||
<!-- Content -->
|
||||
<ng-content></ng-content>
|
||||
|
||||
<!-- Expansion -->
|
||||
@if (expanded) {
|
||||
<div class="fuse-card-expansion" [@expandCollapse]>
|
||||
<ng-content select="[fuseCardExpansion]"></ng-content>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
<div
|
||||
class="fuse-card-expansion"
|
||||
*ngIf="expanded"
|
||||
[@expandCollapse]>
|
||||
<ng-content select="[fuseCardExpansion]"></ng-content>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
@ -2,7 +2,7 @@ fuse-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
@apply bg-card rounded-2xl shadow;
|
||||
@apply rounded-2xl shadow bg-card;
|
||||
|
||||
/* Flippable */
|
||||
&.fuse-card-flippable {
|
||||
@ -15,6 +15,7 @@ fuse-card {
|
||||
@apply shadow-none;
|
||||
|
||||
&.fuse-card-face-back {
|
||||
|
||||
.fuse-card-front {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
@ -34,12 +35,9 @@ fuse-card {
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
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;
|
||||
@apply bg-card rounded-2xl shadow;
|
||||
@apply rounded-2xl shadow bg-card;
|
||||
}
|
||||
|
||||
.fuse-card-front {
|
||||
|
||||
@ -1,26 +1,21 @@
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
|
||||
import {
|
||||
Component,
|
||||
HostBinding,
|
||||
Input,
|
||||
OnChanges,
|
||||
SimpleChanges,
|
||||
ViewEncapsulation,
|
||||
} from '@angular/core';
|
||||
import { NgIf } from '@angular/common';
|
||||
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseCardFace } from '@fuse/components/card/card.types';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-card',
|
||||
templateUrl: './card.component.html',
|
||||
styleUrls: ['./card.component.scss'],
|
||||
selector : 'fuse-card',
|
||||
templateUrl : './card.component.html',
|
||||
styleUrls : ['./card.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations: fuseAnimations,
|
||||
exportAs: 'fuseCard',
|
||||
imports: [],
|
||||
animations : fuseAnimations,
|
||||
exportAs : 'fuseCard',
|
||||
standalone : true,
|
||||
imports : [NgIf],
|
||||
})
|
||||
export class FuseCardComponent implements OnChanges {
|
||||
export class FuseCardComponent implements OnChanges
|
||||
{
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
static ngAcceptInputType_expanded: BooleanInput;
|
||||
static ngAcceptInputType_flippable: BooleanInput;
|
||||
@ -30,6 +25,13 @@ export class FuseCardComponent implements OnChanges {
|
||||
@Input() face: FuseCardFace = 'front';
|
||||
@Input() flippable: boolean = false;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -37,13 +39,14 @@ export class FuseCardComponent implements OnChanges {
|
||||
/**
|
||||
* Host binding for component classes
|
||||
*/
|
||||
@HostBinding('class') get classList(): any {
|
||||
@HostBinding('class') get classList(): any
|
||||
{
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
return {
|
||||
'fuse-card-expanded': this.expanded,
|
||||
'fuse-card-face-back': this.flippable && this.face === 'back',
|
||||
'fuse-card-expanded' : this.expanded,
|
||||
'fuse-card-face-back' : this.flippable && this.face === 'back',
|
||||
'fuse-card-face-front': this.flippable && this.face === 'front',
|
||||
'fuse-card-flippable': this.flippable,
|
||||
'fuse-card-flippable' : this.flippable,
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
}
|
||||
@ -57,21 +60,20 @@ export class FuseCardComponent implements OnChanges {
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Expanded
|
||||
if ('expanded' in changes) {
|
||||
if ( 'expanded' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.expanded = coerceBooleanProperty(
|
||||
changes.expanded.currentValue
|
||||
);
|
||||
this.expanded = coerceBooleanProperty(changes.expanded.currentValue);
|
||||
}
|
||||
|
||||
// Flippable
|
||||
if ('flippable' in changes) {
|
||||
if ( 'flippable' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.flippable = coerceBooleanProperty(
|
||||
changes.flippable.currentValue
|
||||
);
|
||||
this.flippable = coerceBooleanProperty(changes.flippable.currentValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1 +1,3 @@
|
||||
export type FuseCardFace = 'front' | 'back';
|
||||
export type FuseCardFace =
|
||||
| 'front'
|
||||
| 'back';
|
||||
|
||||
@ -12,15 +12,14 @@ fuse-drawer {
|
||||
min-width: var(--fuse-drawer-width);
|
||||
max-width: var(--fuse-drawer-width);
|
||||
z-index: 300;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35);
|
||||
@apply bg-card;
|
||||
|
||||
/* Animations */
|
||||
&.fuse-drawer-animations-enabled {
|
||||
transition-duration: 400ms;
|
||||
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 {
|
||||
transition-duration: 400ms;
|
||||
@ -43,6 +42,7 @@ fuse-drawer {
|
||||
|
||||
/* Left position */
|
||||
&.fuse-drawer-position-left {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-drawer-mode-side {
|
||||
margin-left: calc(var(--fuse-drawer-width) * -1);
|
||||
@ -70,6 +70,7 @@ fuse-drawer {
|
||||
|
||||
/* Right position */
|
||||
&.fuse-drawer-position-right {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-drawer-mode-side {
|
||||
margin-right: calc(var(--fuse-drawer-width) * -1);
|
||||
|
||||
@ -1,75 +1,60 @@
|
||||
import {
|
||||
animate,
|
||||
AnimationBuilder,
|
||||
AnimationPlayer,
|
||||
style,
|
||||
} from '@angular/animations';
|
||||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||
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, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
|
||||
import {
|
||||
FuseDrawerMode,
|
||||
FuseDrawerPosition,
|
||||
} from '@fuse/components/drawer/drawer.types';
|
||||
import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-drawer',
|
||||
templateUrl: './drawer.component.html',
|
||||
styleUrls: ['./drawer.component.scss'],
|
||||
selector : 'fuse-drawer',
|
||||
templateUrl : './drawer.component.html',
|
||||
styleUrls : ['./drawer.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
exportAs: 'fuseDrawer',
|
||||
standalone: true,
|
||||
exportAs : 'fuseDrawer',
|
||||
standalone : true,
|
||||
})
|
||||
export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
static ngAcceptInputType_fixed: BooleanInput;
|
||||
static ngAcceptInputType_opened: BooleanInput;
|
||||
static ngAcceptInputType_transparentOverlay: BooleanInput;
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
|
||||
private _animationBuilder = inject(AnimationBuilder);
|
||||
private _elementRef = inject(ElementRef);
|
||||
private _renderer2 = inject(Renderer2);
|
||||
private _fuseDrawerService = inject(FuseDrawerService);
|
||||
private _fuseUtilsService = inject(FuseUtilsService);
|
||||
|
||||
@Input() fixed: boolean = false;
|
||||
@Input() mode: FuseDrawerMode = 'side';
|
||||
@Input() name: string = this._fuseUtilsService.randomId();
|
||||
@Input() opened: boolean = false;
|
||||
@Input() position: FuseDrawerPosition = 'left';
|
||||
@Input() transparentOverlay: boolean = false;
|
||||
@Output() readonly fixedChanged: EventEmitter<boolean> =
|
||||
new EventEmitter<boolean>();
|
||||
@Output() readonly modeChanged: EventEmitter<FuseDrawerMode> =
|
||||
new EventEmitter<FuseDrawerMode>();
|
||||
@Output() readonly openedChanged: EventEmitter<boolean> =
|
||||
new EventEmitter<boolean>();
|
||||
@Output() readonly positionChanged: EventEmitter<FuseDrawerPosition> =
|
||||
new EventEmitter<FuseDrawerPosition>();
|
||||
@Output() readonly fixedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
@Output() readonly modeChanged: EventEmitter<FuseDrawerMode> = new EventEmitter<FuseDrawerMode>();
|
||||
@Output() readonly openedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
@Output() readonly positionChanged: EventEmitter<FuseDrawerPosition> = new EventEmitter<FuseDrawerPosition>();
|
||||
|
||||
private _animationsEnabled: boolean = false;
|
||||
private readonly _handleOverlayClick = (): void => this.close();
|
||||
private readonly _handleOverlayClick: any;
|
||||
private _hovered: boolean = false;
|
||||
private _overlay: HTMLElement;
|
||||
private _player: AnimationPlayer;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _animationBuilder: AnimationBuilder,
|
||||
private _elementRef: ElementRef,
|
||||
private _renderer2: Renderer2,
|
||||
private _fuseDrawerService: FuseDrawerService,
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
this._handleOverlayClick = (): void =>
|
||||
{
|
||||
this.close();
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -77,14 +62,15 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* Host binding for component classes
|
||||
*/
|
||||
@HostBinding('class') get classList(): any {
|
||||
@HostBinding('class') get classList(): any
|
||||
{
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
return {
|
||||
'fuse-drawer-animations-enabled': this._animationsEnabled,
|
||||
'fuse-drawer-fixed': this.fixed,
|
||||
'fuse-drawer-hover': this._hovered,
|
||||
[`fuse-drawer-mode-${this.mode}`]: true,
|
||||
'fuse-drawer-opened': this.opened,
|
||||
'fuse-drawer-animations-enabled' : this._animationsEnabled,
|
||||
'fuse-drawer-fixed' : this.fixed,
|
||||
'fuse-drawer-hover' : this._hovered,
|
||||
[`fuse-drawer-mode-${this.mode}`] : true,
|
||||
'fuse-drawer-opened' : this.opened,
|
||||
[`fuse-drawer-position-${this.position}`]: true,
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
@ -93,9 +79,10 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* Host binding for component inline styles
|
||||
*/
|
||||
@HostBinding('style') get styleList(): any {
|
||||
@HostBinding('style') get styleList(): any
|
||||
{
|
||||
return {
|
||||
visibility: this.opened ? 'visible' : 'hidden',
|
||||
'visibility': this.opened ? 'visible' : 'hidden',
|
||||
};
|
||||
}
|
||||
|
||||
@ -109,7 +96,8 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
* @private
|
||||
*/
|
||||
@HostListener('mouseenter')
|
||||
private _onMouseenter(): void {
|
||||
private _onMouseenter(): void
|
||||
{
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
@ -123,7 +111,8 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
* @private
|
||||
*/
|
||||
@HostListener('mouseleave')
|
||||
private _onMouseleave(): void {
|
||||
private _onMouseleave(): void
|
||||
{
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
@ -140,9 +129,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Fixed
|
||||
if ('fixed' in changes) {
|
||||
if ( 'fixed' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.fixed = coerceBooleanProperty(changes.fixed.currentValue);
|
||||
|
||||
@ -151,7 +142,8 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
// Mode
|
||||
if ('mode' in changes) {
|
||||
if ( 'mode' in changes )
|
||||
{
|
||||
// Get the previous and current values
|
||||
const previousMode = changes.mode.previousValue;
|
||||
const currentMode = changes.mode.currentValue;
|
||||
@ -160,15 +152,18 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
this._disableAnimations();
|
||||
|
||||
// If the mode changes: 'over -> side'
|
||||
if (previousMode === 'over' && currentMode === 'side') {
|
||||
if ( previousMode === 'over' && currentMode === 'side' )
|
||||
{
|
||||
// Hide the overlay
|
||||
this._hideOverlay();
|
||||
}
|
||||
|
||||
// If the mode changes: 'side -> over'
|
||||
if (previousMode === 'side' && currentMode === 'over') {
|
||||
if ( previousMode === 'side' && currentMode === 'over' )
|
||||
{
|
||||
// If the drawer is opened
|
||||
if (this.opened) {
|
||||
if ( this.opened )
|
||||
{
|
||||
// Show the overlay
|
||||
this._showOverlay();
|
||||
}
|
||||
@ -180,13 +175,15 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
// Enable the animations after a delay
|
||||
// The delay must be bigger than the current transition-duration
|
||||
// to make sure nothing will be animated while the mode is changing
|
||||
setTimeout(() => {
|
||||
setTimeout(() =>
|
||||
{
|
||||
this._enableAnimations();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Opened
|
||||
if ('opened' in changes) {
|
||||
if ( 'opened' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
const open = coerceBooleanProperty(changes.opened.currentValue);
|
||||
|
||||
@ -195,24 +192,25 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
// Position
|
||||
if ('position' in changes) {
|
||||
if ( 'position' in changes )
|
||||
{
|
||||
// Execute the observable
|
||||
this.positionChanged.next(this.position);
|
||||
}
|
||||
|
||||
// Transparent overlay
|
||||
if ('transparentOverlay' in changes) {
|
||||
if ( 'transparentOverlay' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.transparentOverlay = coerceBooleanProperty(
|
||||
changes.transparentOverlay.currentValue
|
||||
);
|
||||
this.transparentOverlay = coerceBooleanProperty(changes.transparentOverlay.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Register the drawer
|
||||
this._fuseDrawerService.registerComponent(this.name, this);
|
||||
}
|
||||
@ -220,9 +218,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Finish the animation
|
||||
if (this._player) {
|
||||
if ( this._player )
|
||||
{
|
||||
this._player.finish();
|
||||
}
|
||||
|
||||
@ -237,9 +237,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* Open the drawer
|
||||
*/
|
||||
open(): void {
|
||||
open(): void
|
||||
{
|
||||
// Return if the drawer has already opened
|
||||
if (this.opened) {
|
||||
if ( this.opened )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -250,9 +252,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* Close the drawer
|
||||
*/
|
||||
close(): void {
|
||||
close(): void
|
||||
{
|
||||
// Return if the drawer has already closed
|
||||
if (!this.opened) {
|
||||
if ( !this.opened )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -263,10 +267,14 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggle(): void {
|
||||
if (this.opened) {
|
||||
toggle(): void
|
||||
{
|
||||
if ( this.opened )
|
||||
{
|
||||
this.close();
|
||||
} else {
|
||||
}
|
||||
else
|
||||
{
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
@ -280,9 +288,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _enableAnimations(): void {
|
||||
private _enableAnimations(): void
|
||||
{
|
||||
// Return if the animations are already enabled
|
||||
if (this._animationsEnabled) {
|
||||
if ( this._animationsEnabled )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -295,9 +305,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _disableAnimations(): void {
|
||||
private _disableAnimations(): void
|
||||
{
|
||||
// Return if the animations are already disabled
|
||||
if (!this._animationsEnabled) {
|
||||
if ( !this._animationsEnabled )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -310,7 +322,8 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _showOverlay(): void {
|
||||
private _showOverlay(): void
|
||||
{
|
||||
// Create the backdrop element
|
||||
this._overlay = this._renderer2.createElement('div');
|
||||
|
||||
@ -318,31 +331,25 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
this._overlay.classList.add('fuse-drawer-overlay');
|
||||
|
||||
// Add a class depending on the fixed option
|
||||
if (this.fixed) {
|
||||
if ( this.fixed )
|
||||
{
|
||||
this._overlay.classList.add('fuse-drawer-overlay-fixed');
|
||||
}
|
||||
|
||||
// Add a class depending on the transparentOverlay option
|
||||
if (this.transparentOverlay) {
|
||||
if ( this.transparentOverlay )
|
||||
{
|
||||
this._overlay.classList.add('fuse-drawer-overlay-transparent');
|
||||
}
|
||||
|
||||
// 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
|
||||
this._player = this._animationBuilder
|
||||
.build([
|
||||
style({ opacity: 0 }),
|
||||
animate(
|
||||
'300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
|
||||
style({ opacity: 1 })
|
||||
),
|
||||
])
|
||||
.create(this._overlay);
|
||||
this._player = this._animationBuilder.build([
|
||||
style({opacity: 0}),
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
|
||||
]).create(this._overlay);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
@ -356,33 +363,29 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _hideOverlay(): void {
|
||||
if (!this._overlay) {
|
||||
private _hideOverlay(): void
|
||||
{
|
||||
if ( !this._overlay )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the leave animation and attach it to the player
|
||||
this._player = this._animationBuilder
|
||||
.build([
|
||||
animate(
|
||||
'300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
|
||||
style({ opacity: 0 })
|
||||
),
|
||||
])
|
||||
.create(this._overlay);
|
||||
this._player = this._animationBuilder.build([
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
|
||||
]).create(this._overlay);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
this._player.onDone(() =>
|
||||
{
|
||||
// If the overlay still exists...
|
||||
if (this._overlay) {
|
||||
if ( this._overlay )
|
||||
{
|
||||
// Remove the event listener
|
||||
this._overlay.removeEventListener(
|
||||
'click',
|
||||
this._handleOverlayClick
|
||||
);
|
||||
this._overlay.removeEventListener('click', this._handleOverlayClick);
|
||||
|
||||
// Remove the overlay
|
||||
this._overlay.parentNode.removeChild(this._overlay);
|
||||
@ -397,7 +400,8 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
* @param open
|
||||
* @private
|
||||
*/
|
||||
private _toggleOpened(open: boolean): void {
|
||||
private _toggleOpened(open: boolean): void
|
||||
{
|
||||
// Set the opened
|
||||
this.opened = open;
|
||||
|
||||
@ -405,13 +409,16 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
this._enableAnimations();
|
||||
|
||||
// If the mode is 'over'
|
||||
if (this.mode === 'over') {
|
||||
if ( this.mode === 'over' )
|
||||
{
|
||||
// If the drawer opens, show the overlay
|
||||
if (open) {
|
||||
if ( open )
|
||||
{
|
||||
this._showOverlay();
|
||||
}
|
||||
// Otherwise, close the overlay
|
||||
else {
|
||||
else
|
||||
{
|
||||
this._hideOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FuseDrawerService {
|
||||
private _componentRegistry: Map<string, FuseDrawerComponent> = new Map<
|
||||
string,
|
||||
FuseDrawerComponent
|
||||
>();
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseDrawerService
|
||||
{
|
||||
private _componentRegistry: Map<string, FuseDrawerComponent> = new Map<string, FuseDrawerComponent>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
@ -18,7 +23,8 @@ export class FuseDrawerService {
|
||||
* @param name
|
||||
* @param component
|
||||
*/
|
||||
registerComponent(name: string, component: FuseDrawerComponent): void {
|
||||
registerComponent(name: string, component: FuseDrawerComponent): void
|
||||
{
|
||||
this._componentRegistry.set(name, component);
|
||||
}
|
||||
|
||||
@ -27,7 +33,8 @@ export class FuseDrawerService {
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
deregisterComponent(name: string): void {
|
||||
deregisterComponent(name: string): void
|
||||
{
|
||||
this._componentRegistry.delete(name);
|
||||
}
|
||||
|
||||
@ -36,7 +43,8 @@ export class FuseDrawerService {
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
getComponent(name: string): FuseDrawerComponent | undefined {
|
||||
getComponent(name: string): FuseDrawerComponent | undefined
|
||||
{
|
||||
return this._componentRegistry.get(name);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
export type FuseDrawerMode = 'over' | 'side';
|
||||
export type FuseDrawerMode =
|
||||
| 'over'
|
||||
| 'side';
|
||||
|
||||
export type FuseDrawerPosition = 'left' | 'right';
|
||||
export type FuseDrawerPosition =
|
||||
| 'left'
|
||||
| 'right';
|
||||
|
||||
@ -2,8 +2,7 @@
|
||||
<button
|
||||
mat-icon-button
|
||||
[matTooltip]="tooltip || 'Toggle Fullscreen'"
|
||||
(click)="toggleFullscreen()"
|
||||
>
|
||||
(click)="toggleFullscreen()">
|
||||
<ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container>
|
||||
</button>
|
||||
|
||||
|
||||
@ -1,34 +1,46 @@
|
||||
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
Input,
|
||||
TemplateRef,
|
||||
ViewEncapsulation,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-fullscreen',
|
||||
templateUrl: './fullscreen.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
selector : 'fuse-fullscreen',
|
||||
templateUrl : './fullscreen.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs: 'fuseFullscreen',
|
||||
imports: [
|
||||
MatButtonModule,
|
||||
MatTooltipModule,
|
||||
NgTemplateOutlet,
|
||||
MatIconModule,
|
||||
],
|
||||
exportAs : 'fuseFullscreen',
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
|
||||
})
|
||||
export class FuseFullscreenComponent {
|
||||
private _document = inject(DOCUMENT);
|
||||
|
||||
export class FuseFullscreenComponent implements OnInit
|
||||
{
|
||||
@Input() iconTpl: TemplateRef<any>;
|
||||
@Input() tooltip: string;
|
||||
private _fsDoc: FSDocument;
|
||||
private _fsDocEl: FSDocumentElement;
|
||||
private _isFullscreen: boolean = false;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(@Inject(DOCUMENT) private _document: Document)
|
||||
{
|
||||
this._fsDoc = _document as FSDocument;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
this._fsDocEl = document.documentElement as FSDocumentElement;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
@ -37,22 +49,123 @@ export class FuseFullscreenComponent {
|
||||
/**
|
||||
* Toggle the fullscreen mode
|
||||
*/
|
||||
toggleFullscreen(): void {
|
||||
if (!this._document.fullscreenEnabled) {
|
||||
console.log('Fullscreen is not available in this browser.');
|
||||
toggleFullscreen(): void
|
||||
{
|
||||
// Check if the fullscreen is open
|
||||
this._isFullscreen = this._getBrowserFullscreenElement() !== null;
|
||||
|
||||
// Toggle the fullscreen
|
||||
if ( this._isFullscreen )
|
||||
{
|
||||
this._closeFullscreen();
|
||||
}
|
||||
else
|
||||
{
|
||||
this._openFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get browser's fullscreen element
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _getBrowserFullscreenElement(): Element
|
||||
{
|
||||
if ( typeof this._fsDoc.fullscreenElement !== 'undefined' )
|
||||
{
|
||||
return this._fsDoc.fullscreenElement;
|
||||
}
|
||||
|
||||
if ( typeof this._fsDoc.mozFullScreenElement !== 'undefined' )
|
||||
{
|
||||
return this._fsDoc.mozFullScreenElement;
|
||||
}
|
||||
|
||||
if ( typeof this._fsDoc.msFullscreenElement !== 'undefined' )
|
||||
{
|
||||
return this._fsDoc.msFullscreenElement;
|
||||
}
|
||||
|
||||
if ( typeof this._fsDoc.webkitFullscreenElement !== 'undefined' )
|
||||
{
|
||||
return this._fsDoc.webkitFullscreenElement;
|
||||
}
|
||||
|
||||
throw new Error('Fullscreen mode is not supported by this browser');
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the fullscreen
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _openFullscreen(): void
|
||||
{
|
||||
if ( this._fsDocEl.requestFullscreen )
|
||||
{
|
||||
this._fsDocEl.requestFullscreen();
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if the fullscreen is already open
|
||||
const fullScreen = this._document.fullscreenElement;
|
||||
// Firefox
|
||||
if ( this._fsDocEl.mozRequestFullScreen )
|
||||
{
|
||||
this._fsDocEl.mozRequestFullScreen();
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle the fullscreen
|
||||
if (fullScreen) {
|
||||
this._document.exitFullscreen();
|
||||
} else {
|
||||
this._document.documentElement.requestFullscreen().catch(() => {
|
||||
console.error('Entering fullscreen mode failed.');
|
||||
});
|
||||
// Chrome, Safari and Opera
|
||||
if ( this._fsDocEl.webkitRequestFullscreen )
|
||||
{
|
||||
this._fsDocEl.webkitRequestFullscreen();
|
||||
return;
|
||||
}
|
||||
|
||||
// IE/Edge
|
||||
if ( this._fsDocEl.msRequestFullscreen )
|
||||
{
|
||||
this._fsDocEl.msRequestFullscreen();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the fullscreen
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _closeFullscreen(): void
|
||||
{
|
||||
if ( this._fsDoc.exitFullscreen )
|
||||
{
|
||||
this._fsDoc.exitFullscreen();
|
||||
return;
|
||||
}
|
||||
|
||||
// Firefox
|
||||
if ( this._fsDoc.mozCancelFullScreen )
|
||||
{
|
||||
this._fsDoc.mozCancelFullScreen();
|
||||
return;
|
||||
}
|
||||
|
||||
// Chrome, Safari and Opera
|
||||
if ( this._fsDoc.webkitExitFullscreen )
|
||||
{
|
||||
this._fsDoc.webkitExitFullscreen();
|
||||
return;
|
||||
}
|
||||
|
||||
// IE/Edge
|
||||
else if ( this._fsDoc.msExitFullscreen )
|
||||
{
|
||||
this._fsDoc.msExitFullscreen();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
16
src/@fuse/components/fullscreen/fullscreen.types.ts
Normal file
16
src/@fuse/components/fullscreen/fullscreen.types.ts
Normal file
@ -0,0 +1,16 @@
|
||||
export interface FSDocument extends HTMLDocument
|
||||
{
|
||||
mozFullScreenElement?: Element;
|
||||
mozCancelFullScreen?: () => void;
|
||||
msFullscreenElement?: Element;
|
||||
msExitFullscreen?: () => void;
|
||||
webkitFullscreenElement?: Element;
|
||||
webkitExitFullscreen?: () => void;
|
||||
}
|
||||
|
||||
export interface FSDocumentElement extends HTMLElement
|
||||
{
|
||||
mozRequestFullScreen?: () => void;
|
||||
msRequestFullscreen?: () => void;
|
||||
webkitRequestFullscreen?: () => void;
|
||||
}
|
||||
@ -1 +1,2 @@
|
||||
export * from '@fuse/components/fullscreen/fullscreen.component';
|
||||
export * from '@fuse/components/fullscreen/fullscreen.types';
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<ng-content></ng-content>
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<!-- @formatter:off -->
|
||||
<ng-template let-highlightedCode="highlightedCode" let-lang="lang">
|
||||
<div class="fuse-highlight fuse-highlight-code-container">
|
||||
<pre [ngClass]="'language-' + lang"><code [ngClass]="'language-' + lang" [innerHTML]="highlightedCode"></code></pre>
|
||||
</div>
|
||||
</ng-template>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
@ -1,38 +1,20 @@
|
||||
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, ChangeDetectorRef, Component, ElementRef, EmbeddedViewRef, Input, OnChanges, Renderer2, SecurityContext, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { FuseHighlightService } from '@fuse/components/highlight/highlight.service';
|
||||
|
||||
@Component({
|
||||
selector: 'textarea[fuse-highlight]',
|
||||
templateUrl: './highlight.component.html',
|
||||
styleUrls: ['./highlight.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
selector : 'textarea[fuse-highlight]',
|
||||
templateUrl : './highlight.component.html',
|
||||
styleUrls : ['./highlight.component.scss'],
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs: 'fuseHighlight',
|
||||
imports: [NgClass],
|
||||
exportAs : 'fuseHighlight',
|
||||
standalone : true,
|
||||
imports : [NgClass],
|
||||
})
|
||||
export class FuseHighlightComponent implements OnChanges, AfterViewInit {
|
||||
private _domSanitizer = inject(DomSanitizer);
|
||||
private _elementRef = inject(ElementRef);
|
||||
private _fuseHighlightService = inject(FuseHighlightService);
|
||||
private _viewContainerRef = inject(ViewContainerRef);
|
||||
|
||||
export class FuseHighlightComponent implements OnChanges, AfterViewInit
|
||||
{
|
||||
@Input() code: string;
|
||||
@Input() lang: string;
|
||||
@ViewChild(TemplateRef) templateRef: TemplateRef<any>;
|
||||
@ -40,6 +22,20 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit {
|
||||
highlightedCode: string;
|
||||
private _viewRef: EmbeddedViewRef<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _domSanitizer: DomSanitizer,
|
||||
private _elementRef: ElementRef,
|
||||
private _renderer2: Renderer2,
|
||||
private _fuseHighlightService: FuseHighlightService,
|
||||
private _viewContainerRef: ViewContainerRef,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -49,11 +45,14 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit {
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Code & Lang
|
||||
if ('code' in changes || 'lang' in changes) {
|
||||
if ( 'code' in changes || 'lang' in changes )
|
||||
{
|
||||
// Return if the viewContainerRef is not available
|
||||
if (!this._viewContainerRef.length) {
|
||||
if ( !this._viewContainerRef.length )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -65,15 +64,18 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit {
|
||||
/**
|
||||
* After view init
|
||||
*/
|
||||
ngAfterViewInit(): void {
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
// Return if there is no language set
|
||||
if (!this.lang) {
|
||||
if ( !this.lang )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is no code input, get the code from
|
||||
// the textarea
|
||||
if (!this.code) {
|
||||
if ( !this.code )
|
||||
{
|
||||
// Get the code
|
||||
this.code = this._elementRef.nativeElement.value;
|
||||
}
|
||||
@ -91,42 +93,41 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _highlightAndInsert(): void {
|
||||
private _highlightAndInsert(): void
|
||||
{
|
||||
// Return if the template reference is not available
|
||||
if (!this.templateRef) {
|
||||
if ( !this.templateRef )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Return if the code or language is not defined
|
||||
if (!this.code || !this.lang) {
|
||||
if ( !this.code || !this.lang )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy the component if there is already one
|
||||
if (this._viewRef) {
|
||||
if ( this._viewRef )
|
||||
{
|
||||
this._viewRef.destroy();
|
||||
this._viewRef = null;
|
||||
}
|
||||
|
||||
// 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
|
||||
if (this.highlightedCode === null) {
|
||||
if ( this.highlightedCode === null )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Render and insert the template
|
||||
this._viewRef = this._viewContainerRef.createEmbeddedView(
|
||||
this.templateRef,
|
||||
{
|
||||
highlightedCode: this.highlightedCode,
|
||||
lang: this.lang,
|
||||
}
|
||||
);
|
||||
this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
|
||||
highlightedCode: this.highlightedCode,
|
||||
lang : this.lang,
|
||||
});
|
||||
|
||||
// Detect the changes
|
||||
this._viewRef.detectChanges();
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import hljs from 'highlight.js';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FuseHighlightService {
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseHighlightService
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -10,12 +18,13 @@ export class FuseHighlightService {
|
||||
/**
|
||||
* Highlight
|
||||
*/
|
||||
highlight(code: string, language: string): string {
|
||||
highlight(code: string, language: string): string
|
||||
{
|
||||
// Format the code
|
||||
code = this._format(code);
|
||||
|
||||
// Highlight and return the code
|
||||
return hljs.highlight(code, { language }).value;
|
||||
return hljs.highlight(code, {language}).value;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -30,28 +39,32 @@ export class FuseHighlightService {
|
||||
* @param code
|
||||
* @private
|
||||
*/
|
||||
private _format(code: string): string {
|
||||
private _format(code: string): string
|
||||
{
|
||||
let indentation = 0;
|
||||
|
||||
// Split the code into lines and store the lines
|
||||
const lines = code.split('\n');
|
||||
|
||||
// Trim the empty lines around the code block
|
||||
while (lines.length && lines[0].trim() === '') {
|
||||
while ( lines.length && lines[0].trim() === '' )
|
||||
{
|
||||
lines.shift();
|
||||
}
|
||||
|
||||
while (lines.length && lines[lines.length - 1].trim() === '') {
|
||||
while ( lines.length && lines[lines.length - 1].trim() === '' )
|
||||
{
|
||||
lines.pop();
|
||||
}
|
||||
|
||||
// Iterate through the lines
|
||||
lines
|
||||
.filter((line) => line.length)
|
||||
.forEach((line, index) => {
|
||||
lines.filter(line => line.length)
|
||||
.forEach((line, index) =>
|
||||
{
|
||||
// Always get the indentation of the first line so we can
|
||||
// have something to compare with
|
||||
if (index === 0) {
|
||||
if ( index === 0 )
|
||||
{
|
||||
indentation = line.search(/\S|$/);
|
||||
return;
|
||||
}
|
||||
@ -62,6 +75,6 @@ export class FuseHighlightService {
|
||||
|
||||
// Iterate through the lines one more time, remove the extra
|
||||
// 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');
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@if (show) {
|
||||
<mat-progress-bar [mode]="mode" [value]="progress"></mat-progress-bar>
|
||||
}
|
||||
<ng-container *ngIf="show">
|
||||
<mat-progress-bar
|
||||
[mode]="mode"
|
||||
[value]="progress"></mat-progress-bar>
|
||||
</ng-container>
|
||||
|
||||
@ -1,36 +1,34 @@
|
||||
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
|
||||
import {
|
||||
Component,
|
||||
inject,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
SimpleChanges,
|
||||
ViewEncapsulation,
|
||||
} from '@angular/core';
|
||||
import { NgIf } from '@angular/common';
|
||||
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { FuseLoadingService } from '@fuse/services/loading';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-loading-bar',
|
||||
templateUrl: './loading-bar.component.html',
|
||||
styleUrls: ['./loading-bar.component.scss'],
|
||||
selector : 'fuse-loading-bar',
|
||||
templateUrl : './loading-bar.component.html',
|
||||
styleUrls : ['./loading-bar.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
exportAs: 'fuseLoadingBar',
|
||||
imports: [MatProgressBarModule],
|
||||
exportAs : 'fuseLoadingBar',
|
||||
standalone : true,
|
||||
imports : [NgIf, MatProgressBarModule],
|
||||
})
|
||||
export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy {
|
||||
private _fuseLoadingService = inject(FuseLoadingService);
|
||||
|
||||
export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
@Input() autoMode: boolean = true;
|
||||
mode: 'determinate' | 'indeterminate';
|
||||
progress: number = 0;
|
||||
show: boolean = false;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseLoadingService: FuseLoadingService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -40,44 +38,50 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Auto mode
|
||||
if ('autoMode' in changes) {
|
||||
if ( 'autoMode' in changes )
|
||||
{
|
||||
// Set the auto mode in the service
|
||||
this._fuseLoadingService.setAutoMode(
|
||||
coerceBooleanProperty(changes.autoMode.currentValue)
|
||||
);
|
||||
this._fuseLoadingService.setAutoMode(coerceBooleanProperty(changes.autoMode.currentValue));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to the service
|
||||
this._fuseLoadingService.mode$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((value) => {
|
||||
.subscribe((value) =>
|
||||
{
|
||||
this.mode = value;
|
||||
});
|
||||
|
||||
this._fuseLoadingService.progress$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((value) => {
|
||||
.subscribe((value) =>
|
||||
{
|
||||
this.progress = value;
|
||||
});
|
||||
|
||||
this._fuseLoadingService.show$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((value) => {
|
||||
.subscribe((value) =>
|
||||
{
|
||||
this.show = value;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
@ -1,8 +1,3 @@
|
||||
<div class="flex">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="
|
||||
columnsTemplate;
|
||||
context: { $implicit: distributedColumns }
|
||||
"
|
||||
></ng-container>
|
||||
<ng-container *ngTemplateOutlet="columnsTemplate; context: { $implicit: distributedColumns }"></ng-container>
|
||||
</div>
|
||||
|
||||
@ -1,29 +1,31 @@
|
||||
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 { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-masonry',
|
||||
templateUrl: './masonry.component.html',
|
||||
selector : 'fuse-masonry',
|
||||
templateUrl : './masonry.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations: fuseAnimations,
|
||||
exportAs: 'fuseMasonry',
|
||||
imports: [NgTemplateOutlet],
|
||||
animations : fuseAnimations,
|
||||
exportAs : 'fuseMasonry',
|
||||
standalone : true,
|
||||
imports : [NgTemplateOutlet],
|
||||
})
|
||||
export class FuseMasonryComponent implements OnChanges, AfterViewInit {
|
||||
export class FuseMasonryComponent implements OnChanges, AfterViewInit
|
||||
{
|
||||
@Input() columnsTemplate: TemplateRef<any>;
|
||||
@Input() columns: number;
|
||||
@Input() items: any[] = [];
|
||||
distributedColumns: any[] = [];
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -33,15 +35,18 @@ export class FuseMasonryComponent implements OnChanges, AfterViewInit {
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Columns
|
||||
if ('columns' in changes) {
|
||||
if ( 'columns' in changes )
|
||||
{
|
||||
// Distribute the items
|
||||
this._distributeItems();
|
||||
}
|
||||
|
||||
// Items
|
||||
if ('items' in changes) {
|
||||
if ( 'items' in changes )
|
||||
{
|
||||
// Distribute the items
|
||||
this._distributeItems();
|
||||
}
|
||||
@ -50,7 +55,8 @@ export class FuseMasonryComponent implements OnChanges, AfterViewInit {
|
||||
/**
|
||||
* After view init
|
||||
*/
|
||||
ngAfterViewInit(): void {
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
// Distribute the items for the first time
|
||||
this._distributeItems();
|
||||
}
|
||||
@ -62,20 +68,21 @@ export class FuseMasonryComponent implements OnChanges, AfterViewInit {
|
||||
/**
|
||||
* Distribute items into columns
|
||||
*/
|
||||
private _distributeItems(): void {
|
||||
private _distributeItems(): void
|
||||
{
|
||||
// Return an empty array if there are no items
|
||||
if (this.items.length === 0) {
|
||||
if ( this.items.length === 0 )
|
||||
{
|
||||
this.distributedColumns = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 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
|
||||
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]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,15 +2,13 @@
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-wrapper"
|
||||
[class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
|
||||
[ngClass]="item.classes?.wrapper"
|
||||
>
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<!-- Item with an internal link -->
|
||||
@if (item.link && !item.externalLink && !item.function && !item.disabled) {
|
||||
<ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
|
||||
<div
|
||||
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]"
|
||||
[fragment]="item.fragment ?? null"
|
||||
[preserveFragment]="item.preserveFragment ?? false"
|
||||
@ -18,45 +16,38 @@
|
||||
[queryParamsHandling]="item.queryParamsHandling ?? null"
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
>
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an external link -->
|
||||
@if (item.link && item.externalLink && !item.function && !item.disabled) {
|
||||
<ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
>
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with a function -->
|
||||
@if (!item.link && item.function && !item.disabled) {
|
||||
<ng-container *ngIf="!item.link && item.function && !item.disabled">
|
||||
<div
|
||||
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 || ''"
|
||||
(click)="item.function(item)"
|
||||
>
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an internal link and function -->
|
||||
@if (item.link && !item.externalLink && item.function && !item.disabled) {
|
||||
<ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
|
||||
<div
|
||||
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]"
|
||||
[fragment]="item.fragment ?? null"
|
||||
[preserveFragment]="item.preserveFragment ?? false"
|
||||
@ -65,85 +56,79 @@
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)"
|
||||
>
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an external link and function -->
|
||||
@if (item.link && item.externalLink && item.function && !item.disabled) {
|
||||
<ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)"
|
||||
mat-menu-item
|
||||
>
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with a no link and no function -->
|
||||
@if (!item.link && !item.function && !item.disabled) {
|
||||
<ng-container *ngIf="!item.link && !item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{
|
||||
'fuse-horizontal-navigation-item-active-forced': item.active,
|
||||
}"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
>
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item is disabled -->
|
||||
@if (item.disabled) {
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"
|
||||
>
|
||||
<ng-container *ngIf="item.disabled">
|
||||
<div class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Item template -->
|
||||
<ng-template #itemTemplate>
|
||||
|
||||
<!-- Icon -->
|
||||
@if (item.icon) {
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"
|
||||
></mat-icon>
|
||||
}
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-horizontal-navigation-item-title-wrapper">
|
||||
<div class="fuse-horizontal-navigation-item-title">
|
||||
<span [ngClass]="item.classes?.title">
|
||||
{{ item.title }}
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
@if (item.subtitle) {
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-horizontal-navigation-item-subtitle text-hint">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{ item.subtitle }}
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
@if (item.badge) {
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-horizontal-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes"
|
||||
>
|
||||
{{ item.badge.title }}
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
</ng-template>
|
||||
|
||||
@ -1,21 +1,9 @@
|
||||
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import {
|
||||
IsActiveMatchOptions,
|
||||
RouterLink,
|
||||
RouterLinkActive,
|
||||
} from '@angular/router';
|
||||
import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@ -23,39 +11,37 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-horizontal-navigation-basic-item',
|
||||
templateUrl: './basic.component.html',
|
||||
selector : 'fuse-horizontal-navigation-basic-item',
|
||||
templateUrl : './basic.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
NgClass,
|
||||
RouterLink,
|
||||
RouterLinkActive,
|
||||
MatTooltipModule,
|
||||
NgTemplateOutlet,
|
||||
MatMenuModule,
|
||||
MatIconModule,
|
||||
],
|
||||
standalone : true,
|
||||
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 _fuseNavigationService = inject(FuseNavigationService);
|
||||
private _fuseUtilsService = inject(FuseUtilsService);
|
||||
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
|
||||
// Set the equivalent of {exact: false} as default for active match options.
|
||||
// We are not assigning the item.isActiveMatchOptions directly to the
|
||||
// [routerLinkActiveOptions] because if it's "undefined" initially, the router
|
||||
// will throw an error and stop working.
|
||||
isActiveMatchOptions: IsActiveMatchOptions =
|
||||
this._fuseUtilsService.subsetMatchOptions;
|
||||
|
||||
isActiveMatchOptions: IsActiveMatchOptions;
|
||||
private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
// Set the equivalent of {exact: false} as default for active match options.
|
||||
// We are not assigning the item.isActiveMatchOptions directly to the
|
||||
// [routerLinkActiveOptions] because if it's "undefined" initially, the router
|
||||
// will throw an error and stop working.
|
||||
this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -63,7 +49,8 @@ export class FuseHorizontalNavigationBasicItemComponent
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Set the "isActiveMatchOptions" either from item's
|
||||
// "isActiveMatchOptions" or the equivalent form of
|
||||
// item's "exactMatch" option
|
||||
@ -73,25 +60,26 @@ export class FuseHorizontalNavigationBasicItemComponent
|
||||
: this._fuseUtilsService.subsetMatchOptions;
|
||||
|
||||
// Get the parent navigation component
|
||||
this._fuseHorizontalNavigationComponent =
|
||||
this._fuseNavigationService.getComponent(this.name);
|
||||
this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
@ -1,135 +1,121 @@
|
||||
@if (!child) {
|
||||
<ng-container *ngIf="!child">
|
||||
<div
|
||||
[ngClass]="{
|
||||
'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
|
||||
'fuse-horizontal-navigation-menu-active-forced': item.active,
|
||||
}"
|
||||
[ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
|
||||
'fuse-horizontal-navigation-menu-active-forced': item.active}"
|
||||
[matMenuTriggerFor]="matMenu"
|
||||
(onMenuOpen)="triggerChangeDetection()"
|
||||
(onMenuClose)="triggerChangeDetection()"
|
||||
#trigger="matMenuTrigger"
|
||||
>
|
||||
<ng-container
|
||||
*ngTemplateOutlet="itemTemplate; context: { $implicit: item }"
|
||||
></ng-container>
|
||||
#trigger="matMenuTrigger">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<mat-menu
|
||||
class="fuse-horizontal-navigation-menu-panel"
|
||||
[overlapTrigger]="false"
|
||||
#matMenu="matMenu"
|
||||
>
|
||||
@for (item of item.children; track trackByFn($index, item)) {
|
||||
#matMenu="matMenu">
|
||||
|
||||
<ng-container *ngFor="let item of item.children; trackBy: trackByFn">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
@if ((item.hidden && !item.hidden(item)) || !item.hidden) {
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
@if (item.type === 'basic') {
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[disabled]="item.disabled"
|
||||
mat-menu-item
|
||||
>
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-horizontal-navigation-basic-item>
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Branch: aside, collapsable, group -->
|
||||
@if (
|
||||
item.type === 'aside' ||
|
||||
item.type === 'collapsable' ||
|
||||
item.type === 'group'
|
||||
) {
|
||||
<ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[disabled]="item.disabled"
|
||||
[matMenuTriggerFor]="branch.matMenu"
|
||||
mat-menu-item
|
||||
>
|
||||
<ng-container
|
||||
*ngTemplateOutlet="
|
||||
itemTemplate;
|
||||
context: { $implicit: item }
|
||||
"
|
||||
></ng-container>
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
<fuse-horizontal-navigation-branch-item
|
||||
[child]="true"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
#branch
|
||||
></fuse-horizontal-navigation-branch-item>
|
||||
#branch></fuse-horizontal-navigation-branch-item>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Divider -->
|
||||
@if (item.type === 'divider') {
|
||||
<div class="fuse-horizontal-navigation-menu-item" mat-menu-item>
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-horizontal-navigation-divider-item>
|
||||
[name]="name"></fuse-horizontal-navigation-divider-item>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</mat-menu>
|
||||
|
||||
<!-- Item template -->
|
||||
<ng-template let-item #itemTemplate>
|
||||
<ng-template
|
||||
let-item
|
||||
#itemTemplate>
|
||||
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-wrapper"
|
||||
[class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
|
||||
[ngClass]="item.classes?.wrapper"
|
||||
>
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{
|
||||
'fuse-horizontal-navigation-item-disabled': item.disabled,
|
||||
'fuse-horizontal-navigation-item-active-forced': item.active,
|
||||
}"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
>
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled,
|
||||
'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
|
||||
<!-- Icon -->
|
||||
@if (item.icon) {
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"
|
||||
></mat-icon>
|
||||
}
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-horizontal-navigation-item-title-wrapper">
|
||||
<div class="fuse-horizontal-navigation-item-title">
|
||||
<span [ngClass]="item.classes?.title">
|
||||
{{ item.title }}
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
@if (item.subtitle) {
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-subtitle text-hint"
|
||||
>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-horizontal-navigation-item-subtitle text-hint">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{ item.subtitle }}
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
@if (item.badge) {
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-horizontal-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes"
|
||||
>
|
||||
{{ item.badge.title }}
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
@ -1,16 +1,6 @@
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
ViewChild,
|
||||
forwardRef,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenu, MatMenuModule } from '@angular/material/menu';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
@ -22,38 +12,36 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-horizontal-navigation-branch-item',
|
||||
templateUrl: './branch.component.html',
|
||||
selector : 'fuse-horizontal-navigation-branch-item',
|
||||
templateUrl : './branch.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
NgClass,
|
||||
MatMenuModule,
|
||||
NgTemplateOutlet,
|
||||
FuseHorizontalNavigationBasicItemComponent,
|
||||
forwardRef(() => FuseHorizontalNavigationBranchItemComponent),
|
||||
FuseHorizontalNavigationDividerItemComponent,
|
||||
MatTooltipModule,
|
||||
MatIconModule,
|
||||
],
|
||||
standalone : true,
|
||||
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 */
|
||||
static ngAcceptInputType_child: BooleanInput;
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
|
||||
private _changeDetectorRef = inject(ChangeDetectorRef);
|
||||
private _fuseNavigationService = inject(FuseNavigationService);
|
||||
|
||||
@Input() child: boolean = false;
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
@ViewChild('matMenu', { static: true }) matMenu: MatMenu;
|
||||
@ViewChild('matMenu', {static: true}) matMenu: MatMenu;
|
||||
|
||||
private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -61,24 +49,26 @@ export class FuseHorizontalNavigationBranchItemComponent
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// 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
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
@ -91,7 +81,8 @@ export class FuseHorizontalNavigationBranchItemComponent
|
||||
/**
|
||||
* Trigger the change detection
|
||||
*/
|
||||
triggerChangeDetection(): void {
|
||||
triggerChangeDetection(): void
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
@ -102,7 +93,8 @@ export class FuseHorizontalNavigationBranchItemComponent
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any {
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<!-- Divider -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-wrapper divider"
|
||||
[ngClass]="item.classes?.wrapper"
|
||||
></div>
|
||||
[ngClass]="item.classes?.wrapper"></div>
|
||||
|
||||
@ -1,36 +1,35 @@
|
||||
import { NgClass } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
inject,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-horizontal-navigation-divider-item',
|
||||
templateUrl: './divider.component.html',
|
||||
selector : 'fuse-horizontal-navigation-divider-item',
|
||||
templateUrl : './divider.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [NgClass],
|
||||
standalone : true,
|
||||
imports : [NgClass],
|
||||
})
|
||||
export class FuseHorizontalNavigationDividerItemComponent
|
||||
implements OnInit, OnDestroy
|
||||
export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
private _changeDetectorRef = inject(ChangeDetectorRef);
|
||||
private _fuseNavigationService = inject(FuseNavigationService);
|
||||
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
|
||||
private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -38,24 +37,26 @@ export class FuseHorizontalNavigationDividerItemComponent
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// 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
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<!-- Spacer -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-wrapper"
|
||||
[ngClass]="item.classes?.wrapper"
|
||||
></div>
|
||||
[ngClass]="item.classes?.wrapper"></div>
|
||||
|
||||
@ -1,36 +1,35 @@
|
||||
import { NgClass } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
inject,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-horizontal-navigation-spacer-item',
|
||||
templateUrl: './spacer.component.html',
|
||||
selector : 'fuse-horizontal-navigation-spacer-item',
|
||||
templateUrl : './spacer.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [NgClass],
|
||||
standalone : true,
|
||||
imports : [NgClass],
|
||||
})
|
||||
export class FuseHorizontalNavigationSpacerItemComponent
|
||||
implements OnInit, OnDestroy
|
||||
export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
private _changeDetectorRef = inject(ChangeDetectorRef);
|
||||
private _fuseNavigationService = inject(FuseNavigationService);
|
||||
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
|
||||
private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -38,24 +37,26 @@ export class FuseHorizontalNavigationSpacerItemComponent
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// 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
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
@ -1,37 +1,36 @@
|
||||
<div class="fuse-horizontal-navigation-wrapper">
|
||||
@for (item of navigation; track trackByFn($index, item)) {
|
||||
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
@if ((item.hidden && !item.hidden(item)) || !item.hidden) {
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
@if (item.type === 'basic') {
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-horizontal-navigation-basic-item>
|
||||
}
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Branch: aside, collapsable, group -->
|
||||
@if (
|
||||
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
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-horizontal-navigation-branch-item>
|
||||
}
|
||||
[name]="name"></fuse-horizontal-navigation-branch-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Spacer -->
|
||||
@if (item.type === 'spacer') {
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-horizontal-navigation-spacer-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-horizontal-navigation-spacer-item>
|
||||
}
|
||||
}
|
||||
}
|
||||
[name]="name"></fuse-horizontal-navigation-spacer-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/* Root navigation specific */
|
||||
fuse-horizontal-navigation {
|
||||
|
||||
.fuse-horizontal-navigation-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -7,8 +8,11 @@ fuse-horizontal-navigation {
|
||||
/* Basic, Branch */
|
||||
fuse-horizontal-navigation-basic-item,
|
||||
fuse-horizontal-navigation-branch-item {
|
||||
|
||||
@screen sm {
|
||||
|
||||
&:hover {
|
||||
|
||||
.fuse-horizontal-navigation-item-wrapper {
|
||||
@apply bg-hover;
|
||||
}
|
||||
@ -33,8 +37,10 @@ fuse-horizontal-navigation {
|
||||
|
||||
/* Basic - When item active (current link) */
|
||||
fuse-horizontal-navigation-basic-item {
|
||||
|
||||
.fuse-horizontal-navigation-item-active,
|
||||
.fuse-horizontal-navigation-item-active-forced {
|
||||
|
||||
.fuse-horizontal-navigation-item-title {
|
||||
@apply text-primary #{'!important'};
|
||||
}
|
||||
@ -55,8 +61,10 @@ fuse-horizontal-navigation {
|
||||
|
||||
/* Branch - When menu open */
|
||||
fuse-horizontal-navigation-branch-item {
|
||||
|
||||
.fuse-horizontal-navigation-menu-active,
|
||||
.fuse-horizontal-navigation-menu-active-forced {
|
||||
|
||||
.fuse-horizontal-navigation-item-wrapper {
|
||||
@apply bg-hover;
|
||||
}
|
||||
@ -72,6 +80,7 @@ fuse-horizontal-navigation {
|
||||
|
||||
/* Menu panel specific */
|
||||
.fuse-horizontal-navigation-menu-panel {
|
||||
|
||||
.fuse-horizontal-navigation-menu-item {
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
@ -100,10 +109,13 @@ fuse-horizontal-navigation {
|
||||
|
||||
/* Navigation menu item common */
|
||||
.fuse-horizontal-navigation-menu-item {
|
||||
|
||||
/* Basic - When item active (current link) */
|
||||
fuse-horizontal-navigation-basic-item {
|
||||
|
||||
.fuse-horizontal-navigation-item-active,
|
||||
.fuse-horizontal-navigation-item-active-forced {
|
||||
|
||||
.fuse-horizontal-navigation-item-title {
|
||||
@apply text-primary #{'!important'};
|
||||
}
|
||||
@ -126,6 +138,7 @@ fuse-horizontal-navigation {
|
||||
width: 100%;
|
||||
|
||||
&.fuse-horizontal-navigation-item-has-subtitle {
|
||||
|
||||
.fuse-horizontal-navigation-item {
|
||||
min-height: 56px;
|
||||
}
|
||||
@ -143,6 +156,7 @@ fuse-horizontal-navigation {
|
||||
text-decoration: none;
|
||||
|
||||
.fuse-horizontal-navigation-item-title-wrapper {
|
||||
|
||||
.fuse-horizontal-navigation-item-subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -1,15 +1,5 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
SimpleChanges,
|
||||
ViewEncapsulation,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import { NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@ -20,32 +10,35 @@ import { FuseHorizontalNavigationBranchItemComponent } from './components/branch
|
||||
import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer/spacer.component';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-horizontal-navigation',
|
||||
templateUrl: './horizontal.component.html',
|
||||
styleUrls: ['./horizontal.component.scss'],
|
||||
animations: fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
selector : 'fuse-horizontal-navigation',
|
||||
templateUrl : './horizontal.component.html',
|
||||
styleUrls : ['./horizontal.component.scss'],
|
||||
animations : fuseAnimations,
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs: 'fuseHorizontalNavigation',
|
||||
imports: [
|
||||
FuseHorizontalNavigationBasicItemComponent,
|
||||
FuseHorizontalNavigationBranchItemComponent,
|
||||
FuseHorizontalNavigationSpacerItemComponent,
|
||||
],
|
||||
exportAs : 'fuseHorizontalNavigation',
|
||||
standalone : true,
|
||||
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 _fuseNavigationService = inject(FuseNavigationService);
|
||||
private _fuseUtilsService = inject(FuseUtilsService);
|
||||
|
||||
@Input() name: string = this._fuseUtilsService.randomId();
|
||||
@Input() navigation: FuseNavigationItem[];
|
||||
|
||||
onRefreshed: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -55,9 +48,11 @@ export class FuseHorizontalNavigationComponent
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Navigation
|
||||
if ('navigation' in changes) {
|
||||
if ( 'navigation' in changes )
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
@ -66,9 +61,11 @@ export class FuseHorizontalNavigationComponent
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Make sure the name input is not an empty string
|
||||
if (this.name === '') {
|
||||
if ( this.name === '' )
|
||||
{
|
||||
this.name = this._fuseUtilsService.randomId();
|
||||
}
|
||||
|
||||
@ -79,7 +76,8 @@ export class FuseHorizontalNavigationComponent
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Deregister the navigation component from the registry
|
||||
this._fuseNavigationService.deregisterComponent(this.name);
|
||||
|
||||
@ -95,7 +93,8 @@ export class FuseHorizontalNavigationComponent
|
||||
/**
|
||||
* Refresh the component to apply the changes
|
||||
*/
|
||||
refresh(): void {
|
||||
refresh(): void
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
|
||||
@ -109,7 +108,8 @@ export class FuseHorizontalNavigationComponent
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any {
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,18 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FuseNavigationService {
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseNavigationService
|
||||
{
|
||||
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>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
@ -19,7 +24,8 @@ export class FuseNavigationService {
|
||||
* @param name
|
||||
* @param component
|
||||
*/
|
||||
registerComponent(name: string, component: any): void {
|
||||
registerComponent(name: string, component: any): void
|
||||
{
|
||||
this._componentRegistry.set(name, component);
|
||||
}
|
||||
|
||||
@ -28,7 +34,8 @@ export class FuseNavigationService {
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
deregisterComponent(name: string): void {
|
||||
deregisterComponent(name: string): void
|
||||
{
|
||||
this._componentRegistry.delete(name);
|
||||
}
|
||||
|
||||
@ -37,7 +44,8 @@ export class FuseNavigationService {
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
getComponent<T>(name: string): T {
|
||||
getComponent<T>(name: string): T
|
||||
{
|
||||
return this._componentRegistry.get(name);
|
||||
}
|
||||
|
||||
@ -47,7 +55,8 @@ export class FuseNavigationService {
|
||||
* @param key
|
||||
* @param navigation
|
||||
*/
|
||||
storeNavigation(key: string, navigation: FuseNavigationItem[]): void {
|
||||
storeNavigation(key: string, navigation: FuseNavigationItem[]): void
|
||||
{
|
||||
// Add to the store
|
||||
this._navigationStore.set(key, navigation);
|
||||
}
|
||||
@ -57,7 +66,8 @@ export class FuseNavigationService {
|
||||
*
|
||||
* @param key
|
||||
*/
|
||||
getNavigation(key: string): FuseNavigationItem[] {
|
||||
getNavigation(key: string): FuseNavigationItem[]
|
||||
{
|
||||
return this._navigationStore.get(key) ?? [];
|
||||
}
|
||||
|
||||
@ -66,12 +76,12 @@ export class FuseNavigationService {
|
||||
*
|
||||
* @param key
|
||||
*/
|
||||
deleteNavigation(key: string): void {
|
||||
deleteNavigation(key: string): void
|
||||
{
|
||||
// Check if the navigation exists
|
||||
if (!this._navigationStore.has(key)) {
|
||||
console.warn(
|
||||
`Navigation with the key '${key}' does not exist in the store.`
|
||||
);
|
||||
if ( !this._navigationStore.has(key) )
|
||||
{
|
||||
console.warn(`Navigation with the key '${key}' does not exist in the store.`);
|
||||
}
|
||||
|
||||
// Delete from the storage
|
||||
@ -85,22 +95,20 @@ export class FuseNavigationService {
|
||||
* @param navigation
|
||||
* @param flatNavigation
|
||||
*/
|
||||
getFlatNavigation(
|
||||
navigation: FuseNavigationItem[],
|
||||
flatNavigation: FuseNavigationItem[] = []
|
||||
): FuseNavigationItem[] {
|
||||
for (const item of navigation) {
|
||||
if (item.type === 'basic') {
|
||||
getFlatNavigation(navigation: FuseNavigationItem[], flatNavigation: FuseNavigationItem[] = []): FuseNavigationItem[]
|
||||
{
|
||||
for ( const item of navigation )
|
||||
{
|
||||
if ( item.type === 'basic' )
|
||||
{
|
||||
flatNavigation.push(item);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (
|
||||
item.type === 'aside' ||
|
||||
item.type === 'collapsable' ||
|
||||
item.type === 'group'
|
||||
) {
|
||||
if (item.children) {
|
||||
if ( item.type === 'aside' || item.type === 'collapsable' || item.type === 'group' )
|
||||
{
|
||||
if ( item.children )
|
||||
{
|
||||
this.getFlatNavigation(item.children, flatNavigation);
|
||||
}
|
||||
}
|
||||
@ -116,19 +124,21 @@ export class FuseNavigationService {
|
||||
* @param id
|
||||
* @param navigation
|
||||
*/
|
||||
getItem(
|
||||
id: string,
|
||||
navigation: FuseNavigationItem[]
|
||||
): FuseNavigationItem | null {
|
||||
for (const item of navigation) {
|
||||
if (item.id === id) {
|
||||
getItem(id: string, navigation: FuseNavigationItem[]): FuseNavigationItem | null
|
||||
{
|
||||
for ( const item of navigation )
|
||||
{
|
||||
if ( item.id === id )
|
||||
{
|
||||
return item;
|
||||
}
|
||||
|
||||
if (item.children) {
|
||||
if ( item.children )
|
||||
{
|
||||
const childItem = this.getItem(id, item.children);
|
||||
|
||||
if (childItem) {
|
||||
if ( childItem )
|
||||
{
|
||||
return childItem;
|
||||
}
|
||||
}
|
||||
@ -148,17 +158,22 @@ export class FuseNavigationService {
|
||||
getItemParent(
|
||||
id: string,
|
||||
navigation: FuseNavigationItem[],
|
||||
parent: FuseNavigationItem[] | FuseNavigationItem
|
||||
): FuseNavigationItem[] | FuseNavigationItem | null {
|
||||
for (const item of navigation) {
|
||||
if (item.id === id) {
|
||||
parent: FuseNavigationItem[] | FuseNavigationItem,
|
||||
): FuseNavigationItem[] | FuseNavigationItem | null
|
||||
{
|
||||
for ( const item of navigation )
|
||||
{
|
||||
if ( item.id === id )
|
||||
{
|
||||
return parent;
|
||||
}
|
||||
|
||||
if (item.children) {
|
||||
if ( item.children )
|
||||
{
|
||||
const childItem = this.getItemParent(id, item.children, item);
|
||||
|
||||
if (childItem) {
|
||||
if ( childItem )
|
||||
{
|
||||
return childItem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
import {
|
||||
IsActiveMatchOptions,
|
||||
Params,
|
||||
QueryParamsHandling,
|
||||
} from '@angular/router';
|
||||
import { IsActiveMatchOptions, Params, QueryParamsHandling } from '@angular/router';
|
||||
|
||||
export interface FuseNavigationItem {
|
||||
export interface FuseNavigationItem
|
||||
{
|
||||
id?: string;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
type: 'aside' | 'basic' | 'collapsable' | 'divider' | 'group' | 'spacer';
|
||||
type:
|
||||
| 'aside'
|
||||
| 'basic'
|
||||
| 'collapsable'
|
||||
| 'divider'
|
||||
| 'group'
|
||||
| 'spacer';
|
||||
hidden?: (item: FuseNavigationItem) => boolean;
|
||||
active?: boolean;
|
||||
disabled?: boolean;
|
||||
@ -19,7 +22,12 @@ export interface FuseNavigationItem {
|
||||
queryParams?: Params | null;
|
||||
queryParamsHandling?: QueryParamsHandling | null;
|
||||
externalLink?: boolean;
|
||||
target?: '_blank' | '_self' | '_parent' | '_top' | string;
|
||||
target?:
|
||||
| '_blank'
|
||||
| '_self'
|
||||
| '_parent'
|
||||
| '_top'
|
||||
| string;
|
||||
exactMatch?: boolean;
|
||||
isActiveMatchOptions?: IsActiveMatchOptions;
|
||||
function?: (item: FuseNavigationItem) => void;
|
||||
@ -44,6 +52,10 @@ export type FuseVerticalNavigationAppearance =
|
||||
| 'dense'
|
||||
| 'thin';
|
||||
|
||||
export type FuseVerticalNavigationMode = 'over' | 'side';
|
||||
export type FuseVerticalNavigationMode =
|
||||
| 'over'
|
||||
| 'side';
|
||||
|
||||
export type FuseVerticalNavigationPosition = 'left' | 'right';
|
||||
export type FuseVerticalNavigationPosition =
|
||||
| 'left'
|
||||
| 'right';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
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.types';
|
||||
export * from '@fuse/components/navigation/vertical/vertical.component';
|
||||
|
||||
@ -1,102 +1,103 @@
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-wrapper"
|
||||
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
|
||||
[ngClass]="item.classes?.wrapper"
|
||||
>
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{
|
||||
'fuse-vertical-navigation-item-active': active,
|
||||
'fuse-vertical-navigation-item-disabled': item.disabled,
|
||||
'fuse-vertical-navigation-item-active-forced': item.active,
|
||||
}"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
>
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active': active,
|
||||
'fuse-vertical-navigation-item-disabled': item.disabled,
|
||||
'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
|
||||
<!-- Icon -->
|
||||
@if (item.icon) {
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"
|
||||
></mat-icon>
|
||||
}
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
<div class="fuse-vertical-navigation-item-title">
|
||||
<span [ngClass]="item.classes?.title">
|
||||
{{ item.title }}
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
@if (item.subtitle) {
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{ item.subtitle }}
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
@if (item.badge) {
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes"
|
||||
>
|
||||
{{ item.badge.title }}
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@if (!skipChildren) {
|
||||
<ng-container *ngIf="!skipChildren">
|
||||
|
||||
<div class="fuse-vertical-navigation-item-children">
|
||||
@for (item of item.children; track trackByFn($index, item)) {
|
||||
|
||||
<ng-container *ngFor="let item of item.children; trackBy: trackByFn">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
@if ((item.hidden && !item.hidden(item)) || !item.hidden) {
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
@if (item.type === 'basic') {
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-basic-item>
|
||||
}
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Collapsable -->
|
||||
@if (item.type === 'collapsable') {
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"
|
||||
></fuse-vertical-navigation-collapsable-item>
|
||||
}
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Divider -->
|
||||
@if (item.type === 'divider') {
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-divider-item>
|
||||
}
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Group -->
|
||||
@if (item.type === 'group') {
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-group-item>
|
||||
}
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Spacer -->
|
||||
@if (item.type === 'spacer') {
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-spacer-item>
|
||||
}
|
||||
}
|
||||
}
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
</ng-container>
|
||||
|
||||
@ -1,16 +1,6 @@
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { NgClass } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
SimpleChanges,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import { NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
@ -22,35 +12,22 @@ import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/nav
|
||||
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
|
||||
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { Subject, filter, takeUntil } from 'rxjs';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-vertical-navigation-aside-item',
|
||||
templateUrl: './aside.component.html',
|
||||
selector : 'fuse-vertical-navigation-aside-item',
|
||||
templateUrl : './aside.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
NgClass,
|
||||
MatTooltipModule,
|
||||
MatIconModule,
|
||||
FuseVerticalNavigationBasicItemComponent,
|
||||
FuseVerticalNavigationCollapsableItemComponent,
|
||||
FuseVerticalNavigationDividerItemComponent,
|
||||
FuseVerticalNavigationGroupItemComponent,
|
||||
FuseVerticalNavigationSpacerItemComponent,
|
||||
],
|
||||
standalone : true,
|
||||
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 */
|
||||
static ngAcceptInputType_autoCollapse: BooleanInput;
|
||||
static ngAcceptInputType_skipChildren: BooleanInput;
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
|
||||
private _changeDetectorRef = inject(ChangeDetectorRef);
|
||||
private _router = inject(Router);
|
||||
private _fuseNavigationService = inject(FuseNavigationService);
|
||||
|
||||
@Input() activeItemId: string;
|
||||
@Input() autoCollapse: boolean;
|
||||
@Input() item: FuseNavigationItem;
|
||||
@ -61,6 +38,17 @@ export class FuseVerticalNavigationAsideItemComponent
|
||||
private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _router: Router,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -70,9 +58,11 @@ export class FuseVerticalNavigationAsideItemComponent
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Active item id
|
||||
if ('activeItemId' in changes) {
|
||||
if ( 'activeItemId' in changes )
|
||||
{
|
||||
// Mark if active
|
||||
this._markIfActive(this._router.url);
|
||||
}
|
||||
@ -81,41 +71,41 @@ export class FuseVerticalNavigationAsideItemComponent
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Mark if active
|
||||
this._markIfActive(this._router.url);
|
||||
|
||||
// Attach a listener to the NavigationEnd event
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter(
|
||||
(event): event is NavigationEnd =>
|
||||
event instanceof NavigationEnd
|
||||
),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll),
|
||||
)
|
||||
.subscribe((event: NavigationEnd) => {
|
||||
.subscribe((event: NavigationEnd) =>
|
||||
{
|
||||
// Mark if active
|
||||
this._markIfActive(event.urlAfterRedirects);
|
||||
});
|
||||
|
||||
// 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
|
||||
this._fuseVerticalNavigationComponent.onRefreshed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
@ -131,7 +121,8 @@ export class FuseVerticalNavigationAsideItemComponent
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any {
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
|
||||
@ -147,33 +138,34 @@ export class FuseVerticalNavigationAsideItemComponent
|
||||
* @param currentUrl
|
||||
* @private
|
||||
*/
|
||||
private _hasActiveChild(
|
||||
item: FuseNavigationItem,
|
||||
currentUrl: string
|
||||
): boolean {
|
||||
private _hasActiveChild(item: FuseNavigationItem, currentUrl: string): boolean
|
||||
{
|
||||
const children = item.children;
|
||||
|
||||
if (!children) {
|
||||
if ( !children )
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const child of children) {
|
||||
if (child.children) {
|
||||
if (this._hasActiveChild(child, currentUrl)) {
|
||||
for ( const child of children )
|
||||
{
|
||||
if ( child.children )
|
||||
{
|
||||
if ( this._hasActiveChild(child, currentUrl) )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Skip items other than 'basic'
|
||||
if (child.type !== 'basic') {
|
||||
if ( child.type !== 'basic' )
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@ -186,13 +178,15 @@ export class FuseVerticalNavigationAsideItemComponent
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _markIfActive(currentUrl: string): void {
|
||||
private _markIfActive(currentUrl: string): void
|
||||
{
|
||||
// Check if the activeItemId is equals to this item id
|
||||
this.active = this.activeItemId === this.item.id;
|
||||
|
||||
// If the aside has a children that is active,
|
||||
// always mark it as active
|
||||
if (this._hasActiveChild(this.item, currentUrl)) {
|
||||
if ( this._hasActiveChild(this.item, currentUrl) )
|
||||
{
|
||||
this.active = true;
|
||||
}
|
||||
|
||||
|
||||
@ -2,15 +2,13 @@
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-wrapper"
|
||||
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
|
||||
[ngClass]="item.classes?.wrapper"
|
||||
>
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<!-- Item with an internal link -->
|
||||
@if (item.link && !item.externalLink && !item.function && !item.disabled) {
|
||||
<ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
|
||||
<a
|
||||
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]"
|
||||
[fragment]="item.fragment ?? null"
|
||||
[preserveFragment]="item.preserveFragment ?? false"
|
||||
@ -18,45 +16,38 @@
|
||||
[queryParamsHandling]="item.queryParamsHandling ?? null"
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
>
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an external link -->
|
||||
@if (item.link && item.externalLink && !item.function && !item.disabled) {
|
||||
<ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
>
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with a function -->
|
||||
@if (!item.link && item.function && !item.disabled) {
|
||||
<ng-container *ngIf="!item.link && item.function && !item.disabled">
|
||||
<div
|
||||
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 || ''"
|
||||
(click)="item.function(item)"
|
||||
>
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an internal link and function -->
|
||||
@if (item.link && !item.externalLink && item.function && !item.disabled) {
|
||||
<ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
|
||||
<a
|
||||
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]"
|
||||
[fragment]="item.fragment ?? null"
|
||||
[preserveFragment]="item.preserveFragment ?? false"
|
||||
@ -65,85 +56,80 @@
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)"
|
||||
>
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an external link and function -->
|
||||
@if (item.link && item.externalLink && item.function && !item.disabled) {
|
||||
<ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)"
|
||||
>
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with a no link and no function -->
|
||||
@if (!item.link && !item.function && !item.disabled) {
|
||||
<ng-container *ngIf="!item.link && !item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{
|
||||
'fuse-vertical-navigation-item-active-forced': item.active,
|
||||
}"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
>
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Item is disabled -->
|
||||
@if (item.disabled) {
|
||||
<ng-container *ngIf="item.disabled">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
>
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Item template -->
|
||||
<ng-template #itemTemplate>
|
||||
|
||||
<!-- Icon -->
|
||||
@if (item.icon) {
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"
|
||||
></mat-icon>
|
||||
}
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
<div class="fuse-vertical-navigation-item-title">
|
||||
<span [ngClass]="item.classes?.title">
|
||||
{{ item.title }}
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
@if (item.subtitle) {
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{ item.subtitle }}
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
@if (item.badge) {
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes"
|
||||
>
|
||||
{{ item.badge.title }}
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
</ng-template>
|
||||
|
||||
@ -1,20 +1,8 @@
|
||||
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
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 { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
@ -22,38 +10,37 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-vertical-navigation-basic-item',
|
||||
templateUrl: './basic.component.html',
|
||||
selector : 'fuse-vertical-navigation-basic-item',
|
||||
templateUrl : './basic.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
NgClass,
|
||||
RouterLink,
|
||||
RouterLinkActive,
|
||||
MatTooltipModule,
|
||||
NgTemplateOutlet,
|
||||
MatIconModule,
|
||||
],
|
||||
standalone : true,
|
||||
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 _fuseNavigationService = inject(FuseNavigationService);
|
||||
private _fuseUtilsService = inject(FuseUtilsService);
|
||||
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
|
||||
// Set the equivalent of {exact: false} as default for active match options.
|
||||
// We are not assigning the item.isActiveMatchOptions directly to the
|
||||
// [routerLinkActiveOptions] because if it's "undefined" initially, the router
|
||||
// will throw an error and stop working.
|
||||
isActiveMatchOptions: IsActiveMatchOptions =
|
||||
this._fuseUtilsService.subsetMatchOptions;
|
||||
|
||||
isActiveMatchOptions: IsActiveMatchOptions;
|
||||
private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
// Set the equivalent of {exact: false} as default for active match options.
|
||||
// We are not assigning the item.isActiveMatchOptions directly to the
|
||||
// [routerLinkActiveOptions] because if it's "undefined" initially, the router
|
||||
// will throw an error and stop working.
|
||||
this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -61,7 +48,8 @@ export class FuseVerticalNavigationBasicItemComponent
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Set the "isActiveMatchOptions" either from item's
|
||||
// "isActiveMatchOptions" or the equivalent form of
|
||||
// item's "exactMatch" option
|
||||
@ -71,25 +59,26 @@ export class FuseVerticalNavigationBasicItemComponent
|
||||
: this._fuseUtilsService.subsetMatchOptions;
|
||||
|
||||
// Get the parent navigation component
|
||||
this._fuseVerticalNavigationComponent =
|
||||
this._fuseNavigationService.getComponent(this.name);
|
||||
this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseVerticalNavigationComponent.onRefreshed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
@ -1,105 +1,106 @@
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-wrapper"
|
||||
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
|
||||
[ngClass]="item.classes?.wrapper"
|
||||
>
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{ 'fuse-vertical-navigation-item-disabled': item.disabled }"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="toggleCollapsable()"
|
||||
>
|
||||
(click)="toggleCollapsable()">
|
||||
|
||||
<!-- Icon -->
|
||||
@if (item.icon) {
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"
|
||||
></mat-icon>
|
||||
}
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
<div class="fuse-vertical-navigation-item-title">
|
||||
<span [ngClass]="item.classes?.title">
|
||||
{{ item.title }}
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
@if (item.subtitle) {
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{ item.subtitle }}
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
@if (item.badge) {
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes"
|
||||
>
|
||||
{{ item.badge.title }}
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Arrow -->
|
||||
<mat-icon
|
||||
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>
|
||||
|
||||
@if (!isCollapsed) {
|
||||
<div class="fuse-vertical-navigation-item-children" @expandCollapse>
|
||||
@for (item of item.children; track trackByFn($index, item)) {
|
||||
<!-- Skip the hidden items -->
|
||||
@if ((item.hidden && !item.hidden(item)) || !item.hidden) {
|
||||
<!-- Basic -->
|
||||
@if (item.type === 'basic') {
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-basic-item>
|
||||
}
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-children"
|
||||
*ngIf="!isCollapsed"
|
||||
@expandCollapse>
|
||||
|
||||
<!-- Collapsable -->
|
||||
@if (item.type === 'collapsable') {
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"
|
||||
></fuse-vertical-navigation-collapsable-item>
|
||||
}
|
||||
<ng-container *ngFor="let item of item.children; trackBy: trackByFn">
|
||||
|
||||
<!-- Divider -->
|
||||
@if (item.type === 'divider') {
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-divider-item>
|
||||
}
|
||||
<!-- Skip the hidden items -->
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Group -->
|
||||
@if (item.type === 'group') {
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-group-item>
|
||||
}
|
||||
<!-- Basic -->
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Spacer -->
|
||||
@if (item.type === 'spacer') {
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-spacer-item>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<!-- Collapsable -->
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Divider -->
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Group -->
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Spacer -->
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,6 @@
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { NgClass } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
HostBinding,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
forwardRef,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import { NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
@ -22,35 +12,22 @@ import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/nav
|
||||
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
|
||||
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { Subject, filter, takeUntil } from 'rxjs';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-vertical-navigation-collapsable-item',
|
||||
templateUrl: './collapsable.component.html',
|
||||
animations: fuseAnimations,
|
||||
selector : 'fuse-vertical-navigation-collapsable-item',
|
||||
templateUrl : './collapsable.component.html',
|
||||
animations : fuseAnimations,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
NgClass,
|
||||
MatTooltipModule,
|
||||
MatIconModule,
|
||||
FuseVerticalNavigationBasicItemComponent,
|
||||
forwardRef(() => FuseVerticalNavigationCollapsableItemComponent),
|
||||
FuseVerticalNavigationDividerItemComponent,
|
||||
FuseVerticalNavigationGroupItemComponent,
|
||||
FuseVerticalNavigationSpacerItemComponent,
|
||||
],
|
||||
standalone : true,
|
||||
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 */
|
||||
static ngAcceptInputType_autoCollapse: BooleanInput;
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
|
||||
private _changeDetectorRef = inject(ChangeDetectorRef);
|
||||
private _router = inject(Router);
|
||||
private _fuseNavigationService = inject(FuseNavigationService);
|
||||
|
||||
@Input() autoCollapse: boolean;
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
@ -60,6 +37,17 @@ export class FuseVerticalNavigationCollapsableItemComponent
|
||||
private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _router: Router,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -67,11 +55,12 @@ export class FuseVerticalNavigationCollapsableItemComponent
|
||||
/**
|
||||
* Host binding for component classes
|
||||
*/
|
||||
@HostBinding('class') get classList(): any {
|
||||
@HostBinding('class') get classList(): any
|
||||
{
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
return {
|
||||
'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
|
||||
'fuse-vertical-navigation-item-expanded': this.isExpanded,
|
||||
'fuse-vertical-navigation-item-expanded' : this.isExpanded,
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
}
|
||||
@ -83,19 +72,22 @@ export class FuseVerticalNavigationCollapsableItemComponent
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// 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 (this._hasActiveChild(this.item, this._router.url)) {
|
||||
if ( this._hasActiveChild(this.item, this._router.url) )
|
||||
{
|
||||
this.expand();
|
||||
}
|
||||
// Otherwise...
|
||||
else {
|
||||
else
|
||||
{
|
||||
// If the autoCollapse is on, collapse...
|
||||
if (this.autoCollapse) {
|
||||
if ( this.autoCollapse )
|
||||
{
|
||||
this.collapse();
|
||||
}
|
||||
}
|
||||
@ -103,40 +95,49 @@ export class FuseVerticalNavigationCollapsableItemComponent
|
||||
// Listen for the onCollapsableItemCollapsed from the service
|
||||
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((collapsedItem) => {
|
||||
.subscribe((collapsedItem) =>
|
||||
{
|
||||
// Check if the collapsed item is null
|
||||
if (collapsedItem === null) {
|
||||
if ( collapsedItem === null )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Collapse if this is a children of the collapsed item
|
||||
if (this._isChildrenOf(collapsedItem, this.item)) {
|
||||
if ( this._isChildrenOf(collapsedItem, this.item) )
|
||||
{
|
||||
this.collapse();
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for the onCollapsableItemExpanded from the service if the autoCollapse is on
|
||||
if (this.autoCollapse) {
|
||||
if ( this.autoCollapse )
|
||||
{
|
||||
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((expandedItem) => {
|
||||
.subscribe((expandedItem) =>
|
||||
{
|
||||
// Check if the expanded item is null
|
||||
if (expandedItem === null) {
|
||||
if ( expandedItem === null )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if this is a parent of the expanded item
|
||||
if (this._isChildrenOf(this.item, expandedItem)) {
|
||||
if ( this._isChildrenOf(this.item, expandedItem) )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Check if this is the expanded item
|
||||
if (this.item === expandedItem) {
|
||||
if ( this.item === expandedItem )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -148,39 +149,42 @@ export class FuseVerticalNavigationCollapsableItemComponent
|
||||
// Attach a listener to the NavigationEnd event
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter(
|
||||
(event): event is NavigationEnd =>
|
||||
event instanceof NavigationEnd
|
||||
),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
filter((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 (this._hasActiveChild(this.item, event.urlAfterRedirects)) {
|
||||
if ( this._hasActiveChild(this.item, event.urlAfterRedirects) )
|
||||
{
|
||||
this.expand();
|
||||
}
|
||||
// Otherwise...
|
||||
else {
|
||||
else
|
||||
{
|
||||
// If the autoCollapse is on, collapse...
|
||||
if (this.autoCollapse) {
|
||||
if ( this.autoCollapse )
|
||||
{
|
||||
this.collapse();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseVerticalNavigationComponent.onRefreshed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
@ -193,14 +197,17 @@ export class FuseVerticalNavigationCollapsableItemComponent
|
||||
/**
|
||||
* Collapse
|
||||
*/
|
||||
collapse(): void {
|
||||
collapse(): void
|
||||
{
|
||||
// Return if the item is disabled
|
||||
if (this.item.disabled) {
|
||||
if ( this.item.disabled )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Return if the item is already collapsed
|
||||
if (this.isCollapsed) {
|
||||
if ( this.isCollapsed )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -212,22 +219,23 @@ export class FuseVerticalNavigationCollapsableItemComponent
|
||||
this._changeDetectorRef.markForCheck();
|
||||
|
||||
// Execute the observable
|
||||
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed.next(
|
||||
this.item
|
||||
);
|
||||
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed.next(this.item);
|
||||
}
|
||||
|
||||
/**
|
||||
* Expand
|
||||
*/
|
||||
expand(): void {
|
||||
expand(): void
|
||||
{
|
||||
// Return if the item is disabled
|
||||
if (this.item.disabled) {
|
||||
if ( this.item.disabled )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Return if the item is already expanded
|
||||
if (!this.isCollapsed) {
|
||||
if ( !this.isCollapsed )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -239,19 +247,21 @@ export class FuseVerticalNavigationCollapsableItemComponent
|
||||
this._changeDetectorRef.markForCheck();
|
||||
|
||||
// Execute the observable
|
||||
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded.next(
|
||||
this.item
|
||||
);
|
||||
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded.next(this.item);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle collapsable
|
||||
*/
|
||||
toggleCollapsable(): void {
|
||||
toggleCollapsable(): void
|
||||
{
|
||||
// Toggle collapse/expand
|
||||
if (this.isCollapsed) {
|
||||
if ( this.isCollapsed )
|
||||
{
|
||||
this.expand();
|
||||
} else {
|
||||
}
|
||||
else
|
||||
{
|
||||
this.collapse();
|
||||
}
|
||||
}
|
||||
@ -262,7 +272,8 @@ export class FuseVerticalNavigationCollapsableItemComponent
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any {
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
|
||||
@ -278,28 +289,28 @@ export class FuseVerticalNavigationCollapsableItemComponent
|
||||
* @param currentUrl
|
||||
* @private
|
||||
*/
|
||||
private _hasActiveChild(
|
||||
item: FuseNavigationItem,
|
||||
currentUrl: string
|
||||
): boolean {
|
||||
private _hasActiveChild(item: FuseNavigationItem, currentUrl: string): boolean
|
||||
{
|
||||
const children = item.children;
|
||||
|
||||
if (!children) {
|
||||
if ( !children )
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const child of children) {
|
||||
if (child.children) {
|
||||
if (this._hasActiveChild(child, currentUrl)) {
|
||||
for ( const child of children )
|
||||
{
|
||||
if ( child.children )
|
||||
{
|
||||
if ( this._hasActiveChild(child, currentUrl) )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@ -315,23 +326,26 @@ export class FuseVerticalNavigationCollapsableItemComponent
|
||||
* @param item
|
||||
* @private
|
||||
*/
|
||||
private _isChildrenOf(
|
||||
parent: FuseNavigationItem,
|
||||
item: FuseNavigationItem
|
||||
): boolean {
|
||||
private _isChildrenOf(parent: FuseNavigationItem, item: FuseNavigationItem): boolean
|
||||
{
|
||||
const children = parent.children;
|
||||
|
||||
if (!children) {
|
||||
if ( !children )
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
if (children.indexOf(item) > -1) {
|
||||
if ( children.indexOf(item) > -1 )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
for (const child of children) {
|
||||
if (child.children) {
|
||||
if (this._isChildrenOf(child, item)) {
|
||||
for ( const child of children )
|
||||
{
|
||||
if ( child.children )
|
||||
{
|
||||
if ( this._isChildrenOf(child, item) )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<!-- Divider -->
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-wrapper divider"
|
||||
[ngClass]="item.classes?.wrapper"
|
||||
></div>
|
||||
[ngClass]="item.classes?.wrapper"></div>
|
||||
|
||||
@ -1,36 +1,35 @@
|
||||
import { NgClass } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
inject,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-vertical-navigation-divider-item',
|
||||
templateUrl: './divider.component.html',
|
||||
selector : 'fuse-vertical-navigation-divider-item',
|
||||
templateUrl : './divider.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [NgClass],
|
||||
standalone : true,
|
||||
imports : [NgClass],
|
||||
})
|
||||
export class FuseVerticalNavigationDividerItemComponent
|
||||
implements OnInit, OnDestroy
|
||||
export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
private _changeDetectorRef = inject(ChangeDetectorRef);
|
||||
private _fuseNavigationService = inject(FuseNavigationService);
|
||||
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
|
||||
private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -38,24 +37,26 @@ export class FuseVerticalNavigationDividerItemComponent
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// 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
|
||||
this._fuseVerticalNavigationComponent.onRefreshed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
@ -2,90 +2,90 @@
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-wrapper"
|
||||
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
|
||||
[ngClass]="item.classes?.wrapper"
|
||||
>
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<div class="fuse-vertical-navigation-item">
|
||||
|
||||
<!-- Icon -->
|
||||
@if (item.icon) {
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"
|
||||
></mat-icon>
|
||||
}
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
<div class="fuse-vertical-navigation-item-title">
|
||||
<span [ngClass]="item.classes?.title">
|
||||
{{ item.title }}
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
@if (item.subtitle) {
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{ item.subtitle }}
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
@if (item.badge) {
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes"
|
||||
>
|
||||
{{ item.badge.title }}
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@for (item of item.children; track trackByFn($index, item)) {
|
||||
<ng-container *ngFor="let item of item.children; trackBy: trackByFn">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
@if ((item.hidden && !item.hidden(item)) || !item.hidden) {
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
@if (item.type === 'basic') {
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-basic-item>
|
||||
}
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Collapsable -->
|
||||
@if (item.type === 'collapsable') {
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"
|
||||
></fuse-vertical-navigation-collapsable-item>
|
||||
}
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Divider -->
|
||||
@if (item.type === 'divider') {
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-divider-item>
|
||||
}
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Group -->
|
||||
@if (item.type === 'group') {
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-group-item>
|
||||
}
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Spacer -->
|
||||
@if (item.type === 'spacer') {
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-spacer-item>
|
||||
}
|
||||
}
|
||||
}
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
@ -1,15 +1,6 @@
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { NgClass } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
forwardRef,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import { NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
@ -21,29 +12,18 @@ import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/ver
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-vertical-navigation-group-item',
|
||||
templateUrl: './group.component.html',
|
||||
selector : 'fuse-vertical-navigation-group-item',
|
||||
templateUrl : './group.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
NgClass,
|
||||
MatIconModule,
|
||||
FuseVerticalNavigationBasicItemComponent,
|
||||
FuseVerticalNavigationCollapsableItemComponent,
|
||||
FuseVerticalNavigationDividerItemComponent,
|
||||
forwardRef(() => FuseVerticalNavigationGroupItemComponent),
|
||||
FuseVerticalNavigationSpacerItemComponent,
|
||||
],
|
||||
standalone : true,
|
||||
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 */
|
||||
static ngAcceptInputType_autoCollapse: BooleanInput;
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
|
||||
private _changeDetectorRef = inject(ChangeDetectorRef);
|
||||
private _fuseNavigationService = inject(FuseNavigationService);
|
||||
|
||||
@Input() autoCollapse: boolean;
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
@ -51,6 +31,16 @@ export class FuseVerticalNavigationGroupItemComponent
|
||||
private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -58,24 +48,26 @@ export class FuseVerticalNavigationGroupItemComponent
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// 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
|
||||
this._fuseVerticalNavigationComponent.onRefreshed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
@ -91,7 +83,8 @@ export class FuseVerticalNavigationGroupItemComponent
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any {
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<!-- Spacer -->
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-wrapper"
|
||||
[ngClass]="item.classes?.wrapper"
|
||||
></div>
|
||||
[ngClass]="item.classes?.wrapper"></div>
|
||||
|
||||
@ -1,36 +1,35 @@
|
||||
import { NgClass } from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
inject,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-vertical-navigation-spacer-item',
|
||||
templateUrl: './spacer.component.html',
|
||||
selector : 'fuse-vertical-navigation-spacer-item',
|
||||
templateUrl : './spacer.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [NgClass],
|
||||
standalone : true,
|
||||
imports : [NgClass],
|
||||
})
|
||||
export class FuseVerticalNavigationSpacerItemComponent
|
||||
implements OnInit, OnDestroy
|
||||
export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
private _changeDetectorRef = inject(ChangeDetectorRef);
|
||||
private _fuseNavigationService = inject(FuseNavigationService);
|
||||
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
|
||||
private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -38,24 +37,26 @@ export class FuseVerticalNavigationSpacerItemComponent
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// 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
|
||||
this._fuseVerticalNavigationComponent.onRefreshed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
}
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
/* Compact appearance overrides */
|
||||
&.fuse-vertical-navigation-appearance-compact {
|
||||
width: var(--fuse-vertical-navigation-compact-width);
|
||||
@ -12,11 +13,10 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Left positioned */
|
||||
&.fuse-vertical-navigation-position-left {
|
||||
|
||||
/* Side mode */
|
||||
&.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 */
|
||||
@ -27,11 +27,10 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Right positioned */
|
||||
&.fuse-vertical-navigation-position-right {
|
||||
|
||||
/* Side mode */
|
||||
&.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 */
|
||||
@ -48,10 +47,13 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Wrapper */
|
||||
.fuse-vertical-navigation-wrapper {
|
||||
|
||||
/* Content */
|
||||
.fuse-vertical-navigation-content {
|
||||
|
||||
> fuse-vertical-navigation-aside-item,
|
||||
> fuse-vertical-navigation-basic-item {
|
||||
|
||||
.fuse-vertical-navigation-item-wrapper {
|
||||
margin: 4px 8px 0 8px;
|
||||
|
||||
@ -89,12 +91,13 @@ fuse-vertical-navigation {
|
||||
}
|
||||
|
||||
> fuse-vertical-navigation-collapsable-item {
|
||||
display: none;
|
||||
display: none
|
||||
}
|
||||
|
||||
> fuse-vertical-navigation-group-item {
|
||||
|
||||
> .fuse-vertical-navigation-item-wrapper {
|
||||
display: none;
|
||||
display: none
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,8 +25,7 @@ fuse-vertical-navigation {
|
||||
&.fuse-vertical-navigation-animations-enabled {
|
||||
transition-duration: 400ms;
|
||||
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 */
|
||||
.fuse-vertical-navigation-wrapper {
|
||||
@ -45,6 +44,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Left position */
|
||||
&.fuse-vertical-navigation-position-left {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-left: calc(#{var(--fuse-vertical-navigation-width)} * -1);
|
||||
@ -72,6 +72,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Right position */
|
||||
&.fuse-vertical-navigation-position-right {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-vertical-navigation-mode-side {
|
||||
margin-right: calc(var(--fuse-vertical-navigation-width) * -1);
|
||||
@ -136,6 +137,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Header */
|
||||
.fuse-vertical-navigation-header {
|
||||
|
||||
}
|
||||
|
||||
/* Content */
|
||||
@ -158,6 +160,7 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Footer */
|
||||
.fuse-vertical-navigation-footer {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -192,6 +195,7 @@ fuse-vertical-navigation {
|
||||
}
|
||||
|
||||
&.fuse-vertical-navigation-position-right {
|
||||
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: var(--fuse-vertical-navigation-width);
|
||||
@ -215,6 +219,7 @@ fuse-vertical-navigation {
|
||||
user-select: none;
|
||||
|
||||
.fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -238,6 +243,7 @@ fuse-vertical-navigation {
|
||||
}
|
||||
|
||||
.fuse-vertical-navigation-item-title-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item-subtitle {
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
@ -266,6 +272,7 @@ fuse-vertical-navigation {
|
||||
fuse-vertical-navigation-basic-item,
|
||||
fuse-vertical-navigation-collapsable-item,
|
||||
fuse-vertical-navigation-group-item {
|
||||
|
||||
> .fuse-vertical-navigation-item-wrapper {
|
||||
margin: 0 12px;
|
||||
}
|
||||
@ -284,17 +291,23 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Aside */
|
||||
fuse-vertical-navigation-aside-item {
|
||||
|
||||
}
|
||||
|
||||
/* Basic */
|
||||
fuse-vertical-navigation-basic-item {
|
||||
|
||||
}
|
||||
|
||||
/* Collapsable */
|
||||
fuse-vertical-navigation-collapsable-item {
|
||||
|
||||
> .fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
|
||||
.fuse-vertical-navigation-item-badge {
|
||||
|
||||
+ .fuse-vertical-navigation-item-arrow {
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -304,16 +317,18 @@ fuse-vertical-navigation {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-left: auto;
|
||||
transition:
|
||||
transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
|
||||
color 375ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transition: 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-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
|
||||
.fuse-vertical-navigation-item-arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
@ -322,6 +337,7 @@ fuse-vertical-navigation {
|
||||
}
|
||||
|
||||
> .fuse-vertical-navigation-item-children {
|
||||
|
||||
> *:first-child {
|
||||
margin-top: 6px;
|
||||
}
|
||||
@ -330,6 +346,7 @@ fuse-vertical-navigation {
|
||||
padding-bottom: 6px;
|
||||
|
||||
> .fuse-vertical-navigation-item-children {
|
||||
|
||||
> *:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@ -351,18 +368,21 @@ fuse-vertical-navigation {
|
||||
|
||||
/* 2nd level */
|
||||
.fuse-vertical-navigation-item-children {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
padding-left: 72px;
|
||||
}
|
||||
|
||||
/* 3rd level */
|
||||
.fuse-vertical-navigation-item-children {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
padding-left: 88px;
|
||||
}
|
||||
|
||||
/* 4th level */
|
||||
.fuse-vertical-navigation-item-children {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
padding-left: 104px;
|
||||
}
|
||||
@ -384,14 +404,18 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Group */
|
||||
fuse-vertical-navigation-group-item {
|
||||
|
||||
> .fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
|
||||
.fuse-vertical-navigation-item-badge,
|
||||
.fuse-vertical-navigation-item-icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.fuse-vertical-navigation-item-title-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
@ -450,7 +474,9 @@ fuse-vertical-navigation-aside-item,
|
||||
fuse-vertical-navigation-basic-item,
|
||||
fuse-vertical-navigation-collapsable-item,
|
||||
fuse-vertical-navigation-group-item {
|
||||
|
||||
.fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
color: currentColor;
|
||||
|
||||
@ -459,6 +485,7 @@ fuse-vertical-navigation-group-item {
|
||||
}
|
||||
|
||||
.fuse-vertical-navigation-item-title-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item-title {
|
||||
@apply text-current opacity-80;
|
||||
}
|
||||
@ -475,10 +502,14 @@ fuse-vertical-navigation-group-item {
|
||||
fuse-vertical-navigation-aside-item,
|
||||
fuse-vertical-navigation-basic-item,
|
||||
fuse-vertical-navigation-collapsable-item {
|
||||
|
||||
> .fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
|
||||
/* Active state */
|
||||
&:not(.fuse-vertical-navigation-item-disabled) {
|
||||
|
||||
&.fuse-vertical-navigation-item-active,
|
||||
&.fuse-vertical-navigation-item-active-forced {
|
||||
@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;
|
||||
@ -498,9 +529,8 @@ fuse-vertical-navigation-collapsable-item {
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;
|
||||
|
||||
@ -524,10 +554,14 @@ fuse-vertical-navigation-collapsable-item {
|
||||
|
||||
/* Collapsable */
|
||||
fuse-vertical-navigation-collapsable-item {
|
||||
|
||||
/* Expanded state */
|
||||
&.fuse-vertical-navigation-item-expanded {
|
||||
|
||||
> .fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
|
||||
.fuse-vertical-navigation-item-icon {
|
||||
@apply opacity-100;
|
||||
}
|
||||
@ -547,11 +581,15 @@ fuse-vertical-navigation-collapsable-item {
|
||||
|
||||
/* Group */
|
||||
fuse-vertical-navigation-group-item {
|
||||
|
||||
> .fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
|
||||
.fuse-vertical-navigation-item-title-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item-title {
|
||||
@apply text-primary-600 opacity-100 dark:text-primary-400;
|
||||
@apply opacity-100 text-primary-600 dark:text-primary-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
}
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
/* Dense appearance overrides */
|
||||
&.fuse-vertical-navigation-appearance-dense {
|
||||
|
||||
&:not(.fuse-vertical-navigation-mode-over) {
|
||||
width: var(--fuse-vertical-navigation-dense-width);
|
||||
min-width: var(--fuse-vertical-navigation-dense-width);
|
||||
@ -14,11 +16,10 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Left positioned */
|
||||
&.fuse-vertical-navigation-position-left {
|
||||
|
||||
/* Side mode */
|
||||
&.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 */
|
||||
@ -29,11 +30,10 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Right positioned */
|
||||
&.fuse-vertical-navigation-position-right {
|
||||
|
||||
/* Side mode */
|
||||
&.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 */
|
||||
@ -48,6 +48,7 @@ fuse-vertical-navigation {
|
||||
}
|
||||
|
||||
&.fuse-vertical-navigation-hover {
|
||||
|
||||
.fuse-vertical-navigation-aside-wrapper {
|
||||
left: auto;
|
||||
right: var(--fuse-vertical-navigation-width);
|
||||
@ -58,38 +59,33 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Wrapper */
|
||||
.fuse-vertical-navigation-wrapper {
|
||||
|
||||
/* Content */
|
||||
.fuse-vertical-navigation-content {
|
||||
|
||||
fuse-vertical-navigation-aside-item,
|
||||
fuse-vertical-navigation-basic-item,
|
||||
fuse-vertical-navigation-collapsable-item,
|
||||
fuse-vertical-navigation-group-item {
|
||||
|
||||
.fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
width: calc(
|
||||
var(--fuse-vertical-navigation-dense-width) -
|
||||
24px
|
||||
);
|
||||
min-width: calc(
|
||||
var(--fuse-vertical-navigation-dense-width) -
|
||||
24px
|
||||
);
|
||||
max-width: calc(
|
||||
var(--fuse-vertical-navigation-dense-width) -
|
||||
24px
|
||||
);
|
||||
width: calc(var(--fuse-vertical-navigation-dense-width) - 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-badge,
|
||||
.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 {
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -97,14 +93,16 @@ 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 */
|
||||
.fuse-vertical-navigation-wrapper {
|
||||
|
||||
/* Content */
|
||||
.fuse-vertical-navigation-content {
|
||||
|
||||
.fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
padding: 10px 16px;
|
||||
|
||||
@ -118,14 +116,18 @@ fuse-vertical-navigation {
|
||||
}
|
||||
|
||||
fuse-vertical-navigation-collapsable-item {
|
||||
|
||||
.fuse-vertical-navigation-item-children {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
fuse-vertical-navigation-group-item {
|
||||
|
||||
> .fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -147,28 +149,24 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Hover */
|
||||
&.fuse-vertical-navigation-hover {
|
||||
|
||||
.fuse-vertical-navigation-wrapper {
|
||||
width: var(--fuse-vertical-navigation-width);
|
||||
|
||||
.fuse-vertical-navigation-content {
|
||||
|
||||
.fuse-vertical-navigation-item-wrapper {
|
||||
|
||||
.fuse-vertical-navigation-item {
|
||||
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
|
||||
);
|
||||
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-badge,
|
||||
.fuse-vertical-navigation-item-title-wrapper {
|
||||
white-space: nowrap;
|
||||
animation: removeWhiteSpaceNoWrap 1ms linear
|
||||
350ms;
|
||||
animation: removeWhiteSpaceNoWrap 1ms linear 350ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
}
|
||||
@ -185,10 +183,10 @@ fuse-vertical-navigation {
|
||||
|
||||
@keyframes removeWhiteSpaceNoWrap {
|
||||
0% {
|
||||
white-space: nowrap;
|
||||
white-space: nowrap
|
||||
}
|
||||
99% {
|
||||
white-space: nowrap;
|
||||
white-space: nowrap
|
||||
}
|
||||
100% {
|
||||
white-space: normal;
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
}
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
/* Thin appearance overrides */
|
||||
&.fuse-vertical-navigation-appearance-thin {
|
||||
width: var(--fuse-vertical-navigation-thin-width);
|
||||
@ -12,10 +13,9 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Left positioned */
|
||||
&.fuse-vertical-navigation-position-left {
|
||||
|
||||
&.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 {
|
||||
@ -25,10 +25,9 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Right positioned */
|
||||
&.fuse-vertical-navigation-position-right {
|
||||
|
||||
&.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 {
|
||||
@ -43,8 +42,10 @@ fuse-vertical-navigation {
|
||||
|
||||
/* Wrapper */
|
||||
.fuse-vertical-navigation-wrapper {
|
||||
|
||||
/* Content */
|
||||
.fuse-vertical-navigation-content {
|
||||
|
||||
> fuse-vertical-navigation-aside-item,
|
||||
> fuse-vertical-navigation-basic-item {
|
||||
flex-direction: column;
|
||||
@ -78,12 +79,13 @@ fuse-vertical-navigation {
|
||||
}
|
||||
|
||||
> fuse-vertical-navigation-collapsable-item {
|
||||
display: none;
|
||||
display: none
|
||||
}
|
||||
|
||||
> fuse-vertical-navigation-group-item {
|
||||
|
||||
> .fuse-vertical-navigation-item-wrapper {
|
||||
display: none;
|
||||
display: none
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<div class="fuse-vertical-navigation-wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="fuse-vertical-navigation-header">
|
||||
<ng-content select="[fuseVerticalNavigationHeader]"></ng-content>
|
||||
@ -8,120 +9,114 @@
|
||||
<div
|
||||
class="fuse-vertical-navigation-content"
|
||||
fuseScrollbar
|
||||
[fuseScrollbarOptions]="{
|
||||
wheelPropagation: inner,
|
||||
suppressScrollX: true,
|
||||
}"
|
||||
#navigationContent
|
||||
>
|
||||
[fuseScrollbarOptions]="{wheelPropagation: inner, suppressScrollX: true}"
|
||||
#navigationContent>
|
||||
|
||||
<!-- Content header -->
|
||||
<div class="fuse-vertical-navigation-content-header">
|
||||
<ng-content
|
||||
select="[fuseVerticalNavigationContentHeader]"
|
||||
></ng-content>
|
||||
<ng-content select="[fuseVerticalNavigationContentHeader]"></ng-content>
|
||||
</div>
|
||||
|
||||
<!-- Items -->
|
||||
@for (item of navigation; track trackByFn($index, item)) {
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
@if ((item.hidden && !item.hidden(item)) || !item.hidden) {
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Aside -->
|
||||
@if (item.type === 'aside') {
|
||||
<ng-container *ngIf="item.type === 'aside'">
|
||||
<fuse-vertical-navigation-aside-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[activeItemId]="activeAsideItemId"
|
||||
[autoCollapse]="autoCollapse"
|
||||
[skipChildren]="true"
|
||||
(click)="toggleAside(item)"
|
||||
></fuse-vertical-navigation-aside-item>
|
||||
}
|
||||
(click)="toggleAside(item)"></fuse-vertical-navigation-aside-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Basic -->
|
||||
@if (item.type === 'basic') {
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-basic-item>
|
||||
}
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Collapsable -->
|
||||
@if (item.type === 'collapsable') {
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"
|
||||
></fuse-vertical-navigation-collapsable-item>
|
||||
}
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Divider -->
|
||||
@if (item.type === 'divider') {
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-divider-item>
|
||||
}
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Group -->
|
||||
@if (item.type === 'group') {
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"
|
||||
></fuse-vertical-navigation-group-item>
|
||||
}
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Spacer -->
|
||||
@if (item.type === 'spacer') {
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
></fuse-vertical-navigation-spacer-item>
|
||||
}
|
||||
}
|
||||
}
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- Content footer -->
|
||||
<div class="fuse-vertical-navigation-content-footer">
|
||||
<ng-content
|
||||
select="[fuseVerticalNavigationContentFooter]"
|
||||
></ng-content>
|
||||
<ng-content select="[fuseVerticalNavigationContentFooter]"></ng-content>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="fuse-vertical-navigation-footer">
|
||||
<ng-content select="[fuseVerticalNavigationFooter]"></ng-content>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Aside -->
|
||||
@if (activeAsideItemId) {
|
||||
<ng-container *ngIf="activeAsideItemId">
|
||||
<div
|
||||
class="fuse-vertical-navigation-aside-wrapper"
|
||||
fuseScrollbar
|
||||
[fuseScrollbarOptions]="{
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true,
|
||||
}"
|
||||
[fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}"
|
||||
[@fadeInLeft]="position === 'left'"
|
||||
[@fadeInRight]="position === 'right'"
|
||||
[@fadeOutLeft]="position === 'left'"
|
||||
[@fadeOutRight]="position === 'right'"
|
||||
>
|
||||
[@fadeOutRight]="position === 'right'">
|
||||
|
||||
<!-- Items -->
|
||||
@for (item of navigation; track trackByFn($index, item)) {
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
@if ((item.hidden && !item.hidden(item)) || !item.hidden) {
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Aside -->
|
||||
@if (item.type === 'aside' && item.id === activeAsideItemId) {
|
||||
<ng-container *ngIf="item.type === 'aside' && item.id === activeAsideItemId">
|
||||
<fuse-vertical-navigation-aside-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"
|
||||
></fuse-vertical-navigation-aside-item>
|
||||
}
|
||||
}
|
||||
}
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
@ -1,43 +1,12 @@
|
||||
import {
|
||||
animate,
|
||||
AnimationBuilder,
|
||||
AnimationPlayer,
|
||||
style,
|
||||
} from '@angular/animations';
|
||||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
|
||||
import { DOCUMENT } 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 { DOCUMENT, NgFor, NgIf } from '@angular/common';
|
||||
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { 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 { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
|
||||
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
|
||||
@ -46,36 +15,20 @@ import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navig
|
||||
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
|
||||
import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
import {
|
||||
delay,
|
||||
filter,
|
||||
merge,
|
||||
ReplaySubject,
|
||||
Subject,
|
||||
Subscription,
|
||||
takeUntil,
|
||||
} from 'rxjs';
|
||||
import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-vertical-navigation',
|
||||
templateUrl: './vertical.component.html',
|
||||
styleUrls: ['./vertical.component.scss'],
|
||||
animations: fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
selector : 'fuse-vertical-navigation',
|
||||
templateUrl : './vertical.component.html',
|
||||
styleUrls : ['./vertical.component.scss'],
|
||||
animations : fuseAnimations,
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs: 'fuseVerticalNavigation',
|
||||
imports: [
|
||||
FuseScrollbarDirective,
|
||||
FuseVerticalNavigationAsideItemComponent,
|
||||
FuseVerticalNavigationBasicItemComponent,
|
||||
FuseVerticalNavigationCollapsableItemComponent,
|
||||
FuseVerticalNavigationDividerItemComponent,
|
||||
FuseVerticalNavigationGroupItemComponent,
|
||||
FuseVerticalNavigationSpacerItemComponent,
|
||||
],
|
||||
exportAs : 'fuseVerticalNavigation',
|
||||
standalone : true,
|
||||
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 */
|
||||
static ngAcceptInputType_inner: BooleanInput;
|
||||
@ -83,16 +36,6 @@ export class FuseVerticalNavigationComponent
|
||||
static ngAcceptInputType_transparentOverlay: BooleanInput;
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
|
||||
private _animationBuilder = inject(AnimationBuilder);
|
||||
private _changeDetectorRef = inject(ChangeDetectorRef);
|
||||
private _document = inject(DOCUMENT);
|
||||
private _elementRef = inject(ElementRef);
|
||||
private _renderer2 = inject(Renderer2);
|
||||
private _router = inject(Router);
|
||||
private _scrollStrategyOptions = inject(ScrollStrategyOptions);
|
||||
private _fuseNavigationService = inject(FuseNavigationService);
|
||||
private _fuseUtilsService = inject(FuseUtilsService);
|
||||
|
||||
@Input() appearance: FuseVerticalNavigationAppearance = 'default';
|
||||
@Input() autoCollapse: boolean = true;
|
||||
@Input() inner: boolean = false;
|
||||
@ -102,23 +45,15 @@ export class FuseVerticalNavigationComponent
|
||||
@Input() opened: boolean = true;
|
||||
@Input() position: FuseVerticalNavigationPosition = 'left';
|
||||
@Input() transparentOverlay: boolean = false;
|
||||
@Output()
|
||||
readonly appearanceChanged: EventEmitter<FuseVerticalNavigationAppearance> =
|
||||
new EventEmitter<FuseVerticalNavigationAppearance>();
|
||||
@Output() readonly modeChanged: EventEmitter<FuseVerticalNavigationMode> =
|
||||
new EventEmitter<FuseVerticalNavigationMode>();
|
||||
@Output() readonly openedChanged: EventEmitter<boolean> =
|
||||
new EventEmitter<boolean>();
|
||||
@Output()
|
||||
readonly positionChanged: EventEmitter<FuseVerticalNavigationPosition> =
|
||||
new EventEmitter<FuseVerticalNavigationPosition>();
|
||||
@Output() readonly appearanceChanged: EventEmitter<FuseVerticalNavigationAppearance> = new EventEmitter<FuseVerticalNavigationAppearance>();
|
||||
@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;
|
||||
|
||||
activeAsideItemId: string | null = null;
|
||||
onCollapsableItemCollapsed: ReplaySubject<FuseNavigationItem> =
|
||||
new ReplaySubject<FuseNavigationItem>(1);
|
||||
onCollapsableItemExpanded: ReplaySubject<FuseNavigationItem> =
|
||||
new ReplaySubject<FuseNavigationItem>(1);
|
||||
onCollapsableItemCollapsed: ReplaySubject<FuseNavigationItem> = new ReplaySubject<FuseNavigationItem>(1);
|
||||
onCollapsableItemExpanded: ReplaySubject<FuseNavigationItem> = new ReplaySubject<FuseNavigationItem>(1);
|
||||
onRefreshed: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
|
||||
private _animationsEnabled: boolean = false;
|
||||
private _asideOverlay: HTMLElement;
|
||||
@ -128,8 +63,7 @@ export class FuseVerticalNavigationComponent
|
||||
private _mutationObserver: MutationObserver;
|
||||
private _overlay: HTMLElement;
|
||||
private _player: AnimationPlayer;
|
||||
private _scrollStrategy: ScrollStrategy =
|
||||
this._scrollStrategyOptions.block();
|
||||
private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
|
||||
private _fuseScrollbarDirectives!: QueryList<FuseScrollbarDirective>;
|
||||
private _fuseScrollbarDirectivesSubscription: Subscription;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
@ -137,11 +71,24 @@ export class FuseVerticalNavigationComponent
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor() {
|
||||
this._handleAsideOverlayClick = (): void => {
|
||||
constructor(
|
||||
private _animationBuilder: AnimationBuilder,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
@Inject(DOCUMENT) private _document: Document,
|
||||
private _elementRef: ElementRef,
|
||||
private _renderer2: Renderer2,
|
||||
private _router: Router,
|
||||
private _scrollStrategyOptions: ScrollStrategyOptions,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
this._handleAsideOverlayClick = (): void =>
|
||||
{
|
||||
this.closeAside();
|
||||
};
|
||||
this._handleOverlayClick = (): void => {
|
||||
this._handleOverlayClick = (): void =>
|
||||
{
|
||||
this.close();
|
||||
};
|
||||
}
|
||||
@ -153,20 +100,19 @@ export class FuseVerticalNavigationComponent
|
||||
/**
|
||||
* Host binding for component classes
|
||||
*/
|
||||
@HostBinding('class') get classList(): any {
|
||||
@HostBinding('class') get classList(): any
|
||||
{
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
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-hover': this._hovered,
|
||||
'fuse-vertical-navigation-inner': this.inner,
|
||||
'fuse-vertical-navigation-mode-over': this.mode === 'over',
|
||||
'fuse-vertical-navigation-mode-side': this.mode === 'side',
|
||||
'fuse-vertical-navigation-opened': this.opened,
|
||||
'fuse-vertical-navigation-position-left': this.position === 'left',
|
||||
'fuse-vertical-navigation-position-right':
|
||||
this.position === 'right',
|
||||
'fuse-vertical-navigation-hover' : this._hovered,
|
||||
'fuse-vertical-navigation-inner' : this.inner,
|
||||
'fuse-vertical-navigation-mode-over' : this.mode === 'over',
|
||||
'fuse-vertical-navigation-mode-side' : this.mode === 'side',
|
||||
'fuse-vertical-navigation-opened' : this.opened,
|
||||
'fuse-vertical-navigation-position-left' : this.position === 'left',
|
||||
'fuse-vertical-navigation-position-right' : this.position === 'right',
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
}
|
||||
@ -174,9 +120,10 @@ export class FuseVerticalNavigationComponent
|
||||
/**
|
||||
* Host binding for component inline styles
|
||||
*/
|
||||
@HostBinding('style') get styleList(): any {
|
||||
@HostBinding('style') get styleList(): any
|
||||
{
|
||||
return {
|
||||
visibility: this.opened ? 'visible' : 'hidden',
|
||||
'visibility': this.opened ? 'visible' : 'hidden',
|
||||
};
|
||||
}
|
||||
|
||||
@ -184,34 +131,41 @@ export class FuseVerticalNavigationComponent
|
||||
* Setter for fuseScrollbarDirectives
|
||||
*/
|
||||
@ViewChildren(FuseScrollbarDirective)
|
||||
set fuseScrollbarDirectives(
|
||||
fuseScrollbarDirectives: QueryList<FuseScrollbarDirective>
|
||||
) {
|
||||
set fuseScrollbarDirectives(fuseScrollbarDirectives: QueryList<FuseScrollbarDirective>)
|
||||
{
|
||||
// Store the directives
|
||||
this._fuseScrollbarDirectives = fuseScrollbarDirectives;
|
||||
|
||||
// Return if there are no directives
|
||||
if (fuseScrollbarDirectives.length === 0) {
|
||||
if ( fuseScrollbarDirectives.length === 0 )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Unsubscribe the previous subscriptions
|
||||
if (this._fuseScrollbarDirectivesSubscription) {
|
||||
if ( this._fuseScrollbarDirectivesSubscription )
|
||||
{
|
||||
this._fuseScrollbarDirectivesSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
// Update the scrollbars on collapsable items' collapse/expand
|
||||
this._fuseScrollbarDirectivesSubscription = merge(
|
||||
this.onCollapsableItemCollapsed,
|
||||
this.onCollapsableItemExpanded
|
||||
)
|
||||
.pipe(takeUntil(this._unsubscribeAll), delay(250))
|
||||
.subscribe(() => {
|
||||
// Loop through the scrollbars and update them
|
||||
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
|
||||
fuseScrollbarDirective.update();
|
||||
this._fuseScrollbarDirectivesSubscription =
|
||||
merge(
|
||||
this.onCollapsableItemCollapsed,
|
||||
this.onCollapsableItemExpanded,
|
||||
)
|
||||
.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
delay(250),
|
||||
)
|
||||
.subscribe(() =>
|
||||
{
|
||||
// Loop through the scrollbars and update them
|
||||
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
|
||||
{
|
||||
fuseScrollbarDirective.update();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -224,7 +178,8 @@ export class FuseVerticalNavigationComponent
|
||||
* @private
|
||||
*/
|
||||
@HostListener('mouseenter')
|
||||
private _onMouseenter(): void {
|
||||
private _onMouseenter(): void
|
||||
{
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
@ -238,7 +193,8 @@ export class FuseVerticalNavigationComponent
|
||||
* @private
|
||||
*/
|
||||
@HostListener('mouseleave')
|
||||
private _onMouseleave(): void {
|
||||
private _onMouseleave(): void
|
||||
{
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
@ -255,21 +211,25 @@ export class FuseVerticalNavigationComponent
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Appearance
|
||||
if ('appearance' in changes) {
|
||||
if ( 'appearance' in changes )
|
||||
{
|
||||
// Execute the observable
|
||||
this.appearanceChanged.next(changes.appearance.currentValue);
|
||||
}
|
||||
|
||||
// Inner
|
||||
if ('inner' in changes) {
|
||||
if ( 'inner' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.inner = coerceBooleanProperty(changes.inner.currentValue);
|
||||
}
|
||||
|
||||
// Mode
|
||||
if ('mode' in changes) {
|
||||
if ( 'mode' in changes )
|
||||
{
|
||||
// Get the previous and current values
|
||||
const currentMode = changes.mode.currentValue;
|
||||
const previousMode = changes.mode.previousValue;
|
||||
@ -278,18 +238,21 @@ export class FuseVerticalNavigationComponent
|
||||
this._disableAnimations();
|
||||
|
||||
// If the mode changes: 'over -> side'
|
||||
if (previousMode === 'over' && currentMode === 'side') {
|
||||
if ( previousMode === 'over' && currentMode === 'side' )
|
||||
{
|
||||
// Hide the overlay
|
||||
this._hideOverlay();
|
||||
}
|
||||
|
||||
// If the mode changes: 'side -> over'
|
||||
if (previousMode === 'side' && currentMode === 'over') {
|
||||
if ( previousMode === 'side' && currentMode === 'over' )
|
||||
{
|
||||
// Close the aside
|
||||
this.closeAside();
|
||||
|
||||
// If the navigation is opened
|
||||
if (this.opened) {
|
||||
if ( this.opened )
|
||||
{
|
||||
// Show the overlay
|
||||
this._showOverlay();
|
||||
}
|
||||
@ -301,19 +264,22 @@ export class FuseVerticalNavigationComponent
|
||||
// Enable the animations after a delay
|
||||
// The delay must be bigger than the current transition-duration
|
||||
// to make sure nothing will be animated while the mode changing
|
||||
setTimeout(() => {
|
||||
setTimeout(() =>
|
||||
{
|
||||
this._enableAnimations();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Navigation
|
||||
if ('navigation' in changes) {
|
||||
if ( 'navigation' in changes )
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
// Opened
|
||||
if ('opened' in changes) {
|
||||
if ( 'opened' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.opened = coerceBooleanProperty(changes.opened.currentValue);
|
||||
|
||||
@ -322,26 +288,28 @@ export class FuseVerticalNavigationComponent
|
||||
}
|
||||
|
||||
// Position
|
||||
if ('position' in changes) {
|
||||
if ( 'position' in changes )
|
||||
{
|
||||
// Execute the observable
|
||||
this.positionChanged.next(changes.position.currentValue);
|
||||
}
|
||||
|
||||
// Transparent overlay
|
||||
if ('transparentOverlay' in changes) {
|
||||
if ( 'transparentOverlay' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.transparentOverlay = coerceBooleanProperty(
|
||||
changes.transparentOverlay.currentValue
|
||||
);
|
||||
this.transparentOverlay = coerceBooleanProperty(changes.transparentOverlay.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Make sure the name input is not an empty string
|
||||
if (this.name === '') {
|
||||
if ( this.name === '' )
|
||||
{
|
||||
this.name = this._fuseUtilsService.randomId();
|
||||
}
|
||||
|
||||
@ -351,18 +319,21 @@ export class FuseVerticalNavigationComponent
|
||||
// Subscribe to the 'NavigationEnd' event
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
filter(event => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll),
|
||||
)
|
||||
.subscribe(() => {
|
||||
.subscribe(() =>
|
||||
{
|
||||
// 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
|
||||
this.close();
|
||||
}
|
||||
|
||||
// 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
|
||||
this.closeAside();
|
||||
}
|
||||
@ -372,85 +343,74 @@ export class FuseVerticalNavigationComponent
|
||||
/**
|
||||
* After view init
|
||||
*/
|
||||
ngAfterViewInit(): void {
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
// Fix for Firefox.
|
||||
//
|
||||
// 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.
|
||||
// This fixes the problem by reading the 'top' value from the html element and adding it as a
|
||||
// 'marginTop' to the navigation itself.
|
||||
this._mutationObserver = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
this._mutationObserver = new MutationObserver((mutations) =>
|
||||
{
|
||||
mutations.forEach((mutation) =>
|
||||
{
|
||||
const mutationTarget = mutation.target as HTMLElement;
|
||||
if (mutation.attributeName === 'class') {
|
||||
if (
|
||||
mutationTarget.classList.contains(
|
||||
'cdk-global-scrollblock'
|
||||
)
|
||||
) {
|
||||
if ( mutation.attributeName === 'class' )
|
||||
{
|
||||
if ( mutationTarget.classList.contains('cdk-global-scrollblock') )
|
||||
{
|
||||
const top = parseInt(mutationTarget.style.top, 10);
|
||||
this._renderer2.setStyle(
|
||||
this._elementRef.nativeElement,
|
||||
'margin-top',
|
||||
`${Math.abs(top)}px`
|
||||
);
|
||||
} else {
|
||||
this._renderer2.setStyle(
|
||||
this._elementRef.nativeElement,
|
||||
'margin-top',
|
||||
null
|
||||
);
|
||||
this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`);
|
||||
}
|
||||
else
|
||||
{
|
||||
this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
this._mutationObserver.observe(this._document.documentElement, {
|
||||
attributes: true,
|
||||
attributes : true,
|
||||
attributeFilter: ['class'],
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
setTimeout(() =>
|
||||
{
|
||||
// Return if 'navigation content' element does not exist
|
||||
if (!this._navigationContentEl) {
|
||||
if ( !this._navigationContentEl )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// If 'navigation content' element doesn't have
|
||||
// perfect scrollbar activated on it...
|
||||
if (
|
||||
!this._navigationContentEl.nativeElement.classList.contains(
|
||||
'ps'
|
||||
)
|
||||
) {
|
||||
if ( !this._navigationContentEl.nativeElement.classList.contains('ps') )
|
||||
{
|
||||
// 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 (activeItem) {
|
||||
if ( activeItem )
|
||||
{
|
||||
activeItem.scrollIntoView();
|
||||
}
|
||||
}
|
||||
// Otherwise
|
||||
else {
|
||||
else
|
||||
{
|
||||
// Go through all the scrollbar directives
|
||||
this._fuseScrollbarDirectives.forEach(
|
||||
(fuseScrollbarDirective) => {
|
||||
// Skip if not enabled
|
||||
if (!fuseScrollbarDirective.isEnabled()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Scroll to the active element
|
||||
fuseScrollbarDirective.scrollToElement(
|
||||
'.fuse-vertical-navigation-item-active',
|
||||
-120,
|
||||
true
|
||||
);
|
||||
this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
|
||||
{
|
||||
// Skip if not enabled
|
||||
if ( !fuseScrollbarDirective.isEnabled() )
|
||||
{
|
||||
return;
|
||||
}
|
||||
);
|
||||
|
||||
// Scroll to the active element
|
||||
fuseScrollbarDirective.scrollToElement('.fuse-vertical-navigation-item-active', -120, true);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -458,7 +418,8 @@ export class FuseVerticalNavigationComponent
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Disconnect the mutation observer
|
||||
this._mutationObserver.disconnect();
|
||||
|
||||
@ -481,7 +442,8 @@ export class FuseVerticalNavigationComponent
|
||||
/**
|
||||
* Refresh the component to apply the changes
|
||||
*/
|
||||
refresh(): void {
|
||||
refresh(): void
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
|
||||
@ -492,9 +454,11 @@ export class FuseVerticalNavigationComponent
|
||||
/**
|
||||
* Open the navigation
|
||||
*/
|
||||
open(): void {
|
||||
open(): void
|
||||
{
|
||||
// Return if the navigation is already open
|
||||
if (this.opened) {
|
||||
if ( this.opened )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -505,9 +469,11 @@ export class FuseVerticalNavigationComponent
|
||||
/**
|
||||
* Close the navigation
|
||||
*/
|
||||
close(): void {
|
||||
close(): void
|
||||
{
|
||||
// Return if the navigation is already closed
|
||||
if (!this.opened) {
|
||||
if ( !this.opened )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -521,11 +487,15 @@ export class FuseVerticalNavigationComponent
|
||||
/**
|
||||
* Toggle the navigation
|
||||
*/
|
||||
toggle(): void {
|
||||
toggle(): void
|
||||
{
|
||||
// Toggle
|
||||
if (this.opened) {
|
||||
if ( this.opened )
|
||||
{
|
||||
this.close();
|
||||
} else {
|
||||
}
|
||||
else
|
||||
{
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
@ -535,9 +505,11 @@ export class FuseVerticalNavigationComponent
|
||||
*
|
||||
* @param item
|
||||
*/
|
||||
openAside(item: FuseNavigationItem): void {
|
||||
openAside(item: FuseNavigationItem): void
|
||||
{
|
||||
// Return if the item is disabled
|
||||
if (item.disabled || !item.id) {
|
||||
if ( item.disabled || !item.id )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -554,7 +526,8 @@ export class FuseVerticalNavigationComponent
|
||||
/**
|
||||
* Close the aside
|
||||
*/
|
||||
closeAside(): void {
|
||||
closeAside(): void
|
||||
{
|
||||
// Close
|
||||
this.activeAsideItemId = null;
|
||||
|
||||
@ -570,11 +543,15 @@ export class FuseVerticalNavigationComponent
|
||||
*
|
||||
* @param item
|
||||
*/
|
||||
toggleAside(item: FuseNavigationItem): void {
|
||||
toggleAside(item: FuseNavigationItem): void
|
||||
{
|
||||
// Toggle
|
||||
if (this.activeAsideItemId === item.id) {
|
||||
if ( this.activeAsideItemId === item.id )
|
||||
{
|
||||
this.closeAside();
|
||||
} else {
|
||||
}
|
||||
else
|
||||
{
|
||||
this.openAside(item);
|
||||
}
|
||||
}
|
||||
@ -585,7 +562,8 @@ export class FuseVerticalNavigationComponent
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any {
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
|
||||
@ -598,9 +576,11 @@ export class FuseVerticalNavigationComponent
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _enableAnimations(): void {
|
||||
private _enableAnimations(): void
|
||||
{
|
||||
// Return if the animations are already enabled
|
||||
if (this._animationsEnabled) {
|
||||
if ( this._animationsEnabled )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -613,9 +593,11 @@ export class FuseVerticalNavigationComponent
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _disableAnimations(): void {
|
||||
private _disableAnimations(): void
|
||||
{
|
||||
// Return if the animations are already disabled
|
||||
if (!this._animationsEnabled) {
|
||||
if ( !this._animationsEnabled )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -628,9 +610,11 @@ export class FuseVerticalNavigationComponent
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _showOverlay(): void {
|
||||
private _showOverlay(): void
|
||||
{
|
||||
// Return if there is already an overlay
|
||||
if (this._asideOverlay) {
|
||||
if ( this._asideOverlay )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -641,30 +625,21 @@ export class FuseVerticalNavigationComponent
|
||||
this._overlay.classList.add('fuse-vertical-navigation-overlay');
|
||||
|
||||
// Add a class depending on the transparentOverlay option
|
||||
if (this.transparentOverlay) {
|
||||
this._overlay.classList.add(
|
||||
'fuse-vertical-navigation-overlay-transparent'
|
||||
);
|
||||
if ( this.transparentOverlay )
|
||||
{
|
||||
this._overlay.classList.add('fuse-vertical-navigation-overlay-transparent');
|
||||
}
|
||||
|
||||
// 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
|
||||
this._scrollStrategy.enable();
|
||||
|
||||
// Create the enter animation and attach it to the player
|
||||
this._player = this._animationBuilder
|
||||
.build([
|
||||
animate(
|
||||
'300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
|
||||
style({ opacity: 1 })
|
||||
),
|
||||
])
|
||||
.create(this._overlay);
|
||||
this._player = this._animationBuilder.build([
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
|
||||
]).create(this._overlay);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
@ -678,33 +653,29 @@ export class FuseVerticalNavigationComponent
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _hideOverlay(): void {
|
||||
if (!this._overlay) {
|
||||
private _hideOverlay(): void
|
||||
{
|
||||
if ( !this._overlay )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the leave animation and attach it to the player
|
||||
this._player = this._animationBuilder
|
||||
.build([
|
||||
animate(
|
||||
'300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
|
||||
style({ opacity: 0 })
|
||||
),
|
||||
])
|
||||
.create(this._overlay);
|
||||
this._player = this._animationBuilder.build([
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
|
||||
]).create(this._overlay);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
this._player.onDone(() =>
|
||||
{
|
||||
// If the overlay still exists...
|
||||
if (this._overlay) {
|
||||
if ( this._overlay )
|
||||
{
|
||||
// Remove the event listener
|
||||
this._overlay.removeEventListener(
|
||||
'click',
|
||||
this._handleOverlayClick
|
||||
);
|
||||
this._overlay.removeEventListener('click', this._handleOverlayClick);
|
||||
|
||||
// Remove the overlay
|
||||
this._overlay.parentNode.removeChild(this._overlay);
|
||||
@ -721,9 +692,11 @@ export class FuseVerticalNavigationComponent
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _showAsideOverlay(): void {
|
||||
private _showAsideOverlay(): void
|
||||
{
|
||||
// Return if there is already an overlay
|
||||
if (this._asideOverlay) {
|
||||
if ( this._asideOverlay )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -731,34 +704,23 @@ export class FuseVerticalNavigationComponent
|
||||
this._asideOverlay = this._renderer2.createElement('div');
|
||||
|
||||
// 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
|
||||
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
|
||||
this._player = this._animationBuilder
|
||||
.build([
|
||||
animate(
|
||||
'300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
|
||||
style({ opacity: 1 })
|
||||
),
|
||||
])
|
||||
.create(this._asideOverlay);
|
||||
this._player =
|
||||
this._animationBuilder
|
||||
.build([
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
|
||||
]).create(this._asideOverlay);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
// Add an event listener to the aside overlay
|
||||
this._asideOverlay.addEventListener(
|
||||
'click',
|
||||
this._handleAsideOverlayClick
|
||||
);
|
||||
this._asideOverlay.addEventListener('click', this._handleAsideOverlayClick);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -766,33 +728,31 @@ export class FuseVerticalNavigationComponent
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _hideAsideOverlay(): void {
|
||||
if (!this._asideOverlay) {
|
||||
private _hideAsideOverlay(): void
|
||||
{
|
||||
if ( !this._asideOverlay )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the leave animation and attach it to the player
|
||||
this._player = this._animationBuilder
|
||||
.build([
|
||||
animate(
|
||||
'300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
|
||||
style({ opacity: 0 })
|
||||
),
|
||||
])
|
||||
.create(this._asideOverlay);
|
||||
this._player =
|
||||
this._animationBuilder
|
||||
.build([
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
|
||||
]).create(this._asideOverlay);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
this._player.onDone(() =>
|
||||
{
|
||||
// If the aside overlay still exists...
|
||||
if (this._asideOverlay) {
|
||||
if ( this._asideOverlay )
|
||||
{
|
||||
// Remove the event listener
|
||||
this._asideOverlay.removeEventListener(
|
||||
'click',
|
||||
this._handleAsideOverlayClick
|
||||
);
|
||||
this._asideOverlay.removeEventListener('click', this._handleAsideOverlayClick);
|
||||
|
||||
// Remove the aside overlay
|
||||
this._asideOverlay.parentNode.removeChild(this._asideOverlay);
|
||||
@ -807,7 +767,8 @@ export class FuseVerticalNavigationComponent
|
||||
* @param open
|
||||
* @private
|
||||
*/
|
||||
private _toggleOpened(open: boolean): void {
|
||||
private _toggleOpened(open: boolean): void
|
||||
{
|
||||
// Set the opened
|
||||
this.opened = open;
|
||||
|
||||
@ -816,10 +777,14 @@ export class FuseVerticalNavigationComponent
|
||||
|
||||
// If the navigation opened, and the mode
|
||||
// is 'over', show the overlay
|
||||
if (this.mode === 'over') {
|
||||
if (this.opened) {
|
||||
if ( this.mode === 'over' )
|
||||
{
|
||||
if ( this.opened )
|
||||
{
|
||||
this._showOverlay();
|
||||
} else {
|
||||
}
|
||||
else
|
||||
{
|
||||
this._hideOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,24 +1,26 @@
|
||||
import {
|
||||
Directive,
|
||||
ElementRef,
|
||||
inject,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseScrollReset]',
|
||||
exportAs: 'fuseScrollReset',
|
||||
selector : '[fuseScrollReset]',
|
||||
exportAs : 'fuseScrollReset',
|
||||
standalone: true,
|
||||
})
|
||||
export class FuseScrollResetDirective implements OnInit, OnDestroy {
|
||||
private _elementRef = inject(ElementRef);
|
||||
private _router = inject(Router);
|
||||
|
||||
export class FuseScrollResetDirective implements OnInit, OnDestroy
|
||||
{
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _elementRef: ElementRef,
|
||||
private _router: Router,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -26,23 +28,24 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy {
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to NavigationEnd event
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
// Reset the element's scroll position to the top
|
||||
this._elementRef.nativeElement.scrollTop = 0;
|
||||
});
|
||||
this._router.events.pipe(
|
||||
filter(event => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Reset the element's scroll position to the top
|
||||
this._elementRef.nativeElement.scrollTop = 0;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
@ -1,39 +1,26 @@
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { Platform } from '@angular/cdk/platform';
|
||||
import {
|
||||
Directive,
|
||||
ElementRef,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
SimpleChanges,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
ScrollbarGeometry,
|
||||
ScrollbarPosition,
|
||||
} from '@fuse/directives/scrollbar/scrollbar.types';
|
||||
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
|
||||
import { merge } from 'lodash-es';
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import { Subject, debounceTime, fromEvent, takeUntil } from 'rxjs';
|
||||
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
/**
|
||||
* Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[fuseScrollbar]',
|
||||
exportAs: 'fuseScrollbar',
|
||||
selector : '[fuseScrollbar]',
|
||||
exportAs : 'fuseScrollbar',
|
||||
standalone: true,
|
||||
})
|
||||
export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
static ngAcceptInputType_fuseScrollbar: BooleanInput;
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
|
||||
private _elementRef = inject(ElementRef);
|
||||
private _platform = inject(Platform);
|
||||
|
||||
@Input() fuseScrollbar: boolean = true;
|
||||
@Input() fuseScrollbarOptions: PerfectScrollbar.Options;
|
||||
|
||||
@ -42,6 +29,17 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
private _ps: PerfectScrollbar;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _elementRef: ElementRef,
|
||||
private _platform: Platform,
|
||||
private _router: Router,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -49,14 +47,16 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* Getter for _elementRef
|
||||
*/
|
||||
get elementRef(): ElementRef {
|
||||
get elementRef(): ElementRef
|
||||
{
|
||||
return this._elementRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for _ps
|
||||
*/
|
||||
get ps(): PerfectScrollbar | null {
|
||||
get ps(): PerfectScrollbar | null
|
||||
{
|
||||
return this._ps;
|
||||
}
|
||||
|
||||
@ -69,44 +69,46 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Enabled
|
||||
if ('fuseScrollbar' in changes) {
|
||||
if ( 'fuseScrollbar' in changes )
|
||||
{
|
||||
// Interpret empty string as 'true'
|
||||
this.fuseScrollbar = coerceBooleanProperty(
|
||||
changes.fuseScrollbar.currentValue
|
||||
);
|
||||
this.fuseScrollbar = coerceBooleanProperty(changes.fuseScrollbar.currentValue);
|
||||
|
||||
// If enabled, init the directive
|
||||
if (this.fuseScrollbar) {
|
||||
if ( this.fuseScrollbar )
|
||||
{
|
||||
this._init();
|
||||
}
|
||||
// Otherwise destroy it
|
||||
else {
|
||||
else
|
||||
{
|
||||
this._destroy();
|
||||
}
|
||||
}
|
||||
|
||||
// Scrollbar options
|
||||
if ('fuseScrollbarOptions' in changes) {
|
||||
if ( 'fuseScrollbarOptions' in changes )
|
||||
{
|
||||
// Merge the options
|
||||
this._options = merge(
|
||||
{},
|
||||
this._options,
|
||||
changes.fuseScrollbarOptions.currentValue
|
||||
);
|
||||
this._options = merge({}, this._options, changes.fuseScrollbarOptions.currentValue);
|
||||
|
||||
// Return if not initialized
|
||||
if (!this._ps) {
|
||||
if ( !this._ps )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy and re-init the PerfectScrollbar to update its options
|
||||
setTimeout(() => {
|
||||
setTimeout(() =>
|
||||
{
|
||||
this._destroy();
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
setTimeout(() =>
|
||||
{
|
||||
this._init();
|
||||
});
|
||||
}
|
||||
@ -115,11 +117,16 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void {
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to window resize event
|
||||
fromEvent(window, 'resize')
|
||||
.pipe(takeUntil(this._unsubscribeAll), debounceTime(150))
|
||||
.subscribe(() => {
|
||||
.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
debounceTime(150),
|
||||
)
|
||||
.subscribe(() =>
|
||||
{
|
||||
// Update the PerfectScrollbar
|
||||
this.update();
|
||||
});
|
||||
@ -128,7 +135,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
this._destroy();
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
@ -143,16 +151,19 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* Is enabled
|
||||
*/
|
||||
isEnabled(): boolean {
|
||||
isEnabled(): boolean
|
||||
{
|
||||
return this.fuseScrollbar;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the scrollbar
|
||||
*/
|
||||
update(): void {
|
||||
update(): void
|
||||
{
|
||||
// Return if not initialized
|
||||
if (!this._ps) {
|
||||
if ( !this._ps )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -163,7 +174,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
/**
|
||||
* Destroy the scrollbar
|
||||
*/
|
||||
destroy(): void {
|
||||
destroy(): void
|
||||
{
|
||||
this.ngOnDestroy();
|
||||
}
|
||||
|
||||
@ -172,13 +184,13 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @param prefix
|
||||
*/
|
||||
geometry(prefix: string = 'scroll'): ScrollbarGeometry {
|
||||
geometry(prefix: string = 'scroll'): ScrollbarGeometry
|
||||
{
|
||||
return new ScrollbarGeometry(
|
||||
this._elementRef.nativeElement[prefix + 'Left'],
|
||||
this._elementRef.nativeElement[prefix + 'Top'],
|
||||
this._elementRef.nativeElement[prefix + 'Width'],
|
||||
this._elementRef.nativeElement[prefix + 'Height']
|
||||
);
|
||||
this._elementRef.nativeElement[prefix + 'Height']);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -186,18 +198,22 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @param absolute
|
||||
*/
|
||||
position(absolute: boolean = false): ScrollbarPosition {
|
||||
position(absolute: boolean = false): ScrollbarPosition
|
||||
{
|
||||
let scrollbarPosition;
|
||||
|
||||
if (!absolute && this._ps) {
|
||||
if ( !absolute && this._ps )
|
||||
{
|
||||
scrollbarPosition = new ScrollbarPosition(
|
||||
this._ps.reach.x || 0,
|
||||
this._ps.reach.y || 0
|
||||
this._ps.reach.y || 0,
|
||||
);
|
||||
} else {
|
||||
}
|
||||
else
|
||||
{
|
||||
scrollbarPosition = new ScrollbarPosition(
|
||||
this._elementRef.nativeElement.scrollLeft,
|
||||
this._elementRef.nativeElement.scrollTop
|
||||
this._elementRef.nativeElement.scrollTop,
|
||||
);
|
||||
}
|
||||
|
||||
@ -211,15 +227,21 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
* @param y
|
||||
* @param speed
|
||||
*/
|
||||
scrollTo(x: number, y?: number, speed?: number): void {
|
||||
if (y == null && speed == null) {
|
||||
scrollTo(x: number, y?: number, speed?: number): void
|
||||
{
|
||||
if ( y == null && speed == null )
|
||||
{
|
||||
this.animateScrolling('scrollTop', x, speed);
|
||||
} else {
|
||||
if (x != null) {
|
||||
}
|
||||
else
|
||||
{
|
||||
if ( x != null )
|
||||
{
|
||||
this.animateScrolling('scrollLeft', x, speed);
|
||||
}
|
||||
|
||||
if (y != null) {
|
||||
if ( y != null )
|
||||
{
|
||||
this.animateScrolling('scrollTop', y, speed);
|
||||
}
|
||||
}
|
||||
@ -231,7 +253,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
* @param x
|
||||
* @param speed
|
||||
*/
|
||||
scrollToX(x: number, speed?: number): void {
|
||||
scrollToX(x: number, speed?: number): void
|
||||
{
|
||||
this.animateScrolling('scrollLeft', x, speed);
|
||||
}
|
||||
|
||||
@ -241,7 +264,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
* @param y
|
||||
* @param speed
|
||||
*/
|
||||
scrollToY(y: number, speed?: number): void {
|
||||
scrollToY(y: number, speed?: number): void
|
||||
{
|
||||
this.animateScrolling('scrollTop', y, speed);
|
||||
}
|
||||
|
||||
@ -251,7 +275,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
* @param offset
|
||||
* @param speed
|
||||
*/
|
||||
scrollToTop(offset: number = 0, speed?: number): void {
|
||||
scrollToTop(offset: number = 0, speed?: number): void
|
||||
{
|
||||
this.animateScrolling('scrollTop', offset, speed);
|
||||
}
|
||||
|
||||
@ -261,10 +286,9 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
* @param offset
|
||||
* @param speed
|
||||
*/
|
||||
scrollToBottom(offset: number = 0, speed?: number): void {
|
||||
const top =
|
||||
this._elementRef.nativeElement.scrollHeight -
|
||||
this._elementRef.nativeElement.clientHeight;
|
||||
scrollToBottom(offset: number = 0, speed?: number): void
|
||||
{
|
||||
const top = this._elementRef.nativeElement.scrollHeight - this._elementRef.nativeElement.clientHeight;
|
||||
this.animateScrolling('scrollTop', top - offset, speed);
|
||||
}
|
||||
|
||||
@ -274,7 +298,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
* @param offset
|
||||
* @param speed
|
||||
*/
|
||||
scrollToLeft(offset: number = 0, speed?: number): void {
|
||||
scrollToLeft(offset: number = 0, speed?: number): void
|
||||
{
|
||||
this.animateScrolling('scrollLeft', offset, speed);
|
||||
}
|
||||
|
||||
@ -284,10 +309,9 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
* @param offset
|
||||
* @param speed
|
||||
*/
|
||||
scrollToRight(offset: number = 0, speed?: number): void {
|
||||
const left =
|
||||
this._elementRef.nativeElement.scrollWidth -
|
||||
this._elementRef.nativeElement.clientWidth;
|
||||
scrollToRight(offset: number = 0, speed?: number): void
|
||||
{
|
||||
const left = this._elementRef.nativeElement.scrollWidth - this._elementRef.nativeElement.clientWidth;
|
||||
this.animateScrolling('scrollLeft', left - offset, speed);
|
||||
}
|
||||
|
||||
@ -299,27 +323,22 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
* @param ignoreVisible If true, scrollToElement won't happen if element is already inside the current viewport
|
||||
* @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);
|
||||
|
||||
if (!element) {
|
||||
if ( !element )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
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 (
|
||||
ignoreVisible &&
|
||||
elementPos.right <= scrollerPos.right - Math.abs(offset)
|
||||
) {
|
||||
if ( this._elementRef.nativeElement.classList.contains('ps--active-x') )
|
||||
{
|
||||
if ( ignoreVisible && elementPos.right <= (scrollerPos.right - Math.abs(offset)) )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -329,11 +348,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
this.animateScrolling('scrollLeft', position + offset, speed);
|
||||
}
|
||||
|
||||
if (this._elementRef.nativeElement.classList.contains('ps--active-y')) {
|
||||
if (
|
||||
ignoreVisible &&
|
||||
elementPos.bottom <= scrollerPos.bottom - Math.abs(offset)
|
||||
) {
|
||||
if ( this._elementRef.nativeElement.classList.contains('ps--active-y') )
|
||||
{
|
||||
if ( ignoreVisible && elementPos.bottom <= (scrollerPos.bottom - Math.abs(offset)) )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -351,15 +369,20 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
* @param value
|
||||
* @param speed
|
||||
*/
|
||||
animateScrolling(target: string, value: number, speed?: number): void {
|
||||
if (this._animation) {
|
||||
animateScrolling(target: string, value: number, speed?: number): void
|
||||
{
|
||||
if ( this._animation )
|
||||
{
|
||||
window.cancelAnimationFrame(this._animation);
|
||||
this._animation = null;
|
||||
}
|
||||
|
||||
if (!speed || typeof window === 'undefined') {
|
||||
if ( !speed || typeof window === 'undefined' )
|
||||
{
|
||||
this._elementRef.nativeElement[target] = value;
|
||||
} else if (value !== this._elementRef.nativeElement[target]) {
|
||||
}
|
||||
else if ( value !== this._elementRef.nativeElement[target] )
|
||||
{
|
||||
let newValue = 0;
|
||||
let scrollCount = 0;
|
||||
|
||||
@ -368,18 +391,20 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
|
||||
const cosParameter = (oldValue - value) / 2;
|
||||
|
||||
const step = (newTimestamp: number): void => {
|
||||
scrollCount +=
|
||||
Math.PI / (speed / (newTimestamp - oldTimestamp));
|
||||
newValue = Math.round(
|
||||
value + cosParameter + cosParameter * Math.cos(scrollCount)
|
||||
);
|
||||
const step = (newTimestamp: number): void =>
|
||||
{
|
||||
scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
|
||||
newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
|
||||
|
||||
// Only continue animation if scroll position has not changed
|
||||
if (this._elementRef.nativeElement[target] === oldValue) {
|
||||
if (scrollCount >= Math.PI) {
|
||||
if ( this._elementRef.nativeElement[target] === oldValue )
|
||||
{
|
||||
if ( scrollCount >= Math.PI )
|
||||
{
|
||||
this.animateScrolling(target, value, 0);
|
||||
} else {
|
||||
}
|
||||
else
|
||||
{
|
||||
this._elementRef.nativeElement[target] = newValue;
|
||||
|
||||
// On a zoomed out page the resulting offset may differ
|
||||
@ -404,26 +429,23 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _init(): void {
|
||||
private _init(): void
|
||||
{
|
||||
// Return if already initialized
|
||||
if (this._ps) {
|
||||
if ( this._ps )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// 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;
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize the PerfectScrollbar
|
||||
this._ps = new PerfectScrollbar(this._elementRef.nativeElement, {
|
||||
...this._options,
|
||||
});
|
||||
this._ps = new PerfectScrollbar(this._elementRef.nativeElement, {...this._options});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -431,9 +453,11 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _destroy(): void {
|
||||
private _destroy(): void
|
||||
{
|
||||
// Return if not initialized
|
||||
if (!this._ps) {
|
||||
if ( !this._ps )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
export class ScrollbarGeometry {
|
||||
export class ScrollbarGeometry
|
||||
{
|
||||
public x: number;
|
||||
public y: number;
|
||||
|
||||
public w: 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.y = y;
|
||||
this.w = w;
|
||||
@ -13,11 +15,13 @@ export class ScrollbarGeometry {
|
||||
}
|
||||
}
|
||||
|
||||
export class ScrollbarPosition {
|
||||
export class ScrollbarPosition
|
||||
{
|
||||
public x: 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.y = y;
|
||||
}
|
||||
|
||||
@ -1,26 +1,13 @@
|
||||
import { provideHttpClient, withInterceptors } from '@angular/common/http';
|
||||
import {
|
||||
EnvironmentProviders,
|
||||
Provider,
|
||||
importProvidersFrom,
|
||||
inject,
|
||||
provideAppInitializer,
|
||||
provideEnvironmentInitializer,
|
||||
} from '@angular/core';
|
||||
import { APP_INITIALIZER, ENVIRONMENT_INITIALIZER, EnvironmentProviders, importProvidersFrom, inject, Provider } from '@angular/core';
|
||||
import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
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 { FUSE_CONFIG } from '@fuse/services/config/config.constants';
|
||||
import { FuseConfirmationService } from '@fuse/services/confirmation';
|
||||
import {
|
||||
FuseLoadingService,
|
||||
fuseLoadingInterceptor,
|
||||
} from '@fuse/services/loading';
|
||||
import { fuseLoadingInterceptor, FuseLoadingService } from '@fuse/services/loading';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FusePlatformService } from '@fuse/services/platform';
|
||||
import { FuseSplashScreenService } from '@fuse/services/splash-screen';
|
||||
@ -29,63 +16,90 @@ import { FuseUtilsService } from '@fuse/services/utils';
|
||||
export type FuseProviderConfig = {
|
||||
mockApi?: {
|
||||
delay?: number;
|
||||
service?: any;
|
||||
};
|
||||
fuse?: FuseConfig;
|
||||
};
|
||||
services?: any[];
|
||||
},
|
||||
fuse?: FuseConfig
|
||||
}
|
||||
|
||||
/**
|
||||
* Fuse provider
|
||||
*/
|
||||
export const provideFuse = (
|
||||
config: FuseProviderConfig
|
||||
): Array<Provider | EnvironmentProviders> => {
|
||||
export const provideFuse = (config: FuseProviderConfig): Array<Provider | EnvironmentProviders> =>
|
||||
{
|
||||
// Base providers
|
||||
const providers: Array<Provider | EnvironmentProviders> = [
|
||||
{
|
||||
// Disable 'theme' sanity check
|
||||
provide: MATERIAL_SANITY_CHECKS,
|
||||
provide : MATERIAL_SANITY_CHECKS,
|
||||
useValue: {
|
||||
doctype: true,
|
||||
theme: false,
|
||||
theme : false,
|
||||
version: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// Use the 'fill' appearance on Angular Material form fields by default
|
||||
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
||||
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
||||
useValue: {
|
||||
appearance: 'fill',
|
||||
},
|
||||
},
|
||||
{
|
||||
provide: FUSE_MOCK_API_DEFAULT_DELAY,
|
||||
provide : FUSE_MOCK_API_DEFAULT_DELAY,
|
||||
useValue: config?.mockApi?.delay ?? 0,
|
||||
},
|
||||
{
|
||||
provide: FUSE_CONFIG,
|
||||
provide : FUSE_CONFIG,
|
||||
useValue: config?.fuse ?? {},
|
||||
},
|
||||
|
||||
importProvidersFrom(MatDialogModule),
|
||||
provideEnvironmentInitializer(() => inject(FuseConfirmationService)),
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FuseConfirmationService),
|
||||
multi : true,
|
||||
},
|
||||
|
||||
provideHttpClient(withInterceptors([fuseLoadingInterceptor])),
|
||||
provideEnvironmentInitializer(() => inject(FuseLoadingService)),
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FuseLoadingService),
|
||||
multi : true,
|
||||
},
|
||||
|
||||
provideEnvironmentInitializer(() => inject(FuseMediaWatcherService)),
|
||||
provideEnvironmentInitializer(() => inject(FusePlatformService)),
|
||||
provideEnvironmentInitializer(() => inject(FuseSplashScreenService)),
|
||||
provideEnvironmentInitializer(() => inject(FuseUtilsService)),
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FuseMediaWatcherService),
|
||||
multi : true,
|
||||
},
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FusePlatformService),
|
||||
multi : true,
|
||||
},
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FuseSplashScreenService),
|
||||
multi : true,
|
||||
},
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FuseUtilsService),
|
||||
multi : true,
|
||||
},
|
||||
];
|
||||
|
||||
// Mock Api services
|
||||
if (config?.mockApi?.service) {
|
||||
if ( config?.mockApi?.services )
|
||||
{
|
||||
providers.push(
|
||||
provideHttpClient(withInterceptors([mockApiInterceptor])),
|
||||
provideAppInitializer(() => {
|
||||
const mockApiService = inject(config.mockApi.service);
|
||||
})
|
||||
{
|
||||
provide : APP_INITIALIZER,
|
||||
deps : [...config.mockApi.services],
|
||||
useFactory: () => (): any => null,
|
||||
multi : true,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
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');
|
||||
|
||||
@ -1,30 +1,23 @@
|
||||
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 { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
|
||||
import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
|
||||
import { Observable, delay, of, switchMap, throwError } from 'rxjs';
|
||||
import { delay, Observable, 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 fuseMockApiService = inject(FuseMockApiService);
|
||||
|
||||
// Try to get the request handler
|
||||
const { handler, urlParams } = fuseMockApiService.findHandler(
|
||||
request.method.toUpperCase(),
|
||||
request.url
|
||||
);
|
||||
const {
|
||||
handler,
|
||||
urlParams,
|
||||
} = fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
|
||||
|
||||
// Pass through if the request handler does not exist
|
||||
if (!handler) {
|
||||
if ( !handler )
|
||||
{
|
||||
return next(request);
|
||||
}
|
||||
|
||||
@ -37,13 +30,15 @@ export const mockApiInterceptor = (
|
||||
// Subscribe to the response function observable
|
||||
return handler.response.pipe(
|
||||
delay(handler.delay ?? defaultDelay ?? 0),
|
||||
switchMap((response) => {
|
||||
switchMap((response) =>
|
||||
{
|
||||
// If there is no response data,
|
||||
// throw an error response
|
||||
if (!response) {
|
||||
if ( !response )
|
||||
{
|
||||
response = new HttpErrorResponse({
|
||||
error: 'NOT FOUND',
|
||||
status: 404,
|
||||
error : 'NOT FOUND',
|
||||
status : 404,
|
||||
statusText: 'NOT FOUND',
|
||||
});
|
||||
|
||||
@ -53,15 +48,16 @@ export const mockApiInterceptor = (
|
||||
// Parse the response data
|
||||
const data = {
|
||||
status: response[0],
|
||||
body: response[1],
|
||||
body : response[1],
|
||||
};
|
||||
|
||||
// If the status code is in between 200 and 300,
|
||||
// return a success response
|
||||
if (data.status >= 200 && data.status < 300) {
|
||||
if ( data.status >= 200 && data.status < 300 )
|
||||
{
|
||||
response = new HttpResponse({
|
||||
body: data.body,
|
||||
status: data.status,
|
||||
body : data.body,
|
||||
status : data.status,
|
||||
statusText: 'OK',
|
||||
});
|
||||
|
||||
@ -71,12 +67,11 @@ export const mockApiInterceptor = (
|
||||
// For other status codes,
|
||||
// throw an error response
|
||||
response = new HttpErrorResponse({
|
||||
error: data.body.error,
|
||||
status: data.status,
|
||||
error : data.body.error,
|
||||
status : data.status,
|
||||
statusText: 'ERROR',
|
||||
});
|
||||
|
||||
return throwError(response);
|
||||
})
|
||||
);
|
||||
}));
|
||||
};
|
||||
|
||||
@ -2,7 +2,8 @@ import { HttpRequest } from '@angular/common/http';
|
||||
import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
|
||||
import { Observable, of, take, throwError } from 'rxjs';
|
||||
|
||||
export class FuseMockApiHandler {
|
||||
export class FuseMockApiHandler
|
||||
{
|
||||
request!: HttpRequest<any>;
|
||||
urlParams!: { [key: string]: string };
|
||||
|
||||
@ -16,8 +17,10 @@ export class FuseMockApiHandler {
|
||||
*/
|
||||
constructor(
|
||||
public url: string,
|
||||
public delay?: number
|
||||
) {}
|
||||
public delay?: number,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
@ -26,19 +29,23 @@ export class FuseMockApiHandler {
|
||||
/**
|
||||
* Getter for response callback
|
||||
*/
|
||||
get response(): Observable<any> {
|
||||
get response(): Observable<any>
|
||||
{
|
||||
// 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!');
|
||||
}
|
||||
|
||||
// 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!');
|
||||
}
|
||||
|
||||
// If the request has not been set, throw an error
|
||||
if (!this.request) {
|
||||
if ( !this.request )
|
||||
{
|
||||
return throwError('Request does not exist!');
|
||||
}
|
||||
|
||||
@ -47,12 +54,13 @@ export class FuseMockApiHandler {
|
||||
|
||||
// Execute the reply callback
|
||||
const replyResult = this._reply({
|
||||
request: this.request,
|
||||
request : this.request,
|
||||
urlParams: this.urlParams,
|
||||
});
|
||||
|
||||
// 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 replyResult.pipe(take(1));
|
||||
}
|
||||
@ -70,7 +78,8 @@ export class FuseMockApiHandler {
|
||||
*
|
||||
* @param callback
|
||||
*/
|
||||
reply(callback: FuseMockApiReplyCallback): void {
|
||||
reply(callback: FuseMockApiReplyCallback): void
|
||||
{
|
||||
// Store the reply
|
||||
this._reply = callback;
|
||||
}
|
||||
@ -80,8 +89,11 @@ export class FuseMockApiHandler {
|
||||
*
|
||||
* @param count
|
||||
*/
|
||||
replyCount(count: number): void {
|
||||
replyCount(count: number): void
|
||||
{
|
||||
// Store the reply count
|
||||
this._replyCount = count;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -3,19 +3,27 @@ import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler'
|
||||
import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
|
||||
import { compact, fromPairs } from 'lodash-es';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FuseMockApiService {
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseMockApiService
|
||||
{
|
||||
private _handlers: { [key: string]: Map<string, FuseMockApiHandler> } = {
|
||||
get: new Map<string, FuseMockApiHandler>(),
|
||||
post: new Map<string, FuseMockApiHandler>(),
|
||||
patch: new Map<string, FuseMockApiHandler>(),
|
||||
delete: new Map<string, FuseMockApiHandler>(),
|
||||
put: new Map<string, FuseMockApiHandler>(),
|
||||
head: new Map<string, FuseMockApiHandler>(),
|
||||
jsonp: new Map<string, FuseMockApiHandler>(),
|
||||
options: new Map<string, FuseMockApiHandler>(),
|
||||
'get' : new Map<string, FuseMockApiHandler>(),
|
||||
'post' : new Map<string, FuseMockApiHandler>(),
|
||||
'patch' : new Map<string, FuseMockApiHandler>(),
|
||||
'delete' : new Map<string, FuseMockApiHandler>(),
|
||||
'put' : new Map<string, FuseMockApiHandler>(),
|
||||
'head' : new Map<string, FuseMockApiHandler>(),
|
||||
'jsonp' : new Map<string, FuseMockApiHandler>(),
|
||||
'options': new Map<string, FuseMockApiHandler>(),
|
||||
};
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -27,19 +35,11 @@ export class FuseMockApiService {
|
||||
* @param method
|
||||
* @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
|
||||
const matchingHandler: {
|
||||
handler: FuseMockApiHandler | undefined;
|
||||
urlParams: { [key: string]: string };
|
||||
} = {
|
||||
handler: undefined,
|
||||
const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = {
|
||||
handler : undefined,
|
||||
urlParams: {},
|
||||
};
|
||||
|
||||
@ -50,9 +50,11 @@ export class FuseMockApiService {
|
||||
const handlers = this._handlers[method.toLowerCase()];
|
||||
|
||||
// Iterate through the handlers
|
||||
handlers.forEach((handler, handlerUrl) => {
|
||||
handlers.forEach((handler, handlerUrl) =>
|
||||
{
|
||||
// Skip if there is already a matching handler
|
||||
if (matchingHandler.handler) {
|
||||
if ( matchingHandler.handler )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
@ -60,32 +62,24 @@ export class FuseMockApiService {
|
||||
const handlerUrlParts = handlerUrl.split('/');
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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 (matches) {
|
||||
if ( matches )
|
||||
{
|
||||
// Assign the matching handler
|
||||
matchingHandler.handler = handler;
|
||||
|
||||
// Extract and assign the parameters
|
||||
matchingHandler.urlParams = fromPairs(
|
||||
compact(
|
||||
handlerUrlParts.map((handlerUrlPart, index) =>
|
||||
handlerUrlPart.startsWith(':')
|
||||
? [handlerUrlPart.substring(1), urlParts[index]]
|
||||
: undefined
|
||||
)
|
||||
)
|
||||
);
|
||||
matchingHandler.urlParams = fromPairs(compact(handlerUrlParts.map((handlerUrlPart, index) =>
|
||||
handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined,
|
||||
)));
|
||||
}
|
||||
});
|
||||
|
||||
@ -98,7 +92,8 @@ export class FuseMockApiService {
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @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);
|
||||
}
|
||||
|
||||
@ -108,7 +103,8 @@ export class FuseMockApiService {
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @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);
|
||||
}
|
||||
|
||||
@ -118,7 +114,8 @@ export class FuseMockApiService {
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @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);
|
||||
}
|
||||
|
||||
@ -128,7 +125,8 @@ export class FuseMockApiService {
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @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);
|
||||
}
|
||||
|
||||
@ -138,7 +136,8 @@ export class FuseMockApiService {
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @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);
|
||||
}
|
||||
|
||||
@ -148,7 +147,8 @@ export class FuseMockApiService {
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @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);
|
||||
}
|
||||
|
||||
@ -158,7 +158,8 @@ export class FuseMockApiService {
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @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);
|
||||
}
|
||||
|
||||
@ -168,7 +169,8 @@ export class FuseMockApiService {
|
||||
* @param url - URL address of the mocked API endpoint
|
||||
* @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);
|
||||
}
|
||||
|
||||
@ -184,11 +186,8 @@ export class FuseMockApiService {
|
||||
* @param delay
|
||||
* @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
|
||||
const fuseMockHttp = new FuseMockApiHandler(url, delay);
|
||||
|
||||
|
||||
@ -2,10 +2,7 @@ import { HttpRequest } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
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;
|
||||
|
||||
export type FuseMockApiMethods =
|
||||
|
||||
@ -1,4 +1,12 @@
|
||||
export class FuseMockApiUtils {
|
||||
export class FuseMockApiUtils
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -6,23 +14,23 @@ export class FuseMockApiUtils {
|
||||
/**
|
||||
* Generate a globally unique id
|
||||
*/
|
||||
static guid(): string {
|
||||
static guid(): string
|
||||
{
|
||||
/* eslint-disable */
|
||||
|
||||
let d = new Date().getTime();
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) =>
|
||||
{
|
||||
const r = (d + Math.random() * 16) % 16 | 0;
|
||||
d = Math.floor(d / 16);
|
||||
return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
|
||||
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
||||
});
|
||||
|
||||
/* eslint-enable */
|
||||
|
||||
@ -4,11 +4,19 @@ import { Pipe, PipeTransform } from '@angular/core';
|
||||
* Finds an object from given source using the given key - value pairs
|
||||
*/
|
||||
@Pipe({
|
||||
name: 'fuseFindByKey',
|
||||
pure: false,
|
||||
name : 'fuseFindByKey',
|
||||
pure : false,
|
||||
standalone: true,
|
||||
})
|
||||
export class FuseFindByKeyPipe implements PipeTransform {
|
||||
export class FuseFindByKeyPipe implements PipeTransform
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform
|
||||
*
|
||||
@ -16,15 +24,15 @@ export class FuseFindByKeyPipe implements PipeTransform {
|
||||
* @param key Key of the object property to look for
|
||||
* @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 (Array.isArray(value)) {
|
||||
return value.map((item) =>
|
||||
source.find((sourceItem) => sourceItem[key] === item)
|
||||
);
|
||||
if ( Array.isArray(value) )
|
||||
{
|
||||
return value.map(item => source.find(sourceItem => sourceItem[key] === item));
|
||||
}
|
||||
|
||||
// If the value is a string...
|
||||
return source.find((sourceItem) => sourceItem[key] === value);
|
||||
return source.find(sourceItem => sourceItem[key] === value);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
export * from '@fuse/pipes/find-by-key/find-by-key.module';
|
||||
export * from '@fuse/pipes/find-by-key/find-by-key.pipe';
|
||||
export * from '@fuse/pipes/find-by-key/find-by-key.module';
|
||||
|
||||
@ -1,11 +1,21 @@
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
import { Inject, Injectable } from '@angular/core';
|
||||
import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
|
||||
import { merge } from 'lodash-es';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FuseConfigService {
|
||||
private _config = new BehaviorSubject(inject(FUSE_CONFIG));
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseConfigService
|
||||
{
|
||||
private _config: BehaviorSubject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(@Inject(FUSE_CONFIG) config: any)
|
||||
{
|
||||
// Private
|
||||
this._config = new BehaviorSubject(config);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
@ -14,7 +24,8 @@ export class FuseConfigService {
|
||||
/**
|
||||
* Setter & getter for config
|
||||
*/
|
||||
set config(value: any) {
|
||||
set config(value: any)
|
||||
{
|
||||
// Merge the new config over to the current config
|
||||
const config = merge({}, this._config.getValue(), value);
|
||||
|
||||
@ -23,7 +34,8 @@ export class FuseConfigService {
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/member-ordering
|
||||
get config$(): Observable<any> {
|
||||
get config$(): Observable<any>
|
||||
{
|
||||
return this._config.asObservable();
|
||||
}
|
||||
|
||||
@ -34,7 +46,8 @@ export class FuseConfigService {
|
||||
/**
|
||||
* Resets the config to the default
|
||||
*/
|
||||
reset(): void {
|
||||
reset(): void
|
||||
{
|
||||
// Set the config
|
||||
this._config.next(this.config);
|
||||
}
|
||||
|
||||
@ -8,7 +8,8 @@ export type Themes = { id: string; name: string }[];
|
||||
* AppConfig interface. Update this interface to strictly type your config
|
||||
* object.
|
||||
*/
|
||||
export interface FuseConfig {
|
||||
export interface FuseConfig
|
||||
{
|
||||
layout: string;
|
||||
scheme: Scheme;
|
||||
screens: Screens;
|
||||
|
||||
@ -4,47 +4,54 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
|
||||
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
|
||||
import { merge } from 'lodash-es';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FuseConfirmationService {
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseConfirmationService
|
||||
{
|
||||
private _matDialog: MatDialog = inject(MatDialog);
|
||||
private _defaultConfig: FuseConfirmationConfig = {
|
||||
title: 'Confirm action',
|
||||
message: 'Are you sure you want to confirm this action?',
|
||||
icon: {
|
||||
show: true,
|
||||
name: 'heroicons_outline:exclamation-triangle',
|
||||
title : 'Confirm action',
|
||||
message : 'Are you sure you want to confirm this action?',
|
||||
icon : {
|
||||
show : true,
|
||||
name : 'heroicons_outline:exclamation-triangle',
|
||||
color: 'warn',
|
||||
},
|
||||
actions: {
|
||||
actions : {
|
||||
confirm: {
|
||||
show: true,
|
||||
show : true,
|
||||
label: 'Confirm',
|
||||
color: 'warn',
|
||||
},
|
||||
cancel: {
|
||||
show: true,
|
||||
cancel : {
|
||||
show : true,
|
||||
label: 'Cancel',
|
||||
},
|
||||
},
|
||||
dismissible: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
open(
|
||||
config: FuseConfirmationConfig = {}
|
||||
): MatDialogRef<FuseConfirmationDialogComponent> {
|
||||
open(config: FuseConfirmationConfig = {}): MatDialogRef<FuseConfirmationDialogComponent>
|
||||
{
|
||||
// Merge the user config with the default config
|
||||
const userConfig = merge({}, this._defaultConfig, config);
|
||||
|
||||
// Open the dialog
|
||||
return this._matDialog.open(FuseConfirmationDialogComponent, {
|
||||
autoFocus: false,
|
||||
autoFocus : false,
|
||||
disableClose: !userConfig.dismissible,
|
||||
data: userConfig,
|
||||
panelClass: 'fuse-confirmation-dialog-panel',
|
||||
data : userConfig,
|
||||
panelClass : 'fuse-confirmation-dialog-panel',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,11 @@
|
||||
export interface FuseConfirmationConfig {
|
||||
export interface FuseConfirmationConfig
|
||||
{
|
||||
title?: string;
|
||||
message?: string;
|
||||
icon?: {
|
||||
show?: boolean;
|
||||
name?: string;
|
||||
color?:
|
||||
| 'primary'
|
||||
| 'accent'
|
||||
| 'warn'
|
||||
| 'basic'
|
||||
| 'info'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error';
|
||||
color?: 'primary' | 'accent' | 'warn' | 'basic' | 'info' | 'success' | 'warning' | 'error';
|
||||
};
|
||||
actions?: {
|
||||
confirm?: {
|
||||
|
||||
@ -1,95 +1,85 @@
|
||||
<div class="relative flex h-full w-full flex-col">
|
||||
<div class="relative flex flex-col w-full h-full">
|
||||
|
||||
<!-- Dismiss button -->
|
||||
@if (data.dismissible) {
|
||||
<div class="absolute right-0 top-0 pr-4 pt-4">
|
||||
<button mat-icon-button [matDialogClose]="undefined">
|
||||
<ng-container *ngIf="data.dismissible">
|
||||
<div class="absolute top-0 right-0 pt-4 pr-4">
|
||||
<button
|
||||
mat-icon-button
|
||||
[matDialogClose]="undefined">
|
||||
<mat-icon
|
||||
class="text-secondary"
|
||||
[svgIcon]="'heroicons_outline:x-mark'"
|
||||
></mat-icon>
|
||||
[svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="flex flex-auto flex-col items-center p-8 pb-6 sm:flex-row sm:items-start sm:pb-8"
|
||||
>
|
||||
<div class="flex flex-col sm:flex-row flex-auto items-center sm:items-start p-8 pb-6 sm:pb-8">
|
||||
|
||||
<!-- Icon -->
|
||||
@if (data.icon.show) {
|
||||
<ng-container *ngIf="data.icon.show">
|
||||
<div
|
||||
class="flex h-10 w-10 flex-0 items-center justify-center rounded-full sm:mr-4"
|
||||
[ngClass]="{
|
||||
'bg-primary-100 text-primary-600 dark:bg-primary-600 dark:text-primary-50':
|
||||
data.icon.color === 'primary',
|
||||
'bg-accent-100 text-accent-600 dark:bg-accent-600 dark:text-accent-50':
|
||||
data.icon.color === 'accent',
|
||||
'bg-warn-100 text-warn-600 dark:bg-warn-600 dark:text-warn-50':
|
||||
data.icon.color === 'warn',
|
||||
'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',
|
||||
}"
|
||||
>
|
||||
class="flex flex-0 items-center justify-center w-10 h-10 sm:mr-4 rounded-full"
|
||||
[ngClass]="{'text-primary-600 bg-primary-100 dark:text-primary-50 dark:bg-primary-600': data.icon.color === 'primary',
|
||||
'text-accent-600 bg-accent-100 dark:text-accent-50 dark:bg-accent-600': data.icon.color === 'accent',
|
||||
'text-warn-600 bg-warn-100 dark:text-warn-50 dark:bg-warn-600': data.icon.color === 'warn',
|
||||
'text-gray-600 bg-gray-100 dark:text-gray-50 dark:bg-gray-600': data.icon.color === 'basic',
|
||||
'text-blue-600 bg-blue-100 dark:text-blue-50 dark:bg-blue-600': data.icon.color === 'info',
|
||||
'text-green-500 bg-green-100 dark:text-green-50 dark:bg-green-500': data.icon.color === 'success',
|
||||
'text-amber-500 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': data.icon.color === 'warning',
|
||||
'text-red-600 bg-red-100 dark:text-red-50 dark:bg-red-600': data.icon.color === 'error'
|
||||
}">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
[svgIcon]="data.icon.name"
|
||||
></mat-icon>
|
||||
[svgIcon]="data.icon.name"></mat-icon>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<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">
|
||||
|
||||
@if (data.title || data.message) {
|
||||
<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 -->
|
||||
@if (data.title) {
|
||||
<ng-container *ngIf="data.title">
|
||||
<div
|
||||
class="text-xl font-medium leading-6"
|
||||
[innerHTML]="data.title"
|
||||
></div>
|
||||
}
|
||||
class="text-xl leading-6 font-medium"
|
||||
[innerHTML]="data.title"></div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Message -->
|
||||
@if (data.message) {
|
||||
<ng-container *ngIf="data.message">
|
||||
<div
|
||||
class="text-secondary"
|
||||
[innerHTML]="data.message"
|
||||
></div>
|
||||
}
|
||||
[innerHTML]="data.message"></div>
|
||||
</ng-container>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
@if (data.actions.confirm.show || data.actions.cancel.show) {
|
||||
<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"
|
||||
>
|
||||
<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">
|
||||
|
||||
<!-- Cancel -->
|
||||
@if (data.actions.cancel.show) {
|
||||
<button mat-stroked-button [matDialogClose]="'cancelled'">
|
||||
{{ data.actions.cancel.label }}
|
||||
<ng-container *ngIf="data.actions.cancel.show">
|
||||
<button
|
||||
mat-stroked-button
|
||||
[matDialogClose]="'cancelled'">
|
||||
{{data.actions.cancel.label}}
|
||||
</button>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
<!-- Confirm -->
|
||||
@if (data.actions.confirm.show) {
|
||||
<ng-container *ngIf="data.actions.confirm.show">
|
||||
<button
|
||||
mat-flat-button
|
||||
[color]="data.actions.confirm.color"
|
||||
[matDialogClose]="'confirmed'"
|
||||
>
|
||||
{{ data.actions.confirm.label }}
|
||||
[matDialogClose]="'confirmed'">
|
||||
{{data.actions.confirm.label}}
|
||||
</button>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,21 +1,23 @@
|
||||
import { NgClass } from '@angular/common';
|
||||
import { Component, ViewEncapsulation, inject } from '@angular/core';
|
||||
import { NgClass, NgIf } from '@angular/common';
|
||||
import { Component, Inject, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-confirmation-dialog',
|
||||
templateUrl: './dialog.component.html',
|
||||
styles: [
|
||||
selector : 'fuse-confirmation-dialog',
|
||||
templateUrl : './dialog.component.html',
|
||||
styles : [
|
||||
`
|
||||
.fuse-confirmation-dialog-panel {
|
||||
|
||||
@screen md {
|
||||
@apply w-128;
|
||||
}
|
||||
|
||||
.mat-mdc-dialog-container {
|
||||
|
||||
.mat-mdc-dialog-surface {
|
||||
padding: 0 !important;
|
||||
}
|
||||
@ -24,8 +26,16 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
|
||||
`,
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
imports: [MatButtonModule, MatDialogModule, MatIconModule, NgClass],
|
||||
standalone : true,
|
||||
imports : [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
|
||||
})
|
||||
export class FuseConfirmationDialogComponent {
|
||||
data: FuseConfirmationConfig = inject(MAT_DIALOG_DATA);
|
||||
export class FuseConfirmationDialogComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(@Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig)
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,21 +1,23 @@
|
||||
import { HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
|
||||
import { inject } from '@angular/core';
|
||||
import { FuseLoadingService } from '@fuse/services/loading/loading.service';
|
||||
import { Observable, finalize, take } from 'rxjs';
|
||||
import { finalize, Observable, 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);
|
||||
let handleRequestsAutomatically = false;
|
||||
|
||||
fuseLoadingService.auto$.pipe(take(1)).subscribe((value) => {
|
||||
handleRequestsAutomatically = value;
|
||||
});
|
||||
fuseLoadingService.auto$
|
||||
.pipe(take(1))
|
||||
.subscribe((value) =>
|
||||
{
|
||||
handleRequestsAutomatically = value;
|
||||
});
|
||||
|
||||
// If the Auto mode is turned off, do nothing
|
||||
if (!handleRequestsAutomatically) {
|
||||
if ( !handleRequestsAutomatically )
|
||||
{
|
||||
return next(req);
|
||||
}
|
||||
|
||||
@ -23,9 +25,9 @@ export const fuseLoadingInterceptor = (
|
||||
fuseLoadingService._setLoadingStatus(true, req.url);
|
||||
|
||||
return next(req).pipe(
|
||||
finalize(() => {
|
||||
finalize(() =>
|
||||
{
|
||||
// Set the status to false if there are any errors or the request is completed
|
||||
fuseLoadingService._setLoadingStatus(false, req.url);
|
||||
})
|
||||
);
|
||||
}));
|
||||
};
|
||||
|
||||
@ -1,21 +1,23 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FuseLoadingService {
|
||||
private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
|
||||
true
|
||||
);
|
||||
private _mode$: BehaviorSubject<'determinate' | 'indeterminate'> =
|
||||
new BehaviorSubject<'determinate' | 'indeterminate'>('indeterminate');
|
||||
private _progress$: BehaviorSubject<number | null> = new BehaviorSubject<
|
||||
number | null
|
||||
>(0);
|
||||
private _show$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
|
||||
false
|
||||
);
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseLoadingService
|
||||
{
|
||||
private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
|
||||
private _mode$: BehaviorSubject<'determinate' | 'indeterminate'> = new BehaviorSubject<'determinate' | 'indeterminate'>('indeterminate');
|
||||
private _progress$: BehaviorSubject<number | null> = new BehaviorSubject<number | null>(0);
|
||||
private _show$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
private _urlMap: Map<string, boolean> = new Map<string, boolean>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -23,28 +25,32 @@ export class FuseLoadingService {
|
||||
/**
|
||||
* Getter for auto mode
|
||||
*/
|
||||
get auto$(): Observable<boolean> {
|
||||
get auto$(): Observable<boolean>
|
||||
{
|
||||
return this._auto$.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for mode
|
||||
*/
|
||||
get mode$(): Observable<'determinate' | 'indeterminate'> {
|
||||
get mode$(): Observable<'determinate' | 'indeterminate'>
|
||||
{
|
||||
return this._mode$.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for progress
|
||||
*/
|
||||
get progress$(): Observable<number> {
|
||||
get progress$(): Observable<number>
|
||||
{
|
||||
return this._progress$.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for show
|
||||
*/
|
||||
get show$(): Observable<boolean> {
|
||||
get show$(): Observable<boolean>
|
||||
{
|
||||
return this._show$.asObservable();
|
||||
}
|
||||
|
||||
@ -55,14 +61,16 @@ export class FuseLoadingService {
|
||||
/**
|
||||
* Show the loading bar
|
||||
*/
|
||||
show(): void {
|
||||
show(): void
|
||||
{
|
||||
this._show$.next(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the loading bar
|
||||
*/
|
||||
hide(): void {
|
||||
hide(): void
|
||||
{
|
||||
this._show$.next(false);
|
||||
}
|
||||
|
||||
@ -71,7 +79,8 @@ export class FuseLoadingService {
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
setAutoMode(value: boolean): void {
|
||||
setAutoMode(value: boolean): void
|
||||
{
|
||||
this._auto$.next(value);
|
||||
}
|
||||
|
||||
@ -80,7 +89,8 @@ export class FuseLoadingService {
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
setMode(value: 'determinate' | 'indeterminate'): void {
|
||||
setMode(value: 'determinate' | 'indeterminate'): void
|
||||
{
|
||||
this._mode$.next(value);
|
||||
}
|
||||
|
||||
@ -89,8 +99,10 @@ export class FuseLoadingService {
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
setProgress(value: number): void {
|
||||
if (value < 0 || value > 100) {
|
||||
setProgress(value: number): void
|
||||
{
|
||||
if ( value < 0 || value > 100 )
|
||||
{
|
||||
console.error('Progress value must be between 0 and 100!');
|
||||
return;
|
||||
}
|
||||
@ -104,22 +116,28 @@ export class FuseLoadingService {
|
||||
* @param status
|
||||
* @param url
|
||||
*/
|
||||
_setLoadingStatus(status: boolean, url: string): void {
|
||||
_setLoadingStatus(status: boolean, url: string): void
|
||||
{
|
||||
// Return if the url was not provided
|
||||
if (!url) {
|
||||
if ( !url )
|
||||
{
|
||||
console.error('The request URL must be provided!');
|
||||
return;
|
||||
}
|
||||
|
||||
if (status === true) {
|
||||
if ( status === true )
|
||||
{
|
||||
this._urlMap.set(url, status);
|
||||
this._show$.next(true);
|
||||
} else if (status === false && this._urlMap.has(url)) {
|
||||
}
|
||||
else if ( status === false && this._urlMap.has(url) )
|
||||
{
|
||||
this._urlMap.delete(url);
|
||||
}
|
||||
|
||||
// Only set the status to 'false' if all outgoing requests are completed
|
||||
if (this._urlMap.size === 0) {
|
||||
if ( this._urlMap.size === 0 )
|
||||
{
|
||||
this._show$.next(false);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
export * from '@fuse/services/loading/loading.interceptor';
|
||||
export * from '@fuse/services/loading/loading.service';
|
||||
export * from '@fuse/services/loading/loading.interceptor';
|
||||
|
||||
@ -1,74 +1,54 @@
|
||||
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FuseConfigService } from '@fuse/services/config';
|
||||
import { fromPairs } from 'lodash-es';
|
||||
import { Observable, ReplaySubject, map, switchMap } from 'rxjs';
|
||||
import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FuseMediaWatcherService {
|
||||
private _breakpointObserver = inject(BreakpointObserver);
|
||||
private _fuseConfigService = inject(FuseConfigService);
|
||||
|
||||
private _onMediaChange: ReplaySubject<{
|
||||
matchingAliases: string[];
|
||||
matchingQueries: any;
|
||||
}> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>(
|
||||
1
|
||||
);
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseMediaWatcherService
|
||||
{
|
||||
private _onMediaChange: ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>(1);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor() {
|
||||
this._fuseConfigService.config$
|
||||
.pipe(
|
||||
map((config) =>
|
||||
fromPairs(
|
||||
Object.entries(config.screens).map(
|
||||
([alias, screen]) => [
|
||||
alias,
|
||||
`(min-width: ${screen})`,
|
||||
]
|
||||
)
|
||||
)
|
||||
),
|
||||
switchMap((screens) =>
|
||||
this._breakpointObserver
|
||||
.observe(Object.values(screens))
|
||||
.pipe(
|
||||
map((state) => {
|
||||
// Prepare the observable values and set their defaults
|
||||
const matchingAliases: string[] = [];
|
||||
const matchingQueries: any = {};
|
||||
constructor(
|
||||
private _breakpointObserver: BreakpointObserver,
|
||||
private _fuseConfigService: FuseConfigService,
|
||||
)
|
||||
{
|
||||
this._fuseConfigService.config$.pipe(
|
||||
map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
|
||||
switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
|
||||
map((state) =>
|
||||
{
|
||||
// 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
|
||||
const matchingBreakpoints =
|
||||
Object.entries(state.breakpoints).filter(
|
||||
([query, matches]) => matches
|
||||
) ?? [];
|
||||
for (const [query] of matchingBreakpoints) {
|
||||
// Find the alias of the matching query
|
||||
const matchingAlias = Object.entries(
|
||||
screens
|
||||
).find(([alias, q]) => q === query)[0];
|
||||
// Get the matching breakpoints and use them to fill the subject
|
||||
const matchingBreakpoints = Object.entries(state.breakpoints).filter(([query, matches]) => matches) ?? [];
|
||||
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
|
||||
if (matchingAlias) {
|
||||
matchingAliases.push(matchingAlias);
|
||||
matchingQueries[matchingAlias] = query;
|
||||
}
|
||||
}
|
||||
// Add the matching query to the observable values
|
||||
if ( matchingAlias )
|
||||
{
|
||||
matchingAliases.push(matchingAlias);
|
||||
matchingQueries[matchingAlias] = query;
|
||||
}
|
||||
}
|
||||
|
||||
// Execute the observable
|
||||
this._onMediaChange.next({
|
||||
matchingAliases,
|
||||
matchingQueries,
|
||||
});
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
.subscribe();
|
||||
// Execute the observable
|
||||
this._onMediaChange.next({
|
||||
matchingAliases,
|
||||
matchingQueries,
|
||||
});
|
||||
}),
|
||||
)),
|
||||
).subscribe();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -78,10 +58,8 @@ export class FuseMediaWatcherService {
|
||||
/**
|
||||
* Getter for _onMediaChange
|
||||
*/
|
||||
get onMediaChange$(): Observable<{
|
||||
matchingAliases: string[];
|
||||
matchingQueries: any;
|
||||
}> {
|
||||
get onMediaChange$(): Observable<{ matchingAliases: string[]; matchingQueries: any }>
|
||||
{
|
||||
return this._onMediaChange.asObservable();
|
||||
}
|
||||
|
||||
@ -94,7 +72,8 @@ export class FuseMediaWatcherService {
|
||||
*
|
||||
* @param query
|
||||
*/
|
||||
onMediaQueryChange$(query: string | string[]): Observable<BreakpointState> {
|
||||
onMediaQueryChange$(query: string | string[]): Observable<BreakpointState>
|
||||
{
|
||||
return this._breakpointObserver.observe(query);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,49 +1,57 @@
|
||||
import { Platform } from '@angular/cdk/platform';
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FusePlatformService {
|
||||
private _platform = inject(Platform);
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FusePlatformService
|
||||
{
|
||||
osName = 'os-unknown';
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor() {
|
||||
constructor(private _platform: Platform)
|
||||
{
|
||||
// If the platform is not a browser, return immediately
|
||||
if (!this._platform.isBrowser) {
|
||||
if ( !this._platform.isBrowser )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Windows
|
||||
if (navigator.userAgent.includes('Win')) {
|
||||
if ( navigator.userAgent.includes('Win') )
|
||||
{
|
||||
this.osName = 'os-windows';
|
||||
}
|
||||
|
||||
// Mac OS
|
||||
if (navigator.userAgent.includes('Mac')) {
|
||||
if ( navigator.userAgent.includes('Mac') )
|
||||
{
|
||||
this.osName = 'os-mac';
|
||||
}
|
||||
|
||||
// Unix
|
||||
if (navigator.userAgent.includes('X11')) {
|
||||
if ( navigator.userAgent.includes('X11') )
|
||||
{
|
||||
this.osName = 'os-unix';
|
||||
}
|
||||
|
||||
// Linux
|
||||
if (navigator.userAgent.includes('Linux')) {
|
||||
if ( navigator.userAgent.includes('Linux') )
|
||||
{
|
||||
this.osName = 'os-linux';
|
||||
}
|
||||
|
||||
// iOS
|
||||
if (this._platform.IOS) {
|
||||
if ( this._platform.IOS )
|
||||
{
|
||||
this.osName = 'os-ios';
|
||||
}
|
||||
|
||||
// Android
|
||||
if (this._platform.ANDROID) {
|
||||
if ( this._platform.ANDROID )
|
||||
{
|
||||
this.osName = 'os-android';
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,24 +1,27 @@
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
import { Inject, Injectable } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { filter, take } from 'rxjs';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FuseSplashScreenService {
|
||||
private _document = inject(DOCUMENT);
|
||||
private _router = inject(Router);
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseSplashScreenService
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor() {
|
||||
constructor(
|
||||
@Inject(DOCUMENT) private _document: any,
|
||||
private _router: Router,
|
||||
)
|
||||
{
|
||||
// Hide it on the first NavigationEnd event
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
take(1)
|
||||
filter(event => event instanceof NavigationEnd),
|
||||
take(1),
|
||||
)
|
||||
.subscribe(() => {
|
||||
.subscribe(() =>
|
||||
{
|
||||
this.hide();
|
||||
});
|
||||
}
|
||||
@ -30,14 +33,16 @@ export class FuseSplashScreenService {
|
||||
/**
|
||||
* Show the splash screen
|
||||
*/
|
||||
show(): void {
|
||||
show(): void
|
||||
{
|
||||
this._document.body.classList.remove('fuse-splash-screen-hidden');
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the splash screen
|
||||
*/
|
||||
hide(): void {
|
||||
hide(): void
|
||||
{
|
||||
this._document.body.classList.add('fuse-splash-screen-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { IsActiveMatchOptions } from '@angular/router';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class FuseUtilsService {
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseUtilsService
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@ -10,24 +18,26 @@ export class FuseUtilsService {
|
||||
/**
|
||||
* Get the equivalent "IsActiveMatchOptions" options for "exact = true".
|
||||
*/
|
||||
get exactMatchOptions(): IsActiveMatchOptions {
|
||||
get exactMatchOptions(): IsActiveMatchOptions
|
||||
{
|
||||
return {
|
||||
paths: 'exact',
|
||||
fragment: 'ignored',
|
||||
paths : 'exact',
|
||||
fragment : 'ignored',
|
||||
matrixParams: 'ignored',
|
||||
queryParams: 'exact',
|
||||
queryParams : 'exact',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the equivalent "IsActiveMatchOptions" options for "exact = false".
|
||||
*/
|
||||
get subsetMatchOptions(): IsActiveMatchOptions {
|
||||
get subsetMatchOptions(): IsActiveMatchOptions
|
||||
{
|
||||
return {
|
||||
paths: 'subset',
|
||||
fragment: 'ignored',
|
||||
paths : 'subset',
|
||||
fragment : 'ignored',
|
||||
matrixParams: 'ignored',
|
||||
queryParams: 'subset',
|
||||
queryParams : 'subset',
|
||||
};
|
||||
}
|
||||
|
||||
@ -40,12 +50,13 @@ export class FuseUtilsService {
|
||||
*
|
||||
* @param length
|
||||
*/
|
||||
randomId(length: number = 10): string {
|
||||
const chars =
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
randomId(length: number = 10): string
|
||||
{
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
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));
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
flex-direction: column;
|
||||
margin: 32px 0;
|
||||
overflow: hidden;
|
||||
@apply bg-card rounded-2xl shadow;
|
||||
@apply rounded-2xl shadow bg-card;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
@ -32,8 +32,11 @@
|
||||
}
|
||||
|
||||
mat-tab-group {
|
||||
|
||||
.mat-tab-body-content {
|
||||
|
||||
.fuse-highlight {
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* @ Font smoothing
|
||||
/* -------------------------------------------------------------------------- */
|
||||
*[class*='mat-'],
|
||||
*[class*='mat-mdc-'] {
|
||||
*[class*=mat-],
|
||||
*[class*=mat-mdc-] {
|
||||
-webkit-font-smoothing: auto !important;
|
||||
-moz-osx-font-smoothing: auto !important;
|
||||
|
||||
@ -23,10 +23,11 @@
|
||||
/* @ Accordion
|
||||
/* -------------------------------------------------------------------------- */
|
||||
.mat-accordion {
|
||||
|
||||
.mat-expansion-panel {
|
||||
margin-bottom: 24px;
|
||||
border-radius: 8px !important;
|
||||
transition: box-shadow 225ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: box-shadow 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
@apply shadow #{'!important'};
|
||||
|
||||
&:last-child {
|
||||
@ -39,8 +40,11 @@
|
||||
}
|
||||
|
||||
&:not(.mat-expanded) {
|
||||
|
||||
.mat-expansion-panel-header {
|
||||
&:not([aria-disabled='true']) {
|
||||
|
||||
&:not([aria-disabled=true]) {
|
||||
|
||||
&.cdk-keyboard-focused,
|
||||
&.cdk-program-focused,
|
||||
&:hover {
|
||||
@ -53,7 +57,8 @@
|
||||
.mat-expansion-panel-header {
|
||||
font-size: 14px;
|
||||
|
||||
&[aria-disabled='true'] {
|
||||
&[aria-disabled=true] {
|
||||
|
||||
.mat-expansion-panel-header-description {
|
||||
margin-right: 28px;
|
||||
}
|
||||
@ -102,7 +107,8 @@
|
||||
}
|
||||
|
||||
/* Lower the icon opacity on disabled buttons */
|
||||
&[disabled='true'] {
|
||||
&[disabled=true] {
|
||||
|
||||
.mat-icon {
|
||||
opacity: 0.38 !important;
|
||||
}
|
||||
@ -151,11 +157,13 @@
|
||||
border-radius: 9999px !important;
|
||||
}
|
||||
|
||||
|
||||
/* Fix the alignment of icons when used within buttons */
|
||||
.mat-mdc-button,
|
||||
.mat-mdc-raised-button,
|
||||
.mat-mdc-outlined-button,
|
||||
.mat-mdc-unelevated-button {
|
||||
|
||||
& > .mat-icon {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
@ -170,8 +178,11 @@
|
||||
.mat-mdc-icon-button,
|
||||
.mat-mdc-fab,
|
||||
.mat-mdc-mini-fab {
|
||||
|
||||
.mat-mdc-progress-spinner {
|
||||
|
||||
.mdc-circular-progress__indeterminate-container {
|
||||
|
||||
circle {
|
||||
stroke: currentColor !important;
|
||||
animation-duration: 6000ms;
|
||||
@ -185,15 +196,12 @@
|
||||
.mat-mdc-unelevated-button,
|
||||
.mat-mdc-fab,
|
||||
.mat-mdc-mini-fab {
|
||||
--mat-mdc-button-persistent-ripple-color: theme(
|
||||
'colors.gray[400]'
|
||||
) !important;
|
||||
|
||||
--mat-mdc-button-persistent-ripple-color: theme('colors.gray[400]') !important;
|
||||
--mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1) !important;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -210,9 +218,12 @@
|
||||
.mat-mdc-button,
|
||||
.mat-mdc-icon-button,
|
||||
.mat-mdc-outlined-button {
|
||||
&:not([disabled='true']) {
|
||||
|
||||
&:not([disabled=true]) {
|
||||
|
||||
/* Apply primary color */
|
||||
&.mat-primary {
|
||||
|
||||
.mat-icon {
|
||||
@apply text-primary #{'!important'};
|
||||
}
|
||||
@ -220,6 +231,7 @@
|
||||
|
||||
/* Apply accent color */
|
||||
&.mat-accent {
|
||||
|
||||
.mat-icon {
|
||||
@apply text-accent #{'!important'};
|
||||
}
|
||||
@ -227,6 +239,7 @@
|
||||
|
||||
/* Apply warn color */
|
||||
&.mat-warn {
|
||||
|
||||
.mat-icon {
|
||||
@apply text-warn #{'!important'};
|
||||
}
|
||||
@ -236,19 +249,21 @@
|
||||
|
||||
/* Adjust the border color of outlined buttons */
|
||||
.mat-mdc-outlined-button {
|
||||
|
||||
/* Not disabled */
|
||||
&:not([disabled='true']) {
|
||||
&:not([disabled=true]) {
|
||||
@apply border-gray-300 dark:border-gray-500 #{'!important'};
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
&[disabled='true'] {
|
||||
&[disabled=true] {
|
||||
@apply border-gray-300/70 dark:border-gray-600 #{'!important'};
|
||||
}
|
||||
}
|
||||
|
||||
/* Don't wrap the button label text */
|
||||
.mdc-button {
|
||||
|
||||
.mdc-button__label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -262,6 +277,7 @@
|
||||
@apply space-x-1;
|
||||
|
||||
&.mat-button-toggle-group-appearance-standard {
|
||||
|
||||
.mat-button-toggle + .mat-button-toggle {
|
||||
background-clip: padding-box;
|
||||
}
|
||||
@ -274,6 +290,7 @@
|
||||
font-weight: 500;
|
||||
|
||||
&.mat-button-toggle-checked {
|
||||
|
||||
.mat-button-toggle-label-content {
|
||||
@apply text-default #{'!important'};
|
||||
}
|
||||
@ -313,6 +330,7 @@
|
||||
/* @ Dialog
|
||||
/* -------------------------------------------------------------------------- */
|
||||
.mat-mdc-dialog-container {
|
||||
|
||||
.mdc-dialog__surface {
|
||||
border-radius: 16px !important;
|
||||
padding: 24px;
|
||||
@ -332,6 +350,7 @@
|
||||
|
||||
/* "fill" appearance */
|
||||
.mat-mdc-form-field.mat-form-field-appearance-fill {
|
||||
|
||||
/* Disabled */
|
||||
&.mat-form-field-disabled {
|
||||
opacity: 0.7 !important;
|
||||
@ -339,6 +358,7 @@
|
||||
|
||||
/* Invalid */
|
||||
&.mat-form-field-invalid {
|
||||
|
||||
/* Border color */
|
||||
.mat-mdc-text-field-wrapper {
|
||||
@apply border-warn dark:border-warn #{'!important'};
|
||||
@ -346,6 +366,7 @@
|
||||
|
||||
/* Select */
|
||||
.mat-mdc-select {
|
||||
|
||||
/* Placeholder color */
|
||||
.mat-mdc-select-placeholder {
|
||||
@apply text-warn #{'!important'};
|
||||
@ -355,6 +376,7 @@
|
||||
|
||||
/* Hover */
|
||||
&:hover {
|
||||
|
||||
.mat-mdc-form-field-focus-overlay {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
@ -362,6 +384,7 @@
|
||||
|
||||
/* Focused */
|
||||
&.mat-focused {
|
||||
|
||||
.mat-mdc-form-field-focus-overlay {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
@ -369,6 +392,7 @@
|
||||
|
||||
/* Focused and valid fields */
|
||||
&.mat-focused:not(.mat-form-field-invalid) {
|
||||
|
||||
/* Border color */
|
||||
.mat-mdc-text-field-wrapper {
|
||||
@apply border-primary dark:border-primary #{'!important'};
|
||||
@ -377,7 +401,9 @@
|
||||
|
||||
/* Remove the default arrow for native select */
|
||||
&.mat-mdc-form-field-type-mat-native-select {
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
|
||||
select {
|
||||
top: auto;
|
||||
margin-top: 0;
|
||||
@ -406,7 +432,7 @@
|
||||
border-radius: 6px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
@apply border-gray-300 bg-white shadow-sm dark:border-gray-500 dark:bg-black dark:bg-opacity-5 #{'!important'};
|
||||
@apply shadow-sm bg-white border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500 #{'!important'};
|
||||
|
||||
/* Adjust the top spacing and overflow when mat-label present */
|
||||
&:not(.mdc-text-field--no-label) {
|
||||
@ -503,16 +529,17 @@
|
||||
align-items: center;
|
||||
|
||||
&:focus {
|
||||
|
||||
.mat-mdc-select-trigger {
|
||||
|
||||
.mat-mdc-select-value {
|
||||
@apply text-primary #{'!important'};
|
||||
}
|
||||
|
||||
.mat-mdc-select-arrow-wrapper {
|
||||
|
||||
.mat-mdc-select-arrow {
|
||||
border-top-color: var(
|
||||
--fuse-primary
|
||||
) !important;
|
||||
border-top-color: var(--fuse-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -527,6 +554,7 @@
|
||||
max-width: none;
|
||||
|
||||
mat-mdc-select-trigger {
|
||||
|
||||
.mat-icon {
|
||||
margin: 0 !important;
|
||||
}
|
||||
@ -606,8 +634,11 @@
|
||||
|
||||
/* Adds better alignment for textarea inputs */
|
||||
&:has(textarea.mat-mdc-input-element) {
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-text-prefix,
|
||||
.mat-mdc-form-field-icon-suffix,
|
||||
@ -621,14 +652,18 @@
|
||||
|
||||
/* Rounded */
|
||||
&.fuse-mat-rounded {
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
/* Emphasized affix */
|
||||
&.fuse-mat-emphasized-affix {
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-text-prefix {
|
||||
border-radius: 24px 0 0 24px;
|
||||
@ -649,9 +684,7 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -676,9 +709,7 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -689,12 +720,16 @@
|
||||
|
||||
/* Dense */
|
||||
&.fuse-mat-dense {
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-text-prefix,
|
||||
.mat-mdc-form-field-icon-suffix,
|
||||
.mat-mdc-form-field-text-suffix {
|
||||
|
||||
.mat-mdc-icon-button {
|
||||
width: 32px !important;
|
||||
min-width: 32px;
|
||||
@ -705,6 +740,7 @@
|
||||
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-text-prefix {
|
||||
|
||||
> .mat-mdc-icon-button {
|
||||
margin-left: -6px;
|
||||
margin-right: 12px;
|
||||
@ -713,6 +749,7 @@
|
||||
|
||||
.mat-mdc-form-field-icon-suffix,
|
||||
.mat-mdc-form-field-text-suffix {
|
||||
|
||||
> .mat-mdc-icon-button {
|
||||
margin-left: 12px;
|
||||
margin-right: -6px;
|
||||
@ -732,8 +769,11 @@
|
||||
|
||||
/* Adds better alignment for textarea inputs */
|
||||
&:has(textarea.mat-mdc-input-element) {
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-text-prefix,
|
||||
.mat-mdc-form-field-icon-suffix,
|
||||
@ -746,14 +786,18 @@
|
||||
|
||||
/* Rounded */
|
||||
&.fuse-mat-rounded {
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* Emphasized affix */
|
||||
&.fuse-mat-emphasized-affix {
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-text-prefix {
|
||||
border-radius: 20px 0 0 20px !important;
|
||||
@ -771,8 +815,11 @@
|
||||
|
||||
/* Emphasized affix */
|
||||
&.fuse-mat-emphasized-affix {
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-text-prefix {
|
||||
align-self: stretch !important;
|
||||
@ -798,9 +845,7 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -830,9 +875,7 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -848,8 +891,11 @@
|
||||
|
||||
/* with Textarea */
|
||||
&:has(textarea.mat-mdc-input-element) {
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-text-prefix,
|
||||
.mat-mdc-form-field-icon-suffix,
|
||||
@ -863,6 +909,7 @@
|
||||
|
||||
/* Bolder border width */
|
||||
&.fuse-mat-bold {
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
border-width: 2px !important;
|
||||
}
|
||||
@ -871,8 +918,10 @@
|
||||
|
||||
/* "outline" appearance */
|
||||
.mat-mdc-form-field.mat-form-field-appearance-outline {
|
||||
|
||||
/* Invalid */
|
||||
&.mat-form-field-invalid {
|
||||
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__trailing {
|
||||
@ -882,8 +931,10 @@
|
||||
|
||||
/* Focused */
|
||||
&.mat-focused:not(.mat-form-field-invalid) {
|
||||
|
||||
/* Primary */
|
||||
&.mat-primary {
|
||||
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__trailing {
|
||||
@ -893,6 +944,7 @@
|
||||
|
||||
/* Accent */
|
||||
&.mat-accent {
|
||||
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__trailing {
|
||||
@ -902,9 +954,13 @@
|
||||
}
|
||||
|
||||
&:not(.mat-focused):not(.mat-form-field-invalid) {
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
|
||||
.mdc-notched-outline {
|
||||
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__trailing {
|
||||
@ -918,8 +974,11 @@
|
||||
/* Remove the extra border on the right side of the notch */
|
||||
/* Tailwind's global border setter causes this issue */
|
||||
.mat-mdc-text-field-wrapper {
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
|
||||
.mdc-notched-outline {
|
||||
|
||||
.mdc-notched-outline__notch {
|
||||
border-right-style: none !important;
|
||||
}
|
||||
@ -932,6 +991,7 @@
|
||||
/* @ Datepicker
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* @ Icon
|
||||
/* -------------------------------------------------------------------------- */
|
||||
@ -952,6 +1012,7 @@
|
||||
/* @ Inputs
|
||||
/* -------------------------------------------------------------------------- */
|
||||
.mat-mdc-input-element {
|
||||
|
||||
&::placeholder {
|
||||
transition: none !important;
|
||||
@apply text-hint #{'!important'};
|
||||
@ -975,7 +1036,9 @@
|
||||
|
||||
/* Invalid */
|
||||
.mat-form-field-invalid {
|
||||
|
||||
.mat-mdc-input-element {
|
||||
|
||||
/* Placeholder color */
|
||||
&::placeholder {
|
||||
@apply text-warn #{'!important'};
|
||||
@ -1002,11 +1065,22 @@
|
||||
min-width: 144px !important;
|
||||
|
||||
.mat-mdc-menu-content {
|
||||
|
||||
.mat-mdc-menu-item {
|
||||
.mat-mdc-menu-item-text {
|
||||
display: flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
&.mat-mdc-menu-item-submenu-trigger {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mat-icon-no-color {
|
||||
@ -1026,6 +1100,7 @@
|
||||
/* @ Paginator
|
||||
/* -------------------------------------------------------------------------- */
|
||||
.mat-mdc-paginator {
|
||||
|
||||
.mat-mdc-paginator-container {
|
||||
padding: 8px 16px;
|
||||
justify-content: space-between;
|
||||
@ -1085,6 +1160,7 @@
|
||||
}
|
||||
|
||||
.mat-mdc-select-trigger {
|
||||
|
||||
.mat-mdc-select-value {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -1107,7 +1183,6 @@
|
||||
|
||||
.mat-mdc-select-arrow {
|
||||
margin: 0 0 0 8px;
|
||||
@apply text-secondary #{!important};
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1116,12 +1191,14 @@
|
||||
/* @ Slide Toggle
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* @ Snack bar
|
||||
/* -------------------------------------------------------------------------- */
|
||||
.mat-mdc-snack-bar-container {
|
||||
|
||||
.mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
|
||||
color: #ffffff !important;
|
||||
color: #FFFFFF !important;
|
||||
|
||||
.dark & {
|
||||
color: #000000 !important;
|
||||
@ -1129,10 +1206,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* @ Stepper
|
||||
/* -------------------------------------------------------------------------- */
|
||||
.mat-step-icon {
|
||||
|
||||
/* Do not override the mat-icon color */
|
||||
.mat-icon {
|
||||
color: currentColor !important;
|
||||
@ -1148,6 +1227,7 @@
|
||||
/* @ Table
|
||||
/* -------------------------------------------------------------------------- */
|
||||
.mat-mdc-table {
|
||||
|
||||
.mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
|
||||
background: none !important;
|
||||
}
|
||||
@ -1157,8 +1237,10 @@
|
||||
/* @ Tabs
|
||||
/* -------------------------------------------------------------------------- */
|
||||
.mat-mdc-tab-group {
|
||||
|
||||
/* No header */
|
||||
&.fuse-mat-no-header {
|
||||
|
||||
.mat-mdc-tab-header {
|
||||
height: 0 !important;
|
||||
max-height: 0 !important;
|
||||
@ -1169,7 +1251,9 @@
|
||||
}
|
||||
|
||||
&:not(.mat-background-primary):not(.mat-background-accent) {
|
||||
|
||||
.mat-mdc-tab-header {
|
||||
|
||||
.mat-mdc-tab-label-container {
|
||||
box-shadow: inset 0 -1px var(--fuse-border);
|
||||
}
|
||||
@ -1177,6 +1261,7 @@
|
||||
}
|
||||
|
||||
.mat-mdc-tab-header {
|
||||
|
||||
.mat-mdc-tab-label-container {
|
||||
margin: 0 24px;
|
||||
}
|
||||
@ -1198,8 +1283,10 @@ textarea.mat-mdc-input-element {
|
||||
/* @ Toolbar
|
||||
/* -------------------------------------------------------------------------- */
|
||||
.mat-toolbar {
|
||||
|
||||
/* Apply primary contrast color */
|
||||
&.mat-primary {
|
||||
|
||||
.mat-icon {
|
||||
@apply text-on-primary #{'!important'};
|
||||
}
|
||||
@ -1223,6 +1310,7 @@ textarea.mat-mdc-input-element {
|
||||
|
||||
/* Apply accent contrast color */
|
||||
&.mat-accent {
|
||||
|
||||
.mat-icon {
|
||||
@apply text-on-accent #{'!important'};
|
||||
}
|
||||
@ -1246,6 +1334,7 @@ textarea.mat-mdc-input-element {
|
||||
|
||||
/* Apply warn contrast color */
|
||||
&.mat-warn {
|
||||
|
||||
.mat-icon {
|
||||
@apply text-on-warn #{'!important'};
|
||||
}
|
||||
|
||||
@ -3,35 +3,36 @@
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #8b9fc1;
|
||||
color: #8B9FC1;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-formula {
|
||||
color: #22d3ee;
|
||||
color: #22D3EE;
|
||||
}
|
||||
|
||||
.hljs-name {
|
||||
color: #e879f9;
|
||||
color: #E879F9;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #bae6fd;
|
||||
color: #BAE6FD;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-selector-tag,
|
||||
.hljs-deletion,
|
||||
.hljs-subst {
|
||||
color: #f87f71;
|
||||
color: #F87F71;
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: #36beff;
|
||||
color: #36BEFF;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
@ -39,12 +40,12 @@ pre[class*='language-'] {
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-meta-string {
|
||||
color: #bef264;
|
||||
color: #BEF264;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-class .hljs-title {
|
||||
color: #ffd374;
|
||||
color: #FFD374;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
@ -55,7 +56,7 @@ pre[class*='language-'] {
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-number {
|
||||
color: #22d3ee;
|
||||
color: #22D3EE;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
@ -64,7 +65,7 @@ pre[class*='language-'] {
|
||||
.hljs-meta,
|
||||
.hljs-selector-id,
|
||||
.hljs-title {
|
||||
color: #e879f9;
|
||||
color: #E879F9;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
&.ps--focus,
|
||||
&.ps--scrolling-x,
|
||||
&.ps--scrolling-y {
|
||||
|
||||
> .ps__rail-x,
|
||||
> .ps__rail-y {
|
||||
opacity: 1;
|
||||
|
||||
@ -17,7 +17,9 @@
|
||||
}
|
||||
|
||||
.ql-picker {
|
||||
|
||||
&.ql-expanded {
|
||||
|
||||
.ql-picker-label {
|
||||
@apply border-gray-300;
|
||||
|
||||
@ -28,7 +30,7 @@
|
||||
|
||||
.ql-picker-options {
|
||||
z-index: 10 !important;
|
||||
@apply bg-card border-gray-300;
|
||||
@apply border-gray-300 bg-card;
|
||||
|
||||
.dark & {
|
||||
@apply border-gray-500;
|
||||
@ -41,6 +43,7 @@
|
||||
}
|
||||
|
||||
.ql-picker-options {
|
||||
|
||||
.ql-picker-item {
|
||||
@apply text-default;
|
||||
}
|
||||
@ -100,10 +103,10 @@
|
||||
}
|
||||
|
||||
.ql-tooltip {
|
||||
@apply rounded-md border-gray-300 bg-gray-100 px-3 py-1 shadow-sm;
|
||||
@apply px-3 py-1 shadow-sm rounded-md bg-gray-100 border-gray-300;
|
||||
|
||||
.dark & {
|
||||
@apply border-gray-700 bg-gray-700 shadow-lg #{'!important'};
|
||||
@apply shadow-lg bg-gray-700 border-gray-700 #{'!important'};
|
||||
}
|
||||
|
||||
// Label
|
||||
@ -113,10 +116,10 @@
|
||||
|
||||
.ql-action,
|
||||
.ql-remove {
|
||||
@apply border-gray-300 text-primary;
|
||||
@apply text-primary border-gray-300;
|
||||
|
||||
.dark & {
|
||||
@apply border-gray-300 text-primary-400;
|
||||
@apply text-primary-400 border-gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
@ -129,10 +132,10 @@
|
||||
}
|
||||
|
||||
input {
|
||||
@apply text-default rounded-sm border-gray-300 bg-white #{'!important'};
|
||||
@apply rounded-sm text-default bg-white border-gray-300 #{'!important'};
|
||||
|
||||
.dark & {
|
||||
@apply border-gray-500 bg-gray-700 #{'!important'};
|
||||
@apply bg-gray-700 border-gray-500 #{'!important'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user