barhen
3 years ago
commit
13c5b2f943
479 changed files with 171033 additions and 0 deletions
@ -0,0 +1,17 @@ |
|||||
|
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. |
||||
|
# For additional information regarding the format and rule options, please see: |
||||
|
# https://github.com/browserslist/browserslist#queries |
||||
|
|
||||
|
# For the full list of supported browsers by the Angular framework, please see: |
||||
|
# https://angular.io/guide/browser-support |
||||
|
|
||||
|
# You can see what browsers were selected by your queries by running: |
||||
|
# npx browserslist |
||||
|
|
||||
|
last 1 Chrome version |
||||
|
last 1 Firefox version |
||||
|
last 2 Edge major versions |
||||
|
last 2 Safari major versions |
||||
|
last 2 iOS major versions |
||||
|
Firefox ESR |
||||
|
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. |
||||
@ -0,0 +1,16 @@ |
|||||
|
# Editor configuration, see https://editorconfig.org |
||||
|
root = true |
||||
|
|
||||
|
[*] |
||||
|
charset = utf-8 |
||||
|
indent_style = space |
||||
|
indent_size = 4 |
||||
|
insert_final_newline = true |
||||
|
trim_trailing_whitespace = true |
||||
|
|
||||
|
[*.ts] |
||||
|
quote_type = single |
||||
|
|
||||
|
[*.md] |
||||
|
max_line_length = off |
||||
|
trim_trailing_whitespace = false |
||||
@ -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": {} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,48 @@ |
|||||
|
# See http://help.github.com/ignore-files/ for more about ignoring files. |
||||
|
|
||||
|
# compiled output |
||||
|
/dist |
||||
|
/tmp |
||||
|
/out-tsc |
||||
|
# Only exists if Bazel was run |
||||
|
/bazel-out |
||||
|
|
||||
|
#angular |
||||
|
/.angular |
||||
|
|
||||
|
# dependencies |
||||
|
/node_modules |
||||
|
|
||||
|
# profiling files |
||||
|
chrome-profiler-events*.json |
||||
|
|
||||
|
# IDEs and editors |
||||
|
/.idea |
||||
|
.project |
||||
|
.classpath |
||||
|
.c9/ |
||||
|
*.launch |
||||
|
.settings/ |
||||
|
*.sublime-workspace |
||||
|
|
||||
|
# IDE - VSCode |
||||
|
.vscode/* |
||||
|
!.vscode/settings.json |
||||
|
!.vscode/tasks.json |
||||
|
!.vscode/launch.json |
||||
|
!.vscode/extensions.json |
||||
|
.history/* |
||||
|
|
||||
|
# misc |
||||
|
/.sass-cache |
||||
|
/connect.lock |
||||
|
/coverage |
||||
|
/libpeerconnection.log |
||||
|
npm-debug.log |
||||
|
yarn-error.log |
||||
|
testem.log |
||||
|
/typings |
||||
|
|
||||
|
# System Files |
||||
|
.DS_Store |
||||
|
Thumbs.db |
||||
@ -0,0 +1 @@ |
|||||
|
12 |
||||
@ -0,0 +1,72 @@ |
|||||
|
// ----------------------------------------------------------------------------------------------------- |
||||
|
// @ 3rd party credits |
||||
|
// ----------------------------------------------------------------------------------------------------- |
||||
|
|
||||
|
// Flags |
||||
|
https://github.com/Yummygum/flagpack-core |
||||
|
|
||||
|
// Icons |
||||
|
Material - https://material.io/tools/icons |
||||
|
Feather - https://feathericons.com/ |
||||
|
Heroicons - https://github.com/refactoringui/heroicons |
||||
|
Iconsmind - https://iconsmind.com/ |
||||
|
|
||||
|
// Avatars |
||||
|
https://uifaces.co |
||||
|
|
||||
|
// 404, 500 & Maintenance |
||||
|
https://undraw.co |
||||
|
|
||||
|
// Mail app |
||||
|
Photo by Riccardo Chiarini on Unsplash - https://unsplash.com/photos/2VDa8bnLM8c |
||||
|
Photo by Johannes Plenio on Unsplash - https://unsplash.com/photos/RwHv7LgeC7s |
||||
|
Photo by Jamie Davies on Unsplash - https://unsplash.com/photos/Hao52Fu9-F8 |
||||
|
Photo by Christian Joudrey on Unsplash - https://unsplash.com/photos/mWRR1xj95hg |
||||
|
|
||||
|
// Profile page |
||||
|
Photo by Alex Knight on Unsplash - https://unsplash.com/photos/DpPutJwgyW8 |
||||
|
|
||||
|
// Cards |
||||
|
Photo by Kym Ellis on Unsplash - https://unsplash.com/photos/RPT3AjdXlZc |
||||
|
Photo by Patrick Hendry on Unsplash - https://unsplash.com/photos/Qgxk3PQsMiI |
||||
|
Photo by Hailey Kean on Unsplash - https://unsplash.com/photos/QxjsOlFNr_4 |
||||
|
Photo by Nathan Anderson on Unsplash - https://unsplash.com/photos/mG8ShlWrMDI |
||||
|
Photo by Adrian Infernus on Unsplash - https://unsplash.com/photos/5apewqWk978 |
||||
|
Photo by freestocks.org on Unsplash - https://unsplash.com/photos/c73TZ2sIU38 |
||||
|
Photo by Tim Marshall on Unsplash - https://unsplash.com/photos/PKSCrmZdvwA |
||||
|
Photo by Daniel Koponyas on Unsplash - https://unsplash.com/photos/rbiLY6ZwvXQ |
||||
|
Photo by John Westrock on Unsplash - https://unsplash.com/photos/LCesauDseu8 |
||||
|
Photo by Gabriel Sollmann on Unsplash - https://unsplash.com/photos/kFWj9y-tJB4 |
||||
|
Photo by Kevin Wolf on Unsplash - https://unsplash.com/photos/BJyjgEdNTPs |
||||
|
Photo by Luca Bravo on Unsplash - https://unsplash.com/photos/hFzIoD0F_i8 |
||||
|
Photo by Ian Baldwin on Unsplash - https://unsplash.com/photos/Dlj-SxxTlQ0 |
||||
|
Photo by Ben Kolde on Unsplash - https://unsplash.com/photos/KRTFIBOfcFw |
||||
|
Photo by Chad Peltola on Unsplash - https://unsplash.com/photos/BTvQ2ET_iKc |
||||
|
Photo by rocknwool on Unsplash - https://unsplash.com/photos/r56oO1V5oms |
||||
|
Photo by Vita Vilcina on Unsplash - https://unsplash.com/photos/KtOid0FLjqU |
||||
|
Photo by Jia Ye on Unsplash - https://unsplash.com/photos/y8ZnQqgohLk |
||||
|
Photo by Parker Whitson on Unsplash - https://unsplash.com/photos/OlTYIqTjmVM |
||||
|
Photo by Dorian Hurst on Unsplash - https://unsplash.com/photos/a9uWPQlIbYc |
||||
|
Photo by Everaldo Coelho on Unsplash - https://unsplash.com/photos/KPaSCpklCZw |
||||
|
Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/fh2JefbNlII |
||||
|
Photo by Orlova Maria on Unsplash - https://unsplash.com/photos/p8y4dWEMGMU |
||||
|
Photo by Jake Blucker on Unsplash - https://unsplash.com/photos/tMzCrBkM99Y |
||||
|
Photo by Jerry Zhang on Unsplash - https://unsplash.com/photos/oIBcow6n36s |
||||
|
Photo by John Cobb on Unsplash - https://unsplash.com/photos/IE_sifhay7o |
||||
|
Photo by Dan Gold on Unsplash - https://unsplash.com/photos/mDlhOIfGxNI |
||||
|
Photo by Ana Toma on Unsplash - https://unsplash.com/photos/XsGwe6gYg0c |
||||
|
Photo by Andrea on Unsplash - https://unsplash.com/photos/1AWY0N960Sk |
||||
|
Photo by Aswin on Unsplash - https://unsplash.com/photos/_roUcFWstas |
||||
|
Photo by Justin Kauffman on Unsplash - https://unsplash.com/photos/aWG_dqyhI0A |
||||
|
Photo by Barna Bartis on Unsplash - https://unsplash.com/photos/VVoBQqWrvkc |
||||
|
Photo by Kyle Hinkson on Unsplash - https://unsplash.com/photos/3439EnvnAGo |
||||
|
Photo by Spencer Watson on Unsplash - https://unsplash.com/photos/5TBf16GnHKg |
||||
|
Photo by adrian on Unsplash - https://unsplash.com/photos/1wrzvwoK8A4 |
||||
|
Photo by Christopher Rusev on Unsplash - https://unsplash.com/photos/7gKWgCRixf0 |
||||
|
Photo by Stephen Leonardi on Unsplash - https://unsplash.com/photos/MDmwQVgDHHM |
||||
|
Photo by Dwinanda Nurhanif Mujito on Unsplash - https://unsplash.com/photos/pKT5Mg16w_w |
||||
|
Photo by Humphrey Muleba on Unsplash - https://unsplash.com/photos/Zuvf5mxT5fs |
||||
|
Photo by adrian on Unsplash - https://unsplash.com/photos/PNRxLFPMyJY |
||||
|
Photo by Dahee Son on Unsplash - https://unsplash.com/photos/tV06QVJXVxU |
||||
|
Photo by Zachary Kyra-Derksen on Unsplash - https://unsplash.com/photos/vkqS7vLQUtg |
||||
|
Photo by Rodrigo Soares on Unsplash - https://unsplash.com/photos/8BFWBUkSqQo |
||||
@ -0,0 +1,6 @@ |
|||||
|
Envato Standard License |
||||
|
|
||||
|
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) |
||||
@ -0,0 +1,27 @@ |
|||||
|
# Fuse - Admin template and Starter project for Angular |
||||
|
|
||||
|
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) |
||||
|
|
||||
|
## Development server |
||||
|
|
||||
|
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. |
||||
|
|
||||
|
## Code scaffolding |
||||
|
|
||||
|
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. |
||||
|
|
||||
|
## Build |
||||
|
|
||||
|
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. |
||||
|
|
||||
|
## Running unit tests |
||||
|
|
||||
|
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). |
||||
|
|
||||
|
## 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. |
||||
|
|
||||
|
## Further help |
||||
|
|
||||
|
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. |
||||
@ -0,0 +1,141 @@ |
|||||
|
{ |
||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", |
||||
|
"version": 1, |
||||
|
"newProjectRoot": "projects", |
||||
|
"projects": { |
||||
|
"fuse": { |
||||
|
"projectType": "application", |
||||
|
"schematics": { |
||||
|
"@schematics/angular:component": { |
||||
|
"style": "scss" |
||||
|
} |
||||
|
}, |
||||
|
"root": "", |
||||
|
"sourceRoot": "src", |
||||
|
"prefix": "app", |
||||
|
"architect": { |
||||
|
"build": { |
||||
|
"builder": "@angular-devkit/build-angular:browser", |
||||
|
"options": { |
||||
|
"outputPath": "dist/fuse", |
||||
|
"index": "src/index.html", |
||||
|
"main": "src/main.ts", |
||||
|
"polyfills": "src/polyfills.ts", |
||||
|
"tsConfig": "tsconfig.app.json", |
||||
|
"inlineStyleLanguage": "scss", |
||||
|
"allowedCommonJsDependencies": [ |
||||
|
"apexcharts", |
||||
|
"highlight.js", |
||||
|
"crypto-js/enc-utf8", |
||||
|
"crypto-js/hmac-sha256", |
||||
|
"crypto-js/enc-base64" |
||||
|
], |
||||
|
"assets": [ |
||||
|
"src/favicon-16x16.png", |
||||
|
"src/favicon-32x32.png", |
||||
|
"src/assets", |
||||
|
{ |
||||
|
"glob": "_redirects", |
||||
|
"input": "src", |
||||
|
"output": "/" |
||||
|
} |
||||
|
], |
||||
|
"stylePreprocessorOptions": { |
||||
|
"includePaths": [ |
||||
|
"src/@fuse/styles" |
||||
|
] |
||||
|
}, |
||||
|
"styles": [ |
||||
|
"src/@fuse/styles/tailwind.scss", |
||||
|
"src/@fuse/styles/themes.scss", |
||||
|
"src/styles/vendors.scss", |
||||
|
"src/@fuse/styles/main.scss", |
||||
|
"src/styles/styles.scss", |
||||
|
"src/styles/tailwind.scss" |
||||
|
], |
||||
|
"scripts": [] |
||||
|
}, |
||||
|
"configurations": { |
||||
|
"production": { |
||||
|
"budgets": [{ |
||||
|
"type": "initial", |
||||
|
"maximumWarning": "3mb", |
||||
|
"maximumError": "5mb" |
||||
|
}, |
||||
|
{ |
||||
|
"type": "anyComponentStyle", |
||||
|
"maximumWarning": "75kb", |
||||
|
"maximumError": "90kb" |
||||
|
} |
||||
|
], |
||||
|
"fileReplacements": [{ |
||||
|
"replace": "src/environments/environment.ts", |
||||
|
"with": "src/environments/environment.prod.ts" |
||||
|
}], |
||||
|
"outputHashing": "all" |
||||
|
}, |
||||
|
"development": { |
||||
|
"buildOptimizer": false, |
||||
|
"optimization": false, |
||||
|
"vendorChunk": true, |
||||
|
"extractLicenses": false, |
||||
|
"sourceMap": true, |
||||
|
"namedChunks": true |
||||
|
} |
||||
|
}, |
||||
|
"defaultConfiguration": "production" |
||||
|
}, |
||||
|
"serve": { |
||||
|
"builder": "@angular-devkit/build-angular:dev-server", |
||||
|
"configurations": { |
||||
|
"production": { |
||||
|
"browserTarget": "fuse:build:production" |
||||
|
}, |
||||
|
"development": { |
||||
|
"browserTarget": "fuse:build:development" |
||||
|
} |
||||
|
}, |
||||
|
"defaultConfiguration": "development" |
||||
|
}, |
||||
|
"extract-i18n": { |
||||
|
"builder": "@angular-devkit/build-angular:extract-i18n", |
||||
|
"options": { |
||||
|
"browserTarget": "fuse:build" |
||||
|
} |
||||
|
}, |
||||
|
"test": { |
||||
|
"builder": "@angular-devkit/build-angular:karma", |
||||
|
"options": { |
||||
|
"main": "src/test.ts", |
||||
|
"polyfills": "src/polyfills.ts", |
||||
|
"tsConfig": "tsconfig.spec.json", |
||||
|
"karmaConfig": "karma.conf.js", |
||||
|
"inlineStyleLanguage": "scss", |
||||
|
"assets": [ |
||||
|
"src/favicon-16x16.png", |
||||
|
"src/favicon-32x32.png", |
||||
|
"src/assets" |
||||
|
], |
||||
|
"styles": [ |
||||
|
"src/styles/styles.scss" |
||||
|
], |
||||
|
"scripts": [] |
||||
|
} |
||||
|
}, |
||||
|
"lint": { |
||||
|
"builder": "@angular-eslint/builder:lint", |
||||
|
"options": { |
||||
|
"lintFilePatterns": [ |
||||
|
"src/**/*.ts", |
||||
|
"src/**/*.html" |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
"defaultProject": "Teso", |
||||
|
"cli": { |
||||
|
"defaultCollection": "@angular-eslint/schematics" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,45 @@ |
|||||
|
// Karma configuration file, see link for more information
|
||||
|
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
|
||||
|
module.exports = function (config) |
||||
|
{ |
||||
|
config.set({ |
||||
|
basePath : '', |
||||
|
frameworks : ['jasmine', '@angular-devkit/build-angular'], |
||||
|
plugins : [ |
||||
|
require('karma-jasmine'), |
||||
|
require('karma-chrome-launcher'), |
||||
|
require('karma-jasmine-html-reporter'), |
||||
|
require('karma-coverage'), |
||||
|
require('@angular-devkit/build-angular/plugins/karma') |
||||
|
], |
||||
|
client : { |
||||
|
jasmine : { |
||||
|
// you can add configuration options for Jasmine here
|
||||
|
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
|
||||
|
// for example, you can disable the random execution with `random: false`
|
||||
|
// or set a specific seed with `seed: 4321`
|
||||
|
}, |
||||
|
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
|
}, |
||||
|
jasmineHtmlReporter: { |
||||
|
suppressAll: true // removes the duplicated traces
|
||||
|
}, |
||||
|
coverageReporter : { |
||||
|
dir : require('path').join(__dirname, './coverage/fuse'), |
||||
|
subdir : '.', |
||||
|
reporters: [ |
||||
|
{type: 'html'}, |
||||
|
{type: 'text-summary'} |
||||
|
] |
||||
|
}, |
||||
|
reporters : ['progress', 'kjhtml'], |
||||
|
port : 9876, |
||||
|
colors : true, |
||||
|
logLevel : config.LOG_INFO, |
||||
|
autoWatch : true, |
||||
|
browsers : ['Chrome'], |
||||
|
singleRun : false, |
||||
|
restartOnFileChange: true |
||||
|
}); |
||||
|
}; |
||||
File diff suppressed because it is too large
@ -0,0 +1,96 @@ |
|||||
|
{ |
||||
|
"name": "teso", |
||||
|
"version": "13.6.2", |
||||
|
"description": "Teso Web portal", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"ng": "ng", |
||||
|
"start": "ng serve", |
||||
|
"build": "ng build", |
||||
|
"watch": "ng build --watch --configuration development", |
||||
|
"test": "ng test", |
||||
|
"lint": "ng lint" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"-": "^0.0.1", |
||||
|
"@angular/animations": "13.0.2", |
||||
|
"@angular/cdk": "13.0.2", |
||||
|
"@angular/common": "13.0.2", |
||||
|
"@angular/compiler": "13.0.2", |
||||
|
"@angular/core": "13.0.2", |
||||
|
"@angular/forms": "13.0.2", |
||||
|
"@angular/material": "13.0.2", |
||||
|
"@angular/material-moment-adapter": "13.0.2", |
||||
|
"@angular/platform-browser": "13.0.2", |
||||
|
"@angular/platform-browser-dynamic": "13.0.2", |
||||
|
"@angular/router": "13.0.2", |
||||
|
"@fullcalendar/angular": "4.4.5-beta", |
||||
|
"@fullcalendar/core": "4.4.2", |
||||
|
"@fullcalendar/daygrid": "4.4.2", |
||||
|
"@fullcalendar/interaction": "4.4.2", |
||||
|
"@fullcalendar/list": "4.4.2", |
||||
|
"@fullcalendar/moment": "4.4.2", |
||||
|
"@fullcalendar/rrule": "4.4.2", |
||||
|
"@fullcalendar/timegrid": "4.4.2", |
||||
|
"@ngneat/transloco": "^2.23.5", |
||||
|
"apexcharts": "3.28.1", |
||||
|
"crypto-js": "3.3.0", |
||||
|
"dayjs": "^1.10.7", |
||||
|
"highlight.js": "11.2.0", |
||||
|
"lodash-es": "4.17.21", |
||||
|
"moment": "2.29.1", |
||||
|
"ng-apexcharts": "1.5.12", |
||||
|
"ngx-markdown": "12.0.1", |
||||
|
"ngx-quill": "14.3.0", |
||||
|
"node.js": "^0.0.1-security", |
||||
|
"perfect-scrollbar": "1.5.2", |
||||
|
"quill": "1.3.7", |
||||
|
"rrule": "2.6.8", |
||||
|
"rxjs": "6.6.7", |
||||
|
"source": "^0.0.3", |
||||
|
"source-map": "^0.7.3", |
||||
|
"sourcemap-codec": "^1.4.8", |
||||
|
"support": "^1.1.4", |
||||
|
"tslib": "2.3.1", |
||||
|
"web-animations-js": "2.3.2", |
||||
|
"zone.js": "0.11.4" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@angular-devkit/build-angular": "^13.0.3", |
||||
|
"@angular-eslint/builder": "^12.7.0", |
||||
|
"@angular-eslint/eslint-plugin": "12.3.1", |
||||
|
"@angular-eslint/eslint-plugin-template": "12.3.1", |
||||
|
"@angular-eslint/schematics": "^13.0.1", |
||||
|
"@angular-eslint/template-parser": "12.3.1", |
||||
|
"@angular/cli": "^13.0.3", |
||||
|
"@angular/compiler-cli": "13.0.2", |
||||
|
"@tailwindcss/aspect-ratio": "0.2.1", |
||||
|
"@tailwindcss/line-clamp": "0.2.1", |
||||
|
"@tailwindcss/typography": "0.4.1", |
||||
|
"@types/chroma-js": "2.1.3", |
||||
|
"@types/crypto-js": "3.1.47", |
||||
|
"@types/highlight.js": "10.1.0", |
||||
|
"@types/jasmine": "3.8.2", |
||||
|
"@types/lodash": "4.14.172", |
||||
|
"@types/lodash-es": "4.17.4", |
||||
|
"@types/node": "12.20.21", |
||||
|
"@typescript-eslint/eslint-plugin": "4.30.0", |
||||
|
"@typescript-eslint/parser": "4.30.0", |
||||
|
"autoprefixer": "10.3.3", |
||||
|
"chroma-js": "2.1.2", |
||||
|
"eslint": "7.32.0", |
||||
|
"eslint-plugin-import": "2.24.2", |
||||
|
"eslint-plugin-jsdoc": "36.0.8", |
||||
|
"eslint-plugin-prefer-arrow": "1.2.3", |
||||
|
"jasmine-core": "3.8.0", |
||||
|
"karma": "6.3.4", |
||||
|
"karma-chrome-launcher": "3.1.0", |
||||
|
"karma-coverage": "2.0.3", |
||||
|
"karma-jasmine": "4.0.1", |
||||
|
"karma-jasmine-html-reporter": "1.7.0", |
||||
|
"lodash": "4.17.21", |
||||
|
"postcss": "8.3.6", |
||||
|
"tailwindcss": "2.2.9", |
||||
|
"typescript": "4.4.4" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,14 @@ |
|||||
|
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 |
||||
|
{ |
||||
|
static complex = '375ms'; |
||||
|
static entering = '225ms'; |
||||
|
static exiting = '195ms'; |
||||
|
} |
||||
@ -0,0 +1,34 @@ |
|||||
|
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' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('*, expanded', |
||||
|
style('*') |
||||
|
), |
||||
|
|
||||
|
// 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}` |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export { expandCollapse }; |
||||
@ -0,0 +1,330 @@ |
|||||
|
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 |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('*', |
||||
|
style({ |
||||
|
opacity: 1 |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('void => false', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('*', |
||||
|
style({ |
||||
|
opacity : 1, |
||||
|
transform: 'translate3d(0, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('void => false', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('*', |
||||
|
style({ |
||||
|
opacity : 1, |
||||
|
transform: 'translate3d(0, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('void => false', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('*', |
||||
|
style({ |
||||
|
opacity : 1, |
||||
|
transform: 'translate3d(0, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('void => false', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('*', |
||||
|
style({ |
||||
|
opacity : 1, |
||||
|
transform: 'translate3d(0, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('void => false', []), |
||||
|
|
||||
|
// Transition
|
||||
|
transition('void => *', animate('{{timings}}'), |
||||
|
{ |
||||
|
params: { |
||||
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Fade out
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
const fadeOut = trigger('fadeOut', |
||||
|
[ |
||||
|
state('*', |
||||
|
style({ |
||||
|
opacity: 1 |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('void', |
||||
|
style({ |
||||
|
opacity: 0 |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('false => void', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('void', |
||||
|
style({ |
||||
|
opacity : 0, |
||||
|
transform: 'translate3d(0, -100%, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('false => void', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('void', |
||||
|
style({ |
||||
|
opacity : 0, |
||||
|
transform: 'translate3d(0, 100%, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('false => void', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('void', |
||||
|
style({ |
||||
|
opacity : 0, |
||||
|
transform: 'translate3d(-100%, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('false => void', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('void', |
||||
|
style({ |
||||
|
opacity : 0, |
||||
|
transform: 'translate3d(100%, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('false => void', []), |
||||
|
|
||||
|
// Transition
|
||||
|
transition('* => void', animate('{{timings}}'), |
||||
|
{ |
||||
|
params: { |
||||
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight }; |
||||
@ -0,0 +1 @@ |
|||||
|
export * from '@fuse/animations/public-api'; |
||||
@ -0,0 +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 { shake } from '@fuse/animations/shake'; |
||||
|
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, |
||||
|
shake, |
||||
|
slideInTop, slideInBottom, slideInLeft, slideInRight, |
||||
|
slideOutTop, slideOutBottom, slideOutLeft, slideOutRight, |
||||
|
zoomIn, zoomOut |
||||
|
]; |
||||
@ -0,0 +1,73 @@ |
|||||
|
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', []), |
||||
|
|
||||
|
// 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 }; |
||||
@ -0,0 +1,252 @@ |
|||||
|
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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('*', |
||||
|
style({ |
||||
|
transform: 'translate3d(0, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('void => false', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('*', |
||||
|
style({ |
||||
|
transform: 'translate3d(0, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('void => false', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('*', |
||||
|
style({ |
||||
|
transform: 'translate3d(0, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('void => false', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('*', |
||||
|
style({ |
||||
|
transform: 'translate3d(0, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('void => false', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('void', |
||||
|
style({ |
||||
|
transform: 'translate3d(0, -100%, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('false => void', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('void', |
||||
|
style({ |
||||
|
transform: 'translate3d(0, 100%, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('false => void', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('void', |
||||
|
style({ |
||||
|
transform: 'translate3d(-100%, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('false => void', []), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('void', |
||||
|
style({ |
||||
|
transform: 'translate3d(100%, 0, 0)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// Prevent the transition if the state is false
|
||||
|
transition('false => void', []), |
||||
|
|
||||
|
// Transition
|
||||
|
transition('* => void', animate('{{timings}}'), |
||||
|
{ |
||||
|
params: { |
||||
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight }; |
||||
@ -0,0 +1,73 @@ |
|||||
|
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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('*', |
||||
|
style({ |
||||
|
opacity : 1, |
||||
|
transform: 'scale(1)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// 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)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
state('void', |
||||
|
style({ |
||||
|
opacity : 0, |
||||
|
transform: 'scale(0.5)' |
||||
|
}) |
||||
|
), |
||||
|
|
||||
|
// 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 }; |
||||
|
|
||||
@ -0,0 +1,82 @@ |
|||||
|
<div |
||||
|
class="fuse-alert-container" |
||||
|
*ngIf="!dismissible || dismissible && !dismissed" |
||||
|
[@fadeIn]="!dismissed" |
||||
|
[@fadeOut]="!dismissed"> |
||||
|
|
||||
|
<!-- Border --> |
||||
|
<div |
||||
|
class="fuse-alert-border" |
||||
|
*ngIf="appearance === 'border'"></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'"></mat-icon> |
||||
|
|
||||
|
<mat-icon |
||||
|
*ngIf="type === 'error'" |
||||
|
[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'"></mat-icon> |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
File diff suppressed because it is too large
@ -0,0 +1,213 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { filter, takeUntil } from 'rxjs/operators'; |
||||
|
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
import { fuseAnimations } from '@fuse/animations'; |
||||
|
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types'; |
||||
|
import { FuseAlertService } from '@fuse/components/alert/alert.service'; |
||||
|
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-alert', |
||||
|
templateUrl : './alert.component.html', |
||||
|
styleUrls : ['./alert.component.scss'], |
||||
|
encapsulation : ViewEncapsulation.None, |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
animations : fuseAnimations, |
||||
|
exportAs : 'fuseAlert' |
||||
|
}) |
||||
|
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 */ |
||||
|
|
||||
|
@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>(); |
||||
|
|
||||
|
private _unsubscribeAll: Subject<any> = new Subject<any>(); |
||||
|
|
||||
|
/** |
||||
|
* Constructor |
||||
|
*/ |
||||
|
constructor( |
||||
|
private _changeDetectorRef: ChangeDetectorRef, |
||||
|
private _fuseAlertService: FuseAlertService, |
||||
|
private _fuseUtilsService: FuseUtilsService |
||||
|
) |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Accessors
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Host binding for component classes |
||||
|
*/ |
||||
|
@HostBinding('class') get classList(): any |
||||
|
{ |
||||
|
return { |
||||
|
'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' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Lifecycle hooks
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On changes |
||||
|
* |
||||
|
* @param changes |
||||
|
*/ |
||||
|
ngOnChanges(changes: SimpleChanges): void |
||||
|
{ |
||||
|
// Dismissed
|
||||
|
if ( 'dismissed' in changes ) |
||||
|
{ |
||||
|
// Coerce the value to a boolean
|
||||
|
this.dismissed = coerceBooleanProperty(changes.dismissed.currentValue); |
||||
|
|
||||
|
// Dismiss/show the alert
|
||||
|
this._toggleDismiss(this.dismissed); |
||||
|
} |
||||
|
|
||||
|
// Dismissible
|
||||
|
if ( 'dismissible' in changes ) |
||||
|
{ |
||||
|
// Coerce the value to a boolean
|
||||
|
this.dismissible = coerceBooleanProperty(changes.dismissible.currentValue); |
||||
|
} |
||||
|
|
||||
|
// Show icon
|
||||
|
if ( 'showIcon' in changes ) |
||||
|
{ |
||||
|
// Coerce the value to a boolean
|
||||
|
this.showIcon = coerceBooleanProperty(changes.showIcon.currentValue); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Subscribe to the dismiss calls
|
||||
|
this._fuseAlertService.onDismiss |
||||
|
.pipe( |
||||
|
filter(name => this.name === name), |
||||
|
takeUntil(this._unsubscribeAll) |
||||
|
) |
||||
|
.subscribe(() => { |
||||
|
|
||||
|
// Dismiss the alert
|
||||
|
this.dismiss(); |
||||
|
}); |
||||
|
|
||||
|
// Subscribe to the show calls
|
||||
|
this._fuseAlertService.onShow |
||||
|
.pipe( |
||||
|
filter(name => this.name === name), |
||||
|
takeUntil(this._unsubscribeAll) |
||||
|
) |
||||
|
.subscribe(() => { |
||||
|
|
||||
|
// Show the alert
|
||||
|
this.show(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Dismiss the alert |
||||
|
*/ |
||||
|
dismiss(): void |
||||
|
{ |
||||
|
// Return if the alert is already dismissed
|
||||
|
if ( this.dismissed ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Dismiss the alert
|
||||
|
this._toggleDismiss(true); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Show the dismissed alert |
||||
|
*/ |
||||
|
show(): void |
||||
|
{ |
||||
|
// Return if the alert is already showing
|
||||
|
if ( !this.dismissed ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Show the alert
|
||||
|
this._toggleDismiss(false); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Private methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Dismiss/show the alert |
||||
|
* |
||||
|
* @param dismissed |
||||
|
* @private |
||||
|
*/ |
||||
|
private _toggleDismiss(dismissed: boolean): void |
||||
|
{ |
||||
|
// Return if the alert is not dismissible
|
||||
|
if ( !this.dismissible ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Set the dismissed
|
||||
|
this.dismissed = dismissed; |
||||
|
|
||||
|
// Execute the observable
|
||||
|
this.dismissedChanged.next(this.dismissed); |
||||
|
|
||||
|
// Notify the change detector
|
||||
|
this._changeDetectorRef.markForCheck(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { MatButtonModule } from '@angular/material/button'; |
||||
|
import { MatIconModule } from '@angular/material/icon'; |
||||
|
import { FuseAlertComponent } from '@fuse/components/alert/alert.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [ |
||||
|
FuseAlertComponent |
||||
|
], |
||||
|
imports : [ |
||||
|
CommonModule, |
||||
|
MatButtonModule, |
||||
|
MatIconModule |
||||
|
], |
||||
|
exports : [ |
||||
|
FuseAlertComponent |
||||
|
] |
||||
|
}) |
||||
|
export class FuseAlertModule |
||||
|
{ |
||||
|
} |
||||
@ -0,0 +1,77 @@ |
|||||
|
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); |
||||
|
|
||||
|
/** |
||||
|
* Constructor |
||||
|
*/ |
||||
|
constructor() |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Accessors
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Getter for onDismiss |
||||
|
*/ |
||||
|
get onDismiss(): Observable<any> |
||||
|
{ |
||||
|
return this._onDismiss.asObservable(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Getter for onShow |
||||
|
*/ |
||||
|
get onShow(): Observable<any> |
||||
|
{ |
||||
|
return this._onShow.asObservable(); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Dismiss the alert |
||||
|
* |
||||
|
* @param name |
||||
|
*/ |
||||
|
dismiss(name: string): void |
||||
|
{ |
||||
|
// Return if the name is not provided
|
||||
|
if ( !name ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Execute the observable
|
||||
|
this._onDismiss.next(name); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Show the dismissed alert |
||||
|
* |
||||
|
* @param name |
||||
|
*/ |
||||
|
show(name: string): void |
||||
|
{ |
||||
|
// Return if the name is not provided
|
||||
|
if ( !name ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Execute the observable
|
||||
|
this._onShow.next(name); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
export type FuseAlertAppearance = |
||||
|
| 'border' |
||||
|
| 'fill' |
||||
|
| 'outline' |
||||
|
| 'soft'; |
||||
|
|
||||
|
export type FuseAlertType = |
||||
|
| 'primary' |
||||
|
| 'accent' |
||||
|
| 'warn' |
||||
|
| 'basic' |
||||
|
| 'info' |
||||
|
| 'success' |
||||
|
| 'warning' |
||||
|
| 'error'; |
||||
@ -0,0 +1 @@ |
|||||
|
export * from '@fuse/components/alert/public-api'; |
||||
@ -0,0 +1,4 @@ |
|||||
|
export * from '@fuse/components/alert/alert.component'; |
||||
|
export * from '@fuse/components/alert/alert.module'; |
||||
|
export * from '@fuse/components/alert/alert.service'; |
||||
|
export * from '@fuse/components/alert/alert.types'; |
||||
@ -0,0 +1,30 @@ |
|||||
|
<!-- Flippable card --> |
||||
|
<ng-container *ngIf="flippable"> |
||||
|
|
||||
|
<!-- Front --> |
||||
|
<div class="fuse-card-front"> |
||||
|
<ng-content select="[fuseCardFront]"></ng-content> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Back --> |
||||
|
<div class="fuse-card-back"> |
||||
|
<ng-content select="[fuseCardBack]"></ng-content> |
||||
|
</div> |
||||
|
|
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Normal card --> |
||||
|
<ng-container *ngIf="!flippable"> |
||||
|
|
||||
|
<!-- Content --> |
||||
|
<ng-content></ng-content> |
||||
|
|
||||
|
<!-- Expansion --> |
||||
|
<div |
||||
|
class="fuse-card-expansion" |
||||
|
*ngIf="expanded" |
||||
|
[@expandCollapse]> |
||||
|
<ng-content select="[fuseCardExpansion]"></ng-content> |
||||
|
</div> |
||||
|
|
||||
|
</ng-container> |
||||
@ -0,0 +1,63 @@ |
|||||
|
fuse-card { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
overflow: hidden; |
||||
|
@apply rounded-2xl shadow bg-card; |
||||
|
|
||||
|
/* Flippable */ |
||||
|
&.fuse-card-flippable { |
||||
|
border-radius: 0; |
||||
|
overflow: visible; |
||||
|
transform-style: preserve-3d; |
||||
|
transition: transform 1s; |
||||
|
perspective: 600px; |
||||
|
background: transparent; |
||||
|
@apply shadow-none; |
||||
|
|
||||
|
&.fuse-card-face-back { |
||||
|
|
||||
|
.fuse-card-front { |
||||
|
visibility: hidden; |
||||
|
opacity: 0; |
||||
|
transform: rotateY(180deg); |
||||
|
} |
||||
|
|
||||
|
.fuse-card-back { |
||||
|
visibility: visible; |
||||
|
opacity: 1; |
||||
|
transform: rotateY(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-card-front, |
||||
|
.fuse-card-back { |
||||
|
display: flex; |
||||
|
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; |
||||
|
backface-visibility: hidden; |
||||
|
@apply rounded-2xl shadow bg-card; |
||||
|
} |
||||
|
|
||||
|
.fuse-card-front { |
||||
|
position: relative; |
||||
|
opacity: 1; |
||||
|
visibility: visible; |
||||
|
transform: rotateY(0deg); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.fuse-card-back { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
transform: rotateY(180deg); |
||||
|
overflow: hidden auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,74 @@ |
|||||
|
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; |
||||
|
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
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'], |
||||
|
encapsulation: ViewEncapsulation.None, |
||||
|
animations : fuseAnimations, |
||||
|
exportAs : 'fuseCard' |
||||
|
}) |
||||
|
export class FuseCardComponent implements OnChanges |
||||
|
{ |
||||
|
/* eslint-disable @typescript-eslint/naming-convention */ |
||||
|
static ngAcceptInputType_expanded: BooleanInput; |
||||
|
static ngAcceptInputType_flippable: BooleanInput; |
||||
|
/* eslint-enable @typescript-eslint/naming-convention */ |
||||
|
|
||||
|
@Input() expanded: boolean = false; |
||||
|
@Input() face: FuseCardFace = 'front'; |
||||
|
@Input() flippable: boolean = false; |
||||
|
|
||||
|
/** |
||||
|
* Constructor |
||||
|
*/ |
||||
|
constructor() |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Accessors
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Host binding for component classes |
||||
|
*/ |
||||
|
@HostBinding('class') get classList(): any |
||||
|
{ |
||||
|
return { |
||||
|
'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 |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Lifecycle hooks
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On changes |
||||
|
* |
||||
|
* @param changes |
||||
|
*/ |
||||
|
ngOnChanges(changes: SimpleChanges): void |
||||
|
{ |
||||
|
// Expanded
|
||||
|
if ( 'expanded' in changes ) |
||||
|
{ |
||||
|
// Coerce the value to a boolean
|
||||
|
this.expanded = coerceBooleanProperty(changes.expanded.currentValue); |
||||
|
} |
||||
|
|
||||
|
// Flippable
|
||||
|
if ( 'flippable' in changes ) |
||||
|
{ |
||||
|
// Coerce the value to a boolean
|
||||
|
this.flippable = coerceBooleanProperty(changes.flippable.currentValue); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,18 @@ |
|||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { FuseCardComponent } from '@fuse/components/card/card.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [ |
||||
|
FuseCardComponent |
||||
|
], |
||||
|
imports : [ |
||||
|
CommonModule |
||||
|
], |
||||
|
exports : [ |
||||
|
FuseCardComponent |
||||
|
] |
||||
|
}) |
||||
|
export class FuseCardModule |
||||
|
{ |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
export type FuseCardFace = |
||||
|
| 'front' |
||||
|
| 'back'; |
||||
@ -0,0 +1 @@ |
|||||
|
export * from '@fuse/components/card/public-api'; |
||||
@ -0,0 +1,2 @@ |
|||||
|
export * from '@fuse/components/card/card.component'; |
||||
|
export * from '@fuse/components/card/card.module'; |
||||
@ -0,0 +1,101 @@ |
|||||
|
<div |
||||
|
class="range" |
||||
|
(click)="openPickerPanel()" |
||||
|
#pickerPanelOrigin> |
||||
|
|
||||
|
<div class="start"> |
||||
|
<div class="date">{{range.startDate}}</div> |
||||
|
<div |
||||
|
class="time" |
||||
|
*ngIf="range.startTime">{{range.startTime}}</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="separator">-</div> |
||||
|
|
||||
|
<div class="end"> |
||||
|
<div class="date">{{range.endDate}}</div> |
||||
|
<div |
||||
|
class="time" |
||||
|
*ngIf="range.endTime">{{range.endTime}}</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<ng-template #pickerPanel> |
||||
|
|
||||
|
<!-- Start --> |
||||
|
<div class="start"> |
||||
|
|
||||
|
<div class="month"> |
||||
|
<div class="month-header"> |
||||
|
<button |
||||
|
class="previous-button" |
||||
|
mat-icon-button |
||||
|
(click)="prev()" |
||||
|
tabindex="1"> |
||||
|
<mat-icon [svgIcon]="'heroicons_outline:chevron-left'"></mat-icon> |
||||
|
</button> |
||||
|
<div class="month-label">{{getMonthLabel(1)}}</div> |
||||
|
</div> |
||||
|
<mat-month-view |
||||
|
[(activeDate)]="activeDates.month1" |
||||
|
[dateFilter]="dateFilter()" |
||||
|
[dateClass]="dateClass()" |
||||
|
(click)="$event.stopImmediatePropagation()" |
||||
|
(selectedChange)="onSelectedDateChange($event)" |
||||
|
#matMonthView1> |
||||
|
</mat-month-view> |
||||
|
</div> |
||||
|
|
||||
|
<mat-form-field |
||||
|
class="fuse-mat-no-subscript time start-time" |
||||
|
*ngIf="timeRange"> |
||||
|
<input |
||||
|
matInput |
||||
|
[autocomplete]="'off'" |
||||
|
[formControl]="startTimeFormControl" |
||||
|
(blur)="updateStartTime($event)" |
||||
|
tabindex="3"> |
||||
|
<mat-label>Start time</mat-label> |
||||
|
</mat-form-field> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<!-- End --> |
||||
|
<div class="end"> |
||||
|
|
||||
|
<div class="month"> |
||||
|
<div class="month-header"> |
||||
|
<div class="month-label">{{getMonthLabel(2)}}</div> |
||||
|
<button |
||||
|
class="next-button" |
||||
|
mat-icon-button |
||||
|
(click)="next()" |
||||
|
tabindex="2"> |
||||
|
<mat-icon [svgIcon]="'heroicons_outline:chevron-right'"></mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
<mat-month-view |
||||
|
[(activeDate)]="activeDates.month2" |
||||
|
[dateFilter]="dateFilter()" |
||||
|
[dateClass]="dateClass()" |
||||
|
(click)="$event.stopImmediatePropagation()" |
||||
|
(selectedChange)="onSelectedDateChange($event)" |
||||
|
#matMonthView2> |
||||
|
</mat-month-view> |
||||
|
</div> |
||||
|
|
||||
|
<mat-form-field |
||||
|
class="fuse-mat-no-subscript time end-time" |
||||
|
*ngIf="timeRange"> |
||||
|
<input |
||||
|
matInput |
||||
|
[formControl]="endTimeFormControl" |
||||
|
(blur)="updateEndTime($event)" |
||||
|
tabindex="4"> |
||||
|
<mat-label>End time</mat-label> |
||||
|
</mat-form-field> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</ng-template> |
||||
@ -0,0 +1,292 @@ |
|||||
|
/* Variables */ |
||||
|
$body-cell-padding: 2px; |
||||
|
|
||||
|
fuse-date-range { |
||||
|
display: flex; |
||||
|
|
||||
|
.range { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 48px; |
||||
|
min-height: 48px; |
||||
|
max-height: 48px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.start, |
||||
|
.end { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 100%; |
||||
|
padding: 0 16px; |
||||
|
border-radius: 6px; |
||||
|
border-width: 1px; |
||||
|
line-height: 1; |
||||
|
@apply shadow-sm border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500; |
||||
|
|
||||
|
.date { |
||||
|
white-space: nowrap; |
||||
|
|
||||
|
+ .time { |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.separator { |
||||
|
margin: 0 2px; |
||||
|
|
||||
|
@screen sm { |
||||
|
margin: 0 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-date-range-panel { |
||||
|
border-radius: 4px; |
||||
|
padding: 24px; |
||||
|
@apply shadow-2xl bg-card; |
||||
|
|
||||
|
.start, |
||||
|
.end { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.month { |
||||
|
max-width: 196px; |
||||
|
min-width: 196px; |
||||
|
width: 196px; |
||||
|
|
||||
|
.month-header { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 32px; |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
.previous-button, |
||||
|
.next-button { |
||||
|
position: absolute; |
||||
|
width: 24px !important; |
||||
|
height: 24px !important; |
||||
|
min-height: 24px !important; |
||||
|
max-height: 24px !important; |
||||
|
line-height: 24px !important; |
||||
|
|
||||
|
.mat-icon { |
||||
|
@apply icon-size-5; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.previous-button { |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.next-button { |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.month-label { |
||||
|
font-weight: 500; |
||||
|
@apply text-secondary; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
mat-month-view { |
||||
|
display: flex; |
||||
|
min-height: 188px; |
||||
|
|
||||
|
.mat-calendar-table { |
||||
|
width: 100%; |
||||
|
border-collapse: collapse; |
||||
|
|
||||
|
tbody { |
||||
|
|
||||
|
tr { |
||||
|
|
||||
|
&[aria-hidden=true] { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
&:first-child { |
||||
|
|
||||
|
td:first-child { |
||||
|
|
||||
|
&[aria-hidden=true] { |
||||
|
visibility: hidden; |
||||
|
pointer-events: none; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
td, |
||||
|
td:hover { |
||||
|
|
||||
|
&.fuse-date-range { |
||||
|
|
||||
|
&:before { |
||||
|
@apply bg-primary-200; |
||||
|
} |
||||
|
|
||||
|
.mat-calendar-body-cell-content { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.fuse-date-range-start, |
||||
|
&.fuse-date-range-end { |
||||
|
|
||||
|
.mat-calendar-body-cell-content { |
||||
|
@apply bg-primary text-on-primary; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mat-calendar-body-today { |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
td.mat-calendar-body-cell { |
||||
|
width: 28px !important; |
||||
|
height: 28px !important; |
||||
|
padding: $body-cell-padding !important; |
||||
|
|
||||
|
&.fuse-date-range { |
||||
|
position: relative; |
||||
|
|
||||
|
&:before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: $body-cell-padding; |
||||
|
right: 0; |
||||
|
bottom: $body-cell-padding; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
&.fuse-date-range-start { |
||||
|
|
||||
|
&:before { |
||||
|
left: $body-cell-padding; |
||||
|
border-radius: 999px 0 0 999px; |
||||
|
} |
||||
|
|
||||
|
&.fuse-date-range-end, |
||||
|
&:last-child { |
||||
|
|
||||
|
&:before { |
||||
|
right: $body-cell-padding; |
||||
|
border-radius: 999px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.fuse-date-range-end { |
||||
|
|
||||
|
&:before { |
||||
|
right: $body-cell-padding; |
||||
|
border-radius: 0 999px 999px 0; |
||||
|
} |
||||
|
|
||||
|
&:first-child { |
||||
|
|
||||
|
&:before { |
||||
|
left: $body-cell-padding; |
||||
|
border-radius: 999px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:first-child { |
||||
|
|
||||
|
&:before { |
||||
|
border-radius: 999px 0 0 999px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
|
||||
|
&:before { |
||||
|
border-radius: 0 999px 999px 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mat-calendar-body-cell-content { |
||||
|
position: relative; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
td.mat-calendar-body-label { |
||||
|
|
||||
|
+ td.mat-calendar-body-cell { |
||||
|
|
||||
|
&.fuse-date-range { |
||||
|
|
||||
|
&:before { |
||||
|
border-radius: 999px 0 0 999px; |
||||
|
} |
||||
|
|
||||
|
&.fuse-date-range-start { |
||||
|
|
||||
|
&.fuse-date-range-end { |
||||
|
border-radius: 999px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.fuse-date-range-end { |
||||
|
|
||||
|
&:before { |
||||
|
left: $body-cell-padding; |
||||
|
border-radius: 999px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
width: 100%; |
||||
|
max-width: 196px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.start { |
||||
|
align-items: flex-start; |
||||
|
margin-right: 20px; |
||||
|
|
||||
|
.month { |
||||
|
|
||||
|
.month-label { |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.end { |
||||
|
align-items: flex-end; |
||||
|
margin-left: 20px; |
||||
|
|
||||
|
.month { |
||||
|
|
||||
|
.month-label { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,682 @@ |
|||||
|
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, OnDestroy, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; |
||||
|
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; |
||||
|
import { Overlay } from '@angular/cdk/overlay'; |
||||
|
import { TemplatePortal } from '@angular/cdk/portal'; |
||||
|
import { MatCalendarCellCssClasses, MatMonthView } from '@angular/material/datepicker'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import * as moment from 'moment'; |
||||
|
import { Moment } from 'moment'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-date-range', |
||||
|
templateUrl : './date-range.component.html', |
||||
|
styleUrls : ['./date-range.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None, |
||||
|
exportAs : 'fuseDateRange', |
||||
|
providers : [ |
||||
|
{ |
||||
|
provide : NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => FuseDateRangeComponent), |
||||
|
multi : true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnDestroy |
||||
|
{ |
||||
|
@Output() readonly rangeChanged: EventEmitter<{ start: string; end: string }> = new EventEmitter<{ start: string; end: string }>(); |
||||
|
@ViewChild('matMonthView1') private _matMonthView1: MatMonthView<any>; |
||||
|
@ViewChild('matMonthView2') private _matMonthView2: MatMonthView<any>; |
||||
|
@ViewChild('pickerPanelOrigin', {read: ElementRef}) private _pickerPanelOrigin: ElementRef; |
||||
|
@ViewChild('pickerPanel') private _pickerPanel: TemplateRef<any>; |
||||
|
@HostBinding('class.fuse-date-range') private _defaultClassNames = true; |
||||
|
|
||||
|
activeDates: { month1: Moment | null; month2: Moment | null } = { |
||||
|
month1: null, |
||||
|
month2: null |
||||
|
}; |
||||
|
setWhichDate: 'start' | 'end' = 'start'; |
||||
|
startTimeFormControl: FormControl; |
||||
|
endTimeFormControl: FormControl; |
||||
|
private _dateFormat: string; |
||||
|
private _onChange: (value: any) => void; |
||||
|
private _onTouched: (value: any) => void; |
||||
|
private _programmaticChange!: boolean; |
||||
|
private _range: { start: Moment | null; end: Moment | null } = { |
||||
|
start: null, |
||||
|
end : null |
||||
|
}; |
||||
|
private _timeFormat: string; |
||||
|
private _timeRange: boolean; |
||||
|
private readonly _timeRegExp: RegExp = new RegExp('^(0[0-9]|1[0-9]|2[0-4]|[0-9]):([0-5][0-9])(A|(?:AM)|P|(?:PM))?$', 'i'); |
||||
|
private _unsubscribeAll: Subject<any> = new Subject<any>(); |
||||
|
|
||||
|
/** |
||||
|
* Constructor |
||||
|
*/ |
||||
|
constructor( |
||||
|
private _changeDetectorRef: ChangeDetectorRef, |
||||
|
private _elementRef: ElementRef, |
||||
|
private _overlay: Overlay, |
||||
|
private _renderer2: Renderer2, |
||||
|
private _viewContainerRef: ViewContainerRef |
||||
|
) |
||||
|
{ |
||||
|
this._onChange = (): void => { |
||||
|
}; |
||||
|
this._onTouched = (): void => { |
||||
|
}; |
||||
|
this.dateFormat = 'DD/MM/YYYY'; |
||||
|
this.timeFormat = '12'; |
||||
|
|
||||
|
// Initialize the component
|
||||
|
this._init(); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Accessors
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Setter & getter for dateFormat input |
||||
|
* |
||||
|
* @param value |
||||
|
*/ |
||||
|
@Input() |
||||
|
set dateFormat(value: string) |
||||
|
{ |
||||
|
// Return if the values are the same
|
||||
|
if ( this._dateFormat === value ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Store the value
|
||||
|
this._dateFormat = value; |
||||
|
} |
||||
|
|
||||
|
get dateFormat(): string |
||||
|
{ |
||||
|
return this._dateFormat; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Setter & getter for timeFormat input |
||||
|
* |
||||
|
* @param value |
||||
|
*/ |
||||
|
@Input() |
||||
|
set timeFormat(value: string) |
||||
|
{ |
||||
|
// Return if the values are the same
|
||||
|
if ( this._timeFormat === value ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Set format based on the time format input
|
||||
|
this._timeFormat = value === '12' ? 'hh:mmA' : 'HH:mm'; |
||||
|
} |
||||
|
|
||||
|
get timeFormat(): string |
||||
|
{ |
||||
|
return this._timeFormat; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Setter & getter for timeRange input |
||||
|
* |
||||
|
* @param value |
||||
|
*/ |
||||
|
@Input() |
||||
|
set timeRange(value: boolean) |
||||
|
{ |
||||
|
// Return if the values are the same
|
||||
|
if ( this._timeRange === value ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Store the value
|
||||
|
this._timeRange = value; |
||||
|
|
||||
|
// If the time range turned off...
|
||||
|
if ( !value ) |
||||
|
{ |
||||
|
this.range = { |
||||
|
start: this._range.start.clone().startOf('day'), |
||||
|
end : this._range.end.clone().endOf('day') |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
get timeRange(): boolean |
||||
|
{ |
||||
|
return this._timeRange; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Setter & getter for range input |
||||
|
* |
||||
|
* @param value |
||||
|
*/ |
||||
|
@Input() |
||||
|
set range(value) |
||||
|
{ |
||||
|
if ( !value ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Check if the value is an object and has 'start' and 'end' values
|
||||
|
if ( !value.start || !value.end ) |
||||
|
{ |
||||
|
console.error('Range input must have "start" and "end" properties!'); |
||||
|
|
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Check if we are setting an individual date or both of them
|
||||
|
const whichDate = value.whichDate || null; |
||||
|
|
||||
|
// Get the start and end dates as moment
|
||||
|
const start = moment(value.start); |
||||
|
const end = moment(value.end); |
||||
|
|
||||
|
// If we are only setting the start date...
|
||||
|
if ( whichDate === 'start' ) |
||||
|
{ |
||||
|
// Set the start date
|
||||
|
this._range.start = start.clone(); |
||||
|
|
||||
|
// If the selected start date is after the end date...
|
||||
|
if ( this._range.start.isAfter(this._range.end) ) |
||||
|
{ |
||||
|
// Set the end date to the start date but keep the end date's time
|
||||
|
const endDate = start.clone().hours(this._range.end.hours()).minutes(this._range.end.minutes()).seconds(this._range.end.seconds()); |
||||
|
|
||||
|
// Test this new end date to see if it's ahead of the start date
|
||||
|
if ( this._range.start.isBefore(endDate) ) |
||||
|
{ |
||||
|
// If it's, set the new end date
|
||||
|
this._range.end = endDate; |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
// Otherwise, set the end date same as the start date
|
||||
|
this._range.end = start.clone(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// If we are only setting the end date...
|
||||
|
if ( whichDate === 'end' ) |
||||
|
{ |
||||
|
// Set the end date
|
||||
|
this._range.end = end.clone(); |
||||
|
|
||||
|
// If the selected end date is before the start date...
|
||||
|
if ( this._range.start.isAfter(this._range.end) ) |
||||
|
{ |
||||
|
// Set the start date to the end date but keep the start date's time
|
||||
|
const startDate = end.clone().hours(this._range.start.hours()).minutes(this._range.start.minutes()).seconds(this._range.start.seconds()); |
||||
|
|
||||
|
// Test this new end date to see if it's ahead of the start date
|
||||
|
if ( this._range.end.isAfter(startDate) ) |
||||
|
{ |
||||
|
// If it's, set the new start date
|
||||
|
this._range.start = startDate; |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
// Otherwise, set the start date same as the end date
|
||||
|
this._range.start = end.clone(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// If we are setting both dates...
|
||||
|
if ( !whichDate ) |
||||
|
{ |
||||
|
// Set the start date
|
||||
|
this._range.start = start.clone(); |
||||
|
|
||||
|
// If the start date is before the end date, set the end date as normal.
|
||||
|
// If the start date is after the end date, set the end date same as the start date.
|
||||
|
this._range.end = start.isBefore(end) ? end.clone() : start.clone(); |
||||
|
} |
||||
|
|
||||
|
// Prepare another range object that holds the ISO formatted range dates
|
||||
|
const range = { |
||||
|
start: this._range.start.clone().toISOString(), |
||||
|
end : this._range.end.clone().toISOString() |
||||
|
}; |
||||
|
|
||||
|
// Emit the range changed event with the range
|
||||
|
this.rangeChanged.emit(range); |
||||
|
|
||||
|
// Update the model with the range if the change was not a programmatic change
|
||||
|
// Because programmatic changes trigger writeValue which triggers onChange and onTouched
|
||||
|
// internally causing them to trigger twice which breaks the form's pristine and touched
|
||||
|
// statuses.
|
||||
|
if ( !this._programmaticChange ) |
||||
|
{ |
||||
|
this._onTouched(range); |
||||
|
this._onChange(range); |
||||
|
} |
||||
|
|
||||
|
// Set the active dates
|
||||
|
this.activeDates = { |
||||
|
month1: this._range.start.clone(), |
||||
|
month2: this._range.start.clone().add(1, 'month') |
||||
|
}; |
||||
|
|
||||
|
// Set the time form controls
|
||||
|
this.startTimeFormControl.setValue(this._range.start.clone().format(this._timeFormat).toString()); |
||||
|
this.endTimeFormControl.setValue(this._range.end.clone().format(this._timeFormat).toString()); |
||||
|
|
||||
|
// Run ngAfterContentInit on month views to trigger
|
||||
|
// re-render on month views if they are available
|
||||
|
if ( this._matMonthView1 && this._matMonthView2 ) |
||||
|
{ |
||||
|
this._matMonthView1.ngAfterContentInit(); |
||||
|
this._matMonthView2.ngAfterContentInit(); |
||||
|
} |
||||
|
|
||||
|
// Reset the programmatic change status
|
||||
|
this._programmaticChange = false; |
||||
|
} |
||||
|
|
||||
|
get range(): any |
||||
|
{ |
||||
|
// Clone the range start and end
|
||||
|
const start = this._range.start.clone(); |
||||
|
const end = this._range.end.clone(); |
||||
|
|
||||
|
// Build and return the range object
|
||||
|
return { |
||||
|
startDate: start.clone().format(this.dateFormat), |
||||
|
startTime: this.timeRange ? start.clone().format(this.timeFormat) : null, |
||||
|
endDate : end.clone().format(this.dateFormat), |
||||
|
endTime : this.timeRange ? end.clone().format(this.timeFormat) : null |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Control Value Accessor
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Update the form model on change |
||||
|
* |
||||
|
* @param fn |
||||
|
*/ |
||||
|
registerOnChange(fn: any): void |
||||
|
{ |
||||
|
this._onChange = fn; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Update the form model on blur |
||||
|
* |
||||
|
* @param fn |
||||
|
*/ |
||||
|
registerOnTouched(fn: any): void |
||||
|
{ |
||||
|
this._onTouched = fn; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Write to view from model when the form model changes programmatically |
||||
|
* |
||||
|
* @param range |
||||
|
*/ |
||||
|
writeValue(range: { start: string; end: string }): void |
||||
|
{ |
||||
|
// Set this change as a programmatic one
|
||||
|
this._programmaticChange = true; |
||||
|
|
||||
|
// Set the range
|
||||
|
this.range = range; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Lifecycle hooks
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
|
||||
|
// @ TODO: Workaround until "angular/issues/20007" resolved
|
||||
|
this.writeValue = (): void => { |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Open the picker panel |
||||
|
*/ |
||||
|
openPickerPanel(): void |
||||
|
{ |
||||
|
// Create the overlay
|
||||
|
const overlayRef = this._overlay.create({ |
||||
|
panelClass : 'fuse-date-range-panel', |
||||
|
backdropClass : '', |
||||
|
hasBackdrop : true, |
||||
|
scrollStrategy : this._overlay.scrollStrategies.reposition(), |
||||
|
positionStrategy: this._overlay.position() |
||||
|
.flexibleConnectedTo(this._pickerPanelOrigin) |
||||
|
.withPositions([ |
||||
|
{ |
||||
|
originX : 'start', |
||||
|
originY : 'bottom', |
||||
|
overlayX: 'start', |
||||
|
overlayY: 'top', |
||||
|
offsetY : 8 |
||||
|
}, |
||||
|
{ |
||||
|
originX : 'start', |
||||
|
originY : 'top', |
||||
|
overlayX: 'start', |
||||
|
overlayY: 'bottom', |
||||
|
offsetY : -8 |
||||
|
} |
||||
|
]) |
||||
|
}); |
||||
|
|
||||
|
// Create a portal from the template
|
||||
|
const templatePortal = new TemplatePortal(this._pickerPanel, this._viewContainerRef); |
||||
|
|
||||
|
// On backdrop click
|
||||
|
overlayRef.backdropClick().subscribe(() => { |
||||
|
|
||||
|
// If template portal exists and attached...
|
||||
|
if ( templatePortal && templatePortal.isAttached ) |
||||
|
{ |
||||
|
// Detach it
|
||||
|
templatePortal.detach(); |
||||
|
} |
||||
|
|
||||
|
// If overlay exists and attached...
|
||||
|
if ( overlayRef && overlayRef.hasAttached() ) |
||||
|
{ |
||||
|
// Detach it
|
||||
|
overlayRef.detach(); |
||||
|
overlayRef.dispose(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// Attach the portal to the overlay
|
||||
|
overlayRef.attach(templatePortal); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Get month label |
||||
|
* |
||||
|
* @param month |
||||
|
*/ |
||||
|
getMonthLabel(month: number): string |
||||
|
{ |
||||
|
if ( month === 1 ) |
||||
|
{ |
||||
|
return this.activeDates.month1.clone().format('MMMM Y'); |
||||
|
} |
||||
|
|
||||
|
return this.activeDates.month2.clone().format('MMMM Y'); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Date class function to add/remove class names to calendar days |
||||
|
*/ |
||||
|
dateClass(): any |
||||
|
{ |
||||
|
return (date: Moment): MatCalendarCellCssClasses => { |
||||
|
|
||||
|
// If the date is both start and end date...
|
||||
|
if ( date.isSame(this._range.start, 'day') && date.isSame(this._range.end, 'day') ) |
||||
|
{ |
||||
|
return ['fuse-date-range', 'fuse-date-range-start', 'fuse-date-range-end']; |
||||
|
} |
||||
|
|
||||
|
// If the date is the start date...
|
||||
|
if ( date.isSame(this._range.start, 'day') ) |
||||
|
{ |
||||
|
return ['fuse-date-range', 'fuse-date-range-start']; |
||||
|
} |
||||
|
|
||||
|
// If the date is the end date...
|
||||
|
if ( date.isSame(this._range.end, 'day') ) |
||||
|
{ |
||||
|
return ['fuse-date-range', 'fuse-date-range-end']; |
||||
|
} |
||||
|
|
||||
|
// If the date is in between start and end dates...
|
||||
|
if ( date.isBetween(this._range.start, this._range.end, 'day') ) |
||||
|
{ |
||||
|
return ['fuse-date-range', 'fuse-date-range-mid']; |
||||
|
} |
||||
|
|
||||
|
return undefined; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Date filter to enable/disable calendar days |
||||
|
*/ |
||||
|
dateFilter(): any |
||||
|
{ |
||||
|
// If we are selecting the end date, disable all the dates that comes before the start date
|
||||
|
return (date: Moment): boolean => !(this.setWhichDate === 'end' && date.isBefore(this._range.start, 'day')); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On selected date change |
||||
|
* |
||||
|
* @param date |
||||
|
*/ |
||||
|
onSelectedDateChange(date: Moment): void |
||||
|
{ |
||||
|
// Create a new range object
|
||||
|
const newRange = { |
||||
|
start : this._range.start.clone().toISOString(), |
||||
|
end : this._range.end.clone().toISOString(), |
||||
|
whichDate: null |
||||
|
}; |
||||
|
|
||||
|
// Replace either the start or the end date with the new one
|
||||
|
// depending on which date we are setting
|
||||
|
if ( this.setWhichDate === 'start' ) |
||||
|
{ |
||||
|
newRange.start = moment(newRange.start).year(date.year()).month(date.month()).date(date.date()).toISOString(); |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
newRange.end = moment(newRange.end).year(date.year()).month(date.month()).date(date.date()).toISOString(); |
||||
|
} |
||||
|
|
||||
|
// Append the which date to the new range object
|
||||
|
newRange.whichDate = this.setWhichDate; |
||||
|
|
||||
|
// Switch which date to set on the next run
|
||||
|
this.setWhichDate = this.setWhichDate === 'start' ? 'end' : 'start'; |
||||
|
|
||||
|
// Set the range
|
||||
|
this.range = newRange; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Go to previous month on both views |
||||
|
*/ |
||||
|
prev(): void |
||||
|
{ |
||||
|
this.activeDates.month1 = moment(this.activeDates.month1).subtract(1, 'month'); |
||||
|
this.activeDates.month2 = moment(this.activeDates.month2).subtract(1, 'month'); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Go to next month on both views |
||||
|
*/ |
||||
|
next(): void |
||||
|
{ |
||||
|
this.activeDates.month1 = moment(this.activeDates.month1).add(1, 'month'); |
||||
|
this.activeDates.month2 = moment(this.activeDates.month2).add(1, 'month'); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Update the start time |
||||
|
* |
||||
|
* @param event |
||||
|
*/ |
||||
|
updateStartTime(event): void |
||||
|
{ |
||||
|
// Parse the time
|
||||
|
const parsedTime = this._parseTime(event.target.value); |
||||
|
|
||||
|
// Go back to the previous value if the form control is not valid
|
||||
|
if ( this.startTimeFormControl.invalid ) |
||||
|
{ |
||||
|
// Override the time
|
||||
|
const time = this._range.start.clone().format(this._timeFormat); |
||||
|
|
||||
|
// Set the time
|
||||
|
this.startTimeFormControl.setValue(time); |
||||
|
|
||||
|
// Do not update the range
|
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Append the new time to the start date
|
||||
|
const startDate = this._range.start.clone().hours(parsedTime.hours()).minutes(parsedTime.minutes()); |
||||
|
|
||||
|
// If the new start date is after the current end date,
|
||||
|
// use the end date's time and set the start date again
|
||||
|
if ( startDate.isAfter(this._range.end) ) |
||||
|
{ |
||||
|
const endDateHours = this._range.end.hours(); |
||||
|
const endDateMinutes = this._range.end.minutes(); |
||||
|
|
||||
|
// Set the start date
|
||||
|
startDate.hours(endDateHours).minutes(endDateMinutes); |
||||
|
} |
||||
|
|
||||
|
// If everything is okay, set the new date
|
||||
|
this.range = { |
||||
|
start : startDate.toISOString(), |
||||
|
end : this._range.end.clone().toISOString(), |
||||
|
whichDate: 'start' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Update the end time |
||||
|
* |
||||
|
* @param event |
||||
|
*/ |
||||
|
updateEndTime(event): void |
||||
|
{ |
||||
|
// Parse the time
|
||||
|
const parsedTime = this._parseTime(event.target.value); |
||||
|
|
||||
|
// Go back to the previous value if the form control is not valid
|
||||
|
if ( this.endTimeFormControl.invalid ) |
||||
|
{ |
||||
|
// Override the time
|
||||
|
const time = this._range.end.clone().format(this._timeFormat); |
||||
|
|
||||
|
// Set the time
|
||||
|
this.endTimeFormControl.setValue(time); |
||||
|
|
||||
|
// Do not update the range
|
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Append the new time to the end date
|
||||
|
const endDate = this._range.end.clone().hours(parsedTime.hours()).minutes(parsedTime.minutes()); |
||||
|
|
||||
|
// If the new end date is before the current start date,
|
||||
|
// use the start date's time and set the end date again
|
||||
|
if ( endDate.isBefore(this._range.start) ) |
||||
|
{ |
||||
|
const startDateHours = this._range.start.hours(); |
||||
|
const startDateMinutes = this._range.start.minutes(); |
||||
|
|
||||
|
// Set the end date
|
||||
|
endDate.hours(startDateHours).minutes(startDateMinutes); |
||||
|
} |
||||
|
|
||||
|
// If everything is okay, set the new date
|
||||
|
this.range = { |
||||
|
start : this._range.start.clone().toISOString(), |
||||
|
end : endDate.toISOString(), |
||||
|
whichDate: 'end' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Private methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Initialize |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
private _init(): void |
||||
|
{ |
||||
|
// Start and end time form controls
|
||||
|
this.startTimeFormControl = new FormControl('', [Validators.pattern(this._timeRegExp)]); |
||||
|
this.endTimeFormControl = new FormControl('', [Validators.pattern(this._timeRegExp)]); |
||||
|
|
||||
|
// Set the default range
|
||||
|
this._programmaticChange = true; |
||||
|
this.range = { |
||||
|
start: moment().startOf('day').toISOString(), |
||||
|
end : moment().add(1, 'day').endOf('day').toISOString() |
||||
|
}; |
||||
|
|
||||
|
// Set the default time range
|
||||
|
this._programmaticChange = true; |
||||
|
this.timeRange = true; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Parse the time from the inputs |
||||
|
* |
||||
|
* @param value |
||||
|
* @private |
||||
|
*/ |
||||
|
private _parseTime(value: string): Moment |
||||
|
{ |
||||
|
// Parse the time using the time regexp
|
||||
|
const timeArr = value.split(this._timeRegExp).filter(part => part !== ''); |
||||
|
|
||||
|
// Get the meridiem
|
||||
|
const meridiem = timeArr[2] || null; |
||||
|
|
||||
|
// If meridiem exists...
|
||||
|
if ( meridiem ) |
||||
|
{ |
||||
|
// Create a moment using 12-hours format and return it
|
||||
|
return moment(value, 'hh:mmA').seconds(0); |
||||
|
} |
||||
|
|
||||
|
// If meridiem doesn't exist, create a moment using 24-hours format and return in
|
||||
|
return moment(value, 'HH:mm').seconds(0); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,32 @@ |
|||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { ReactiveFormsModule } from '@angular/forms'; |
||||
|
import { MatButtonModule } from '@angular/material/button'; |
||||
|
import { MatDatepickerModule } from '@angular/material/datepicker'; |
||||
|
import { MatFormFieldModule } from '@angular/material/form-field'; |
||||
|
import { MatIconModule } from '@angular/material/icon'; |
||||
|
import { MatInputModule } from '@angular/material/input'; |
||||
|
import { MatMomentDateModule } from '@angular/material-moment-adapter'; |
||||
|
import { FuseDateRangeComponent } from '@fuse/components/date-range/date-range.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [ |
||||
|
FuseDateRangeComponent |
||||
|
], |
||||
|
imports : [ |
||||
|
CommonModule, |
||||
|
ReactiveFormsModule, |
||||
|
MatButtonModule, |
||||
|
MatDatepickerModule, |
||||
|
MatFormFieldModule, |
||||
|
MatInputModule, |
||||
|
MatIconModule, |
||||
|
MatMomentDateModule |
||||
|
], |
||||
|
exports : [ |
||||
|
FuseDateRangeComponent |
||||
|
] |
||||
|
}) |
||||
|
export class FuseDateRangeModule |
||||
|
{ |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
export * from '@fuse/components/date-range/public-api'; |
||||
@ -0,0 +1,2 @@ |
|||||
|
export * from '@fuse/components/date-range/date-range.component'; |
||||
|
export * from '@fuse/components/date-range/date-range.module'; |
||||
@ -0,0 +1,3 @@ |
|||||
|
<div class="fuse-drawer-content"> |
||||
|
<ng-content></ng-content> |
||||
|
</div> |
||||
@ -0,0 +1,131 @@ |
|||||
|
/* Variables */ |
||||
|
$fuse-drawer-width: 320; |
||||
|
|
||||
|
fuse-drawer { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
flex: 1 1 auto; |
||||
|
width: #{$fuse-drawer-width}px; |
||||
|
min-width: #{$fuse-drawer-width}px; |
||||
|
max-width: #{$fuse-drawer-width}px; |
||||
|
z-index: 300; |
||||
|
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; |
||||
|
|
||||
|
.fuse-drawer-content { |
||||
|
transition-duration: 400ms; |
||||
|
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); |
||||
|
transition-property: width, max-width, min-width; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Over mode */ |
||||
|
&.fuse-drawer-mode-over { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
|
||||
|
/* Fixed mode */ |
||||
|
&.fuse-drawer-fixed { |
||||
|
position: fixed; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Left position */ |
||||
|
&.fuse-drawer-position-left { |
||||
|
|
||||
|
/* Side mode */ |
||||
|
&.fuse-drawer-mode-side { |
||||
|
margin-left: -#{$fuse-drawer-width}px; |
||||
|
|
||||
|
&.fuse-drawer-opened { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Over mode */ |
||||
|
&.fuse-drawer-mode-over { |
||||
|
left: 0; |
||||
|
transform: translate3d(-100%, 0, 0); |
||||
|
|
||||
|
&.fuse-drawer-opened { |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Content */ |
||||
|
.fuse-drawer-content { |
||||
|
left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Right position */ |
||||
|
&.fuse-drawer-position-right { |
||||
|
|
||||
|
/* Side mode */ |
||||
|
&.fuse-drawer-mode-side { |
||||
|
margin-right: -#{$fuse-drawer-width}px; |
||||
|
|
||||
|
&.fuse-drawer-opened { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Over mode */ |
||||
|
&.fuse-drawer-mode-over { |
||||
|
right: 0; |
||||
|
transform: translate3d(100%, 0, 0); |
||||
|
|
||||
|
&.fuse-drawer-opened { |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Content */ |
||||
|
.fuse-drawer-content { |
||||
|
right: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Content */ |
||||
|
.fuse-drawer-content { |
||||
|
position: absolute; |
||||
|
display: flex; |
||||
|
flex: 1 1 auto; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
@apply bg-card; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Overlay */ |
||||
|
.fuse-drawer-overlay { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 299; |
||||
|
opacity: 1; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
|
||||
|
/* Fixed mode */ |
||||
|
&.fuse-drawer-overlay-fixed { |
||||
|
position: fixed; |
||||
|
} |
||||
|
|
||||
|
/* Transparent overlay */ |
||||
|
&.fuse-drawer-overlay-transparent { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,437 @@ |
|||||
|
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core'; |
||||
|
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; |
||||
|
import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types'; |
||||
|
import { FuseDrawerService } from '@fuse/components/drawer/drawer.service'; |
||||
|
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; |
||||
|
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-drawer', |
||||
|
templateUrl : './drawer.component.html', |
||||
|
styleUrls : ['./drawer.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None, |
||||
|
exportAs : 'fuseDrawer' |
||||
|
}) |
||||
|
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 */ |
||||
|
|
||||
|
@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>(); |
||||
|
|
||||
|
private _animationsEnabled: boolean = false; |
||||
|
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 |
||||
|
) |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Accessors
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Host binding for component classes |
||||
|
*/ |
||||
|
@HostBinding('class') get classList(): any |
||||
|
{ |
||||
|
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-position-${this.position}`]: true |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Host binding for component inline styles |
||||
|
*/ |
||||
|
@HostBinding('style') get styleList(): any |
||||
|
{ |
||||
|
return { |
||||
|
'visibility': this.opened ? 'visible' : 'hidden' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Decorated methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On mouseenter |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
@HostListener('mouseenter') |
||||
|
private _onMouseenter(): void |
||||
|
{ |
||||
|
// Enable the animations
|
||||
|
this._enableAnimations(); |
||||
|
|
||||
|
// Set the hovered
|
||||
|
this._hovered = true; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On mouseleave |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
@HostListener('mouseleave') |
||||
|
private _onMouseleave(): void |
||||
|
{ |
||||
|
// Enable the animations
|
||||
|
this._enableAnimations(); |
||||
|
|
||||
|
// Set the hovered
|
||||
|
this._hovered = false; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Lifecycle hooks
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On changes |
||||
|
* |
||||
|
* @param changes |
||||
|
*/ |
||||
|
ngOnChanges(changes: SimpleChanges): void |
||||
|
{ |
||||
|
// Fixed
|
||||
|
if ( 'fixed' in changes ) |
||||
|
{ |
||||
|
// Coerce the value to a boolean
|
||||
|
this.fixed = coerceBooleanProperty(changes.fixed.currentValue); |
||||
|
|
||||
|
// Execute the observable
|
||||
|
this.fixedChanged.next(this.fixed); |
||||
|
} |
||||
|
|
||||
|
// Mode
|
||||
|
if ( 'mode' in changes ) |
||||
|
{ |
||||
|
// Get the previous and current values
|
||||
|
const previousMode = changes.mode.previousValue; |
||||
|
const currentMode = changes.mode.currentValue; |
||||
|
|
||||
|
// Disable the animations
|
||||
|
this._disableAnimations(); |
||||
|
|
||||
|
// If the mode changes: 'over -> side'
|
||||
|
if ( previousMode === 'over' && currentMode === 'side' ) |
||||
|
{ |
||||
|
// Hide the overlay
|
||||
|
this._hideOverlay(); |
||||
|
} |
||||
|
|
||||
|
// If the mode changes: 'side -> over'
|
||||
|
if ( previousMode === 'side' && currentMode === 'over' ) |
||||
|
{ |
||||
|
// If the drawer is opened
|
||||
|
if ( this.opened ) |
||||
|
{ |
||||
|
// Show the overlay
|
||||
|
this._showOverlay(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Execute the observable
|
||||
|
this.modeChanged.next(currentMode); |
||||
|
|
||||
|
// 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(() => { |
||||
|
this._enableAnimations(); |
||||
|
}, 500); |
||||
|
} |
||||
|
|
||||
|
// Opened
|
||||
|
if ( 'opened' in changes ) |
||||
|
{ |
||||
|
// Coerce the value to a boolean
|
||||
|
const open = coerceBooleanProperty(changes.opened.currentValue); |
||||
|
|
||||
|
// Open/close the drawer
|
||||
|
this._toggleOpened(open); |
||||
|
} |
||||
|
|
||||
|
// Position
|
||||
|
if ( 'position' in changes ) |
||||
|
{ |
||||
|
// Execute the observable
|
||||
|
this.positionChanged.next(this.position); |
||||
|
} |
||||
|
|
||||
|
// Transparent overlay
|
||||
|
if ( 'transparentOverlay' in changes ) |
||||
|
{ |
||||
|
// Coerce the value to a boolean
|
||||
|
this.transparentOverlay = coerceBooleanProperty(changes.transparentOverlay.currentValue); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Register the drawer
|
||||
|
this._fuseDrawerService.registerComponent(this.name, this); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Finish the animation
|
||||
|
if ( this._player ) |
||||
|
{ |
||||
|
this._player.finish(); |
||||
|
} |
||||
|
|
||||
|
// Deregister the drawer from the registry
|
||||
|
this._fuseDrawerService.deregisterComponent(this.name); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Open the drawer |
||||
|
*/ |
||||
|
open(): void |
||||
|
{ |
||||
|
// Return if the drawer has already opened
|
||||
|
if ( this.opened ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Open the drawer
|
||||
|
this._toggleOpened(true); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Close the drawer |
||||
|
*/ |
||||
|
close(): void |
||||
|
{ |
||||
|
// Return if the drawer has already closed
|
||||
|
if ( !this.opened ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Close the drawer
|
||||
|
this._toggleOpened(false); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Toggle the drawer |
||||
|
*/ |
||||
|
toggle(): void |
||||
|
{ |
||||
|
if ( this.opened ) |
||||
|
{ |
||||
|
this.close(); |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
this.open(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Private methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Enable the animations |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
private _enableAnimations(): void |
||||
|
{ |
||||
|
// Return if the animations are already enabled
|
||||
|
if ( this._animationsEnabled ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Enable the animations
|
||||
|
this._animationsEnabled = true; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Disable the animations |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
private _disableAnimations(): void |
||||
|
{ |
||||
|
// Return if the animations are already disabled
|
||||
|
if ( !this._animationsEnabled ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Disable the animations
|
||||
|
this._animationsEnabled = false; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Show the backdrop |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
private _showOverlay(): void |
||||
|
{ |
||||
|
// Create the backdrop element
|
||||
|
this._overlay = this._renderer2.createElement('div'); |
||||
|
|
||||
|
// Return if overlay couldn't be create for some reason
|
||||
|
if ( !this._overlay ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Add a class to the backdrop element
|
||||
|
this._overlay.classList.add('fuse-drawer-overlay'); |
||||
|
|
||||
|
// Add a class depending on the fixed option
|
||||
|
if ( this.fixed ) |
||||
|
{ |
||||
|
this._overlay.classList.add('fuse-drawer-overlay-fixed'); |
||||
|
} |
||||
|
|
||||
|
// Add a class depending on the transparentOverlay option
|
||||
|
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); |
||||
|
|
||||
|
// Create the 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); |
||||
|
|
||||
|
// Once the animation is done...
|
||||
|
this._player.onDone(() => { |
||||
|
|
||||
|
// Destroy the player
|
||||
|
this._player.destroy(); |
||||
|
this._player = null; |
||||
|
}); |
||||
|
|
||||
|
// Play the animation
|
||||
|
this._player.play(); |
||||
|
|
||||
|
// Add an event listener to the overlay
|
||||
|
this._overlay.addEventListener('click', () => { |
||||
|
this.close(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Hide the backdrop |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
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); |
||||
|
|
||||
|
// Play the animation
|
||||
|
this._player.play(); |
||||
|
|
||||
|
// Once the animation is done...
|
||||
|
this._player.onDone(() => { |
||||
|
|
||||
|
// Destroy the player
|
||||
|
this._player.destroy(); |
||||
|
this._player = null; |
||||
|
|
||||
|
// If the backdrop still exists...
|
||||
|
if ( this._overlay ) |
||||
|
{ |
||||
|
// Remove the backdrop
|
||||
|
this._overlay.parentNode.removeChild(this._overlay); |
||||
|
this._overlay = null; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Open/close the drawer |
||||
|
* |
||||
|
* @param open |
||||
|
* @private |
||||
|
*/ |
||||
|
private _toggleOpened(open: boolean): void |
||||
|
{ |
||||
|
// Set the opened
|
||||
|
this.opened = open; |
||||
|
|
||||
|
// Enable the animations
|
||||
|
this._enableAnimations(); |
||||
|
|
||||
|
// If the mode is 'over'
|
||||
|
if ( this.mode === 'over' ) |
||||
|
{ |
||||
|
// If the drawer opens, show the overlay
|
||||
|
if ( open ) |
||||
|
{ |
||||
|
this._showOverlay(); |
||||
|
} |
||||
|
// Otherwise, close the overlay
|
||||
|
else |
||||
|
{ |
||||
|
this._hideOverlay(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Execute the observable
|
||||
|
this.openedChanged.next(open); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,18 @@ |
|||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [ |
||||
|
FuseDrawerComponent |
||||
|
], |
||||
|
imports : [ |
||||
|
CommonModule |
||||
|
], |
||||
|
exports : [ |
||||
|
FuseDrawerComponent |
||||
|
] |
||||
|
}) |
||||
|
export class FuseDrawerModule |
||||
|
{ |
||||
|
} |
||||
@ -0,0 +1,52 @@ |
|||||
|
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>(); |
||||
|
|
||||
|
/** |
||||
|
* Constructor |
||||
|
*/ |
||||
|
constructor() |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Register drawer component |
||||
|
* |
||||
|
* @param name |
||||
|
* @param component |
||||
|
*/ |
||||
|
registerComponent(name: string, component: FuseDrawerComponent): void |
||||
|
{ |
||||
|
this._componentRegistry.set(name, component); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Deregister drawer component |
||||
|
* |
||||
|
* @param name |
||||
|
*/ |
||||
|
deregisterComponent(name: string): void |
||||
|
{ |
||||
|
this._componentRegistry.delete(name); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Get drawer component from the registry |
||||
|
* |
||||
|
* @param name |
||||
|
*/ |
||||
|
getComponent(name: string): FuseDrawerComponent | undefined |
||||
|
{ |
||||
|
return this._componentRegistry.get(name); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
export type FuseDrawerMode = |
||||
|
| 'over' |
||||
|
| 'side'; |
||||
|
|
||||
|
export type FuseDrawerPosition = |
||||
|
| 'left' |
||||
|
| 'right'; |
||||
@ -0,0 +1 @@ |
|||||
|
export * from '@fuse/components/drawer/public-api'; |
||||
@ -0,0 +1,4 @@ |
|||||
|
export * from '@fuse/components/drawer/drawer.component'; |
||||
|
export * from '@fuse/components/drawer/drawer.module'; |
||||
|
export * from '@fuse/components/drawer/drawer.service'; |
||||
|
export * from '@fuse/components/drawer/drawer.types'; |
||||
@ -0,0 +1,12 @@ |
|||||
|
<!-- Button --> |
||||
|
<button |
||||
|
mat-icon-button |
||||
|
[matTooltip]="tooltip || 'Toggle Fullscreen'" |
||||
|
(click)="toggleFullscreen()"> |
||||
|
<ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container> |
||||
|
</button> |
||||
|
|
||||
|
<!-- Default icon --> |
||||
|
<ng-template #defaultIconTpl> |
||||
|
<mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon> |
||||
|
</ng-template> |
||||
@ -0,0 +1,166 @@ |
|||||
|
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core'; |
||||
|
import { DOCUMENT } from '@angular/common'; |
||||
|
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-fullscreen', |
||||
|
templateUrl : './fullscreen.component.html', |
||||
|
encapsulation : ViewEncapsulation.None, |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
exportAs : 'fuseFullscreen' |
||||
|
}) |
||||
|
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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Toggle the fullscreen mode |
||||
|
*/ |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
// Firefox
|
||||
|
if ( this._fsDocEl.mozRequestFullScreen ) |
||||
|
{ |
||||
|
this._fsDocEl.mozRequestFullScreen(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,24 @@ |
|||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { MatButtonModule } from '@angular/material/button'; |
||||
|
import { MatIconModule } from '@angular/material/icon'; |
||||
|
import { MatTooltipModule } from '@angular/material/tooltip'; |
||||
|
import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [ |
||||
|
FuseFullscreenComponent |
||||
|
], |
||||
|
imports: [ |
||||
|
MatButtonModule, |
||||
|
MatIconModule, |
||||
|
MatTooltipModule, |
||||
|
CommonModule |
||||
|
], |
||||
|
exports : [ |
||||
|
FuseFullscreenComponent |
||||
|
] |
||||
|
}) |
||||
|
export class FuseFullscreenModule |
||||
|
{ |
||||
|
} |
||||
@ -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; |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
export * from '@fuse/components/fullscreen/public-api'; |
||||
@ -0,0 +1,3 @@ |
|||||
|
export * from '@fuse/components/fullscreen/fullscreen.component'; |
||||
|
export * from '@fuse/components/fullscreen/fullscreen.module'; |
||||
|
export * from '@fuse/components/fullscreen/fullscreen.types'; |
||||
@ -0,0 +1,9 @@ |
|||||
|
<ng-content></ng-content> |
||||
|
|
||||
|
<!-- @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 --> |
||||
@ -0,0 +1,3 @@ |
|||||
|
textarea[fuse-highlight] { |
||||
|
display: none; |
||||
|
} |
||||
@ -0,0 +1,132 @@ |
|||||
|
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, |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
exportAs : 'fuseHighlight' |
||||
|
}) |
||||
|
export class FuseHighlightComponent implements OnChanges, AfterViewInit |
||||
|
{ |
||||
|
@Input() code: string; |
||||
|
@Input() lang: string; |
||||
|
@ViewChild(TemplateRef) templateRef: TemplateRef<any>; |
||||
|
|
||||
|
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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On changes |
||||
|
* |
||||
|
* @param changes |
||||
|
*/ |
||||
|
ngOnChanges(changes: SimpleChanges): void |
||||
|
{ |
||||
|
// Code & Lang
|
||||
|
if ( 'code' in changes || 'lang' in changes ) |
||||
|
{ |
||||
|
// Return if the viewContainerRef is not available
|
||||
|
if ( !this._viewContainerRef.length ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Highlight and insert the code
|
||||
|
this._highlightAndInsert(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* After view init |
||||
|
*/ |
||||
|
ngAfterViewInit(): void |
||||
|
{ |
||||
|
// Return if there is no language set
|
||||
|
if ( !this.lang ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// If there is no code input, get the code from
|
||||
|
// the textarea
|
||||
|
if ( !this.code ) |
||||
|
{ |
||||
|
// Get the code
|
||||
|
this.code = this._elementRef.nativeElement.value; |
||||
|
} |
||||
|
|
||||
|
// Highlight and insert
|
||||
|
this._highlightAndInsert(); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Private methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Highlight and insert the highlighted code |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
private _highlightAndInsert(): void |
||||
|
{ |
||||
|
// Return if the template reference is not available
|
||||
|
if ( !this.templateRef ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Return if the code or language is not defined
|
||||
|
if ( !this.code || !this.lang ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Destroy the component if there is already one
|
||||
|
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)); |
||||
|
|
||||
|
// Return if the highlighted code is null
|
||||
|
if ( this.highlightedCode === null ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Render and insert the template
|
||||
|
this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, { |
||||
|
highlightedCode: this.highlightedCode, |
||||
|
lang : this.lang |
||||
|
}); |
||||
|
|
||||
|
// Detect the changes
|
||||
|
this._viewRef.detectChanges(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,18 @@ |
|||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [ |
||||
|
FuseHighlightComponent |
||||
|
], |
||||
|
imports : [ |
||||
|
CommonModule |
||||
|
], |
||||
|
exports : [ |
||||
|
FuseHighlightComponent |
||||
|
] |
||||
|
}) |
||||
|
export class FuseHighlightModule |
||||
|
{ |
||||
|
} |
||||
@ -0,0 +1,82 @@ |
|||||
|
import { Injectable } from '@angular/core'; |
||||
|
import hljs from 'highlight.js'; |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root' |
||||
|
}) |
||||
|
export class FuseHighlightService |
||||
|
{ |
||||
|
/** |
||||
|
* Constructor |
||||
|
*/ |
||||
|
constructor() |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Highlight |
||||
|
*/ |
||||
|
highlight(code: string, language: string): string |
||||
|
{ |
||||
|
// Format the code
|
||||
|
code = this._format(code); |
||||
|
|
||||
|
// Highlight and return the code
|
||||
|
return hljs.highlight(code, {language}).value; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Private methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Remove the empty lines around the code block |
||||
|
* and re-align the indentation based on the first |
||||
|
* non-whitespace indented character |
||||
|
* |
||||
|
* @param code |
||||
|
* @private |
||||
|
*/ |
||||
|
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() === '' ) |
||||
|
{ |
||||
|
lines.shift(); |
||||
|
} |
||||
|
|
||||
|
while ( lines.length && lines[lines.length - 1].trim() === '' ) |
||||
|
{ |
||||
|
lines.pop(); |
||||
|
} |
||||
|
|
||||
|
// Iterate through the lines
|
||||
|
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 ) |
||||
|
{ |
||||
|
indentation = line.search(/\S|$/); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Look at all the remaining lines to figure out the smallest indentation.
|
||||
|
indentation = Math.min(line.search(/\S|$/), indentation); |
||||
|
}); |
||||
|
|
||||
|
// 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'); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
export * from '@fuse/components/highlight/public-api'; |
||||
@ -0,0 +1,3 @@ |
|||||
|
export * from '@fuse/components/highlight/highlight.component'; |
||||
|
export * from '@fuse/components/highlight/highlight.module'; |
||||
|
export * from '@fuse/components/highlight/highlight.service'; |
||||
@ -0,0 +1 @@ |
|||||
|
export * from '@fuse/components/masonry/public-api'; |
||||
@ -0,0 +1,3 @@ |
|||||
|
<div class="flex"> |
||||
|
<ng-container *ngTemplateOutlet="columnsTemplate; context: { $implicit: distributedColumns }"></ng-container> |
||||
|
</div> |
||||
@ -0,0 +1,87 @@ |
|||||
|
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', |
||||
|
styleUrls : ['./masonry.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None, |
||||
|
animations : fuseAnimations, |
||||
|
exportAs : 'fuseMasonry' |
||||
|
}) |
||||
|
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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On changes |
||||
|
* |
||||
|
* @param changes |
||||
|
*/ |
||||
|
ngOnChanges(changes: SimpleChanges): void |
||||
|
{ |
||||
|
// Columns
|
||||
|
if ( 'columns' in changes ) |
||||
|
{ |
||||
|
// Distribute the items
|
||||
|
this._distributeItems(); |
||||
|
} |
||||
|
|
||||
|
// Items
|
||||
|
if ( 'items' in changes ) |
||||
|
{ |
||||
|
// Distribute the items
|
||||
|
this._distributeItems(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* After view init |
||||
|
*/ |
||||
|
ngAfterViewInit(): void |
||||
|
{ |
||||
|
// Distribute the items for the first time
|
||||
|
this._distributeItems(); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Private methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Distribute items into columns |
||||
|
*/ |
||||
|
private _distributeItems(): void |
||||
|
{ |
||||
|
// Return an empty array if there are no items
|
||||
|
if ( this.items.length === 0 ) |
||||
|
{ |
||||
|
this.distributedColumns = []; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Prepare the distributed columns array
|
||||
|
this.distributedColumns = Array.from(Array(this.columns), item => ({items: []})); |
||||
|
|
||||
|
// Distribute the items to columns
|
||||
|
for ( let i = 0; i < this.items.length; i++ ) |
||||
|
{ |
||||
|
this.distributedColumns[i % this.columns].items.push(this.items[i]); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,18 @@ |
|||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { FuseMasonryComponent } from '@fuse/components/masonry/masonry.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [ |
||||
|
FuseMasonryComponent |
||||
|
], |
||||
|
imports : [ |
||||
|
CommonModule |
||||
|
], |
||||
|
exports : [ |
||||
|
FuseMasonryComponent |
||||
|
] |
||||
|
}) |
||||
|
export class FuseMasonryModule |
||||
|
{ |
||||
|
} |
||||
@ -0,0 +1,2 @@ |
|||||
|
export * from '@fuse/components/masonry/masonry.component'; |
||||
|
export * from '@fuse/components/masonry/masonry.module'; |
||||
@ -0,0 +1,126 @@ |
|||||
|
<!-- Item wrapper --> |
||||
|
<div |
||||
|
class="fuse-horizontal-navigation-item-wrapper" |
||||
|
[class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle" |
||||
|
[ngClass]="item.classes?.wrapper"> |
||||
|
|
||||
|
<!-- Item with an internal link --> |
||||
|
<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}" |
||||
|
[routerLink]="[item.link]" |
||||
|
[routerLinkActive]="'fuse-horizontal-navigation-item-active'" |
||||
|
[routerLinkActiveOptions]="isActiveMatchOptions" |
||||
|
[matTooltip]="item.tooltip || ''"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item with an external link --> |
||||
|
<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 || ''"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</a> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item with a function --> |
||||
|
<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 || ''" |
||||
|
(click)="item.function(item)"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item with an internal link and function --> |
||||
|
<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}" |
||||
|
[routerLink]="[item.link]" |
||||
|
[routerLinkActive]="'fuse-horizontal-navigation-item-active'" |
||||
|
[routerLinkActiveOptions]="isActiveMatchOptions" |
||||
|
[matTooltip]="item.tooltip || ''" |
||||
|
(click)="item.function(item)"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item with an external link and function --> |
||||
|
<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> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</a> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item with a no link and no function --> |
||||
|
<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 || ''"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item is 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 --> |
||||
|
<ng-container *ngIf="item.icon"> |
||||
|
<mat-icon |
||||
|
class="fuse-horizontal-navigation-item-icon" |
||||
|
[ngClass]="item.classes?.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}} |
||||
|
</span> |
||||
|
</div> |
||||
|
<ng-container *ngIf="item.subtitle"> |
||||
|
<div class="fuse-horizontal-navigation-item-subtitle text-hint"> |
||||
|
<span [ngClass]="item.classes?.subtitle"> |
||||
|
{{item.subtitle}} |
||||
|
</span> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 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}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
</ng-template> |
||||
@ -0,0 +1,82 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { IsActiveMatchOptions } from '@angular/router'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; |
||||
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; |
||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; |
||||
|
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-horizontal-navigation-basic-item', |
||||
|
templateUrl : './basic.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy |
||||
|
{ |
||||
|
@Input() item: FuseNavigationItem; |
||||
|
@Input() name: string; |
||||
|
|
||||
|
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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Set the "isActiveMatchOptions" either from item's
|
||||
|
// "isActiveMatchOptions" or the equivalent form of
|
||||
|
// item's "exactMatch" option
|
||||
|
this.isActiveMatchOptions = |
||||
|
this.item.isActiveMatchOptions ?? this.item.exactMatch |
||||
|
? this._fuseUtilsService.exactMatchOptions |
||||
|
: this._fuseUtilsService.subsetMatchOptions; |
||||
|
|
||||
|
// Get the parent navigation component
|
||||
|
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(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,121 @@ |
|||||
|
<ng-container *ngIf="!child"> |
||||
|
<div |
||||
|
[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> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<mat-menu |
||||
|
class="fuse-horizontal-navigation-menu-panel" |
||||
|
[overlapTrigger]="false" |
||||
|
#matMenu="matMenu"> |
||||
|
|
||||
|
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> |
||||
|
|
||||
|
<!-- Skip the hidden items --> |
||||
|
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
||||
|
|
||||
|
<!-- Basic --> |
||||
|
<ng-container *ngIf="item.type === 'basic'"> |
||||
|
<div |
||||
|
class="fuse-horizontal-navigation-menu-item" |
||||
|
[disabled]="item.disabled" |
||||
|
mat-menu-item> |
||||
|
<fuse-horizontal-navigation-basic-item |
||||
|
[item]="item" |
||||
|
[name]="name"></fuse-horizontal-navigation-basic-item> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Branch: aside, collapsable, 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> |
||||
|
<fuse-horizontal-navigation-branch-item |
||||
|
[child]="true" |
||||
|
[item]="item" |
||||
|
[name]="name" |
||||
|
#branch></fuse-horizontal-navigation-branch-item> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Divider --> |
||||
|
<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> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
</ng-container> |
||||
|
|
||||
|
</ng-container> |
||||
|
|
||||
|
</mat-menu> |
||||
|
|
||||
|
<!-- Item template --> |
||||
|
<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"> |
||||
|
|
||||
|
<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 || ''"> |
||||
|
|
||||
|
<!-- Icon --> |
||||
|
<ng-container *ngIf="item.icon"> |
||||
|
<mat-icon |
||||
|
class="fuse-horizontal-navigation-item-icon" |
||||
|
[ngClass]="item.classes?.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}} |
||||
|
</span> |
||||
|
</div> |
||||
|
<ng-container *ngIf="item.subtitle"> |
||||
|
<div class="fuse-horizontal-navigation-item-subtitle text-hint"> |
||||
|
<span [ngClass]="item.classes?.subtitle"> |
||||
|
{{item.subtitle}} |
||||
|
</span> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 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}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</ng-template> |
||||
@ -0,0 +1,94 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
||||
|
import { BooleanInput } from '@angular/cdk/coercion'; |
||||
|
import { MatMenu } from '@angular/material/menu'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; |
||||
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; |
||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-horizontal-navigation-branch-item', |
||||
|
templateUrl : './branch.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy |
||||
|
{ |
||||
|
/* eslint-disable @typescript-eslint/naming-convention */ |
||||
|
static ngAcceptInputType_child: BooleanInput; |
||||
|
/* eslint-enable @typescript-eslint/naming-convention */ |
||||
|
|
||||
|
@Input() child: boolean = false; |
||||
|
@Input() item: FuseNavigationItem; |
||||
|
@Input() name: string; |
||||
|
@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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Get the parent navigation component
|
||||
|
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(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Trigger the change detection |
||||
|
*/ |
||||
|
triggerChangeDetection(): void |
||||
|
{ |
||||
|
// Mark for check
|
||||
|
this._changeDetectorRef.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Track by function for ngFor loops |
||||
|
* |
||||
|
* @param index |
||||
|
* @param item |
||||
|
*/ |
||||
|
trackByFn(index: number, item: any): any |
||||
|
{ |
||||
|
return item.id || index; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
<!-- Divider --> |
||||
|
<div |
||||
|
class="fuse-horizontal-navigation-item-wrapper divider" |
||||
|
[ngClass]="item.classes?.wrapper"></div> |
||||
@ -0,0 +1,62 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
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'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-horizontal-navigation-divider-item', |
||||
|
templateUrl : './divider.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy |
||||
|
{ |
||||
|
@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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Get the parent navigation component
|
||||
|
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(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
<!-- Spacer --> |
||||
|
<div |
||||
|
class="fuse-horizontal-navigation-item-wrapper" |
||||
|
[ngClass]="item.classes?.wrapper"></div> |
||||
@ -0,0 +1,62 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; |
||||
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; |
||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-horizontal-navigation-spacer-item', |
||||
|
templateUrl : './spacer.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy |
||||
|
{ |
||||
|
@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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Get the parent navigation component
|
||||
|
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(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,36 @@ |
|||||
|
<div class="fuse-horizontal-navigation-wrapper"> |
||||
|
|
||||
|
<ng-container *ngFor="let item of navigation; trackBy: trackByFn"> |
||||
|
|
||||
|
<!-- Skip the hidden items --> |
||||
|
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
||||
|
|
||||
|
<!-- 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> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Branch: aside, collapsable, 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> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- 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> |
||||
|
</ng-container> |
||||
|
|
||||
|
</ng-container> |
||||
|
|
||||
|
</ng-container> |
||||
|
|
||||
|
</div> |
||||
@ -0,0 +1,180 @@ |
|||||
|
/* Root navigation specific */ |
||||
|
fuse-horizontal-navigation { |
||||
|
|
||||
|
.fuse-horizontal-navigation-wrapper { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
/* Basic, Branch */ |
||||
|
fuse-horizontal-navigation-basic-item, |
||||
|
fuse-horizontal-navigation-branch-item { |
||||
|
|
||||
|
@screen sm { |
||||
|
|
||||
|
&:hover { |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-wrapper { |
||||
|
@apply bg-hover; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-wrapper { |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.fuse-horizontal-navigation-item { |
||||
|
padding: 0 16px; |
||||
|
cursor: pointer; |
||||
|
user-select: none; |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-icon { |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 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'}; |
||||
|
} |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-subtitle { |
||||
|
@apply text-primary-400 #{'!important'}; |
||||
|
|
||||
|
.dark & { |
||||
|
@apply text-primary-600 #{'!important'}; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-icon { |
||||
|
@apply text-primary #{'!important'}; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Spacer */ |
||||
|
fuse-horizontal-navigation-spacer-item { |
||||
|
margin: 12px 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Menu panel specific */ |
||||
|
.fuse-horizontal-navigation-menu-panel { |
||||
|
|
||||
|
.fuse-horizontal-navigation-menu-item { |
||||
|
height: auto; |
||||
|
min-height: 0; |
||||
|
line-height: normal; |
||||
|
white-space: normal; |
||||
|
|
||||
|
/* Basic, Branch */ |
||||
|
fuse-horizontal-navigation-basic-item, |
||||
|
fuse-horizontal-navigation-branch-item, |
||||
|
fuse-horizontal-navigation-divider-item { |
||||
|
display: flex; |
||||
|
flex: 1 1 auto; |
||||
|
} |
||||
|
|
||||
|
/* Divider */ |
||||
|
fuse-horizontal-navigation-divider-item { |
||||
|
margin: 8px -16px; |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-wrapper { |
||||
|
height: 1px; |
||||
|
box-shadow: 0 1px 0 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 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'}; |
||||
|
} |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-subtitle { |
||||
|
@apply text-primary-400 #{'!important'}; |
||||
|
|
||||
|
.dark & { |
||||
|
@apply text-primary-600 #{'!important'}; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-icon { |
||||
|
@apply text-primary #{'!important'}; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-wrapper { |
||||
|
width: 100%; |
||||
|
|
||||
|
&.fuse-horizontal-navigation-item-has-subtitle { |
||||
|
|
||||
|
.fuse-horizontal-navigation-item { |
||||
|
min-height: 56px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-horizontal-navigation-item { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
min-height: 48px; |
||||
|
width: 100%; |
||||
|
font-size: 13px; |
||||
|
font-weight: 500; |
||||
|
text-decoration: none; |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-title-wrapper { |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-subtitle { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-badge { |
||||
|
margin-left: auto; |
||||
|
|
||||
|
.fuse-horizontal-navigation-item-badge-content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 10px; |
||||
|
font-weight: 600; |
||||
|
white-space: nowrap; |
||||
|
height: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,109 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core'; |
||||
|
import { ReplaySubject, Subject } from 'rxjs'; |
||||
|
import { fuseAnimations } from '@fuse/animations'; |
||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; |
||||
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; |
||||
|
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-horizontal-navigation', |
||||
|
templateUrl : './horizontal.component.html', |
||||
|
styleUrls : ['./horizontal.component.scss'], |
||||
|
animations : fuseAnimations, |
||||
|
encapsulation : ViewEncapsulation.None, |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
exportAs : 'fuseHorizontalNavigation' |
||||
|
}) |
||||
|
export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy |
||||
|
{ |
||||
|
@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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On changes |
||||
|
* |
||||
|
* @param changes |
||||
|
*/ |
||||
|
ngOnChanges(changes: SimpleChanges): void |
||||
|
{ |
||||
|
// Navigation
|
||||
|
if ( 'navigation' in changes ) |
||||
|
{ |
||||
|
// Mark for check
|
||||
|
this._changeDetectorRef.markForCheck(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Make sure the name input is not an empty string
|
||||
|
if ( this.name === '' ) |
||||
|
{ |
||||
|
this.name = this._fuseUtilsService.randomId(); |
||||
|
} |
||||
|
|
||||
|
// Register the navigation component
|
||||
|
this._fuseNavigationService.registerComponent(this.name, this); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Deregister the navigation component from the registry
|
||||
|
this._fuseNavigationService.deregisterComponent(this.name); |
||||
|
|
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Refresh the component to apply the changes |
||||
|
*/ |
||||
|
refresh(): void |
||||
|
{ |
||||
|
// Mark for check
|
||||
|
this._changeDetectorRef.markForCheck(); |
||||
|
|
||||
|
// Execute the observable
|
||||
|
this.onRefreshed.next(true); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Track by function for ngFor loops |
||||
|
* |
||||
|
* @param index |
||||
|
* @param item |
||||
|
*/ |
||||
|
trackByFn(index: number, item: any): any |
||||
|
{ |
||||
|
return item.id || index; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
export * from '@fuse/components/navigation/public-api'; |
||||
@ -0,0 +1,55 @@ |
|||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { RouterModule } from '@angular/router'; |
||||
|
import { MatButtonModule } from '@angular/material/button'; |
||||
|
import { MatDividerModule } from '@angular/material/divider'; |
||||
|
import { MatIconModule } from '@angular/material/icon'; |
||||
|
import { MatMenuModule } from '@angular/material/menu'; |
||||
|
import { MatTooltipModule } from '@angular/material/tooltip'; |
||||
|
import { FuseScrollbarModule } from '@fuse/directives/scrollbar/public-api'; |
||||
|
import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component'; |
||||
|
import { FuseHorizontalNavigationBranchItemComponent } from '@fuse/components/navigation/horizontal/components/branch/branch.component'; |
||||
|
import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component'; |
||||
|
import { FuseHorizontalNavigationSpacerItemComponent } from '@fuse/components/navigation/horizontal/components/spacer/spacer.component'; |
||||
|
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; |
||||
|
import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component'; |
||||
|
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component'; |
||||
|
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component'; |
||||
|
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component'; |
||||
|
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component'; |
||||
|
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component'; |
||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [ |
||||
|
FuseHorizontalNavigationBasicItemComponent, |
||||
|
FuseHorizontalNavigationBranchItemComponent, |
||||
|
FuseHorizontalNavigationDividerItemComponent, |
||||
|
FuseHorizontalNavigationSpacerItemComponent, |
||||
|
FuseHorizontalNavigationComponent, |
||||
|
FuseVerticalNavigationAsideItemComponent, |
||||
|
FuseVerticalNavigationBasicItemComponent, |
||||
|
FuseVerticalNavigationCollapsableItemComponent, |
||||
|
FuseVerticalNavigationDividerItemComponent, |
||||
|
FuseVerticalNavigationGroupItemComponent, |
||||
|
FuseVerticalNavigationSpacerItemComponent, |
||||
|
FuseVerticalNavigationComponent |
||||
|
], |
||||
|
imports : [ |
||||
|
CommonModule, |
||||
|
RouterModule, |
||||
|
MatButtonModule, |
||||
|
MatDividerModule, |
||||
|
MatIconModule, |
||||
|
MatMenuModule, |
||||
|
MatTooltipModule, |
||||
|
FuseScrollbarModule |
||||
|
], |
||||
|
exports : [ |
||||
|
FuseHorizontalNavigationComponent, |
||||
|
FuseVerticalNavigationComponent |
||||
|
] |
||||
|
}) |
||||
|
export class FuseNavigationModule |
||||
|
{ |
||||
|
} |
||||
@ -0,0 +1,186 @@ |
|||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root' |
||||
|
}) |
||||
|
export class FuseNavigationService |
||||
|
{ |
||||
|
private _componentRegistry: Map<string, any> = new Map<string, any>(); |
||||
|
private _navigationStore: Map<string, FuseNavigationItem[]> = new Map<string, any>(); |
||||
|
|
||||
|
/** |
||||
|
* Constructor |
||||
|
*/ |
||||
|
constructor() |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Register navigation component |
||||
|
* |
||||
|
* @param name |
||||
|
* @param component |
||||
|
*/ |
||||
|
registerComponent(name: string, component: any): void |
||||
|
{ |
||||
|
this._componentRegistry.set(name, component); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Deregister navigation component |
||||
|
* |
||||
|
* @param name |
||||
|
*/ |
||||
|
deregisterComponent(name: string): void |
||||
|
{ |
||||
|
this._componentRegistry.delete(name); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Get navigation component from the registry |
||||
|
* |
||||
|
* @param name |
||||
|
*/ |
||||
|
getComponent<T>(name: string): T |
||||
|
{ |
||||
|
return this._componentRegistry.get(name); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Store the given navigation with the given key |
||||
|
* |
||||
|
* @param key |
||||
|
* @param navigation |
||||
|
*/ |
||||
|
storeNavigation(key: string, navigation: FuseNavigationItem[]): void |
||||
|
{ |
||||
|
// Add to the store
|
||||
|
this._navigationStore.set(key, navigation); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Get navigation from storage by key |
||||
|
* |
||||
|
* @param key |
||||
|
*/ |
||||
|
getNavigation(key: string): FuseNavigationItem[] |
||||
|
{ |
||||
|
return this._navigationStore.get(key) ?? []; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Delete the navigation from the storage |
||||
|
* |
||||
|
* @param key |
||||
|
*/ |
||||
|
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.`); |
||||
|
} |
||||
|
|
||||
|
// Delete from the storage
|
||||
|
this._navigationStore.delete(key); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Utility function that returns a flattened |
||||
|
* version of the given navigation array |
||||
|
* |
||||
|
* @param navigation |
||||
|
* @param flatNavigation |
||||
|
*/ |
||||
|
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 ) |
||||
|
{ |
||||
|
this.getFlatNavigation(item.children, flatNavigation); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return flatNavigation; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Utility function that returns the item |
||||
|
* with the given id from given navigation |
||||
|
* |
||||
|
* @param id |
||||
|
* @param navigation |
||||
|
*/ |
||||
|
getItem(id: string, navigation: FuseNavigationItem[]): FuseNavigationItem | null |
||||
|
{ |
||||
|
for ( const item of navigation ) |
||||
|
{ |
||||
|
if ( item.id === id ) |
||||
|
{ |
||||
|
return item; |
||||
|
} |
||||
|
|
||||
|
if ( item.children ) |
||||
|
{ |
||||
|
const childItem = this.getItem(id, item.children); |
||||
|
|
||||
|
if ( childItem ) |
||||
|
{ |
||||
|
return childItem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Utility function that returns the item's parent |
||||
|
* with the given id from given navigation |
||||
|
* |
||||
|
* @param id |
||||
|
* @param navigation |
||||
|
* @param parent |
||||
|
*/ |
||||
|
getItemParent( |
||||
|
id: string, |
||||
|
navigation: FuseNavigationItem[], |
||||
|
parent: FuseNavigationItem[] | FuseNavigationItem |
||||
|
): FuseNavigationItem[] | FuseNavigationItem | null |
||||
|
{ |
||||
|
for ( const item of navigation ) |
||||
|
{ |
||||
|
if ( item.id === id ) |
||||
|
{ |
||||
|
return parent; |
||||
|
} |
||||
|
|
||||
|
if ( item.children ) |
||||
|
{ |
||||
|
const childItem = this.getItemParent(id, item.children, item); |
||||
|
|
||||
|
if ( childItem ) |
||||
|
{ |
||||
|
return childItem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,57 @@ |
|||||
|
import { IsActiveMatchOptions } from '@angular/router'; |
||||
|
|
||||
|
export interface FuseNavigationItem |
||||
|
{ |
||||
|
id?: string; |
||||
|
title?: string; |
||||
|
subtitle?: string; |
||||
|
type: |
||||
|
| 'aside' |
||||
|
| 'basic' |
||||
|
| 'collapsable' |
||||
|
| 'divider' |
||||
|
| 'group' |
||||
|
| 'spacer'; |
||||
|
hidden?: (item: FuseNavigationItem) => boolean; |
||||
|
active?: boolean; |
||||
|
disabled?: boolean; |
||||
|
tooltip?: string; |
||||
|
link?: string; |
||||
|
externalLink?: boolean; |
||||
|
target?: |
||||
|
| '_blank' |
||||
|
| '_self' |
||||
|
| '_parent' |
||||
|
| '_top' |
||||
|
| string; |
||||
|
exactMatch?: boolean; |
||||
|
isActiveMatchOptions?: IsActiveMatchOptions; |
||||
|
function?: (item: FuseNavigationItem) => void; |
||||
|
classes?: { |
||||
|
title?: string; |
||||
|
subtitle?: string; |
||||
|
icon?: string; |
||||
|
wrapper?: string; |
||||
|
}; |
||||
|
icon?: string; |
||||
|
badge?: { |
||||
|
title?: string; |
||||
|
classes?: string; |
||||
|
}; |
||||
|
children?: FuseNavigationItem[]; |
||||
|
meta?: any; |
||||
|
} |
||||
|
|
||||
|
export type FuseVerticalNavigationAppearance = |
||||
|
| 'default' |
||||
|
| 'compact' |
||||
|
| 'dense' |
||||
|
| 'thin'; |
||||
|
|
||||
|
export type FuseVerticalNavigationMode = |
||||
|
| 'over' |
||||
|
| 'side'; |
||||
|
|
||||
|
export type FuseVerticalNavigationPosition = |
||||
|
| 'left' |
||||
|
| 'right'; |
||||
@ -0,0 +1,5 @@ |
|||||
|
export * from '@fuse/components/navigation/horizontal/horizontal.component'; |
||||
|
export * from '@fuse/components/navigation/vertical/vertical.component'; |
||||
|
export * from '@fuse/components/navigation/navigation.module'; |
||||
|
export * from '@fuse/components/navigation/navigation.service'; |
||||
|
export * from '@fuse/components/navigation/navigation.types'; |
||||
@ -0,0 +1,103 @@ |
|||||
|
<div |
||||
|
class="fuse-vertical-navigation-item-wrapper" |
||||
|
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" |
||||
|
[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 || ''"> |
||||
|
|
||||
|
<!-- Icon --> |
||||
|
<ng-container *ngIf="item.icon"> |
||||
|
<mat-icon |
||||
|
class="fuse-vertical-navigation-item-icon" |
||||
|
[ngClass]="item.classes?.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}} |
||||
|
</span> |
||||
|
</div> |
||||
|
<ng-container *ngIf="item.subtitle"> |
||||
|
<div class="fuse-vertical-navigation-item-subtitle"> |
||||
|
<span [ngClass]="item.classes?.subtitle"> |
||||
|
{{item.subtitle}} |
||||
|
</span> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 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}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<ng-container *ngIf="!skipChildren"> |
||||
|
|
||||
|
<div class="fuse-vertical-navigation-item-children"> |
||||
|
|
||||
|
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> |
||||
|
|
||||
|
<!-- Skip the hidden items --> |
||||
|
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
||||
|
|
||||
|
<!-- Basic --> |
||||
|
<ng-container *ngIf="item.type === 'basic'"> |
||||
|
<fuse-vertical-navigation-basic-item |
||||
|
[item]="item" |
||||
|
[name]="name"></fuse-vertical-navigation-basic-item> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- 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> |
||||
|
|
||||
|
</ng-container> |
||||
@ -0,0 +1,187 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; |
||||
|
import { NavigationEnd, Router } from '@angular/router'; |
||||
|
import { BooleanInput } from '@angular/cdk/coercion'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { filter, takeUntil } from 'rxjs/operators'; |
||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; |
||||
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; |
||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-vertical-navigation-aside-item', |
||||
|
templateUrl : './aside.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
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 */ |
||||
|
|
||||
|
@Input() activeItemId: string; |
||||
|
@Input() autoCollapse: boolean; |
||||
|
@Input() item: FuseNavigationItem; |
||||
|
@Input() name: string; |
||||
|
@Input() skipChildren: boolean; |
||||
|
|
||||
|
active: boolean = false; |
||||
|
private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent; |
||||
|
private _unsubscribeAll: Subject<any> = new Subject<any>(); |
||||
|
|
||||
|
/** |
||||
|
* Constructor |
||||
|
*/ |
||||
|
constructor( |
||||
|
private _changeDetectorRef: ChangeDetectorRef, |
||||
|
private _router: Router, |
||||
|
private _fuseNavigationService: FuseNavigationService |
||||
|
) |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Lifecycle hooks
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On changes |
||||
|
* |
||||
|
* @param changes |
||||
|
*/ |
||||
|
ngOnChanges(changes: SimpleChanges): void |
||||
|
{ |
||||
|
// Active item id
|
||||
|
if ( 'activeItemId' in changes ) |
||||
|
{ |
||||
|
// Mark if active
|
||||
|
this._markIfActive(this._router.url); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
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) |
||||
|
) |
||||
|
.subscribe((event: NavigationEnd) => { |
||||
|
|
||||
|
// Mark if active
|
||||
|
this._markIfActive(event.urlAfterRedirects); |
||||
|
}); |
||||
|
|
||||
|
// Get the parent navigation component
|
||||
|
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(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Track by function for ngFor loops |
||||
|
* |
||||
|
* @param index |
||||
|
* @param item |
||||
|
*/ |
||||
|
trackByFn(index: number, item: any): any |
||||
|
{ |
||||
|
return item.id || index; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Private methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Check if the given item has the given url |
||||
|
* in one of its children |
||||
|
* |
||||
|
* @param item |
||||
|
* @param currentUrl |
||||
|
* @private |
||||
|
*/ |
||||
|
private _hasActiveChild(item: FuseNavigationItem, currentUrl: string): boolean |
||||
|
{ |
||||
|
const children = item.children; |
||||
|
|
||||
|
if ( !children ) |
||||
|
{ |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
for ( const child of children ) |
||||
|
{ |
||||
|
if ( child.children ) |
||||
|
{ |
||||
|
if ( this._hasActiveChild(child, currentUrl) ) |
||||
|
{ |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Skip items other than '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) ) |
||||
|
{ |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Decide and mark if the item is active |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
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) ) |
||||
|
{ |
||||
|
this.active = true; |
||||
|
} |
||||
|
|
||||
|
// Mark for check
|
||||
|
this._changeDetectorRef.markForCheck(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,127 @@ |
|||||
|
<!-- Item wrapper --> |
||||
|
<div |
||||
|
class="fuse-vertical-navigation-item-wrapper" |
||||
|
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" |
||||
|
[ngClass]="item.classes?.wrapper"> |
||||
|
|
||||
|
<!-- Item with an internal link --> |
||||
|
<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}" |
||||
|
[routerLink]="[item.link]" |
||||
|
[routerLinkActive]="'fuse-vertical-navigation-item-active'" |
||||
|
[routerLinkActiveOptions]="isActiveMatchOptions" |
||||
|
[matTooltip]="item.tooltip || ''"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</a> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item with an external link --> |
||||
|
<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 || ''"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</a> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item with a function --> |
||||
|
<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 || ''" |
||||
|
(click)="item.function(item)"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item with an internal link and function --> |
||||
|
<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}" |
||||
|
[routerLink]="[item.link]" |
||||
|
[routerLinkActive]="'fuse-vertical-navigation-item-active'" |
||||
|
[routerLinkActiveOptions]="isActiveMatchOptions" |
||||
|
[matTooltip]="item.tooltip || ''" |
||||
|
(click)="item.function(item)"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</a> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item with an external link and function --> |
||||
|
<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)"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</a> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item with a no link and no function --> |
||||
|
<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 || ''"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Item is disabled --> |
||||
|
<ng-container *ngIf="item.disabled"> |
||||
|
<div |
||||
|
class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled" |
||||
|
[matTooltip]="item.tooltip || ''"> |
||||
|
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<!-- Item template --> |
||||
|
<ng-template #itemTemplate> |
||||
|
|
||||
|
<!-- Icon --> |
||||
|
<ng-container *ngIf="item.icon"> |
||||
|
<mat-icon |
||||
|
class="fuse-vertical-navigation-item-icon" |
||||
|
[ngClass]="item.classes?.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}} |
||||
|
</span> |
||||
|
</div> |
||||
|
<ng-container *ngIf="item.subtitle"> |
||||
|
<div class="fuse-vertical-navigation-item-subtitle"> |
||||
|
<span [ngClass]="item.classes?.subtitle"> |
||||
|
{{item.subtitle}} |
||||
|
</span> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 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}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
</ng-template> |
||||
@ -0,0 +1,82 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { IsActiveMatchOptions } from '@angular/router'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; |
||||
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; |
||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; |
||||
|
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-vertical-navigation-basic-item', |
||||
|
templateUrl : './basic.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy |
||||
|
{ |
||||
|
@Input() item: FuseNavigationItem; |
||||
|
@Input() name: string; |
||||
|
|
||||
|
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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Set the "isActiveMatchOptions" either from item's
|
||||
|
// "isActiveMatchOptions" or the equivalent form of
|
||||
|
// item's "exactMatch" option
|
||||
|
this.isActiveMatchOptions = |
||||
|
this.item.isActiveMatchOptions ?? this.item.exactMatch |
||||
|
? this._fuseUtilsService.exactMatchOptions |
||||
|
: this._fuseUtilsService.subsetMatchOptions; |
||||
|
|
||||
|
// Get the parent navigation component
|
||||
|
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(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,106 @@ |
|||||
|
<div |
||||
|
class="fuse-vertical-navigation-item-wrapper" |
||||
|
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" |
||||
|
[ngClass]="item.classes?.wrapper"> |
||||
|
|
||||
|
<div |
||||
|
class="fuse-vertical-navigation-item" |
||||
|
[ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}" |
||||
|
[matTooltip]="item.tooltip || ''" |
||||
|
(click)="toggleCollapsable()"> |
||||
|
|
||||
|
<!-- Icon --> |
||||
|
<ng-container *ngIf="item.icon"> |
||||
|
<mat-icon |
||||
|
class="fuse-vertical-navigation-item-icon" |
||||
|
[ngClass]="item.classes?.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}} |
||||
|
</span> |
||||
|
</div> |
||||
|
<ng-container *ngIf="item.subtitle"> |
||||
|
<div class="fuse-vertical-navigation-item-subtitle"> |
||||
|
<span [ngClass]="item.classes?.subtitle"> |
||||
|
{{item.subtitle}} |
||||
|
</span> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 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}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Arrow --> |
||||
|
<mat-icon |
||||
|
class="fuse-vertical-navigation-item-arrow icon-size-4" |
||||
|
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
class="fuse-vertical-navigation-item-children" |
||||
|
*ngIf="!isCollapsed" |
||||
|
@expandCollapse> |
||||
|
|
||||
|
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> |
||||
|
|
||||
|
<!-- Skip the hidden items --> |
||||
|
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
||||
|
|
||||
|
<!-- Basic --> |
||||
|
<ng-container *ngIf="item.type === 'basic'"> |
||||
|
<fuse-vertical-navigation-basic-item |
||||
|
[item]="item" |
||||
|
[name]="name"></fuse-vertical-navigation-basic-item> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- 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> |
||||
@ -0,0 +1,346 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { NavigationEnd, Router } from '@angular/router'; |
||||
|
import { BooleanInput } from '@angular/cdk/coercion'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { filter, takeUntil } from 'rxjs/operators'; |
||||
|
import { fuseAnimations } from '@fuse/animations'; |
||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; |
||||
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; |
||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-vertical-navigation-collapsable-item', |
||||
|
templateUrl : './collapsable.component.html', |
||||
|
animations : fuseAnimations, |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy |
||||
|
{ |
||||
|
/* eslint-disable @typescript-eslint/naming-convention */ |
||||
|
static ngAcceptInputType_autoCollapse: BooleanInput; |
||||
|
/* eslint-enable @typescript-eslint/naming-convention */ |
||||
|
|
||||
|
@Input() autoCollapse: boolean; |
||||
|
@Input() item: FuseNavigationItem; |
||||
|
@Input() name: string; |
||||
|
|
||||
|
isCollapsed: boolean = true; |
||||
|
isExpanded: boolean = false; |
||||
|
private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent; |
||||
|
private _unsubscribeAll: Subject<any> = new Subject<any>(); |
||||
|
|
||||
|
/** |
||||
|
* Constructor |
||||
|
*/ |
||||
|
constructor( |
||||
|
private _changeDetectorRef: ChangeDetectorRef, |
||||
|
private _router: Router, |
||||
|
private _fuseNavigationService: FuseNavigationService |
||||
|
) |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Accessors
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Host binding for component classes |
||||
|
*/ |
||||
|
@HostBinding('class') get classList(): any |
||||
|
{ |
||||
|
return { |
||||
|
'fuse-vertical-navigation-item-collapsed': this.isCollapsed, |
||||
|
'fuse-vertical-navigation-item-expanded' : this.isExpanded |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Lifecycle hooks
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Get the parent navigation component
|
||||
|
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) ) |
||||
|
{ |
||||
|
this.expand(); |
||||
|
} |
||||
|
// Otherwise...
|
||||
|
else |
||||
|
{ |
||||
|
// If the autoCollapse is on, collapse...
|
||||
|
if ( this.autoCollapse ) |
||||
|
{ |
||||
|
this.collapse(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Listen for the onCollapsableItemCollapsed from the service
|
||||
|
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed |
||||
|
.pipe(takeUntil(this._unsubscribeAll)) |
||||
|
.subscribe((collapsedItem) => { |
||||
|
|
||||
|
// Check if the collapsed item is null
|
||||
|
if ( collapsedItem === null ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Collapse if this is a children of the collapsed item
|
||||
|
if ( this._isChildrenOf(collapsedItem, this.item) ) |
||||
|
{ |
||||
|
this.collapse(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// Listen for the onCollapsableItemExpanded from the service if the autoCollapse is on
|
||||
|
if ( this.autoCollapse ) |
||||
|
{ |
||||
|
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded |
||||
|
.pipe(takeUntil(this._unsubscribeAll)) |
||||
|
.subscribe((expandedItem) => { |
||||
|
|
||||
|
// Check if the expanded item is null
|
||||
|
if ( expandedItem === null ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Check if this is a parent of the expanded item
|
||||
|
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) ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Check if this is the expanded item
|
||||
|
if ( this.item === expandedItem ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// If none of the above conditions are matched, collapse this item
|
||||
|
this.collapse(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// Attach a listener to the NavigationEnd event
|
||||
|
this._router.events |
||||
|
.pipe( |
||||
|
filter((event): event is NavigationEnd => event instanceof NavigationEnd), |
||||
|
takeUntil(this._unsubscribeAll) |
||||
|
) |
||||
|
.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) ) |
||||
|
{ |
||||
|
this.expand(); |
||||
|
} |
||||
|
// Otherwise...
|
||||
|
else |
||||
|
{ |
||||
|
// If the autoCollapse is on, collapse...
|
||||
|
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(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Collapse |
||||
|
*/ |
||||
|
collapse(): void |
||||
|
{ |
||||
|
// Return if the item is disabled
|
||||
|
if ( this.item.disabled ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Return if the item is already collapsed
|
||||
|
if ( this.isCollapsed ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Collapse it
|
||||
|
this.isCollapsed = true; |
||||
|
this.isExpanded = !this.isCollapsed; |
||||
|
|
||||
|
// Mark for check
|
||||
|
this._changeDetectorRef.markForCheck(); |
||||
|
|
||||
|
// Execute the observable
|
||||
|
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed.next(this.item); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Expand |
||||
|
*/ |
||||
|
expand(): void |
||||
|
{ |
||||
|
// Return if the item is disabled
|
||||
|
if ( this.item.disabled ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Return if the item is already expanded
|
||||
|
if ( !this.isCollapsed ) |
||||
|
{ |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Expand it
|
||||
|
this.isCollapsed = false; |
||||
|
this.isExpanded = !this.isCollapsed; |
||||
|
|
||||
|
// Mark for check
|
||||
|
this._changeDetectorRef.markForCheck(); |
||||
|
|
||||
|
// Execute the observable
|
||||
|
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded.next(this.item); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Toggle collapsable |
||||
|
*/ |
||||
|
toggleCollapsable(): void |
||||
|
{ |
||||
|
// Toggle collapse/expand
|
||||
|
if ( this.isCollapsed ) |
||||
|
{ |
||||
|
this.expand(); |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
this.collapse(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Track by function for ngFor loops |
||||
|
* |
||||
|
* @param index |
||||
|
* @param item |
||||
|
*/ |
||||
|
trackByFn(index: number, item: any): any |
||||
|
{ |
||||
|
return item.id || index; |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Private methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Check if the given item has the given url |
||||
|
* in one of its children |
||||
|
* |
||||
|
* @param item |
||||
|
* @param currentUrl |
||||
|
* @private |
||||
|
*/ |
||||
|
private _hasActiveChild(item: FuseNavigationItem, currentUrl: string): boolean |
||||
|
{ |
||||
|
const children = item.children; |
||||
|
|
||||
|
if ( !children ) |
||||
|
{ |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
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) ) |
||||
|
{ |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Check if this is a children |
||||
|
* of the given item |
||||
|
* |
||||
|
* @param parent |
||||
|
* @param item |
||||
|
* @private |
||||
|
*/ |
||||
|
private _isChildrenOf(parent: FuseNavigationItem, item: FuseNavigationItem): boolean |
||||
|
{ |
||||
|
const children = parent.children; |
||||
|
|
||||
|
if ( !children ) |
||||
|
{ |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
if ( children.indexOf(item) > -1 ) |
||||
|
{ |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
for ( const child of children ) |
||||
|
{ |
||||
|
if ( child.children ) |
||||
|
{ |
||||
|
if ( this._isChildrenOf(child, item) ) |
||||
|
{ |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
<!-- Divider --> |
||||
|
<div |
||||
|
class="fuse-vertical-navigation-item-wrapper divider" |
||||
|
[ngClass]="item.classes?.wrapper"></div> |
||||
@ -0,0 +1,62 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; |
||||
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; |
||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-vertical-navigation-divider-item', |
||||
|
templateUrl : './divider.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy |
||||
|
{ |
||||
|
@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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Get the parent navigation component
|
||||
|
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(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,91 @@ |
|||||
|
<!-- Item wrapper --> |
||||
|
<div |
||||
|
class="fuse-vertical-navigation-item-wrapper" |
||||
|
[class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle" |
||||
|
[ngClass]="item.classes?.wrapper"> |
||||
|
|
||||
|
<div class="fuse-vertical-navigation-item"> |
||||
|
|
||||
|
<!-- Icon --> |
||||
|
<ng-container *ngIf="item.icon"> |
||||
|
<mat-icon |
||||
|
class="fuse-vertical-navigation-item-icon" |
||||
|
[ngClass]="item.classes?.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}} |
||||
|
</span> |
||||
|
</div> |
||||
|
<ng-container *ngIf="item.subtitle"> |
||||
|
<div class="fuse-vertical-navigation-item-subtitle"> |
||||
|
<span [ngClass]="item.classes?.subtitle"> |
||||
|
{{item.subtitle}} |
||||
|
</span> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 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}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<ng-container *ngFor="let item of item.children; trackBy: trackByFn"> |
||||
|
|
||||
|
<!-- Skip the hidden items --> |
||||
|
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"> |
||||
|
|
||||
|
<!-- Basic --> |
||||
|
<ng-container *ngIf="item.type === 'basic'"> |
||||
|
<fuse-vertical-navigation-basic-item |
||||
|
[item]="item" |
||||
|
[name]="name"></fuse-vertical-navigation-basic-item> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- 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> |
||||
@ -0,0 +1,83 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { BooleanInput } from '@angular/cdk/coercion'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; |
||||
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; |
||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-vertical-navigation-group-item', |
||||
|
templateUrl : './group.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy |
||||
|
{ |
||||
|
/* eslint-disable @typescript-eslint/naming-convention */ |
||||
|
static ngAcceptInputType_autoCollapse: BooleanInput; |
||||
|
/* eslint-enable @typescript-eslint/naming-convention */ |
||||
|
|
||||
|
@Input() autoCollapse: boolean; |
||||
|
@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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Get the parent navigation component
|
||||
|
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(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
// @ Public methods
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* Track by function for ngFor loops |
||||
|
* |
||||
|
* @param index |
||||
|
* @param item |
||||
|
*/ |
||||
|
trackByFn(index: number, item: any): any |
||||
|
{ |
||||
|
return item.id || index; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
<!-- Spacer --> |
||||
|
<div |
||||
|
class="fuse-vertical-navigation-item-wrapper" |
||||
|
[ngClass]="item.classes?.wrapper"></div> |
||||
@ -0,0 +1,62 @@ |
|||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; |
||||
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; |
||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector : 'fuse-vertical-navigation-spacer-item', |
||||
|
templateUrl : './spacer.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy |
||||
|
{ |
||||
|
@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
|
||||
|
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
||||
|
/** |
||||
|
* On init |
||||
|
*/ |
||||
|
ngOnInit(): void |
||||
|
{ |
||||
|
// Get the parent navigation component
|
||||
|
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(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* On destroy |
||||
|
*/ |
||||
|
ngOnDestroy(): void |
||||
|
{ |
||||
|
// Unsubscribe from all subscriptions
|
||||
|
this._unsubscribeAll.next(); |
||||
|
this._unsubscribeAll.complete(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,110 @@ |
|||||
|
/* Variables */ |
||||
|
$fuse-vertical-navigation-compact-width: 112; |
||||
|
|
||||
|
fuse-vertical-navigation { |
||||
|
|
||||
|
/* Compact appearance overrides */ |
||||
|
&.fuse-vertical-navigation-appearance-compact { |
||||
|
width: #{$fuse-vertical-navigation-compact-width}px; |
||||
|
min-width: #{$fuse-vertical-navigation-compact-width}px; |
||||
|
max-width: #{$fuse-vertical-navigation-compact-width}px; |
||||
|
|
||||
|
/* Left positioned */ |
||||
|
&.fuse-vertical-navigation-position-left { |
||||
|
|
||||
|
/* Side mode */ |
||||
|
&.fuse-vertical-navigation-mode-side { |
||||
|
margin-left: -#{$fuse-vertical-navigation-compact-width}px; |
||||
|
} |
||||
|
|
||||
|
/* Opened */ |
||||
|
&.fuse-vertical-navigation-opened { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Right positioned */ |
||||
|
&.fuse-vertical-navigation-position-right { |
||||
|
|
||||
|
/* Side mode */ |
||||
|
&.fuse-vertical-navigation-mode-side { |
||||
|
margin-right: -#{$fuse-vertical-navigation-compact-width}px; |
||||
|
} |
||||
|
|
||||
|
/* Opened */ |
||||
|
&.fuse-vertical-navigation-opened { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
/* Aside wrapper */ |
||||
|
.fuse-vertical-navigation-aside-wrapper { |
||||
|
left: auto; |
||||
|
right: #{$fuse-vertical-navigation-compact-width}px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 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; |
||||
|
|
||||
|
.fuse-vertical-navigation-item { |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
padding: 12px; |
||||
|
border-radius: 6px; |
||||
|
|
||||
|
.fuse-vertical-navigation-item-icon { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-title-wrapper { |
||||
|
margin-top: 8px; |
||||
|
|
||||
|
.fuse-vertical-navigation-item-title { |
||||
|
font-size: 12px; |
||||
|
font-weight: 500; |
||||
|
text-align: center; |
||||
|
line-height: 16px; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-subtitle { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-badge { |
||||
|
position: absolute; |
||||
|
top: 12px; |
||||
|
left: 64px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
> fuse-vertical-navigation-collapsable-item { |
||||
|
display: none |
||||
|
} |
||||
|
|
||||
|
> fuse-vertical-navigation-group-item { |
||||
|
|
||||
|
> .fuse-vertical-navigation-item-wrapper { |
||||
|
display: none |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Aside wrapper */ |
||||
|
.fuse-vertical-navigation-aside-wrapper { |
||||
|
left: #{$fuse-vertical-navigation-compact-width}px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,592 @@ |
|||||
|
/* Variables */ |
||||
|
$fuse-vertical-navigation-width: 280; |
||||
|
|
||||
|
fuse-vertical-navigation { |
||||
|
position: sticky; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
flex: 1 0 auto; |
||||
|
top: 0; |
||||
|
width: #{$fuse-vertical-navigation-width}px; |
||||
|
min-width: #{$fuse-vertical-navigation-width}px; |
||||
|
max-width: #{$fuse-vertical-navigation-width}px; |
||||
|
height: 100vh; |
||||
|
min-height: 100vh; |
||||
|
max-height: 100vh; |
||||
|
z-index: 200; |
||||
|
|
||||
|
/* ----------------------------------------------------------------------------------------------------- */ |
||||
|
/* @ Navigation Drawer |
||||
|
/* ----------------------------------------------------------------------------------------------------- */ |
||||
|
|
||||
|
/* Animations */ |
||||
|
&.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; |
||||
|
|
||||
|
/* Wrapper */ |
||||
|
.fuse-vertical-navigation-wrapper { |
||||
|
transition-duration: 400ms; |
||||
|
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); |
||||
|
transition-property: width, max-width, min-width; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Over mode */ |
||||
|
&.fuse-vertical-navigation-mode-over { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
|
||||
|
/* Left position */ |
||||
|
&.fuse-vertical-navigation-position-left { |
||||
|
|
||||
|
/* Side mode */ |
||||
|
&.fuse-vertical-navigation-mode-side { |
||||
|
margin-left: -#{$fuse-vertical-navigation-width}px; |
||||
|
|
||||
|
&.fuse-vertical-navigation-opened { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Over mode */ |
||||
|
&.fuse-vertical-navigation-mode-over { |
||||
|
left: 0; |
||||
|
transform: translate3d(-100%, 0, 0); |
||||
|
|
||||
|
&.fuse-vertical-navigation-opened { |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Wrapper */ |
||||
|
.fuse-vertical-navigation-wrapper { |
||||
|
left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Right position */ |
||||
|
&.fuse-vertical-navigation-position-right { |
||||
|
|
||||
|
/* Side mode */ |
||||
|
&.fuse-vertical-navigation-mode-side { |
||||
|
margin-right: -#{$fuse-vertical-navigation-width}px; |
||||
|
|
||||
|
&.fuse-vertical-navigation-opened { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Over mode */ |
||||
|
&.fuse-vertical-navigation-mode-over { |
||||
|
right: 0; |
||||
|
transform: translate3d(100%, 0, 0); |
||||
|
|
||||
|
&.fuse-vertical-navigation-opened { |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Wrapper */ |
||||
|
.fuse-vertical-navigation-wrapper { |
||||
|
right: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Inner mode */ |
||||
|
&.fuse-vertical-navigation-inner { |
||||
|
position: relative; |
||||
|
width: auto; |
||||
|
min-width: 0; |
||||
|
max-width: none; |
||||
|
height: auto; |
||||
|
min-height: 0; |
||||
|
max-height: none; |
||||
|
box-shadow: none; |
||||
|
|
||||
|
.fuse-vertical-navigation-wrapper { |
||||
|
position: relative; |
||||
|
overflow: visible; |
||||
|
height: auto; |
||||
|
|
||||
|
.fuse-vertical-navigation-content { |
||||
|
overflow: visible !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Wrapper */ |
||||
|
.fuse-vertical-navigation-wrapper { |
||||
|
position: absolute; |
||||
|
display: flex; |
||||
|
flex: 1 1 auto; |
||||
|
flex-direction: column; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
z-index: 10; |
||||
|
background: inherit; |
||||
|
box-shadow: inset -1px 0 0 var(--fuse-border); |
||||
|
|
||||
|
/* Header */ |
||||
|
.fuse-vertical-navigation-header { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/* Content */ |
||||
|
.fuse-vertical-navigation-content { |
||||
|
flex: 1 1 auto; |
||||
|
overflow-x: hidden; |
||||
|
overflow-y: auto; |
||||
|
overscroll-behavior: contain; |
||||
|
|
||||
|
/* Divider */ |
||||
|
> fuse-vertical-navigation-divider-item { |
||||
|
margin: 24px 0; |
||||
|
} |
||||
|
|
||||
|
/* Group */ |
||||
|
> fuse-vertical-navigation-group-item { |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Footer */ |
||||
|
.fuse-vertical-navigation-footer { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Aside wrapper */ |
||||
|
.fuse-vertical-navigation-aside-wrapper { |
||||
|
position: absolute; |
||||
|
display: flex; |
||||
|
flex: 1 1 auto; |
||||
|
flex-direction: column; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
left: #{$fuse-vertical-navigation-width}px; |
||||
|
width: #{$fuse-vertical-navigation-width}px; |
||||
|
height: 100%; |
||||
|
z-index: 5; |
||||
|
overflow-x: hidden; |
||||
|
overflow-y: auto; |
||||
|
-webkit-overflow-scrolling: touch; |
||||
|
transition-duration: 400ms; |
||||
|
transition-property: left, right; |
||||
|
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); |
||||
|
background: inherit; |
||||
|
|
||||
|
> fuse-vertical-navigation-aside-item { |
||||
|
padding: 24px 0; |
||||
|
|
||||
|
/* First item of the aside */ |
||||
|
> .fuse-vertical-navigation-item-wrapper { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.fuse-vertical-navigation-position-right { |
||||
|
|
||||
|
.fuse-vertical-navigation-aside-wrapper { |
||||
|
left: auto; |
||||
|
right: #{$fuse-vertical-navigation-width}px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* ----------------------------------------------------------------------------------------------------- */ |
||||
|
/* @ Navigation Items |
||||
|
/* ----------------------------------------------------------------------------------------------------- */ |
||||
|
|
||||
|
/* Navigation items common */ |
||||
|
fuse-vertical-navigation-aside-item, |
||||
|
fuse-vertical-navigation-basic-item, |
||||
|
fuse-vertical-navigation-collapsable-item, |
||||
|
fuse-vertical-navigation-divider-item, |
||||
|
fuse-vertical-navigation-group-item, |
||||
|
fuse-vertical-navigation-spacer-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
flex: 1 0 auto; |
||||
|
user-select: none; |
||||
|
|
||||
|
.fuse-vertical-navigation-item-wrapper { |
||||
|
|
||||
|
.fuse-vertical-navigation-item { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
padding: 10px 16px; |
||||
|
font-size: 13px; |
||||
|
font-weight: 500; |
||||
|
line-height: 20px; |
||||
|
text-decoration: none; |
||||
|
border-radius: 6px; |
||||
|
|
||||
|
/* Disabled state */ |
||||
|
&.fuse-vertical-navigation-item-disabled { |
||||
|
cursor: default; |
||||
|
opacity: 0.4; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-icon { |
||||
|
margin-right: 16px; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-title-wrapper { |
||||
|
|
||||
|
.fuse-vertical-navigation-item-subtitle { |
||||
|
font-size: 11px; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-badge { |
||||
|
margin-left: auto; |
||||
|
|
||||
|
.fuse-vertical-navigation-item-badge-content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 10px; |
||||
|
font-weight: 600; |
||||
|
white-space: nowrap; |
||||
|
height: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Aside, Basic, Collapsable, Group */ |
||||
|
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 { |
||||
|
margin: 0 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Aside, Basic, Collapsable */ |
||||
|
fuse-vertical-navigation-aside-item, |
||||
|
fuse-vertical-navigation-basic-item, |
||||
|
fuse-vertical-navigation-collapsable-item { |
||||
|
margin-bottom: 4px; |
||||
|
|
||||
|
.fuse-vertical-navigation-item { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-arrow { |
||||
|
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); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.fuse-vertical-navigation-item-expanded { |
||||
|
|
||||
|
> .fuse-vertical-navigation-item-wrapper { |
||||
|
|
||||
|
.fuse-vertical-navigation-item { |
||||
|
|
||||
|
.fuse-vertical-navigation-item-arrow { |
||||
|
transform: rotate(90deg); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
> .fuse-vertical-navigation-item-children { |
||||
|
margin-top: 6px; |
||||
|
|
||||
|
> *:last-child { |
||||
|
padding-bottom: 6px; |
||||
|
|
||||
|
> .fuse-vertical-navigation-item-children { |
||||
|
|
||||
|
> *:last-child { |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item { |
||||
|
padding: 10px 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 1st level */ |
||||
|
.fuse-vertical-navigation-item-children { |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.fuse-vertical-navigation-item { |
||||
|
padding-left: 56px; |
||||
|
} |
||||
|
|
||||
|
/* 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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Divider */ |
||||
|
fuse-vertical-navigation-divider-item { |
||||
|
margin: 12px 0; |
||||
|
|
||||
|
.fuse-vertical-navigation-item-wrapper { |
||||
|
height: 1px; |
||||
|
box-shadow: 0 1px 0 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 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; |
||||
|
letter-spacing: 0.05em; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Spacer */ |
||||
|
fuse-vertical-navigation-spacer-item { |
||||
|
margin: 6px 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* ----------------------------------------------------------------------------------------------------- */ |
||||
|
/* @ Overlay |
||||
|
/* ----------------------------------------------------------------------------------------------------- */ |
||||
|
.fuse-vertical-navigation-overlay { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 170; |
||||
|
opacity: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
|
||||
|
+ .fuse-vertical-navigation-aside-overlay { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* ----------------------------------------------------------------------------------------------------- */ |
||||
|
/* @ Aside overlay |
||||
|
/* ----------------------------------------------------------------------------------------------------- */ |
||||
|
.fuse-vertical-navigation-aside-overlay { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 169; |
||||
|
opacity: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.3); |
||||
|
} |
||||
|
|
||||
|
/* ----------------------------------------------------------------------------------------------------- */ |
||||
|
/* @ Navigation Items Colors |
||||
|
/* ----------------------------------------------------------------------------------------------------- */ |
||||
|
|
||||
|
/* Navigation items common */ |
||||
|
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; |
||||
|
|
||||
|
.fuse-vertical-navigation-item-icon { |
||||
|
@apply text-current opacity-60; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-title-wrapper { |
||||
|
|
||||
|
.fuse-vertical-navigation-item-title { |
||||
|
@apply text-current opacity-80; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-subtitle { |
||||
|
@apply text-current opacity-50; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Aside, Basic, Collapsable */ |
||||
|
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; |
||||
|
|
||||
|
.fuse-vertical-navigation-item-icon { |
||||
|
@apply opacity-100; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-title { |
||||
|
@apply opacity-100; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-subtitle { |
||||
|
@apply opacity-100; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Hover state */ |
||||
|
&: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; |
||||
|
|
||||
|
.fuse-vertical-navigation-item-icon { |
||||
|
@apply opacity-100; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-title, |
||||
|
.fuse-vertical-navigation-item-arrow { |
||||
|
@apply opacity-100; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-subtitle { |
||||
|
@apply opacity-100; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 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; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-title, |
||||
|
.fuse-vertical-navigation-item-arrow { |
||||
|
@apply opacity-100; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-subtitle { |
||||
|
@apply opacity-100; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 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 opacity-100 text-primary-600 dark:text-primary-400; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,189 @@ |
|||||
|
/* Variables */ |
||||
|
$fuse-vertical-navigation-width: 280; |
||||
|
$fuse-vertical-navigation-dense-width: 80; |
||||
|
|
||||
|
fuse-vertical-navigation { |
||||
|
|
||||
|
/* Dense appearance overrides */ |
||||
|
&.fuse-vertical-navigation-appearance-dense { |
||||
|
|
||||
|
&:not(.fuse-vertical-navigation-mode-over) { |
||||
|
width: #{$fuse-vertical-navigation-dense-width}px; |
||||
|
min-width: #{$fuse-vertical-navigation-dense-width}px; |
||||
|
max-width: #{$fuse-vertical-navigation-dense-width}px; |
||||
|
|
||||
|
/* Left positioned */ |
||||
|
&.fuse-vertical-navigation-position-left { |
||||
|
|
||||
|
/* Side mode */ |
||||
|
&.fuse-vertical-navigation-mode-side { |
||||
|
margin-left: -#{$fuse-vertical-navigation-dense-width}px; |
||||
|
} |
||||
|
|
||||
|
/* Opened */ |
||||
|
&.fuse-vertical-navigation-opened { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Right positioned */ |
||||
|
&.fuse-vertical-navigation-position-right { |
||||
|
|
||||
|
/* Side mode */ |
||||
|
&.fuse-vertical-navigation-mode-side { |
||||
|
margin-right: -#{$fuse-vertical-navigation-dense-width}px; |
||||
|
} |
||||
|
|
||||
|
/* Opened */ |
||||
|
&.fuse-vertical-navigation-opened { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
/* Aside wrapper */ |
||||
|
.fuse-vertical-navigation-aside-wrapper { |
||||
|
left: auto; |
||||
|
right: #{$fuse-vertical-navigation-dense-width}px; |
||||
|
} |
||||
|
|
||||
|
&.fuse-vertical-navigation-hover { |
||||
|
|
||||
|
.fuse-vertical-navigation-aside-wrapper { |
||||
|
left: auto; |
||||
|
right: #{$fuse-vertical-navigation-width}px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 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: #{$fuse-vertical-navigation-width}px - 24px; |
||||
|
min-width: #{$fuse-vertical-navigation-width}px - 24px; |
||||
|
max-width: #{$fuse-vertical-navigation-width}px - 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); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
fuse-vertical-navigation-group-item { |
||||
|
|
||||
|
&:first-of-type { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&: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; |
||||
|
|
||||
|
.fuse-vertical-navigation-item-arrow, |
||||
|
.fuse-vertical-navigation-item-badge, |
||||
|
.fuse-vertical-navigation-item-title-wrapper { |
||||
|
white-space: nowrap; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
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; |
||||
|
top: 20px; |
||||
|
width: 23px; |
||||
|
border-top-width: 2px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Aside wrapper */ |
||||
|
.fuse-vertical-navigation-aside-wrapper { |
||||
|
left: #{$fuse-vertical-navigation-dense-width}px; |
||||
|
} |
||||
|
|
||||
|
/* Hover */ |
||||
|
&.fuse-vertical-navigation-hover { |
||||
|
|
||||
|
.fuse-vertical-navigation-wrapper { |
||||
|
width: #{$fuse-vertical-navigation-width}px; |
||||
|
|
||||
|
.fuse-vertical-navigation-content { |
||||
|
|
||||
|
.fuse-vertical-navigation-item-wrapper { |
||||
|
|
||||
|
.fuse-vertical-navigation-item { |
||||
|
|
||||
|
.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-fill-mode: forwards; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-aside-wrapper { |
||||
|
left: #{$fuse-vertical-navigation-width}px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes removeWhiteSpaceNoWrap { |
||||
|
0% { |
||||
|
white-space: nowrap |
||||
|
} |
||||
|
99% { |
||||
|
white-space: nowrap |
||||
|
} |
||||
|
100% { |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,97 @@ |
|||||
|
/* Variables */ |
||||
|
$fuse-vertical-navigation-thin-width: 80; |
||||
|
|
||||
|
fuse-vertical-navigation { |
||||
|
|
||||
|
/* Thin appearance overrides */ |
||||
|
&.fuse-vertical-navigation-appearance-thin { |
||||
|
width: #{$fuse-vertical-navigation-thin-width}px; |
||||
|
min-width: #{$fuse-vertical-navigation-thin-width}px; |
||||
|
max-width: #{$fuse-vertical-navigation-thin-width}px; |
||||
|
|
||||
|
/* Left positioned */ |
||||
|
&.fuse-vertical-navigation-position-left { |
||||
|
|
||||
|
&.fuse-vertical-navigation-mode-side { |
||||
|
margin-left: -#{$fuse-vertical-navigation-thin-width}px; |
||||
|
} |
||||
|
|
||||
|
&.fuse-vertical-navigation-opened { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Right positioned */ |
||||
|
&.fuse-vertical-navigation-position-right { |
||||
|
|
||||
|
&.fuse-vertical-navigation-mode-side { |
||||
|
margin-right: -#{$fuse-vertical-navigation-thin-width}px; |
||||
|
} |
||||
|
|
||||
|
&.fuse-vertical-navigation-opened { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-aside-wrapper { |
||||
|
left: auto; |
||||
|
right: #{$fuse-vertical-navigation-thin-width}px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Wrapper */ |
||||
|
.fuse-vertical-navigation-wrapper { |
||||
|
|
||||
|
/* Content */ |
||||
|
.fuse-vertical-navigation-content { |
||||
|
|
||||
|
> fuse-vertical-navigation-aside-item, |
||||
|
> fuse-vertical-navigation-basic-item { |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
height: 64px; |
||||
|
min-height: 64px; |
||||
|
max-height: 64px; |
||||
|
padding: 0 16px; |
||||
|
|
||||
|
.fuse-vertical-navigation-item-wrapper { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.fuse-vertical-navigation-item { |
||||
|
justify-content: center; |
||||
|
padding: 12px; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
.fuse-vertical-navigation-item-icon { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.fuse-vertical-navigation-item-arrow, |
||||
|
.fuse-vertical-navigation-item-badge-content, |
||||
|
.fuse-vertical-navigation-item-title-wrapper { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
> fuse-vertical-navigation-collapsable-item { |
||||
|
display: none |
||||
|
} |
||||
|
|
||||
|
> fuse-vertical-navigation-group-item { |
||||
|
|
||||
|
> .fuse-vertical-navigation-item-wrapper { |
||||
|
display: none |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Aside wrapper */ |
||||
|
.fuse-vertical-navigation-aside-wrapper { |
||||
|
left: #{$fuse-vertical-navigation-thin-width}px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue