├── .browserslistrc ├── .editorconfig ├── .gitignore ├── .idea ├── angular-admin-lte.iml ├── codeStyles │ ├── Project.xml │ └── codeStyleConfig.xml ├── encodings.xml ├── inspectionProfiles │ └── Project_Default.xml ├── misc.xml ├── modules.xml ├── vcs.xml └── webResources.xml ├── .npmrc ├── .travis.yml ├── LICENSE ├── README.md ├── angular.json ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.json ├── karma.conf.js ├── library └── angular-admin-lte │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── src │ ├── index.ts │ ├── lib │ │ ├── accordion │ │ │ ├── accordion.component.html │ │ │ ├── accordion.component.ts │ │ │ ├── accordion.directive.ts │ │ │ ├── accordion.module.ts │ │ │ └── index.ts │ │ ├── alert │ │ │ ├── alert.component.css │ │ │ ├── alert.component.html │ │ │ ├── alert.component.ts │ │ │ ├── alert.module.ts │ │ │ └── index.ts │ │ ├── animations │ │ │ ├── animations.directive.ts │ │ │ ├── animations.interface.ts │ │ │ ├── animations.module.ts │ │ │ └── index.ts │ │ ├── box-info │ │ │ ├── box-info.component.css │ │ │ ├── box-info.component.html │ │ │ ├── box-info.component.ts │ │ │ ├── box-info.directive.ts │ │ │ ├── box-info.module.ts │ │ │ └── index.ts │ │ ├── box-small │ │ │ ├── box-small.component.css │ │ │ ├── box-small.component.html │ │ │ ├── box-small.component.ts │ │ │ ├── box-small.directive.ts │ │ │ ├── box-small.module.ts │ │ │ └── index.ts │ │ ├── box │ │ │ ├── box.component.css │ │ │ ├── box.component.html │ │ │ ├── box.component.ts │ │ │ ├── box.directive.ts │ │ │ ├── box.module.ts │ │ │ └── index.ts │ │ ├── breadcrumbs │ │ │ ├── breadcrumbs.component.css │ │ │ ├── breadcrumbs.component.html │ │ │ ├── breadcrumbs.component.ts │ │ │ ├── breadcrumbs.module.ts │ │ │ └── index.ts │ │ ├── color │ │ │ ├── color.definition.ts │ │ │ ├── color.directive.ts │ │ │ ├── color.module.ts │ │ │ ├── color.service.ts │ │ │ └── index.ts │ │ ├── dropdown │ │ │ ├── dropdown.component.css │ │ │ ├── dropdown.component.html │ │ │ ├── dropdown.component.ts │ │ │ ├── dropdown.module.ts │ │ │ └── index.ts │ │ ├── form │ │ │ ├── index.ts │ │ │ ├── input-group │ │ │ │ ├── input-group.component.html │ │ │ │ ├── input-group.component.ts │ │ │ │ ├── input-group.directive.ts │ │ │ │ └── input-group.module.ts │ │ │ └── input-text │ │ │ │ ├── input-text.directive.ts │ │ │ │ └── input-text.module.ts │ │ ├── helpers.ts │ │ ├── layout │ │ │ ├── content │ │ │ │ ├── content.component.css │ │ │ │ ├── content.component.html │ │ │ │ ├── content.component.ts │ │ │ │ └── content.module.ts │ │ │ ├── footer │ │ │ │ ├── footer.component.css │ │ │ │ ├── footer.component.html │ │ │ │ ├── footer.component.ts │ │ │ │ ├── footer.module.ts │ │ │ │ └── footer.service.ts │ │ │ ├── header │ │ │ │ ├── header.component.css │ │ │ │ ├── header.component.html │ │ │ │ ├── header.component.ts │ │ │ │ ├── header.module.ts │ │ │ │ └── header.service.ts │ │ │ ├── index.ts │ │ │ ├── layout.module.ts │ │ │ ├── layout.provider.ts │ │ │ ├── layout.service.ts │ │ │ ├── layout.state.ts │ │ │ ├── layout.store.ts │ │ │ ├── sidebar-left │ │ │ │ ├── sidebar-left.component.css │ │ │ │ ├── sidebar-left.component.html │ │ │ │ ├── sidebar-left.component.ts │ │ │ │ ├── sidebar-left.directive.ts │ │ │ │ └── sidebar-left.module.ts │ │ │ ├── sidebar-right │ │ │ │ ├── sidebar-right.component.css │ │ │ │ ├── sidebar-right.component.html │ │ │ │ ├── sidebar-right.component.ts │ │ │ │ ├── sidebar-right.module.ts │ │ │ │ └── sidebar-right.service.ts │ │ │ └── wrapper │ │ │ │ ├── wrapper.component.css │ │ │ │ ├── wrapper.component.html │ │ │ │ ├── wrapper.component.ts │ │ │ │ ├── wrapper.module.ts │ │ │ │ └── wrapper.service.ts │ │ ├── services │ │ │ ├── class.service.ts │ │ │ ├── routing.service.ts │ │ │ └── style.service.ts │ │ └── tabs │ │ │ ├── index.ts │ │ │ ├── tabs.component.css │ │ │ ├── tabs.component.html │ │ │ ├── tabs.component.ts │ │ │ ├── tabs.directive.ts │ │ │ └── tabs.module.ts │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.spec.json │ └── tslint.json ├── package.json ├── scripts └── gh-pages.sh ├── src ├── app │ ├── +accordion │ │ ├── accordion-routing.module.ts │ │ ├── accordion.component.css │ │ ├── accordion.component.html │ │ ├── accordion.component.spec.ts │ │ ├── accordion.component.ts │ │ └── accordion.module.ts │ ├── +alert │ │ ├── alert-routing.module.ts │ │ ├── alert.component.css │ │ ├── alert.component.html │ │ ├── alert.component.spec.ts │ │ ├── alert.component.ts │ │ └── alert.module.ts │ ├── +boxs │ │ ├── box-default │ │ │ ├── box-default-routing.module.ts │ │ │ ├── box-default.component.css │ │ │ ├── box-default.component.html │ │ │ ├── box-default.component.spec.ts │ │ │ ├── box-default.component.ts │ │ │ └── box-default.module.ts │ │ ├── box-info │ │ │ ├── box-info-routing.module.ts │ │ │ ├── box-info.component.css │ │ │ ├── box-info.component.html │ │ │ ├── box-info.component.spec.ts │ │ │ ├── box-info.component.ts │ │ │ └── box-info.module.ts │ │ └── box-small │ │ │ ├── box-small-routing.module.ts │ │ │ ├── box-small.component.css │ │ │ ├── box-small.component.html │ │ │ ├── box-small.component.spec.ts │ │ │ ├── box-small.component.ts │ │ │ └── box-small.module.ts │ ├── +dropdown │ │ ├── dropdown-routing.module.ts │ │ ├── dropdown.component.css │ │ ├── dropdown.component.html │ │ ├── dropdown.component.spec.ts │ │ ├── dropdown.component.ts │ │ └── dropdown.module.ts │ ├── +form │ │ └── input-text │ │ │ ├── input-text-routing.module.ts │ │ │ ├── input-text.component.css │ │ │ ├── input-text.component.html │ │ │ ├── input-text.component.spec.ts │ │ │ ├── input-text.component.ts │ │ │ └── input-text.module.ts │ ├── +layout │ │ ├── configuration │ │ │ ├── configuration-routing.module.ts │ │ │ ├── configuration.component.html │ │ │ ├── configuration.component.spec.ts │ │ │ ├── configuration.component.ts │ │ │ └── configuration.module.ts │ │ ├── content │ │ │ ├── content-routing.module.ts │ │ │ ├── content.component.css │ │ │ ├── content.component.html │ │ │ ├── content.component.spec.ts │ │ │ ├── content.component.ts │ │ │ └── content.module.ts │ │ ├── custom │ │ │ ├── custom-routing.module.ts │ │ │ ├── custom.component.css │ │ │ ├── custom.component.html │ │ │ ├── custom.component.spec.ts │ │ │ ├── custom.component.ts │ │ │ └── custom.module.ts │ │ ├── header │ │ │ ├── header-routing.module.ts │ │ │ ├── header.component.html │ │ │ ├── header.component.spec.ts │ │ │ ├── header.component.ts │ │ │ └── header.module.ts │ │ ├── sidebar-left │ │ │ ├── sidebar-left-routing.module.ts │ │ │ ├── sidebar-left.component.html │ │ │ ├── sidebar-left.component.spec.ts │ │ │ ├── sidebar-left.component.ts │ │ │ └── sidebar-left.module.ts │ │ └── sidebar-right │ │ │ ├── sidebar-right-routing.module.ts │ │ │ ├── sidebar-right.component.html │ │ │ ├── sidebar-right.component.spec.ts │ │ │ ├── sidebar-right.component.ts │ │ │ └── sidebar-right.module.ts │ ├── +login │ │ ├── login-routing.module.ts │ │ ├── login.component.css │ │ ├── login.component.html │ │ ├── login.component.spec.ts │ │ ├── login.component.ts │ │ └── login.module.ts │ ├── +register │ │ ├── register-routing.module.ts │ │ ├── register.component.css │ │ ├── register.component.html │ │ ├── register.component.spec.ts │ │ ├── register.component.ts │ │ └── register.module.ts │ ├── +tabs │ │ ├── tabs-routing.module.ts │ │ ├── tabs.component.css │ │ ├── tabs.component.html │ │ ├── tabs.component.spec.ts │ │ ├── tabs.component.ts │ │ └── tabs.module.ts │ ├── admin-lte.conf.ts │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── core │ │ ├── core.module.ts │ │ ├── header-inner │ │ │ ├── header-inner.component.html │ │ │ ├── header-inner.component.spec.ts │ │ │ └── header-inner.component.ts │ │ ├── sidebar-left-inner │ │ │ ├── sidebar-left-inner.component.html │ │ │ ├── sidebar-left-inner.component.spec.ts │ │ │ └── sidebar-left-inner.component.ts │ │ └── sidebar-right-inner │ │ │ ├── sidebar-right-inner.component.html │ │ │ └── sidebar-right-inner.component.ts │ └── home │ │ ├── home.component.css │ │ ├── home.component.html │ │ ├── home.component.spec.ts │ │ └── home.component.ts ├── assets │ ├── .gitkeep │ └── img │ │ ├── avatar.png │ │ ├── avatar04.png │ │ ├── avatar2.png │ │ ├── avatar3.png │ │ ├── avatar5.png │ │ ├── boxed-bg.jpg │ │ ├── boxed-bg.png │ │ ├── credit │ │ ├── american-express.png │ │ ├── cirrus.png │ │ ├── mastercard.png │ │ ├── mestro.png │ │ ├── paypal.png │ │ ├── paypal2.png │ │ └── visa.png │ │ ├── default-50x50.gif │ │ ├── icons.png │ │ ├── photo1.png │ │ ├── photo2.png │ │ ├── photo3.jpg │ │ ├── photo4.jpg │ │ ├── user1-128x128.jpg │ │ ├── user2-160x160.jpg │ │ ├── user3-128x128.jpg │ │ ├── user4-128x128.jpg │ │ ├── user5-128x128.jpg │ │ ├── user6-128x128.jpg │ │ ├── user7-128x128.jpg │ │ └── user8-128x128.jpg ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json ├── tslint.json └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /.idea/angular-admin-lte.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.idea/codeStyles/Project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 12 | 13 | 15 | 16 | -------------------------------------------------------------------------------- /.idea/codeStyles/codeStyleConfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 25 | 26 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/webResources.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.com/ 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "12" 4 | dist: trusty 5 | sudo: false 6 | 7 | env: 8 | global: 9 | - TMPDIR=/tmp 10 | 11 | cache: 12 | yarn: true 13 | directories: 14 | - node_modules 15 | 16 | addons: 17 | chrome: stable 18 | 19 | before_script: 20 | - yarn global add @angular/cli 21 | - yarn global add coveralls 22 | 23 | script: 24 | - ng lint angular-admin-lte 25 | # - ng test angular-admin-lte --watch=false --browsers=ChromeHeadless --code-coverage 26 | - ng build angular-admin-lte --prod 27 | - ng lint angular-admin-lte-demo 28 | - ng test angular-admin-lte-demo --watch=false --browsers=ChromeHeadless --code-coverage 29 | - ng build angular-admin-lte-demo --prod --base-href="/angular-admin-lte/$([ "$TRAVIS_PULL_REQUEST" != false ] && echo "pulls/$TRAVIS_PULL_REQUEST/" || echo "branches/$TRAVIS_BRANCH/")" 30 | # - xvfb-run npm run e2e 31 | 32 | after_success: 33 | - cat coverage/lcov.info | coveralls 34 | - bash scripts/gh-pages.sh $TMPDIR/gh-pages $TRAVIS_BUILD_DIR/dist/angular-admin-lte-demo 35 | 36 | before_install: 37 | - npm install -g yarn 38 | 39 | before_deploy: 40 | - cp README.md LICENSE dist/angular-admin-lte 41 | - cd dist/angular-admin-lte 42 | 43 | deploy: 44 | provider: npm 45 | email: "michael.ledour@gmail.com" 46 | api_key: $NPM_TOKEN 47 | skip_cleanup: true 48 | on: 49 | tags: true 50 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2017 Abdullah Almsaeed 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/mledour/angular-admin-lte.svg?branch=master)](https://travis-ci.org/mledour/angular-admin-lte) 2 | [![npm version](https://badge.fury.io/js/angular-admin-lte.svg)](https://badge.fury.io/js/angular-admin-lte) 3 | 4 | # angular-admin-lte 5 | 6 | Admin-lte implementation for Angular 4+ 7 | 8 | ## Doc & Demo 9 | [https://mledour.github.io/angular-admin-lte/branches/master](https://mledour.github.io/angular-admin-lte/branches/master) 10 | 11 | 12 | ## Installation 13 | 14 | To install this library, run: 15 | 16 | ```bash 17 | $ npm install angular-admin-lte --save 18 | ``` 19 | 20 | ## Install demo 21 | ```bash 22 | $ git clone git://github.com/mledour/angular-admin-lte 23 | $ cd angular-admin-lte 24 | $ npm install 25 | ``` 26 | 27 | ## Run demo 28 | ```bash 29 | $ ng serve 30 | ``` 31 | 32 | ## Build demo 33 | ```bash 34 | $ ng build --prod 35 | ``` 36 | 37 | ## Build dist 38 | ```bash 39 | $ npm run build:lib 40 | ``` 41 | 42 | ## Dependencies 43 | 44 | * admin-lte-css 45 | 46 | ## Todos 47 | 48 | * Vertical tabs 49 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | SELENIUM_PROMISE_MANAGER: false, 20 | baseUrl: 'http://localhost:4200/', 21 | framework: 'jasmine', 22 | jasmineNodeOpts: { 23 | showColors: true, 24 | defaultTimeoutInterval: 30000, 25 | print: function() {} 26 | }, 27 | onPrepare() { 28 | require('ts-node').register({ 29 | project: require('path').join(__dirname, './tsconfig.json') 30 | }); 31 | jasmine.getEnv().addReporter(new SpecReporter({ 32 | spec: { 33 | displayStacktrace: StacktraceOption.PRETTY 34 | } 35 | })); 36 | } 37 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', async () => { 12 | await page.navigateTo(); 13 | expect(await page.getTitleText()).toEqual('angular-loading-page app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | async navigateTo(): Promise { 5 | return browser.get(browser.baseUrl); 6 | } 7 | 8 | async getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../out-tsc/e2e", 6 | "module": "commonjs", 7 | "target": "es2018", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, './coverage/angular-admin-lte'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /library/angular-admin-lte/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, '../../coverage/angular-admin-lte'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /library/angular-admin-lte/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/angular-admin-lte", 4 | "lib": { 5 | "entryFile": "src/index.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /library/angular-admin-lte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-admin-lte", 3 | "version": "4.0.0", 4 | "homepage": "https://github.com/mledour/angular-admin-lte#README.MD", 5 | "author": { 6 | "name": "Mik@", 7 | "email": "michael.ledour@gmail.com" 8 | }, 9 | "license": "MIT", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/mledour/angular-admin-lte" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/mledour/angular-admin-lte/issues" 16 | }, 17 | "keywords": [ 18 | "angular", 19 | "angular 2", 20 | "angular 4", 21 | "angular 5", 22 | "angular 6", 23 | "angular 7", 24 | "typescript", 25 | "admin-lte" 26 | ], 27 | "dependencies": { 28 | "tslib": "^2.0.0" 29 | }, 30 | "peerDependencies": { 31 | "@angular/core": "^7.2.3", 32 | "bootstrap-css-only": "^3.3.7", 33 | "admin-lte-css": "^2.4.3" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of angular-admin-lte 3 | */ 4 | 5 | export * from './lib/layout'; 6 | export * from './lib/animations'; 7 | export * from './lib/color'; 8 | 9 | export * from './lib/accordion'; 10 | export * from './lib/alert'; 11 | export * from './lib/box'; 12 | export * from './lib/box-info'; 13 | export * from './lib/box-small'; 14 | export * from './lib/breadcrumbs'; 15 | export * from './lib/dropdown'; 16 | export * from './lib/form'; 17 | export * from './lib/tabs'; 18 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/accordion/accordion.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | 6 | {{accordion.header}} 7 | 8 | 9 |

10 |
11 |
12 |
13 | 14 | 15 |
16 |
17 |
18 |
19 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/accordion/accordion.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input, ElementRef } from '@angular/core'; 2 | import { AccordionComponent } from './accordion.component'; 3 | 4 | 5 | @Directive({ 6 | selector: '[mkAccordionToggle]' 7 | }) 8 | export class AccordionToggleDirective { 9 | // TODO: Add @Required decorator 10 | @Input('mkAccordionToggle') accordionComponent!: AccordionComponent; 11 | 12 | constructor( 13 | public elementRef: ElementRef 14 | ) {} 15 | } 16 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/accordion/accordion.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { AnimationsModule } from '../animations/animations.module'; 5 | import { ColorModule } from '../color/color.module'; 6 | import { AccordionHeaderComponent, AccordionContentComponent, AccordionComponent, AccordionGroupComponent } from './accordion.component'; 7 | import { AccordionToggleDirective } from './accordion.directive'; 8 | export { AccordionHeaderComponent, AccordionContentComponent, AccordionComponent, AccordionGroupComponent } from './accordion.component'; 9 | export { AccordionToggleDirective } from './accordion.directive'; 10 | 11 | @NgModule({ 12 | imports: [CommonModule, AnimationsModule, ColorModule], 13 | exports: [AccordionHeaderComponent, AccordionContentComponent, AccordionComponent, AccordionGroupComponent], 14 | declarations: [AccordionToggleDirective, AccordionHeaderComponent, 15 | AccordionContentComponent, AccordionComponent, AccordionGroupComponent] 16 | }) 17 | export class AccordionModule {} 18 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accordion.module'; 2 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/alert/alert.component.css: -------------------------------------------------------------------------------- 1 | .callout-dismissable, 2 | .callout-dismissible { 3 | padding-right: 35px; 4 | } 5 | 6 | .callout-dismissable .close, 7 | .callout-dismissible .close { 8 | position: relative; 9 | top: -2px; 10 | right: -21px; 11 | color: inherit; 12 | } 13 | 14 | .callout .close { 15 | color: #000; 16 | opacity: 0.2; 17 | filter: alpha(opacity=20); 18 | } 19 | 20 | .callout .icon { 21 | margin-right: 10px; 22 | } 23 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/alert/alert.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |
6 |
7 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/alert/alert.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | AfterViewInit, 3 | ChangeDetectionStrategy, 4 | ChangeDetectorRef, 5 | Component, 6 | ElementRef, 7 | EventEmitter, 8 | Input, 9 | NgZone, 10 | OnDestroy, 11 | Output, 12 | Renderer2, 13 | ViewChild, 14 | ViewContainerRef, 15 | ViewRef 16 | } from '@angular/core'; 17 | 18 | import {AnimationEvent} from '../animations/animations.interface'; 19 | import {removeListeners} from '../helpers'; 20 | 21 | 22 | @Component({ 23 | selector: 'mk-alert', 24 | templateUrl: './alert.component.html', 25 | styleUrls: ['./alert.component.css'], 26 | changeDetection: ChangeDetectionStrategy.OnPush 27 | }) 28 | export class AlertComponent implements AfterViewInit, OnDestroy { 29 | @Input() public backgroundColor = 'danger'; 30 | @Input() public set callout(value: boolean) { 31 | this.type = value ? 'callout' : 'alert'; 32 | } 33 | @Input() public color?: string; 34 | @Input() public dismissOnTimeout?: number; 35 | @Input('isDismissible') public set _isDismissible(value: boolean) { 36 | this.isDismissible = value; 37 | if (value) { 38 | this.dismissibleClass = `${this.type}-dismissible`; 39 | } else { 40 | this.dismissibleClass = ''; 41 | } 42 | } 43 | @Input() public styleClass = ''; 44 | 45 | @Output() public collapseStart = new EventEmitter(); 46 | @Output() public collapseDone = new EventEmitter(); 47 | 48 | @ViewChild('removeButtonElement') private removeButtonElement?: ElementRef; 49 | 50 | public dismissibleClass = 'alert-dismissible'; 51 | public isDismissible = true; 52 | public remove = false; 53 | public removed = false; 54 | public type = 'alert'; 55 | 56 | private listeners: (() => void)[] = []; 57 | 58 | constructor( 59 | private changeDetectorRef: ChangeDetectorRef, 60 | private ngZone: NgZone, 61 | private renderer2: Renderer2, 62 | private viewContainerRef: ViewContainerRef 63 | ) {} 64 | 65 | ngAfterViewInit(): void { 66 | this.ngZone.runOutsideAngular(() => { 67 | if (this.dismissOnTimeout) { 68 | setTimeout(() => { 69 | if (!(this.changeDetectorRef as ViewRef).destroyed) { 70 | this.remove = true; 71 | this.changeDetectorRef.detectChanges(); 72 | } 73 | }, this.dismissOnTimeout); 74 | } 75 | if (this.removeButtonElement) { 76 | this.listeners.push(this.renderer2.listen(this.removeButtonElement.nativeElement, 'click', () => { 77 | this.remove = true; 78 | this.changeDetectorRef.detectChanges(); 79 | })); 80 | } 81 | }); 82 | } 83 | 84 | ngOnDestroy(): void { 85 | removeListeners(this.listeners); 86 | } 87 | 88 | public onCollapseStart(event: AnimationEvent): void { 89 | this.collapseStart.emit(event); 90 | } 91 | 92 | public onCollapseDone(event: AnimationEvent): void { 93 | if (event.toState === '1') { 94 | this.listeners = removeListeners(this.listeners); 95 | this.removed = true; 96 | this.viewContainerRef.clear(); 97 | this.changeDetectorRef.detectChanges(); 98 | } 99 | this.collapseDone.emit(event); 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/alert/alert.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { AnimationsModule } from '../animations/animations.module'; 5 | import { ColorModule } from '../color/color.module'; 6 | import { AlertComponent } from './alert.component'; 7 | 8 | export { AlertComponent } from './alert.component'; 9 | 10 | @NgModule({ 11 | imports: [CommonModule, AnimationsModule, ColorModule], 12 | exports: [AlertComponent], 13 | declarations: [AlertComponent] 14 | }) 15 | export class AlertModule {} 16 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/alert/index.ts: -------------------------------------------------------------------------------- 1 | export * from './alert.module'; 2 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/animations/animations.interface.ts: -------------------------------------------------------------------------------- 1 | export interface AnimationEvent { 2 | fromState: string; 3 | toState: string; 4 | totalTime: number; 5 | phaseName: string; 6 | element: any; 7 | triggerName: string; 8 | } 9 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/animations/animations.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { CollapseAnimationDirective } from './animations.directive'; 4 | 5 | export { CollapseAnimationDirective } from './animations.directive'; 6 | 7 | @NgModule({ 8 | exports: [CollapseAnimationDirective], 9 | declarations: [CollapseAnimationDirective] 10 | }) 11 | export class AnimationsModule {} 12 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/animations/index.ts: -------------------------------------------------------------------------------- 1 | export * from './animations.module'; 2 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-info/box-info.component.css: -------------------------------------------------------------------------------- 1 | .info-box.bg-color > .info-box-content { 2 | color: #fff; 3 | } 4 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-info/box-info.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
6 | 7 | {{header}} 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 | 22 | {{footer}} 23 | 24 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-info/box-info.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, ContentChild } from '@angular/core'; 2 | 3 | import { BoxInfoContentDirective, BoxInfoFooterDirective, BoxInfoHeaderDirective } from './box-info.directive'; 4 | 5 | 6 | @Component({ 7 | selector: 'mk-box-info', 8 | styleUrls: ['./box-info.component.css'], 9 | templateUrl: './box-info.component.html' 10 | }) 11 | export class BoxInfoComponent implements OnInit { 12 | @Input() public backgroundColor?: string; 13 | @Input() public contentStyleClass = 'info-box-number'; 14 | @Input() public contentColor?: string; 15 | @Input() public footer?: string; 16 | @Input() public footerColor?: string; 17 | @Input() public footerStyleClass = 'progress-description'; 18 | @Input() public header?: string; 19 | @Input() public headerColor?: string; 20 | @Input() public headerStyleClass = 'info-box-text'; 21 | @Input() public iconBackgroundColor?: string; 22 | @Input() public iconColor = '#fff'; 23 | @Input() public iconStyleClass = 'ion ion-bag'; 24 | @Input() public progressWidth?: number; 25 | @Input() public styleClass = 'info-box'; 26 | 27 | @ContentChild(BoxInfoHeaderDirective) public boxInfoHeaderDirective?: BoxInfoHeaderDirective; 28 | @ContentChild(BoxInfoFooterDirective) public boxInfoFooterDirective?: BoxInfoFooterDirective; 29 | @ContentChild(BoxInfoContentDirective) public boxInfoContentDirective?: BoxInfoContentDirective; 30 | 31 | public progressBarBg?: string; 32 | 33 | ngOnInit(): void { 34 | if (!this.backgroundColor) { 35 | this.progressBarBg = this.iconBackgroundColor; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-info/box-info.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | 4 | @Directive({ 5 | /* tslint:disable-next-line:directive-selector */ 6 | selector: 'mk-box-info-content' 7 | }) 8 | export class BoxInfoContentDirective {} 9 | 10 | 11 | @Directive({ 12 | /* tslint:disable-next-line:directive-selector */ 13 | selector: 'mk-box-info-footer' 14 | }) 15 | export class BoxInfoFooterDirective {} 16 | 17 | 18 | @Directive({ 19 | /* tslint:disable-next-line:directive-selector */ 20 | selector: 'mk-box-info-header' 21 | }) 22 | export class BoxInfoHeaderDirective {} 23 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-info/box-info.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { ColorModule } from '../color/color.module'; 5 | import { BoxInfoHeaderDirective, BoxInfoContentDirective, BoxInfoFooterDirective } from './box-info.directive'; 6 | import { BoxInfoComponent } from './box-info.component'; 7 | 8 | export { BoxInfoHeaderDirective, BoxInfoContentDirective, BoxInfoFooterDirective } from './box-info.directive'; 9 | export { BoxInfoComponent } from './box-info.component'; 10 | 11 | 12 | @NgModule({ 13 | imports: [CommonModule, ColorModule], 14 | exports: [BoxInfoComponent, BoxInfoHeaderDirective, BoxInfoContentDirective, BoxInfoFooterDirective], 15 | declarations: [BoxInfoComponent, BoxInfoHeaderDirective, BoxInfoContentDirective, BoxInfoFooterDirective] 16 | }) 17 | export class BoxInfoModule {} 18 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-info/index.ts: -------------------------------------------------------------------------------- 1 | export * from './box-info.module'; 2 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-small/box-small.component.css: -------------------------------------------------------------------------------- 1 | .small-box.bg-color { 2 | color: #fff; 3 | } 4 | 5 | /deep/ .small-box-footer:hover { 6 | cursor: pointer; 7 | } 8 | 9 | /deep/ .small-box-footer a { 10 | color: rgba(255,255,255,0.8); 11 | } 12 | 13 | /deep/ .small-box-footer:hover a{ 14 | color: rgb(255,255,255); 15 | } 16 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-small/box-small.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | {{header}} 5 | 6 |

7 |

8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |
16 |
17 | 18 |
19 | 20 | {{footer}} 21 | 22 | 23 |
24 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-small/box-small.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ContentChild } from '@angular/core'; 2 | 3 | import { BoxSmallContentDirective, BoxSmallFooterDirective, BoxSmallHeaderDirective } from './box-small.directive'; 4 | 5 | 6 | @Component({ 7 | selector: 'mk-box-small', 8 | templateUrl: './box-small.component.html', 9 | styleUrls: ['./box-small.component.css'] 10 | }) 11 | export class BoxSmallComponent { 12 | @Input() public backgroundColor?: string; 13 | @Input() public contentColor?: string; 14 | @Input() public contentStyleClass = 'small-box-content'; 15 | @Input() public footer?: string; 16 | @Input() public footerColor?: string; 17 | @Input() public footerStyleClass = 'small-box-footer'; 18 | @Input() public header?: string; 19 | @Input() public headerColor?: string; 20 | @Input() public headerStyleClass = 'small-box-header'; 21 | @Input() public iconColor?: string; 22 | @Input() public iconStyleClass = 'ion ion-bag'; 23 | @Input() public styleClass = 'small-box'; 24 | 25 | @ContentChild(BoxSmallHeaderDirective) public boxSmallHeaderDirective?: BoxSmallHeaderDirective; 26 | @ContentChild(BoxSmallFooterDirective) public boxSmallFooterDirective?: BoxSmallFooterDirective; 27 | @ContentChild(BoxSmallContentDirective) public boxSmallContentDirective?: BoxSmallContentDirective; 28 | } 29 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-small/box-small.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | 4 | @Directive({ 5 | /* tslint:disable-next-line:directive-selector */ 6 | selector: 'mk-box-small-footer' 7 | }) 8 | export class BoxSmallFooterDirective {} 9 | 10 | 11 | @Directive({ 12 | /* tslint:disable-next-line:directive-selector */ 13 | selector: 'mk-box-small-header' 14 | }) 15 | export class BoxSmallHeaderDirective {} 16 | 17 | 18 | @Directive({ 19 | /* tslint:disable-next-line:directive-selector */ 20 | selector: 'mk-box-small-content' 21 | }) 22 | export class BoxSmallContentDirective {} 23 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-small/box-small.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { ColorModule } from '../color/color.module'; 5 | import { BoxSmallHeaderDirective, BoxSmallContentDirective, BoxSmallFooterDirective } from './box-small.directive'; 6 | import { BoxSmallComponent } from './box-small.component'; 7 | 8 | export { BoxSmallHeaderDirective, BoxSmallContentDirective, BoxSmallFooterDirective } from './box-small.directive'; 9 | export { BoxSmallComponent } from './box-small.component'; 10 | 11 | @NgModule({ 12 | imports: [CommonModule, ColorModule], 13 | exports: [BoxSmallComponent, BoxSmallHeaderDirective, BoxSmallContentDirective, BoxSmallFooterDirective], 14 | declarations: [BoxSmallComponent, BoxSmallHeaderDirective, BoxSmallContentDirective, BoxSmallFooterDirective] 15 | }) 16 | export class BoxSmallModule {} 17 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box-small/index.ts: -------------------------------------------------------------------------------- 1 | export * from './box-small.module'; 2 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box/box.component.css: -------------------------------------------------------------------------------- 1 | .box.collapsed-box .box-body, 2 | .box.collapsed-box .box-footer { 3 | display: inherit; 4 | } 5 | 6 | .box-solid { 7 | border: 1px solid; 8 | } 9 | 10 | .box-body { 11 | background-color: #fff; 12 | } 13 | 14 | .box.box-solid.bg-color > .box-header { 15 | color: #fff; 16 | } 17 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box/box.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | {{header}} 5 | 6 |

7 |
8 | 9 | 12 | 15 |
16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | {{footer}} 28 | 29 |
30 |
31 |
32 | 33 |
34 |
35 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box/box.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | 4 | @Directive({ 5 | /* tslint:disable-next-line:directive-selector */ 6 | selector: 'mk-box-content' 7 | }) 8 | export class BoxContentDirective {} 9 | 10 | 11 | @Directive({ 12 | /* tslint:disable-next-line:directive-selector */ 13 | selector: 'mk-box-footer' 14 | }) 15 | export class BoxFooterDirective {} 16 | 17 | 18 | @Directive({ 19 | /* tslint:disable-next-line:directive-selector */ 20 | selector: 'mk-box-tools' 21 | }) 22 | export class BoxToolsDirective {} 23 | 24 | 25 | @Directive({ 26 | /* tslint:disable-next-line:directive-selector */ 27 | selector: 'mk-box-header' 28 | }) 29 | export class BoxHeaderDirective {} 30 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box/box.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { AnimationsModule } from '../animations/animations.module'; 5 | import { ColorModule } from '../color/color.module'; 6 | import { BoxHeaderDirective, BoxContentDirective, BoxFooterDirective, BoxToolsDirective } from './box.directive'; 7 | import { BoxComponent } from './box.component'; 8 | 9 | export { BoxHeaderDirective, BoxContentDirective, BoxFooterDirective, BoxToolsDirective } from './box.directive'; 10 | export { BoxComponent } from './box.component'; 11 | 12 | 13 | @NgModule({ 14 | imports: [CommonModule, AnimationsModule, ColorModule], 15 | exports: [BoxComponent, BoxHeaderDirective, BoxContentDirective, BoxFooterDirective, BoxToolsDirective], 16 | declarations: [BoxComponent, BoxHeaderDirective, BoxContentDirective, BoxFooterDirective, BoxToolsDirective] 17 | }) 18 | export class BoxModule {} 19 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/box/index.ts: -------------------------------------------------------------------------------- 1 | export * from './box.module'; 2 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/breadcrumbs/breadcrumbs.component.css: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | float: right; 3 | background: transparent; 4 | margin-top: 0; 5 | margin-bottom: 0; 6 | font-size: 12px; 7 | padding: 7px 5px; 8 | position: absolute; 9 | top: 15px; 10 | right: 10px; 11 | border-radius: 2px; 12 | } 13 | 14 | .breadcrumb > li > a { 15 | color: #444; 16 | text-decoration: none; 17 | display: inline-block; 18 | } 19 | 20 | .breadcrumb > li .fa, 21 | .breadcrumb > li .glyphicon, 22 | .breadcrumb > li .ion { 23 | margin-right: 5px; 24 | } 25 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/breadcrumbs/breadcrumbs.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
  1. 3 | 4 | 5 | {{breadcrumb.data.breadcrumbs}} 6 | {{breadcrumb.data.title}} 7 | 8 | 9 | 10 | {{breadcrumb.data.breadcrumbs}} 11 | {{breadcrumb.data.title}} 12 | 13 |
    2. 14 |
15 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/breadcrumbs/breadcrumbs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, OnDestroy, ChangeDetectorRef } from '@angular/core'; 2 | 3 | import { Subscription } from 'rxjs'; 4 | 5 | import { Path, RoutingService } from '../services/routing.service'; 6 | 7 | 8 | export interface Breadcrumbs extends Path { 9 | data: { 10 | breadcrumbs?: string; 11 | title?: string 12 | }; 13 | } 14 | 15 | 16 | @Component({ 17 | selector: 'mk-breadcrumbs', 18 | templateUrl: './breadcrumbs.component.html', 19 | styleUrls: ['./breadcrumbs.component.css'] 20 | }) 21 | export class BreadcrumbsComponent implements OnInit, OnDestroy { 22 | @Input() public homeIcon = 'fa fa-home'; 23 | 24 | public breadcrumbs?: Breadcrumbs []; 25 | 26 | private subscription?: Subscription; 27 | 28 | constructor( 29 | private routingService: RoutingService, 30 | private changeDetectorRef: ChangeDetectorRef 31 | ) {} 32 | 33 | ngOnInit(): void { 34 | this.subscription = this.routingService.onChange.subscribe(paths => { 35 | this.breadcrumbs = paths; 36 | }); 37 | } 38 | 39 | ngOnDestroy(): void { 40 | if (this.subscription) { 41 | this.subscription.unsubscribe(); 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/breadcrumbs/breadcrumbs.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | 5 | import { BreadcrumbsComponent } from './breadcrumbs.component'; 6 | 7 | export { BreadcrumbsComponent } from './breadcrumbs.component'; 8 | 9 | @NgModule({ 10 | imports: [CommonModule, RouterModule], 11 | exports: [BreadcrumbsComponent], 12 | declarations: [BreadcrumbsComponent] 13 | }) 14 | export class BreadcrumbsModule {} 15 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/breadcrumbs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './breadcrumbs.module'; 2 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/color/color.definition.ts: -------------------------------------------------------------------------------- 1 | export const colorsAliases = [ 2 | 'default', 3 | 'primary', 4 | 'danger', 5 | 'warning', 6 | 'info', 7 | 'success' 8 | ]; 9 | 10 | export const colors = { 11 | aqua: '#00c0ef', 12 | 'aqua-active': '#00a7d0', 13 | black: '#111111', 14 | 'black-active': '#000000', 15 | blue: '#0073b7', 16 | 'blue-active': '#005384', 17 | fuchsia: '#f012be', 18 | 'fuchsia-active': '#db0ead', 19 | green: '#00a65a', 20 | 'green-active': '#008d4c', 21 | gray: '#d2d6de', 22 | 'gray-active': '#b5bbc8', 23 | 'gray-light': '#f7f7f7', 24 | 'light-blue': '#3c8dbc', 25 | 'light-blue-active': '#357ca5', 26 | lime: '#01ff70', 27 | 'lime-active': '#00e765', 28 | maroon: '#d81b60', 29 | 'maroon-active': '#ca195a', 30 | navy: '#001f3f', 31 | 'navy-active': '#001a35', 32 | olive: '#3d9970', 33 | 'olive-active': '#368763', 34 | orange: '#ff851b', 35 | 'orange-active': '#ff7701', 36 | purple: '#605ca8', 37 | 'purple-active': '#555299', 38 | red: '#dd4b39', 39 | 'red-active': '#d33724', 40 | teal: '#39cccc', 41 | 'teal-active': '#30bbbb', 42 | yellow: '#f39c12', 43 | 'yellow-active': '#db8b0b', 44 | }; 45 | 46 | export type Colors = keyof typeof colors; 47 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/color/color.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input, Renderer2, ElementRef } from '@angular/core'; 2 | 3 | import { ColorService } from './color.service'; 4 | import { Colors } from './color.definition'; 5 | 6 | 7 | @Directive({ 8 | selector: '[mkColor]', 9 | providers: [ColorService] 10 | }) 11 | export class BackgroundColorDirective { 12 | // TODO: ADD @Required decorator 13 | @Input('mkColorCondition') condition = true; 14 | @Input('mkColorPrefix') set setPrefix(prefix: string) { 15 | this.prefix = prefix; 16 | this.colorService.setBackgroundColor(this.color, this.condition, this.property, this.prefix); 17 | } 18 | @Input('mkColorProperty') property!: string; 19 | @Input('mkColor') set setColor(color: Colors | string | undefined) { 20 | if (color) { 21 | this.color = color; 22 | this.colorService.setBackgroundColor(this.color, this.condition, this.property, this.prefix); 23 | } 24 | } 25 | 26 | private prefix!: string; 27 | private color!: Colors | string; 28 | 29 | constructor( 30 | private elementRef: ElementRef, 31 | private renderer2: Renderer2, 32 | private colorService: ColorService 33 | ) {} 34 | } 35 | 36 | 37 | @Directive({ 38 | selector: '[mkFontColor]', 39 | providers: [ColorService] 40 | }) 41 | export class ColorDirective { 42 | @Input('mkFontColor') set color(color: string | undefined) { 43 | this.colorService.setFontColor(color); 44 | } 45 | 46 | constructor( 47 | private elementRef: ElementRef, 48 | private renderer2: Renderer2, 49 | private colorService: ColorService 50 | ) {} 51 | } 52 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/color/color.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { BackgroundColorDirective, ColorDirective } from './color.directive'; 4 | 5 | export { BackgroundColorDirective, ColorDirective } from './color.directive'; 6 | 7 | @NgModule({ 8 | exports: [BackgroundColorDirective, ColorDirective], 9 | declarations: [BackgroundColorDirective, ColorDirective] 10 | }) 11 | export class ColorModule {} 12 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/color/color.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Renderer2, ElementRef } from '@angular/core'; 2 | 3 | import { Colors, colors, colorsAliases } from './color.definition'; 4 | 5 | 6 | @Injectable() 7 | export class ColorService { 8 | private currentBackgroundStyle: any; 9 | private currentBackgroundClass: any; 10 | private currentFontStyle: any; 11 | private currentFontClass: any; 12 | 13 | constructor( 14 | private renderer2: Renderer2, 15 | private elementRef: ElementRef 16 | ) {} 17 | 18 | public setBackgroundColor(color: Colors | string, condition: boolean, property: string, prefix: string): void { 19 | if (color && condition) { 20 | this.resetBackgroundColor(); 21 | if (colors.hasOwnProperty(color)) { 22 | const knownColor = colors[(color as Colors)]; 23 | 24 | this.renderer2.addClass(this.elementRef.nativeElement, 'bg-color'); 25 | this.currentBackgroundStyle = {property, color: knownColor}; 26 | this.renderer2.setStyle(this.elementRef.nativeElement, property, knownColor); 27 | } else { 28 | this.renderer2.removeClass(this.elementRef.nativeElement, 'bg-color'); 29 | if (color.indexOf('#') === 0 || color.indexOf('rgb') === 0) { 30 | this.currentBackgroundStyle = {property, color}; 31 | this.renderer2.setStyle(this.elementRef.nativeElement, property, color); 32 | } else if (colorsAliases.indexOf(color) !== -1) { 33 | this.currentBackgroundClass = prefix ? `${prefix}-${color}` : color; 34 | this.renderer2.addClass(this.elementRef.nativeElement, this.currentBackgroundClass); 35 | } 36 | } 37 | } 38 | } 39 | 40 | public resetBackgroundColor(): void { 41 | if (this.currentBackgroundStyle) { 42 | this.renderer2.removeStyle(this.elementRef.nativeElement, this.currentBackgroundStyle.property, this.currentBackgroundStyle.color); 43 | } else if (this.currentBackgroundClass) { 44 | this.renderer2.removeClass(this.elementRef.nativeElement, this.currentBackgroundClass); 45 | } 46 | } 47 | 48 | public setFontColor(color: string | undefined): void { 49 | this.resetFontColor(); 50 | 51 | if (color) { 52 | if (color.startsWith('#') || color.startsWith('rgb')) { 53 | this.currentFontStyle = color; 54 | this.renderer2.setStyle(this.elementRef.nativeElement, 'color', color); 55 | } else { 56 | this.currentFontClass = `text-${color}`; 57 | this.renderer2.addClass(this.elementRef.nativeElement, this.currentFontClass); 58 | } 59 | } 60 | } 61 | 62 | public resetFontColor(): void { 63 | if (this.currentFontStyle) { 64 | this.renderer2.removeStyle(this.elementRef.nativeElement, 'color', this.currentFontStyle); 65 | } else if (this.currentFontClass) { 66 | this.renderer2.removeClass(this.elementRef.nativeElement, this.currentFontClass); 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/color/index.ts: -------------------------------------------------------------------------------- 1 | export * from './color.module'; 2 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/dropdown/dropdown.component.css: -------------------------------------------------------------------------------- 1 | .dropdown-menu { 2 | display: block; 3 | } 4 | 5 | .dropdown-menu.collapsing:not(.un-collapse) { 6 | transition-property: height, padding-top, padding-bottom; 7 | padding-top: 0; 8 | padding-bottom: 0; 9 | } 10 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/dropdown/dropdown.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 |
    10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/dropdown/dropdown.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { AnimationsModule } from '../animations/animations.module'; 5 | import { ColorModule } from '../color/color.module'; 6 | import { DropdownComponent, DropdownToggleComponent, DropdownMenuComponent } from './dropdown.component'; 7 | 8 | export { DropdownComponent, DropdownToggleComponent, DropdownMenuComponent } from './dropdown.component'; 9 | 10 | @NgModule({ 11 | imports: [CommonModule, AnimationsModule, ColorModule], 12 | exports: [DropdownComponent, DropdownToggleComponent, DropdownMenuComponent], 13 | declarations: [DropdownComponent, DropdownToggleComponent, DropdownMenuComponent] 14 | }) 15 | export class DropdownModule {} 16 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/dropdown/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dropdown.module'; 2 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input-text/input-text.module'; 2 | export * from './input-group/input-group.module'; 3 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/form/input-group/input-group.component.html: -------------------------------------------------------------------------------- 1 |
2 | 6 |
7 | 8 | {{addonLeft}} 9 | 10 | 11 | 12 | 13 | {{addonRight}} 14 | 15 | 16 |
17 | 18 |
19 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/form/input-group/input-group.component.ts: -------------------------------------------------------------------------------- 1 | import { AfterContentInit, Component, ContentChild, Input, OnDestroy } from '@angular/core'; 2 | import { NgControl } from '@angular/forms'; 3 | 4 | import { Subscription } from 'rxjs'; 5 | 6 | import { removeSubscriptions } from '../../helpers'; 7 | import { 8 | InputGroupAddonLeftDirective, 9 | InputGroupAddonRightDirective, 10 | InputGroupContentDirective, 11 | InputGroupLabelDirective 12 | } from './input-group.directive'; 13 | import { InputTextDirective } from '../input-text/input-text.directive'; 14 | 15 | 16 | @Component({ 17 | selector: 'mk-input-group', 18 | templateUrl: './input-group.component.html' 19 | }) 20 | export class InputGroupComponent implements AfterContentInit, OnDestroy { 21 | @Input() addonLeft?: string; 22 | @Input() addonRight?: string; 23 | @Input() inputColor = 'default'; 24 | @Input() inputFontColor?: string; 25 | @Input() inputErrorColor = 'danger'; 26 | @Input() inputErrorFontColor?: string; 27 | @Input() inputValidColor = 'success'; 28 | @Input() inputValidFontColor?: string; 29 | @Input() label?: string; 30 | @Input() wrapperClasses = 'form-group'; 31 | 32 | @ContentChild(InputGroupLabelDirective) public inputGroupLabelDirective?: InputGroupLabelDirective; 33 | @ContentChild(InputGroupAddonLeftDirective) public inputGroupAddonLeftDirective?: InputGroupAddonLeftDirective; 34 | @ContentChild(InputGroupAddonRightDirective) public inputGroupAddonRightDirective?: InputGroupAddonRightDirective; 35 | @ContentChild(InputGroupContentDirective) public inputGroupContentDirective?: InputGroupContentDirective; 36 | @ContentChild(InputTextDirective) public inputTextDirective?: InputTextDirective; 37 | 38 | private subscriptions: Subscription[] = []; 39 | 40 | public currentColor?: string; 41 | public currentFontColor?: string; 42 | 43 | ngAfterContentInit(): void { 44 | if (this.inputTextDirective) { 45 | this.subscriptions.push(this.inputTextDirective.onKeyup.subscribe((value: NgControl) => { 46 | if (value.invalid) { 47 | this.currentColor = this.inputErrorColor; 48 | this.currentFontColor = this.inputErrorFontColor; 49 | } else if (!value.invalid) { 50 | this.currentColor = this.inputValidColor; 51 | this.currentFontColor = this.inputValidFontColor; 52 | } else { 53 | this.currentColor = this.inputColor; 54 | this.currentFontColor = this.inputFontColor; 55 | } 56 | })); 57 | } 58 | } 59 | 60 | ngOnDestroy(): void { 61 | removeSubscriptions(this.subscriptions); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/form/input-group/input-group.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | 4 | @Directive({ 5 | /* tslint:disable-next-line:directive-selector */ 6 | selector: 'mk-input-group-label' 7 | }) 8 | export class InputGroupLabelDirective {} 9 | 10 | 11 | @Directive({ 12 | /* tslint:disable-next-line:directive-selector */ 13 | selector: 'mk-input-group-addon-left' 14 | }) 15 | export class InputGroupAddonLeftDirective {} 16 | 17 | 18 | @Directive({ 19 | /* tslint:disable-next-line:directive-selector */ 20 | selector: 'mk-input-group-addon-right' 21 | }) 22 | export class InputGroupAddonRightDirective {} 23 | 24 | 25 | @Directive({ 26 | /* tslint:disable-next-line:directive-selector */ 27 | selector: 'mk-input-group-content' 28 | }) 29 | export class InputGroupContentDirective {} 30 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/form/input-group/input-group.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {FormsModule} from '@angular/forms'; 3 | import {CommonModule} from '@angular/common'; 4 | 5 | import {ColorModule} from '../../color/color.module'; 6 | import {InputGroupComponent} from './input-group.component'; 7 | import { 8 | InputGroupAddonLeftDirective, 9 | InputGroupAddonRightDirective, 10 | InputGroupContentDirective, 11 | InputGroupLabelDirective 12 | } from './input-group.directive'; 13 | 14 | export {InputGroupComponent} from './input-group.component'; 15 | export { 16 | InputGroupAddonLeftDirective, 17 | InputGroupAddonRightDirective, 18 | InputGroupContentDirective, 19 | InputGroupLabelDirective 20 | } from './input-group.directive'; 21 | 22 | @NgModule({ 23 | imports: [ 24 | CommonModule, 25 | ColorModule, 26 | FormsModule 27 | ], 28 | exports: [InputGroupComponent, InputGroupLabelDirective, InputGroupAddonLeftDirective, 29 | InputGroupAddonRightDirective, InputGroupContentDirective], 30 | declarations: [InputGroupComponent, InputGroupLabelDirective, InputGroupAddonLeftDirective, 31 | InputGroupAddonRightDirective, InputGroupContentDirective] 32 | }) 33 | export class InputGroupModule {} 34 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/form/input-text/input-text.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input, Renderer2, ElementRef, OnInit, HostListener } from '@angular/core'; 2 | import { NgControl } from '@angular/forms'; 3 | 4 | import { Observable, Subject } from 'rxjs'; 5 | 6 | import { ColorService } from '../../color/color.service'; 7 | import { ClassService } from '../../services/class.service'; 8 | 9 | // @TODO onFocus Color 10 | 11 | @Directive({ 12 | selector: '[mkInputText]', 13 | providers: [ColorService, ClassService] 14 | }) 15 | export class InputTextDirective implements OnInit { 16 | @Input() set borderColor(color: string) { 17 | this.colorService.setBackgroundColor(color, true, 'border-color', ''); 18 | } 19 | @Input() set class(className: string) { 20 | this.isSetClass = true; 21 | this.classService.applyClasses(className); 22 | } 23 | @Input() set color(color: string) { 24 | this.colorService.setFontColor(color); 25 | } 26 | 27 | private defaultClass = 'form-control'; 28 | private isSetClass = false; 29 | private onKeyUp = new Subject(); 30 | 31 | public onKeyup: Observable = this.onKeyUp.asObservable(); 32 | 33 | @HostListener('keyup') keyUpListener(): void { 34 | this.onKeyUp.next(this.ngControl); 35 | } 36 | 37 | constructor( 38 | public elementRef: ElementRef, 39 | public renderer2: Renderer2, 40 | private ngControl: NgControl, 41 | private colorService: ColorService, 42 | private classService: ClassService 43 | ) {} 44 | 45 | ngOnInit(): void { 46 | if (!this.isSetClass) { 47 | this.classService.applyClasses(this.defaultClass); 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/form/input-text/input-text.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { CommonModule } from '@angular/common'; 4 | 5 | import { ColorModule } from '../../color/color.module'; 6 | 7 | import { InputTextDirective } from './input-text.directive'; 8 | 9 | export { InputTextDirective } from './input-text.directive'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | ColorModule, 15 | FormsModule 16 | ], 17 | exports: [InputTextDirective], 18 | declarations: [InputTextDirective] 19 | }) 20 | export class InputTextModule {} 21 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/helpers.ts: -------------------------------------------------------------------------------- 1 | import { Subscription } from 'rxjs'; 2 | 3 | 4 | export function throttle(callback: () => void, delay: number): (args: Array) => void { 5 | let timeout = 0; 6 | return (...args) => { 7 | if (!timeout) { 8 | timeout = setTimeout(() => { 9 | // @ts-ignore 10 | callback.call(this, ...args); 11 | timeout = 0; 12 | }, delay); 13 | } 14 | }; 15 | } 16 | 17 | 18 | export function removeSubscriptions(subscriptions: Subscription[]): Subscription[] { 19 | if (subscriptions) { 20 | subscriptions.forEach((subscription: Subscription) => { 21 | subscription.unsubscribe(); 22 | }); 23 | } 24 | return []; 25 | } 26 | 27 | 28 | export function removeListeners(listeners: (() => void)[] = []): (() => void)[] { 29 | if (listeners) { 30 | listeners.forEach((listener: () => void) => { 31 | listener(); 32 | }); 33 | } 34 | return []; 35 | } 36 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/content/content.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | .content-wrapper { 6 | position: relative; 7 | } 8 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/content/content.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |

6 | {{header}} 7 | {{description}} 8 |

9 | 10 |
11 | 12 |
13 | 14 |
15 |
16 |
17 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/content/content.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | 5 | import { BreadcrumbsModule } from '../../breadcrumbs/breadcrumbs.module'; 6 | import { ContentComponent } from './content.component'; 7 | 8 | export { ContentComponent } from './content.component'; 9 | 10 | 11 | @NgModule({ 12 | imports: [CommonModule, RouterModule, BreadcrumbsModule], 13 | exports: [ContentComponent], 14 | declarations: [ContentComponent] 15 | }) 16 | export class ContentModule {} 17 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/footer/footer.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/footer/footer.component.html: -------------------------------------------------------------------------------- 1 |
2 | 5 | 6 |
7 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ContentChild, OnInit, ViewChild, ElementRef } from '@angular/core'; 2 | import type { TemplateRef } from '@angular/core'; 3 | 4 | import { FooterService } from './footer.service'; 5 | 6 | 7 | @Component({ 8 | selector: 'mk-layout-footer-left', 9 | template: '' 10 | }) 11 | export class FooterLeftComponent { 12 | @ViewChild('templateRef', { static: true }) public templateRef!: TemplateRef; 13 | } 14 | 15 | 16 | @Component({ 17 | selector: 'mk-layout-footer-right', 18 | template: '' 19 | }) 20 | export class FooterRightComponent { 21 | @ViewChild('templateRef', { static: true }) public templateRef!: TemplateRef; 22 | } 23 | 24 | 25 | @Component({ 26 | selector: 'mk-layout-footer', 27 | templateUrl: './footer.component.html', 28 | styleUrls: ['./footer.component.css'] 29 | }) 30 | export class FooterComponent implements OnInit { 31 | @ContentChild(FooterLeftComponent) public footerLeftComponent?: FooterLeftComponent; 32 | @ContentChild(FooterRightComponent) public footerRightComponent?: FooterRightComponent; 33 | 34 | constructor( 35 | private elementRef: ElementRef, 36 | private footerService: FooterService 37 | ) {} 38 | 39 | ngOnInit(): void { 40 | this.footerService.elementRef = this.elementRef; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/footer/footer.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { FooterComponent, FooterLeftComponent, FooterRightComponent } from './footer.component'; 5 | 6 | export { FooterComponent, FooterLeftComponent, FooterRightComponent } from './footer.component'; 7 | 8 | @NgModule({ 9 | imports: [CommonModule], 10 | exports: [FooterComponent, FooterLeftComponent, FooterRightComponent], 11 | declarations: [FooterComponent, FooterLeftComponent, FooterRightComponent] 12 | }) 13 | export class FooterModule { } 14 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/footer/footer.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, ElementRef } from '@angular/core'; 2 | 3 | 4 | @Injectable() 5 | export class FooterService { 6 | public elementRef?: ElementRef; 7 | 8 | public get offsetHeight(): number { 9 | return this.elementRef ? this.elementRef.nativeElement.offsetHeight : 0; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/header/header.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | .sidebar-right-toggle { 6 | float: right; 7 | } 8 | 9 | .sidebar-right-toggle a { 10 | padding: 15px; 11 | display: block; 12 | line-height: 20px; 13 | cursor: pointer; 14 | } 15 | 16 | .sidebar-toggle-custom-icon:before { 17 | content: ''; 18 | } 19 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/header/header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 6 | 20 |
21 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | AfterViewInit, 3 | Component, 4 | ContentChild, 5 | ElementRef, 6 | Input, 7 | NgZone, 8 | OnDestroy, 9 | Renderer2, 10 | ViewChild 11 | } from '@angular/core'; 12 | import type { TemplateRef } from '@angular/core'; 13 | 14 | import { Subscription } from 'rxjs'; 15 | 16 | import {LayoutStore} from '../layout.store'; 17 | import {HeaderService} from './header.service'; 18 | import {removeListeners, removeSubscriptions} from '../../helpers'; 19 | 20 | 21 | @Component({ 22 | selector: 'mk-layout-header-logo', 23 | template: '' 24 | }) 25 | export class HeaderLogoComponent { 26 | @ViewChild('templateRef', { static: true }) public templateRef!: TemplateRef; 27 | } 28 | 29 | 30 | @Component({ 31 | selector: 'mk-layout-header-logo-mini', 32 | template: '' 33 | }) 34 | export class HeaderLogoMiniComponent { 35 | @ViewChild('templateRef', { static: true }) public templateRef!: TemplateRef; 36 | } 37 | 38 | 39 | @Component({ 40 | selector: 'mk-layout-header', 41 | templateUrl: './header.component.html', 42 | styleUrls: ['./header.component.css'] 43 | }) 44 | export class HeaderComponent implements AfterViewInit, OnDestroy { 45 | @Input() isSidebarLeftToggle = true; 46 | @Input() sidebarLeftToggleIconClasses?: string; 47 | @Input() isSidebarRightToggle = true; 48 | @Input() sidebarRightToggleIconClasses?: string; 49 | @Input() logoLink: string | any[] = '/'; 50 | 51 | @ContentChild(HeaderLogoComponent) public headerLogoComponent?: HeaderLogoComponent; 52 | @ContentChild(HeaderLogoMiniComponent) public headerLogoMiniComponent?: HeaderLogoMiniComponent; 53 | 54 | @ViewChild('headerElement', { static: true }) private headerElement!: ElementRef; 55 | @ViewChild('sidebarLeftToggleElement') private sidebarLeftToggleElement?: ElementRef; 56 | @ViewChild('sidebarRightToggleElement') private sidebarRightToggleElement?: ElementRef; 57 | 58 | private isSidebarLeftCollapsed?: boolean; 59 | private isSidebarRightCollapsed?: boolean; 60 | private listeners: (() => void)[] = []; 61 | private subscriptions: Subscription[] = []; 62 | 63 | constructor( 64 | private layoutStore: LayoutStore, 65 | private ngZone: NgZone, 66 | private renderer2: Renderer2, 67 | private elementRef: ElementRef, 68 | private headerService: HeaderService 69 | ) {} 70 | 71 | ngAfterViewInit(): void { 72 | this.headerService.elementRef = this.headerElement; 73 | 74 | if (this.sidebarLeftToggleElement) { 75 | this.subscriptions.push(this.layoutStore.isSidebarLeftCollapsed.subscribe(value => { 76 | this.isSidebarLeftCollapsed = value; 77 | })); 78 | this.ngZone.runOutsideAngular(() => { 79 | this.listeners.push(this.renderer2.listen(this.sidebarLeftToggleElement?.nativeElement, 'click', event => { 80 | event.preventDefault(); 81 | this.layoutStore.sidebarLeftCollapsed(!this.isSidebarLeftCollapsed); 82 | })); 83 | }); 84 | } 85 | if (this.sidebarRightToggleElement) { 86 | this.subscriptions.push(this.layoutStore.isSidebarRightCollapsed.subscribe(value => { 87 | this.isSidebarRightCollapsed = value; 88 | })); 89 | this.ngZone.runOutsideAngular(() => { 90 | this.listeners.push(this.renderer2.listen(this.sidebarRightToggleElement?.nativeElement, 'click', event => { 91 | event.preventDefault(); 92 | this.layoutStore.sidebarRightCollapsed(!this.isSidebarRightCollapsed); 93 | })); 94 | }); 95 | } 96 | } 97 | 98 | ngOnDestroy(): void { 99 | this.listeners = removeListeners(this.listeners); 100 | this.subscriptions = removeSubscriptions(this.subscriptions); 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/header/header.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | 5 | import { HeaderComponent, HeaderLogoComponent, HeaderLogoMiniComponent } from './header.component'; 6 | 7 | export { HeaderComponent, HeaderLogoComponent, HeaderLogoMiniComponent } from './header.component'; 8 | 9 | 10 | @NgModule({ 11 | imports: [CommonModule, RouterModule ], 12 | exports: [HeaderComponent, HeaderLogoComponent, HeaderLogoMiniComponent], 13 | declarations: [HeaderComponent, HeaderLogoComponent, HeaderLogoMiniComponent] 14 | }) 15 | export class HeaderModule { } 16 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/header/header.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, ElementRef } from '@angular/core'; 2 | 3 | 4 | @Injectable() 5 | export class HeaderService { 6 | public elementRef?: ElementRef; 7 | 8 | public get offsetHeight(): number { 9 | return this.elementRef ? this.elementRef.nativeElement.offsetHeight : 0; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/index.ts: -------------------------------------------------------------------------------- 1 | export * from './layout.module'; 2 | 3 | export * from './content/content.module'; 4 | export * from './footer/footer.module'; 5 | export * from './header/header.module'; 6 | export * from './sidebar-left/sidebar-left.module'; 7 | export * from './sidebar-right/sidebar-right.module'; 8 | export * from './wrapper/wrapper.module'; 9 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/layout.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, ModuleWithProviders, Optional, SkipSelf } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | 5 | import { ContentModule } from './content/content.module'; 6 | import { FooterModule } from './footer/footer.module'; 7 | import { HeaderModule } from './header/header.module'; 8 | import { SidebarLeftModule } from './sidebar-left/sidebar-left.module'; 9 | import { SidebarRightModule } from './sidebar-right/sidebar-right.module'; 10 | import { WrapperModule } from './wrapper/wrapper.module'; 11 | import { LayoutService } from './layout.service'; 12 | import { LayoutState, LayoutStateConf } from './layout.state'; 13 | import { layoutProvider } from './layout.provider'; 14 | import { RoutingService } from '../services/routing.service'; 15 | import { WrapperService } from './wrapper/wrapper.service'; 16 | import { SidebarRightService } from './sidebar-right/sidebar-right.service'; 17 | import { HeaderService } from './header/header.service'; 18 | import { FooterService } from './footer/footer.service'; 19 | 20 | export * from './layout.service'; 21 | export * from './layout.store'; 22 | export * from './layout.state'; 23 | 24 | 25 | @NgModule({ 26 | imports: [CommonModule, RouterModule], 27 | exports: [ContentModule, FooterModule, HeaderModule, SidebarLeftModule, SidebarRightModule, WrapperModule], 28 | providers: [RoutingService, WrapperService, SidebarRightService, HeaderService, FooterService] 29 | }) 30 | export class LayoutModule { 31 | 32 | constructor(@Optional() @SkipSelf() parentModule: LayoutModule) { 33 | if (parentModule) { 34 | throw new Error('LayoutModule is already loaded. Import it in the AppModule only!'); 35 | } 36 | } 37 | 38 | static forRoot(layoutConfig: LayoutStateConf): ModuleWithProviders { 39 | return { 40 | ngModule: LayoutModule, 41 | providers: [...layoutProvider(layoutConfig), LayoutService] 42 | }; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/layout.provider.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken, Provider } from '@angular/core'; 2 | 3 | import { LayoutStore } from './layout.store'; 4 | import { LayoutState, LayoutStateConf } from './layout.state'; 5 | 6 | 7 | export const LayoutConfigToken = new InjectionToken('layoutConfig'); 8 | 9 | 10 | export function layoutStoreFactory(layoutConfig: LayoutState): LayoutStore { 11 | return new LayoutStore(layoutConfig); 12 | } 13 | 14 | 15 | export function layoutProvider(layoutConfig: LayoutStateConf): Provider[] { 16 | return [{ 17 | provide: LayoutStore, 18 | useFactory: layoutStoreFactory, 19 | deps: [LayoutConfigToken] 20 | }, { 21 | provide: LayoutConfigToken, 22 | useValue: layoutConfig 23 | } 24 | ]; 25 | } 26 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/layout.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { ActivationStart, Router } from '@angular/router'; 3 | 4 | import { BehaviorSubject } from 'rxjs'; 5 | 6 | 7 | @Injectable() 8 | export class LayoutService { 9 | public isCustomLayout = new BehaviorSubject(false); 10 | 11 | private customLayout = false; 12 | 13 | constructor( 14 | private router: Router 15 | ) { 16 | this.init(); 17 | } 18 | 19 | private init(): void { 20 | this.router.events.subscribe(event => { 21 | if (event instanceof ActivationStart) { 22 | this.customLayout = event.snapshot.data.customLayout; 23 | this.isCustomLayout.next(this.customLayout); 24 | } 25 | }); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/layout.state.ts: -------------------------------------------------------------------------------- 1 | export interface LayoutStateConf { 2 | isSidebarLeftCollapsed?: boolean; 3 | isSidebarLeftExpandOnOver?: boolean; 4 | isSidebarLeftMouseOver?: boolean; 5 | isSidebarLeftMini?: boolean; 6 | sidebarRightSkin?: string; 7 | isSidebarRightCollapsed?: boolean; 8 | isSidebarRightOverContent?: boolean; 9 | layout?: string; 10 | sidebarLeftMenu?: Array; 11 | sidebarLeftMenuActiveUrl?: string; 12 | skin?: string; 13 | } 14 | 15 | 16 | export class LayoutState implements LayoutStateConf { 17 | windowInnerHeight?: number; 18 | windowInnerWidth?: number; 19 | sidebarLeftElementHeight?: number; 20 | sidebarRightElementHeight?: number; 21 | 22 | isSidebarLeftCollapsed = false; 23 | isSidebarLeftExpandOnOver = false; 24 | isSidebarLeftMouseOver = false; 25 | isSidebarLeftMini = true; 26 | sidebarRightSkin = 'dark'; 27 | isSidebarRightCollapsed = true; 28 | isSidebarRightOverContent = true; 29 | layout = 'normal'; 30 | sidebarLeftMenu = []; 31 | sidebarLeftMenuActiveUrl = ''; 32 | skin = 'blue'; 33 | 34 | constructor(config: Partial) { 35 | Object.assign(this, config); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/sidebar-left/sidebar-left.component.css: -------------------------------------------------------------------------------- 1 | .treeview-menu.collapse { 2 | display: none; 3 | } 4 | 5 | .treeview-menu, 6 | .treeview-menu.collapse.in { 7 | display: block; 8 | } 9 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/sidebar-left/sidebar-left.component.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 |
  • 14 | {{item.label}} 15 | 16 | {{item.label}} 17 | 18 | {{rightItem.text}} 19 | 20 | 21 | 22 | 23 | {{item.label}} 24 | 25 | {{rightItem.text}} 26 | 27 | 28 | 29 |
      30 | 31 | 32 | 33 |
    34 |
    • 35 |     36 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/sidebar-left/sidebar-left.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input, ElementRef } from '@angular/core'; 2 | 3 | import { Item } from './sidebar-left.component'; 4 | 5 | 6 | @Directive({ 7 | selector: '[mkMenuToggle]' 8 | }) 9 | export class SidebarLeftToggleDirective { 10 | // TODO: Add @Required decorator 11 | @Input('mkMenuToggle') item!: Item; 12 | 13 | constructor( 14 | public elementRef: ElementRef 15 | ) {} 16 | } 17 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/sidebar-left/sidebar-left.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | 5 | import { AnimationsModule } from '../../animations/animations.module'; 6 | import { SidebarLeftToggleDirective } from './sidebar-left.directive'; 7 | import { SidebarLeftComponent } from './sidebar-left.component'; 8 | export { SidebarLeftToggleDirective } from './sidebar-left.directive'; 9 | export { SidebarLeftComponent } from './sidebar-left.component'; 10 | 11 | 12 | @NgModule({ 13 | imports: [CommonModule, RouterModule, AnimationsModule], 14 | exports: [SidebarLeftComponent], 15 | declarations: [SidebarLeftToggleDirective, SidebarLeftComponent] 16 | }) 17 | export class SidebarLeftModule {} 18 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/sidebar-right/sidebar-right.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | height: 100%; 4 | } 5 | 6 | .control-sidebar-bg { 7 | z-index: -1; 8 | } 9 | 10 | /deep/ .tab-content { 11 | padding: 10px 15px; 12 | } 13 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/sidebar-right/sidebar-right.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 |
    5 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/sidebar-right/sidebar-right.component.ts: -------------------------------------------------------------------------------- 1 | import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild} from '@angular/core'; 2 | 3 | import { Subscription } from 'rxjs'; 4 | 5 | import {WrapperService} from '../wrapper/wrapper.service'; 6 | import {LayoutStore} from '../layout.store'; 7 | import {SidebarRightService} from './sidebar-right.service'; 8 | import {removeListeners, removeSubscriptions} from '../../helpers'; 9 | 10 | 11 | @Component({ 12 | selector: 'mk-layout-sidebar-right', 13 | templateUrl: './sidebar-right.component.html', 14 | styleUrls: ['./sidebar-right.component.css'], 15 | changeDetection: ChangeDetectionStrategy.OnPush 16 | }) 17 | export class SidebarRightComponent implements OnInit, AfterViewInit, OnDestroy { 18 | @ViewChild('sidebarContentElement', { static: true }) public sidebarContentElement!: ElementRef; 19 | 20 | public layout?: string; 21 | 22 | private skin?: string; 23 | private isSidebarRightOverContent?: boolean; 24 | private isSidebarRightCollapsed?: boolean; 25 | private listeners: (() => void)[] = []; 26 | private subscriptions: Subscription[] = []; 27 | 28 | constructor( 29 | private elementRef: ElementRef, 30 | private renderer2: Renderer2, 31 | private layoutStore: LayoutStore, 32 | private sidebarRightService: SidebarRightService, 33 | private wrapperService: WrapperService 34 | ) {} 35 | 36 | ngOnInit(): void { 37 | this.renderer2.addClass(this.elementRef.nativeElement, 'control-sidebar'); 38 | 39 | this.subscriptions.push(this.layoutStore.isSidebarRightCollapsed.subscribe(value => { 40 | this.isSidebarRightCollapsed = value; 41 | 42 | if (!value) { 43 | this.renderer2.addClass(this.elementRef.nativeElement, 'control-sidebar-open'); 44 | if (!this.isSidebarRightOverContent) { 45 | this.renderer2.addClass(this.wrapperService.wrapperElementRef.nativeElement, 'control-sidebar-open'); 46 | } 47 | } else { 48 | this.renderer2.removeClass(this.elementRef.nativeElement, 'control-sidebar-open'); 49 | if (!this.isSidebarRightOverContent) { 50 | this.renderer2.removeClass(this.wrapperService.wrapperElementRef.nativeElement, 'control-sidebar-open'); 51 | } 52 | } 53 | })); 54 | 55 | this.subscriptions.push(this.layoutStore.isSidebarRightOverContent.subscribe(value => { 56 | this.isSidebarRightOverContent = value; 57 | 58 | if (!this.isSidebarRightCollapsed) { 59 | if (value) { 60 | this.renderer2.removeClass(this.wrapperService.wrapperElementRef.nativeElement, 'control-sidebar-open'); 61 | } else { 62 | this.renderer2.addClass(this.wrapperService.wrapperElementRef.nativeElement, 'control-sidebar-open'); 63 | } 64 | } 65 | })); 66 | 67 | this.subscriptions.push(this.layoutStore.sidebarRightSkin.subscribe((value: string) => { 68 | if (this.skin !== value) { 69 | this.renderer2.removeClass(this.elementRef.nativeElement, `control-sidebar-${this.skin}`); 70 | } 71 | this.skin = value; 72 | this.renderer2.addClass(this.elementRef.nativeElement, `control-sidebar-${value}`); 73 | })); 74 | } 75 | 76 | ngAfterViewInit(): void { 77 | this.sidebarRightService.elementRef = this.sidebarContentElement; 78 | } 79 | 80 | ngOnDestroy(): void { 81 | this.listeners = removeListeners(this.listeners); 82 | this.subscriptions = removeSubscriptions(this.subscriptions); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/sidebar-right/sidebar-right.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { SidebarRightComponent } from './sidebar-right.component'; 5 | 6 | export { SidebarRightComponent } from './sidebar-right.component'; 7 | 8 | 9 | @NgModule({ 10 | imports: [CommonModule], 11 | exports: [SidebarRightComponent], 12 | declarations: [SidebarRightComponent] 13 | }) 14 | export class SidebarRightModule {} 15 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/sidebar-right/sidebar-right.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, ElementRef } from '@angular/core'; 2 | 3 | 4 | @Injectable() 5 | export class SidebarRightService { 6 | public elementRef?: ElementRef; 7 | 8 | get scrollHeight(): number { 9 | return this.elementRef ? this.elementRef.nativeElement.scrollHeight : 0; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/wrapper/wrapper.component.css: -------------------------------------------------------------------------------- 1 | .wrapper.overflow { 2 | overflow: hidden; 3 | } 4 | 5 | :host { 6 | display: block; 7 | } 8 | 9 | :host /deep/ .sidebar-right-toggle > a { 10 | color: #fff; 11 | } 12 | 13 | :host.sidebar-mini.sidebar-collapse /deep/ .treeview-menu.collapsing { 14 | height: auto !important; 15 | } 16 | 17 | :host /deep/ .sidebar-right-toggle > a:hover { 18 | background: rgba(0, 0, 0, 0.1); 19 | } 20 | 21 | :host.skin-black /deep/ .sidebar-right-toggle > a, 22 | :host.skin-black-light /deep/ .sidebar-right-toggle > a { 23 | color: #333; 24 | border-right-width: 0; 25 | } 26 | 27 | :host.skin-black /deep/ .sidebar-right-toggle > a:hover, 28 | :host.skin-black-light /deep/ .sidebar-right-toggle > a:hover { 29 | background-color: #fff; 30 | color: #999; 31 | } 32 | 33 | :host.skin-black /deep/ .sidebar-right-toggle > a { 34 | border-left: 1px solid #eee; 35 | } 36 | 37 | :host.skin-black-light /deep/ .sidebar-right-toggle > a { 38 | border-left: 1px solid #d2d6de; 39 | } 40 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/wrapper/wrapper.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/wrapper/wrapper.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Renderer2, ElementRef, NgZone, OnDestroy } from '@angular/core'; 2 | 3 | import { Subscription } from 'rxjs'; 4 | 5 | import { throttle, removeSubscriptions, removeListeners } from '../../helpers'; 6 | import { LayoutStore } from '../layout.store'; 7 | import { WrapperService } from './wrapper.service'; 8 | 9 | 10 | @Component({ 11 | selector: 'mk-layout-wrapper', 12 | templateUrl: './wrapper.component.html', 13 | styleUrls: ['./wrapper.component.css'] 14 | }) 15 | export class WrapperComponent implements OnInit, OnDestroy { 16 | private skin?: string; 17 | private listeners: (() => void)[] = []; 18 | private subscriptions: Subscription[] = []; 19 | 20 | constructor( 21 | private elementRef: ElementRef, 22 | private renderer2: Renderer2, 23 | private layoutStore: LayoutStore, 24 | private wrapperService: WrapperService, 25 | private ngZone: NgZone 26 | ) {} 27 | 28 | ngOnInit(): void { 29 | this.layoutStore.setWindowInnerHeight(window.innerHeight); 30 | this.layoutStore.setWindowInnerWidth(window.innerWidth); 31 | 32 | this.wrapperService.wrapperElementRef = this.elementRef; 33 | 34 | this.ngZone.runOutsideAngular(() => { 35 | this.listeners.push(this.renderer2.listen('window', 'resize', throttle(() => { 36 | this.layoutStore.setWindowInnerHeight(window.innerHeight); 37 | this.layoutStore.setWindowInnerWidth(window.innerWidth); 38 | }, 250))); 39 | }); 40 | 41 | this.subscriptions.push(this.layoutStore.layout.subscribe(value => { 42 | value === 'fixed' ? this.renderer2.addClass(this.elementRef.nativeElement, 'fixed') : 43 | this.renderer2.removeClass(this.elementRef.nativeElement, 'fixed'); 44 | value === 'boxed' ? this.renderer2.addClass(this.elementRef.nativeElement, 'layout-boxed') : 45 | this.renderer2.removeClass(this.elementRef.nativeElement, 'layout-boxed'); 46 | })); 47 | 48 | this.subscriptions.push(this.layoutStore.skin.subscribe(value => { 49 | if (this.skin && this.skin !== value) { 50 | this.renderer2.removeClass(this.elementRef.nativeElement, `skin-${this.skin}`); 51 | } 52 | 53 | this.skin = value; 54 | this.renderer2.addClass(this.elementRef.nativeElement, `skin-${this.skin}`); 55 | })); 56 | } 57 | 58 | ngOnDestroy(): void { 59 | this.subscriptions = removeSubscriptions(this.subscriptions); 60 | this.listeners = removeListeners(this.listeners); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/wrapper/wrapper.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { WrapperComponent } from './wrapper.component'; 5 | 6 | export { WrapperComponent } from './wrapper.component'; 7 | 8 | @NgModule({ 9 | imports: [CommonModule], 10 | exports: [WrapperComponent], 11 | declarations: [WrapperComponent] 12 | }) 13 | export class WrapperModule {} 14 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/layout/wrapper/wrapper.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, ElementRef } from '@angular/core'; 2 | 3 | 4 | @Injectable() 5 | export class WrapperService { 6 | public wrapperElementRef!: ElementRef; 7 | } 8 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/services/class.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Renderer2, ElementRef } from '@angular/core'; 2 | 3 | 4 | @Injectable() 5 | export class ClassService { 6 | private currentClasses: string[] = []; 7 | 8 | constructor( 9 | private elementRef: ElementRef, 10 | private renderer2: Renderer2 11 | ) {} 12 | 13 | public applyClasses(cssClasses: string | string[]): void { 14 | if (typeof cssClasses === 'string') { 15 | cssClasses = cssClasses.split(' '); 16 | } 17 | 18 | // Remove only classes that are not in cssClasses 19 | const classesToRemove = this.currentClasses.filter(x => cssClasses.indexOf(x) === -1); 20 | classesToRemove.forEach(cssClasse => { 21 | if (cssClasse) { 22 | this.renderer2.removeClass(this.elementRef.nativeElement, cssClasse); 23 | } 24 | }); 25 | 26 | // Add only classes that are not in currentClasses 27 | const classesToAdd = cssClasses.filter(x => this.currentClasses.indexOf(x) === -1); 28 | classesToAdd.forEach(cssClasse => { 29 | if (cssClasse) { 30 | this.renderer2.addClass(this.elementRef.nativeElement, cssClasse); 31 | } 32 | }); 33 | 34 | // Update current classes for future updates 35 | this.currentClasses = [... cssClasses]; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/services/routing.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { ActivatedRouteSnapshot, NavigationEnd, PRIMARY_OUTLET, Router } from '@angular/router'; 3 | 4 | import { BehaviorSubject } from 'rxjs'; 5 | 6 | 7 | export interface Path { 8 | data: object; 9 | params: object; 10 | url: string | null; 11 | } 12 | 13 | 14 | export interface Paths extends Array {} 15 | 16 | 17 | @Injectable() 18 | export class RoutingService { 19 | public onChange = new BehaviorSubject(undefined); 20 | public events = new BehaviorSubject(undefined); 21 | 22 | constructor( 23 | private router: Router 24 | ) { 25 | this.init(); 26 | } 27 | 28 | private static createUrl(route: ActivatedRouteSnapshot): string { 29 | const url = route.url.map(urlSegment => urlSegment.toString()).join('/'); 30 | return url; 31 | } 32 | 33 | private static isChildrenSelfRoute(route: ActivatedRouteSnapshot): boolean { 34 | let test = false; 35 | 36 | route?.routeConfig?.children?.forEach(child => { 37 | if (child.path === '' && (child.component || child.loadChildren)) { 38 | test = true; 39 | } 40 | }); 41 | 42 | return test; 43 | } 44 | 45 | private static createBreadcrumb(route: ActivatedRouteSnapshot, url: string): Path { 46 | let isUrl = true; 47 | 48 | if (route.children.length !== 0 && route?.firstChild?.routeConfig?.path) { 49 | if (url !== '/' && !route?.routeConfig?.loadChildren 50 | && !route?.routeConfig?.component && !RoutingService.isChildrenSelfRoute(route)) { 51 | isUrl = false; 52 | } 53 | } 54 | 55 | return { 56 | data: route.data, 57 | params : route.params, 58 | url: isUrl ? url : null 59 | }; 60 | } 61 | 62 | private init(): void { 63 | this.router.events.subscribe(routeEvent => { 64 | // https://github.com/angular/angular/issues/17473: event not fired anymore on load for routed component. 65 | if (routeEvent instanceof NavigationEnd) { 66 | this.events.next(routeEvent); 67 | let route = this.router.routerState.root.snapshot; 68 | let tmpUrl = ''; 69 | let url = ''; 70 | let rootRoot = true; 71 | 72 | const paths: Paths = []; 73 | 74 | while (route.children.length) { 75 | route = route.firstChild || route; 76 | tmpUrl = `/${RoutingService.createUrl(route)}`; 77 | 78 | if (route.outlet !== PRIMARY_OUTLET || (!route?.routeConfig?.path && !rootRoot)) { 79 | continue; 80 | } 81 | 82 | rootRoot = false; 83 | 84 | if (route.params && route.data) { 85 | for (const key in route.params) { 86 | if (!key) { continue; } 87 | if (route.data.hasOwnProperty('title')) { 88 | route.data.title = route.data.title.replace(`:${key}`, route.params[key]); 89 | route.data.title = route.data.title.replace(`:${key}`, route.params[key]); 90 | } 91 | if (route.data.hasOwnProperty('breadcrumbs')) { 92 | route.data.breadcrumbs = route.data.breadcrumbs.replace(`:${key}`, route.params[key]); 93 | } 94 | if (route.data.hasOwnProperty('description')) { 95 | route.data.description = route.data.description.replace(`:${key}`, route.params[key]); 96 | } 97 | } 98 | } 99 | 100 | if (tmpUrl === '/') { 101 | paths.push(RoutingService.createBreadcrumb(route, tmpUrl)); 102 | } else { 103 | url += tmpUrl; 104 | paths.push(RoutingService.createBreadcrumb(route, url)); 105 | } 106 | } 107 | 108 | this.onChange.next(paths); 109 | } 110 | }); 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/services/style.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Renderer2, ElementRef } from '@angular/core'; 2 | 3 | 4 | @Injectable() 5 | export class StyleService { 6 | private currentStyles: string[] = []; 7 | 8 | constructor( 9 | private elementRef: ElementRef, 10 | private renderer2: Renderer2 11 | ) {} 12 | 13 | public applyStyles(styles: {style: string, value: any}[]): void { 14 | styles.forEach(style => { 15 | this.applyStyle(style.style, style.value); 16 | }); 17 | } 18 | 19 | public applyStyle(style: string, value: any): void { 20 | if (style && value) { 21 | this.resetStyles(); 22 | this.currentStyles.push(style); 23 | this.renderer2.setStyle(this.elementRef.nativeElement, style, value); 24 | } 25 | } 26 | 27 | public resetStyles(): void { 28 | this.currentStyles.forEach(style => { 29 | this.renderer2.removeStyle(this.elementRef, style); 30 | }); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tabs.module'; 2 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/tabs/tabs.component.css: -------------------------------------------------------------------------------- 1 | .nav-tabs-custom > .nav-tabs > li { 2 | border-top-width: 0; 3 | } 4 | 5 | .nav-tabs-custom > .nav-tabs > li.active { 6 | border-top-width: 3px; 7 | } 8 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/tabs/tabs.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 18 |
    19 |
    20 | 21 | 22 |
    23 |
    24 |
    25 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/tabs/tabs.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input, ElementRef } from '@angular/core'; 2 | import { TabComponent } from './tabs.component'; 3 | 4 | 5 | @Directive({ 6 | selector: '[mkTabToggle]' 7 | }) 8 | export class TabToggleDirective { 9 | // TODO: Add @Required decorator 10 | @Input('mkTabToggle') tabComponent!: TabComponent; 11 | 12 | constructor( 13 | public elementRef: ElementRef 14 | ) {} 15 | } 16 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/lib/tabs/tabs.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { ColorModule } from '../color/color.module'; 5 | import { TabToggleDirective } from './tabs.directive'; 6 | import { TabsComponent, TabsHeaderComponent, TabComponent, TabHeaderComponent, TabContentComponent } from './tabs.component'; 7 | 8 | export { TabToggleDirective } from './tabs.directive'; 9 | export { TabsComponent, TabsHeaderComponent, TabComponent, TabHeaderComponent, TabContentComponent } from './tabs.component'; 10 | 11 | @NgModule({ 12 | imports: [CommonModule, ColorModule], 13 | exports: [TabsComponent, TabsHeaderComponent, TabComponent, TabHeaderComponent, TabContentComponent], 14 | declarations: [TabToggleDirective, TabsComponent, TabsHeaderComponent, TabComponent, TabHeaderComponent, TabContentComponent] 15 | }) 16 | export class TabsModule {} 17 | -------------------------------------------------------------------------------- /library/angular-admin-lte/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone'; 4 | import 'zone.js/dist/zone-testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | declare const require: { 12 | context(path: string, deep?: boolean, filter?: RegExp): { 13 | keys(): string[]; 14 | (id: string): T; 15 | }; 16 | }; 17 | 18 | // First, initialize the Angular testing environment. 19 | getTestBed().initTestEnvironment( 20 | BrowserDynamicTestingModule, 21 | platformBrowserDynamicTesting() 22 | ); 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /library/angular-admin-lte/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "target": "es2015", 7 | "declaration": true, 8 | "declarationMap": true, 9 | "inlineSources": true, 10 | "types": [], 11 | "lib": [ 12 | "dom", 13 | "es2018" 14 | ] 15 | }, 16 | "angularCompilerOptions": { 17 | "skipTemplateCodegen": true, 18 | "strictMetadataEmit": true, 19 | "enableResourceInlining": true 20 | }, 21 | "exclude": [ 22 | "src/test.ts", 23 | "**/*.spec.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /library/angular-admin-lte/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "enableIvy": false 8 | } 9 | } -------------------------------------------------------------------------------- /library/angular-admin-lte/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine" 7 | ] 8 | }, 9 | "files": [ 10 | "src/test.ts" 11 | ], 12 | "include": [ 13 | "**/*.spec.ts", 14 | "**/*.d.ts" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /library/angular-admin-lte/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "mk", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "mk", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-admin-lte-demo", 3 | "version": "4.0.0", 4 | "keywords": [ 5 | "angular", 6 | "angular 2", 7 | "angular 4", 8 | "angular 5", 9 | "angular 6", 10 | "angular 7", 11 | "typescript", 12 | "admin-lte" 13 | ], 14 | "scripts": { 15 | "ng": "ng", 16 | "start": "ng serve", 17 | "build": "ng build", 18 | "build:lib": "ng build angular-admin-lte --prod", 19 | "publish:lib": "npm publish dist/angular-admin-lte", 20 | "build:demo": "ng build angular-admin-lte-demo --prod --base-href=/angular-admin-lte/", 21 | "gh-pages": "node ./scripts/gh-pages-multi/bin/gh-pages-multi.js deploy -s dist/angular-admin-lte-demo --dry-run --tmp-dir", 22 | "test": "ng test", 23 | "test:demo": "ng test angular-admin-lte-demo", 24 | "test:lib": "ng test angular-admin-lte", 25 | "lint": "ng lint", 26 | "e2e": "ng e2e" 27 | }, 28 | "repository": { 29 | "type": "git", 30 | "url": "git://github.com/mledour/angular-admin-lte.git" 31 | }, 32 | "author": { 33 | "name": "Mik@", 34 | "email": "michael.ledour@gmail.com" 35 | }, 36 | "license": "MIT", 37 | "private": false, 38 | "dependencies": { 39 | "@angular/animations": "~11.0.9", 40 | "@angular/common": "~11.0.9", 41 | "@angular/compiler": "~11.0.9", 42 | "@angular/core": "~11.0.9", 43 | "@angular/forms": "~11.0.9", 44 | "@angular/platform-browser": "~11.0.9", 45 | "@angular/platform-browser-dynamic": "~11.0.9", 46 | "@angular/router": "~11.0.9", 47 | "@types/prismjs": "^1.16.2", 48 | "admin-lte-css": "^2.4.3", 49 | "angular-loading-page": "^4.0.0", 50 | "bootstrap-css-only": "^3.3.7", 51 | "font-awesome": "^4.7.0", 52 | "ionicons": "^2.0.1", 53 | "prismjs": "^1.23.0", 54 | "rxjs": "~6.6.0", 55 | "tslib": "^2.0.0", 56 | "zone.js": "~0.10.2" 57 | }, 58 | "devDependencies": { 59 | "@angular-devkit/build-angular": "~0.1100.7", 60 | "@angular/cli": "~11.0.7", 61 | "@angular/compiler-cli": "~11.0.9", 62 | "@angular/language-service": "~11.0.9", 63 | "@types/jasmine": "~3.6.0", 64 | "@types/jasminewd2": "~2.0.3", 65 | "@types/node": "^12.11.1", 66 | "codelyzer": "^6.0.0", 67 | "jasmine-core": "~3.6.0", 68 | "jasmine-spec-reporter": "~5.0.0", 69 | "karma": "~5.1.1", 70 | "karma-chrome-launcher": "~3.1.0", 71 | "karma-coverage": "~2.0.3", 72 | "karma-jasmine": "~4.0.0", 73 | "karma-jasmine-html-reporter": "^1.5.0", 74 | "ng-packagr": "^11.0.3", 75 | "protractor": "~7.0.0", 76 | "ts-node": "~8.3.0", 77 | "tslint": "~6.1.0", 78 | "typescript": "~4.0.2" 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /scripts/gh-pages.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | tmpDir=$1 4 | srcDir=$2 5 | 6 | oldPath="$tmpDir/old" 7 | newPath="$tmpDir/new" 8 | 9 | # Get the opened pull requests 10 | jsonPulls=$(curl -k -H "Authorization: token $GITHUB_TOKEN" https://api.github.com/repos/${TRAVIS_REPO_SLUG}/pulls?state=open) 11 | arrPulls=$(jq -n "$jsonPulls" | jq -r '.[].number') 12 | 13 | # Get the active branches 14 | jsonBranches=$(curl -k -H "Authorization: token $GITHUB_TOKEN" https://api.github.com/repos/${TRAVIS_REPO_SLUG}/branches?state=open) 15 | arrBranches=$(jq -n "$jsonBranches" | jq -r '.[].name') 16 | 17 | # Clone gh-pages to tmpDir 18 | git clone --quiet --single-branch -b gh-pages https://${GITHUB_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git ${oldPath} 19 | 20 | # Clean old git folder 21 | if [ "$TRAVIS_PULL_REQUEST" != false ] ; then 22 | target="pulls/$TRAVIS_PULL_REQUEST" 23 | else 24 | target="branches/$TRAVIS_BRANCH" 25 | fi 26 | cd $oldPath 27 | eval "git filter-branch --tree-filter 'rm -rf $target' --prune-empty HEAD" 28 | 29 | # Create new folder and copy git conf 30 | mkdir -p ${newPath} 31 | cp -R ${oldPath}/.git ${newPath}/.git 32 | 33 | # Copy branches folders 34 | for branch in $arrBranches; do 35 | [[ -d ${oldPath}/branches/${branch} ]] && 36 | mkdir -p ${newPath}/branches/${branch} && 37 | cp -R ${oldPath}/branches/${branch}/* ${newPath}/branches/${branch} 38 | done 39 | 40 | # Copy pulls folders 41 | for pull in $arrPulls; do 42 | [[ -d ${oldPath}/pulls/${pull} ]] && 43 | mkdir -p ${newPath}/pulls/${pull} && 44 | cp -R ${oldPath}/pulls/${pull}/* ${newPath}/pulls/${pull} 45 | done 46 | 47 | # Add new build to repo 48 | mkdir -p ${newPath}/${target} 49 | cp -Rp ${srcDir}/* ${newPath}/${target} 50 | 51 | # Push changes 52 | cd $newPath 53 | git add -A 54 | git commit -m "Travis commit" 55 | git push --force -u origin gh-pages 56 | 57 | -------------------------------------------------------------------------------- /src/app/+accordion/accordion-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { AccordionComponent } from './accordion.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: AccordionComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class AccordionRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+accordion/accordion.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/app/+accordion/accordion.component.css -------------------------------------------------------------------------------- /src/app/+accordion/accordion.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { AccordionComponent } from './accordion.component'; 4 | 5 | import { AccordionModule, BoxModule } from 'angular-admin-lte'; 6 | 7 | describe('AccordionComponent', () => { 8 | let component: AccordionComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ 14 | AccordionModule, 15 | BoxModule 16 | ], 17 | declarations: [ AccordionComponent ] 18 | }) 19 | .compileComponents(); 20 | })); 21 | 22 | beforeEach(() => { 23 | fixture = TestBed.createComponent(AccordionComponent); 24 | component = fixture.componentInstance; 25 | fixture.detectChanges(); 26 | }); 27 | 28 | it('should create', () => { 29 | expect(component).toBeTruthy(); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /src/app/+accordion/accordion.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, AfterViewInit, NgZone, ChangeDetectorRef, ViewRef} from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | selector: 'app-accordion', 7 | templateUrl: './accordion.component.html', 8 | styleUrls: ['./accordion.component.css'] 9 | }) 10 | export class AccordionComponent implements AfterViewInit { 11 | public activeIndex: any = 0; 12 | 13 | constructor( 14 | private ngZone: NgZone, 15 | private changeDetectorRef: ChangeDetectorRef 16 | ) {} 17 | 18 | /** 19 | * @method ngAfterViewInit 20 | */ 21 | ngAfterViewInit(): void { 22 | Prism.highlightAll(); 23 | 24 | this.ngZone.runOutsideAngular(() => { 25 | setTimeout(() => { 26 | this.activeIndex = [1, 2, 3]; 27 | if (! (this.changeDetectorRef as ViewRef).destroyed) { 28 | this.changeDetectorRef.detectChanges(); 29 | } 30 | }, 500); 31 | }); 32 | 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/app/+accordion/accordion.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { AccordionRoutingModule } from './accordion-routing.module'; 5 | import { AccordionComponent } from './accordion.component'; 6 | 7 | import { AccordionModule as MkAccordionModule, BoxModule } from 'angular-admin-lte'; 8 | 9 | 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | AccordionRoutingModule, 14 | MkAccordionModule, 15 | BoxModule 16 | ], 17 | declarations: [AccordionComponent] 18 | }) 19 | export class AccordionModule { } 20 | -------------------------------------------------------------------------------- /src/app/+alert/alert-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { AlertComponent } from './alert.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: AlertComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class AlertRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+alert/alert.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/app/+alert/alert.component.css -------------------------------------------------------------------------------- /src/app/+alert/alert.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { AlertComponent } from './alert.component'; 4 | 5 | import { AlertModule, BoxModule } from 'angular-admin-lte'; 6 | 7 | describe('AlertComponent', () => { 8 | let component: AlertComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ 14 | AlertModule, 15 | BoxModule 16 | ], 17 | declarations: [ AlertComponent ] 18 | }) 19 | .compileComponents(); 20 | })); 21 | 22 | beforeEach(() => { 23 | fixture = TestBed.createComponent(AlertComponent); 24 | component = fixture.componentInstance; 25 | fixture.detectChanges(); 26 | }); 27 | 28 | it('should create', () => { 29 | expect(component).toBeTruthy(); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /src/app/+alert/alert.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | selector: 'app-alert', 7 | templateUrl: './alert.component.html', 8 | styleUrls: ['./alert.component.css'] 9 | }) 10 | export class AlertComponent implements AfterViewInit { 11 | /** 12 | * @method ngAfterViewInit 13 | */ 14 | ngAfterViewInit(): void { 15 | Prism.highlightAll(); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/+alert/alert.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { AlertRoutingModule } from './alert-routing.module'; 5 | import { AlertComponent } from './alert.component'; 6 | 7 | import { AlertModule as MkAlertModule, BoxModule } from 'angular-admin-lte'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | AlertRoutingModule, 13 | MkAlertModule, 14 | BoxModule 15 | ], 16 | declarations: [AlertComponent] 17 | }) 18 | export class AlertModule { } 19 | -------------------------------------------------------------------------------- /src/app/+boxs/box-default/box-default-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { BoxDefaultComponent } from './box-default.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: BoxDefaultComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class BoxDefaultRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+boxs/box-default/box-default.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/app/+boxs/box-default/box-default.component.css -------------------------------------------------------------------------------- /src/app/+boxs/box-default/box-default.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { BoxDefaultComponent } from './box-default.component'; 4 | 5 | import { BoxModule } from 'angular-admin-lte'; 6 | 7 | describe('BoxDefaultComponent', () => { 8 | let component: BoxDefaultComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ BoxModule ], 14 | declarations: [ BoxDefaultComponent ] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(BoxDefaultComponent); 21 | component = fixture.componentInstance; 22 | fixture.detectChanges(); 23 | }); 24 | 25 | it('should create', () => { 26 | expect(component).toBeTruthy(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/app/+boxs/box-default/box-default.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | templateUrl: './box-default.component.html', 7 | styleUrls: ['./box-default.component.css'] 8 | }) 9 | export class BoxDefaultComponent implements AfterViewInit { 10 | 11 | /** 12 | * @method ngAfterViewInit 13 | */ 14 | ngAfterViewInit(): void { 15 | Prism.highlightAll(); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/+boxs/box-default/box-default.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { BoxDefaultRoutingModule } from './box-default-routing.module'; 5 | import { BoxDefaultComponent } from './box-default.component'; 6 | 7 | import { BoxModule } from 'angular-admin-lte'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | BoxDefaultRoutingModule, 13 | BoxModule 14 | ], 15 | declarations: [BoxDefaultComponent] 16 | }) 17 | export class BoxDefaultModule { } 18 | -------------------------------------------------------------------------------- /src/app/+boxs/box-info/box-info-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { BoxInfoComponent } from './box-info.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: BoxInfoComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class BoxInfoRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+boxs/box-info/box-info.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/app/+boxs/box-info/box-info.component.css -------------------------------------------------------------------------------- /src/app/+boxs/box-info/box-info.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { BoxInfoComponent } from './box-info.component'; 4 | 5 | import { BoxModule, BoxInfoModule } from 'angular-admin-lte'; 6 | 7 | describe('BoxInfoComponent', () => { 8 | let component: BoxInfoComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ 14 | BoxModule, 15 | BoxInfoModule 16 | ], 17 | declarations: [ BoxInfoComponent ] 18 | }) 19 | .compileComponents(); 20 | })); 21 | 22 | beforeEach(() => { 23 | fixture = TestBed.createComponent(BoxInfoComponent); 24 | component = fixture.componentInstance; 25 | fixture.detectChanges(); 26 | }); 27 | 28 | it('should create', () => { 29 | expect(component).toBeTruthy(); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /src/app/+boxs/box-info/box-info.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | selector: 'app-box-info', 7 | templateUrl: './box-info.component.html', 8 | styleUrls: ['./box-info.component.css'] 9 | }) 10 | export class BoxInfoComponent implements AfterViewInit { 11 | 12 | /** 13 | * @method ngAfterViewInit 14 | */ 15 | ngAfterViewInit(): void { 16 | Prism.highlightAll(); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/+boxs/box-info/box-info.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { BoxInfoRoutingModule } from './box-info-routing.module'; 5 | import { BoxInfoComponent } from './box-info.component'; 6 | 7 | import { BoxModule, BoxInfoModule as MkBoxInfoModule } from 'angular-admin-lte'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | BoxInfoRoutingModule, 13 | BoxModule, 14 | MkBoxInfoModule 15 | ], 16 | declarations: [BoxInfoComponent] 17 | }) 18 | export class BoxInfoModule { } 19 | -------------------------------------------------------------------------------- /src/app/+boxs/box-small/box-small-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { BoxSmallComponent } from './box-small.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: BoxSmallComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class BoxSmallRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+boxs/box-small/box-small.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/app/+boxs/box-small/box-small.component.css -------------------------------------------------------------------------------- /src/app/+boxs/box-small/box-small.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { BoxSmallComponent } from './box-small.component'; 4 | 5 | import { BoxModule, BoxSmallModule as MkBoxSmallModule } from 'angular-admin-lte'; 6 | 7 | describe('BoxSmallComponent', () => { 8 | let component: BoxSmallComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ 14 | BoxModule, 15 | MkBoxSmallModule 16 | ], 17 | declarations: [ BoxSmallComponent ] 18 | }) 19 | .compileComponents(); 20 | })); 21 | 22 | beforeEach(() => { 23 | fixture = TestBed.createComponent(BoxSmallComponent); 24 | component = fixture.componentInstance; 25 | fixture.detectChanges(); 26 | }); 27 | 28 | it('should create', () => { 29 | expect(component).toBeTruthy(); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /src/app/+boxs/box-small/box-small.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | selector: 'app-box-small', 7 | templateUrl: './box-small.component.html', 8 | styleUrls: ['./box-small.component.css'] 9 | }) 10 | export class BoxSmallComponent implements AfterViewInit { 11 | 12 | /** 13 | * @method ngAfterViewInit 14 | */ 15 | ngAfterViewInit(): void { 16 | Prism.highlightAll(); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/+boxs/box-small/box-small.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { BoxSmallRoutingModule } from './box-small-routing.module'; 5 | import { BoxSmallComponent } from './box-small.component'; 6 | 7 | import { BoxModule, BoxSmallModule as MkBoxSmallModule } from 'angular-admin-lte'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | BoxSmallRoutingModule, 13 | BoxModule, 14 | MkBoxSmallModule 15 | ], 16 | declarations: [BoxSmallComponent] 17 | }) 18 | export class BoxSmallModule {} 19 | -------------------------------------------------------------------------------- /src/app/+dropdown/dropdown-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { DropdownComponent } from './dropdown.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: DropdownComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class DropdownRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+dropdown/dropdown.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/app/+dropdown/dropdown.component.css -------------------------------------------------------------------------------- /src/app/+dropdown/dropdown.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { DropdownComponent } from './dropdown.component'; 4 | 5 | import { BoxModule, DropdownModule } from 'angular-admin-lte'; 6 | 7 | describe('DropdownComponent', () => { 8 | let component: DropdownComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ 14 | BoxModule, 15 | DropdownModule 16 | ], 17 | declarations: [ DropdownComponent ] 18 | }) 19 | .compileComponents(); 20 | })); 21 | 22 | beforeEach(() => { 23 | fixture = TestBed.createComponent(DropdownComponent); 24 | component = fixture.componentInstance; 25 | fixture.detectChanges(); 26 | }); 27 | 28 | it('should create', () => { 29 | expect(component).toBeTruthy(); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /src/app/+dropdown/dropdown.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | selector: 'app-dropdown', 7 | templateUrl: './dropdown.component.html', 8 | styleUrls: ['./dropdown.component.css'] 9 | }) 10 | export class DropdownComponent implements AfterViewInit { 11 | 12 | /** 13 | * 14 | */ 15 | ngAfterViewInit(): void { 16 | Prism.highlightAll(); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/+dropdown/dropdown.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { DropdownRoutingModule } from './dropdown-routing.module'; 5 | import { DropdownComponent } from './dropdown.component'; 6 | 7 | import { BoxModule, DropdownModule as mkDropdownModule } from 'angular-admin-lte'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | DropdownRoutingModule, 13 | BoxModule, 14 | mkDropdownModule 15 | ], 16 | declarations: [DropdownComponent] 17 | }) 18 | export class DropdownModule { } 19 | -------------------------------------------------------------------------------- /src/app/+form/input-text/input-text-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { InputTextComponent } from './input-text.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: InputTextComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class InputTextRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+form/input-text/input-text.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/app/+form/input-text/input-text.component.css -------------------------------------------------------------------------------- /src/app/+form/input-text/input-text.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { InputTextComponent } from './input-text.component'; 4 | 5 | import { BoxModule, InputGroupModule, InputTextModule } from 'angular-admin-lte'; 6 | import { NO_ERRORS_SCHEMA } from '@angular/core'; 7 | import { FormBuilder, NgControl } from '@angular/forms'; 8 | 9 | describe('InputTextComponent', () => { 10 | let component: InputTextComponent; 11 | let fixture: ComponentFixture; 12 | 13 | beforeEach(waitForAsync(() => { 14 | TestBed.configureTestingModule({ 15 | imports: [ 16 | BoxModule, 17 | InputGroupModule, 18 | InputTextModule 19 | ], 20 | declarations: [ InputTextComponent ], 21 | providers: [ 22 | FormBuilder, 23 | NgControl 24 | ], 25 | schemas: [ 26 | NO_ERRORS_SCHEMA 27 | ] 28 | }) 29 | .compileComponents(); 30 | })); 31 | 32 | beforeEach(() => { 33 | fixture = TestBed.createComponent(InputTextComponent); 34 | component = fixture.componentInstance; 35 | fixture.detectChanges(); 36 | }); 37 | 38 | it('should create', () => { 39 | expect(component).toBeTruthy(); 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /src/app/+form/input-text/input-text.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 3 | 4 | @Component({ 5 | templateUrl: './input-text.component.html', 6 | styleUrls: ['./input-text.component.css'] 7 | }) 8 | export class InputTextComponent implements OnInit { 9 | userForm!: FormGroup; 10 | 11 | constructor(private formBuilder: FormBuilder) {} 12 | 13 | ngOnInit(): void { 14 | this.userForm = this.formBuilder.group({ 15 | firstName: ['', [Validators.required, Validators.email]] 16 | }); 17 | } 18 | 19 | onSubmitForm(): void { 20 | console.log(this.userForm); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/+form/input-text/input-text.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { InputTextRoutingModule } from './input-text-routing.module'; 6 | import { InputTextComponent } from './input-text.component'; 7 | 8 | import { InputGroupModule, InputTextModule as mkInputTextModule, BoxModule } from 'angular-admin-lte'; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | ReactiveFormsModule, 15 | BoxModule, 16 | InputTextRoutingModule, 17 | mkInputTextModule, 18 | InputGroupModule 19 | ], 20 | declarations: [InputTextComponent] 21 | }) 22 | export class InputTextModule { } 23 | -------------------------------------------------------------------------------- /src/app/+layout/configuration/configuration-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { ConfigurationComponent } from './configuration.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: ConfigurationComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class ConfigurationRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+layout/configuration/configuration.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { ConfigurationComponent } from './configuration.component'; 4 | 5 | import { BoxModule } from 'angular-admin-lte'; 6 | 7 | describe('ConfigurationComponent', () => { 8 | let component: ConfigurationComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ BoxModule ], 14 | declarations: [ ConfigurationComponent ] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(ConfigurationComponent); 21 | component = fixture.componentInstance; 22 | fixture.detectChanges(); 23 | }); 24 | 25 | it('should create', () => { 26 | expect(component).toBeTruthy(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/app/+layout/configuration/configuration.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | selector: 'app-configuration', 7 | templateUrl: './configuration.component.html' 8 | }) 9 | export class ConfigurationComponent implements AfterViewInit { 10 | /** 11 | * @method ngAfterViewInit 12 | */ 13 | ngAfterViewInit(): void { 14 | Prism.highlightAll(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/app/+layout/configuration/configuration.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { ConfigurationRoutingModule } from './configuration-routing.module'; 5 | import { ConfigurationComponent } from './configuration.component'; 6 | 7 | import { BoxModule } from 'angular-admin-lte'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | ConfigurationRoutingModule, 13 | BoxModule 14 | ], 15 | declarations: [ConfigurationComponent] 16 | }) 17 | export class ConfigurationModule { } 18 | -------------------------------------------------------------------------------- /src/app/+layout/content/content-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { ContentComponent } from './content.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: ContentComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class ContentRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+layout/content/content.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/app/+layout/content/content.component.css -------------------------------------------------------------------------------- /src/app/+layout/content/content.component.html: -------------------------------------------------------------------------------- 1 | 2 |

    The content component is used for displaying router outlet, page title, page description and breadcrumbs.
    3 | Page title, page description and breadcrumbs can be configured in app routing module via the data property of routes.
    4 | Page title use title property, page description use description property and breadcrumbs use breadcrumbs property or title property if breadcrumbs is not defined.

    5 |     6 | 7 | 8 | 
    const routes: Routes = [{
 9 |   path: '',
10 |   data: {
11 |     title: 'Home'
12 |   }, children: [{
13 |     path: '',
14 |     component: HomeComponent
15 |   }, {
16 |     path: 'page',
17 |     loadChildren: 'app/+page/page.module#PageModule',
18 |     data: {
19 |       title: 'Accordion',
20 |     }
21 |   }, {
22 |     path: 'posts',
23 |     data: {
24 |       title: 'Posts',
25 |       description: 'All the posts',
26 |       breadcrumbs: 'Posts'
27 |     },
28 |     children: [{
29 |       path: '',
30 |       loadChildren: 'app/posts/posts.module#PostsModule',
31 |     }, {
32 |       path: ':id',
33 |       loadChildren: 'app/post/post.module#PostModule',
34 |       data: {
35 |         title: 'Post :id',
36 |         description: 'Post N°:id description',
37 |         breadcrumbs: 'Post :id'
38 |       }
39 |     }]
40 |   }
41 | }]
42 |
    43 |     44 | -------------------------------------------------------------------------------- /src/app/+layout/content/content.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { ContentComponent } from './content.component'; 4 | 5 | import { BoxModule } from 'angular-admin-lte'; 6 | 7 | describe('ContentComponent', () => { 8 | let component: ContentComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ BoxModule ], 14 | declarations: [ ContentComponent ] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(ContentComponent); 21 | component = fixture.componentInstance; 22 | fixture.detectChanges(); 23 | }); 24 | 25 | it('should create', () => { 26 | expect(component).toBeTruthy(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/app/+layout/content/content.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | selector: 'app-content', 7 | templateUrl: './content.component.html', 8 | styleUrls: ['./content.component.css'] 9 | }) 10 | export class ContentComponent implements AfterViewInit { 11 | /** 12 | * @method AfterViewInit 13 | */ 14 | ngAfterViewInit(): void { 15 | Prism.highlightAll(); 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /src/app/+layout/content/content.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { ContentRoutingModule } from './content-routing.module'; 5 | import { ContentComponent } from './content.component'; 6 | 7 | import { BoxModule } from 'angular-admin-lte'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | ContentRoutingModule, 13 | BoxModule 14 | ], 15 | declarations: [ContentComponent] 16 | }) 17 | export class ContentModule { } 18 | -------------------------------------------------------------------------------- /src/app/+layout/custom/custom-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { CustomComponent } from './custom.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: CustomComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class CustomRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+layout/custom/custom.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/app/+layout/custom/custom.component.css -------------------------------------------------------------------------------- /src/app/+layout/custom/custom.component.html: -------------------------------------------------------------------------------- 1 | 2 |

    You can completely disable layout components to create custom page layout like Login and Register pages.

    3 |     4 | 5 | 6 |

    First you will need to import LayoutService and subscribe to isCustomLayout in the main app component:

    7 | 
    import { Component, OnInit } from '@angular/core';
 8 | import { LayoutService } from '../../../src';
 9 | 
10 | @Component({
11 |   selector: 'app-root',
12 |   templateUrl: './app.component.html'
13 | })
14 | export class AppComponent implements OnInit {
15 |   public isCustomLayout: boolean;
16 | 
17 |   constructor(
18 |     private layoutService: LayoutService
19 |   ) {}
20 | 
21 |   ngOnInit() {
22 |     this.layoutService.isCustomLayout.subscribe((value: boolean) => {
23 |       this.isCustomLayout = value;
24 |     });
25 |   }
26 | }
    27 | 28 |
    29 |

    Wrap the main component html like so:

    30 | 
    <ng-container *ngIf="isCustomLayout else noCustomLayout">
31 |   <router-outlet></router-outlet>
32 | </ng-container>
33 | <ng-template #layoutEnabled>
34 |   <mk-layout-wrapper>
35 |     ...
36 |   </mk-layout-wrapper>
37 | <ng-template>
    38 | 39 |
    40 |

    Configure the router:

    41 | 
    
42 |   ...
43 |   , {
44 |     path: 'login',
45 |     loadChildren: 'app/login/login.module#LoginModule',
46 |     data: {
47 |       customLayout: true
48 |     }
49 |   },
50 |   ...
51 |
    52 |     53 | -------------------------------------------------------------------------------- /src/app/+layout/custom/custom.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { CustomComponent } from './custom.component'; 4 | 5 | import { BoxModule } from 'angular-admin-lte'; 6 | 7 | describe('CustomComponent', () => { 8 | let component: CustomComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ BoxModule ], 14 | declarations: [ CustomComponent ] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(CustomComponent); 21 | component = fixture.componentInstance; 22 | fixture.detectChanges(); 23 | }); 24 | 25 | it('should create', () => { 26 | expect(component).toBeTruthy(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/app/+layout/custom/custom.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | templateUrl: './custom.component.html', 7 | styleUrls: ['./custom.component.css'] 8 | }) 9 | export class CustomComponent implements AfterViewInit { 10 | /** 11 | * @method ngAfterViewInit 12 | */ 13 | ngAfterViewInit(): void { 14 | Prism.highlightAll(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/app/+layout/custom/custom.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | 5 | import { CustomRoutingModule } from './custom-routing.module'; 6 | import { CustomComponent } from './custom.component'; 7 | 8 | import { BoxModule } from 'angular-admin-lte'; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | RouterModule, 14 | CustomRoutingModule, 15 | BoxModule 16 | ], 17 | declarations: [CustomComponent] 18 | }) 19 | export class CustomModule { } 20 | -------------------------------------------------------------------------------- /src/app/+layout/header/header-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { HeaderComponent } from './header.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: HeaderComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class HeaderRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+layout/header/header.component.html: -------------------------------------------------------------------------------- 1 | 2 |

    The header component is used for displaying logos and sidebars toggle buttons.
    You can disable sidebars if you choose to use custom configuration.
    You can also add any custom HTML after logo components.

    3 |     4 | 5 | 6 | 
    <mk-layout-header [isSidebarLeftToggle]="true" [isSidebarRightToggle]="true" [logoLink]="['/', 'boxs', 'info-box']" >
 7 |   <mk-layout-header-logo><b>Admin</b>LTE</mk-layout-header-logo>
 8 |   <mk-layout-header-logo-mini><b>A</b>LT</mk-layout-header-logo-mini>
 9 |   //Custom HTML
10 | </mk-layout-header>
11 |
    12 |     13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
    NameTypeDefaultDescription
    logoLinkstring | any[]"/"Defines the header logo routerLink.
    isSidebarLeftTogglebooleantrueDefines if the sidebar left toggle button is activated.
    sidebarLeftToggleIconClassesstringnullDefines the sidebar left toggle button icon classes.
    isSidebarRightTogglebooleantrueDefines if the sidebar right toggle button is activated.
    SidebarRightToggleClassesstringnullDefines the sidebar right toggle button icon classes.
    55 |     56 | -------------------------------------------------------------------------------- /src/app/+layout/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | import { BoxModule } from 'angular-admin-lte'; 6 | 7 | describe('HeaderComponent', () => { 8 | let component: HeaderComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ BoxModule ], 14 | declarations: [ HeaderComponent ] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(HeaderComponent); 21 | component = fixture.componentInstance; 22 | fixture.detectChanges(); 23 | }); 24 | 25 | it('should create', () => { 26 | expect(component).toBeTruthy(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/app/+layout/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | selector: 'app-header', 7 | templateUrl: './header.component.html' 8 | }) 9 | export class HeaderComponent implements AfterViewInit { 10 | /** 11 | * @method ngAfterViewInit 12 | */ 13 | ngAfterViewInit(): void { 14 | Prism.highlightAll(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/app/+layout/header/header.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { HeaderRoutingModule } from './header-routing.module'; 5 | import { HeaderComponent } from './header.component'; 6 | 7 | import { BoxModule } from 'angular-admin-lte'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | HeaderRoutingModule, 13 | BoxModule 14 | ], 15 | declarations: [HeaderComponent] 16 | }) 17 | export class HeaderModule { } 18 | -------------------------------------------------------------------------------- /src/app/+layout/sidebar-left/sidebar-left-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { SidebarLeftComponent } from './sidebar-left.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: SidebarLeftComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class SidebarLeftRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+layout/sidebar-left/sidebar-left.component.html: -------------------------------------------------------------------------------- 1 | 2 |

    The sidebar left component is used for displaying the menu of the layout configuraton (see layout configuration).
    Yon can also add any HTML elements which will be displayed above the menu.

    3 |     4 | 5 | 6 | 
    <mk-layout-sidebar-left>
 7 | <div class="user-panel">
 8 |   <div class="pull-left image">
 9 |     <img src="assets/img/user2-160x160.jpg" class="img-circle" alt="User Image">
10 |   </div>
11 |   <div class="pull-left info">
12 |     <p>Alexander Pierce</p>
13 |     <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
14 |   </div>
15 | </div>
16 | <form action="#" method="get" class="sidebar-form">
17 |   <div class="input-group">
18 |     <input type="text" name="q" class="form-control" placeholder="Search...">
19 |     <span class="input-group-btn">
20 |       <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
21 |       </button>
22 |     </span>
23 |   </div>
24 | </form>
25 | </mk-layout-sidebar-left>
26 |
    27 |     28 | 29 | 30 | 
    sidebarLeftMenu: [
31 |   {label: 'MAIN NAVIGATION', separator: true},
32 |   {label: 'Start', route: '/', iconClasses: 'fa fa-th'},
33 |   {label: 'Parent', iconClasses: 'fa fa-files-o', children: [
34 |     {label: 'Children', route: 'parent/children'},
35 |     {label: 'Parent 2', children: [
36 |       {label: 'Children 2', route: 'parent/parent2/children2'}
37 |     ]}
38 |     ...
39 |   ]}
40 | ]
41 |
    42 |     43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
    NameTypeDefaultDescription
    LabelstringnullSet the menu item label.
    iconClassesstring'fa fa-circle-o'Set the menu item iclon classes.
    separatorbooleanfalseDefines if the menu item is a separator.
    routestringnullSet the menu item route.
    childrenArray<Item>nullDefines the item children.
    85 |     86 | -------------------------------------------------------------------------------- /src/app/+layout/sidebar-left/sidebar-left.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { SidebarLeftComponent } from './sidebar-left.component'; 4 | 5 | import { BoxModule } from 'angular-admin-lte'; 6 | 7 | describe('SidebarLeftComponent', () => { 8 | let component: SidebarLeftComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ BoxModule ], 14 | declarations: [ SidebarLeftComponent ] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(SidebarLeftComponent); 21 | component = fixture.componentInstance; 22 | fixture.detectChanges(); 23 | }); 24 | 25 | it('should create', () => { 26 | expect(component).toBeTruthy(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/app/+layout/sidebar-left/sidebar-left.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | selector: 'app-sidebar-left', 7 | templateUrl: './sidebar-left.component.html' 8 | }) 9 | export class SidebarLeftComponent implements AfterViewInit { 10 | /** 11 | * @method ngAfterViewInit 12 | */ 13 | ngAfterViewInit(): void { 14 | Prism.highlightAll(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/app/+layout/sidebar-left/sidebar-left.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { SidebarLeftRoutingModule } from './sidebar-left-routing.module'; 5 | import { SidebarLeftComponent } from './sidebar-left.component'; 6 | 7 | import { BoxModule } from 'angular-admin-lte'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | SidebarLeftRoutingModule, 13 | BoxModule 14 | ], 15 | declarations: [SidebarLeftComponent] 16 | }) 17 | export class SidebarLeftModule { } 18 | -------------------------------------------------------------------------------- /src/app/+layout/sidebar-right/sidebar-right-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { SidebarRightComponent } from './sidebar-right.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: SidebarRightComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class SidebarRightRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+layout/sidebar-right/sidebar-right.component.html: -------------------------------------------------------------------------------- 1 | 2 |

    The sidebar right component is optional and you can add any custom HTML.
    It can be toggled with sidebar right button of the header or programmatically with layout.sidebarRightCollapsed().
    You can also subscribe to sidebar right toggle status with layout.isSidebarRightCollapsed.

    3 |     4 | 5 | 6 | 
    <mk-layout-sidebar-right>
 7 |   //Custom HTML
 8 | </mk-layout-sidebar-right>
 9 |
    10 |     11 | -------------------------------------------------------------------------------- /src/app/+layout/sidebar-right/sidebar-right.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { SidebarRightComponent } from './sidebar-right.component'; 4 | 5 | import { BoxModule } from 'angular-admin-lte'; 6 | 7 | describe('SidebarRightComponent', () => { 8 | let component: SidebarRightComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ BoxModule ], 14 | declarations: [ SidebarRightComponent ] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(SidebarRightComponent); 21 | component = fixture.componentInstance; 22 | fixture.detectChanges(); 23 | }); 24 | 25 | it('should create', () => { 26 | expect(component).toBeTruthy(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/app/+layout/sidebar-right/sidebar-right.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | selector: 'app-sidebar-right', 7 | templateUrl: './sidebar-right.component.html' 8 | }) 9 | export class SidebarRightComponent implements AfterViewInit { 10 | /** 11 | * @method ngAfterViewInit 12 | */ 13 | ngAfterViewInit(): void { 14 | Prism.highlightAll(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/app/+layout/sidebar-right/sidebar-right.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { SidebarRightRoutingModule } from './sidebar-right-routing.module'; 5 | import { SidebarRightComponent } from './sidebar-right.component'; 6 | 7 | import { BoxModule } from 'angular-admin-lte'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | SidebarRightRoutingModule, 13 | BoxModule 14 | ], 15 | declarations: [SidebarRightComponent] 16 | }) 17 | export class SidebarRightModule { } 18 | -------------------------------------------------------------------------------- /src/app/+login/login-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { LoginComponent } from './login.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: LoginComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class LoginRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+login/login.component.css: -------------------------------------------------------------------------------- 1 | .login-page { 2 | overflow: hidden; 3 | min-height: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/+login/login.component.html: -------------------------------------------------------------------------------- 1 | 51 | -------------------------------------------------------------------------------- /src/app/+login/login.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { LoginComponent } from './login.component'; 4 | 5 | describe('LoginComponent', () => { 6 | let component: LoginComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ LoginComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(LoginComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/+login/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-login', 5 | templateUrl: './login.component.html', 6 | styleUrls: ['./login.component.css'] 7 | }) 8 | export class LoginComponent {} 9 | -------------------------------------------------------------------------------- /src/app/+login/login.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { LoginRoutingModule } from './login-routing.module'; 5 | import { LoginComponent } from './login.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | LoginRoutingModule 11 | ], 12 | declarations: [LoginComponent] 13 | }) 14 | export class LoginModule { } 15 | -------------------------------------------------------------------------------- /src/app/+register/register-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { RegisterComponent } from './register.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: RegisterComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class RegisterRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+register/register.component.css: -------------------------------------------------------------------------------- 1 | .register-page { 2 | overflow: hidden; 3 | min-height: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/+register/register.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 6 | 7 |
    8 | 9 | 10 |
    11 |
    12 | 13 | 14 |
    15 |
    16 | 17 | 18 |
    19 |
    20 | 21 | 22 |
    23 |
    24 | 25 | 26 |
    27 |
    28 |
    29 |
    30 | 33 |
    34 |
    35 | 36 |
    37 | 38 |
    39 | 40 |
    41 |
    42 | 43 | 50 | 51 | I already have a membership 52 |
    53 | 54 |
    55 |
    56 | -------------------------------------------------------------------------------- /src/app/+register/register.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { RegisterComponent } from './register.component'; 4 | 5 | describe('RegisterComponent', () => { 6 | let component: RegisterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ RegisterComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(RegisterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/+register/register.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-register', 5 | templateUrl: './register.component.html', 6 | styleUrls: ['./register.component.css'] 7 | }) 8 | export class RegisterComponent {} 9 | -------------------------------------------------------------------------------- /src/app/+register/register.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { RegisterRoutingModule } from './register-routing.module'; 5 | import { RegisterComponent } from './register.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | RegisterRoutingModule 11 | ], 12 | declarations: [RegisterComponent] 13 | }) 14 | export class RegisterModule { } 15 | -------------------------------------------------------------------------------- /src/app/+tabs/tabs-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { TabsComponent } from './tabs.component'; 5 | 6 | const routes: Routes = [{ 7 | path: '', 8 | component: TabsComponent 9 | }]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class TabsRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/+tabs/tabs.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/app/+tabs/tabs.component.css -------------------------------------------------------------------------------- /src/app/+tabs/tabs.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { TabsComponent } from './tabs.component'; 4 | 5 | import { BoxModule, TabsModule, DropdownModule } from 'angular-admin-lte'; 6 | 7 | describe('TabsComponent', () => { 8 | let component: TabsComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ 14 | BoxModule, 15 | TabsModule, 16 | DropdownModule 17 | ], 18 | declarations: [ TabsComponent ] 19 | }) 20 | .compileComponents(); 21 | })); 22 | 23 | beforeEach(() => { 24 | fixture = TestBed.createComponent(TabsComponent); 25 | component = fixture.componentInstance; 26 | fixture.detectChanges(); 27 | }); 28 | 29 | it('should create', () => { 30 | expect(component).toBeTruthy(); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /src/app/+tabs/tabs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | templateUrl: './tabs.component.html', 7 | styleUrls: ['./tabs.component.css'] 8 | }) 9 | export class TabsComponent implements AfterViewInit { 10 | public toggleDropdown = true; 11 | public toggleDropdown2 = true; 12 | 13 | /** 14 | * @method ngAfterViewInit 15 | */ 16 | ngAfterViewInit(): void { 17 | Prism.highlightAll(); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/+tabs/tabs.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { TabsRoutingModule } from './tabs-routing.module'; 5 | import { TabsComponent } from './tabs.component'; 6 | 7 | import { TabsModule as MkTabsModule, BoxModule, DropdownModule } from 'angular-admin-lte'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | TabsRoutingModule, 13 | MkTabsModule, 14 | BoxModule, 15 | DropdownModule 16 | ], 17 | declarations: [TabsComponent] 18 | }) 19 | export class TabsModule { } 20 | -------------------------------------------------------------------------------- /src/app/admin-lte.conf.ts: -------------------------------------------------------------------------------- 1 | export const adminLteConf = { 2 | skin: 'blue', 3 | // isSidebarLeftCollapsed: false, 4 | // isSidebarLeftExpandOnOver: false, 5 | // isSidebarLeftMouseOver: false, 6 | // isSidebarLeftMini: true, 7 | // sidebarRightSkin: 'dark', 8 | // isSidebarRightCollapsed: true, 9 | // isSidebarRightOverContent: true, 10 | // layout: 'normal', 11 | sidebarLeftMenu: [ 12 | {label: 'MAIN NAVIGATION', separator: true}, 13 | {label: 'Get Started', route: '/', iconClasses: 'fa fa-road', pullRights: [{text: 'New', classes: 'label pull-right bg-green'}]}, 14 | {label: 'Layout', iconClasses: 'fa fa-th-list', children: [ 15 | {label: 'Configuration', route: 'layout/configuration'}, 16 | {label: 'Custom', route: 'layout/custom'}, 17 | {label: 'Header', route: 'layout/header'}, 18 | {label: 'Sidebar Left', route: 'layout/sidebar-left'}, 19 | {label: 'Sidebar Right', route: 'layout/sidebar-right'}, 20 | {label: 'Content', route: 'layout/content'} 21 | ]}, 22 | {label: 'COMPONENTS', separator: true}, 23 | {label: 'Accordion', route: 'accordion', iconClasses: 'fa fa-tasks'}, 24 | {label: 'Alert', route: 'alert', iconClasses: 'fa fa-exclamation-triangle'}, 25 | {label: 'Boxs', iconClasses: 'fa fa-files-o', children: [ 26 | {label: 'Default Box', route: 'boxs/box'}, 27 | {label: 'Info Box', route: 'boxs/info-box'}, 28 | {label: 'Small Box', route: 'boxs/small-box'} 29 | ]}, 30 | {label: 'Dropdown', route: 'dropdown', iconClasses: 'fa fa-arrows-v'}, 31 | {label: 'Form', iconClasses: 'fa fa-files-o', children: [ 32 | {label: 'Input Text', route: 'form/input-text'} 33 | ]}, 34 | {label: 'Tabs', route: 'tabs', iconClasses: 'fa fa-th'} 35 | ] 36 | }; 37 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Angular AdminLTE 8 | ALTE 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
    19 |
    20 | 21 |
    22 |
    23 | 24 |     25 | 26 | 27 | Powered by AdminLte. 28 | 29 | 30 | Version 2.4.2 31 | 32 | 33 |     34 |     35 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, waitForAsync } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { CoreModule } from './core/core.module'; 6 | import { LayoutModule } from 'angular-admin-lte'; 7 | 8 | import { LoadingPageModule, MaterialBarModule } from 'angular-loading-page'; 9 | import { adminLteConf } from './admin-lte.conf'; 10 | 11 | describe('AppComponent', () => { 12 | beforeEach(waitForAsync(() => { 13 | TestBed.configureTestingModule({ 14 | imports: [ 15 | RouterTestingModule, 16 | CoreModule, 17 | LayoutModule.forRoot(adminLteConf), 18 | LoadingPageModule, MaterialBarModule 19 | ], 20 | declarations: [ 21 | AppComponent 22 | ], 23 | }).compileComponents(); 24 | })); 25 | it('should create the app', waitForAsync(() => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | const app = fixture.debugElement.componentInstance; 28 | expect(app).toBeTruthy(); 29 | })); 30 | }); 31 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { LayoutService } from 'angular-admin-lte'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html' 7 | }) 8 | export class AppComponent implements OnInit { 9 | public customLayout!: boolean; 10 | 11 | constructor( 12 | private layoutService: LayoutService 13 | ) {} 14 | 15 | ngOnInit(): void { 16 | this.layoutService.isCustomLayout.subscribe(value => { 17 | this.customLayout = value; 18 | }); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { adminLteConf } from './admin-lte.conf'; 5 | 6 | import { AppRoutingModule } from './app-routing.module'; 7 | import { CoreModule } from './core/core.module'; 8 | 9 | import { LayoutModule } from 'angular-admin-lte'; 10 | 11 | import { AppComponent } from './app.component'; 12 | import { HomeComponent } from './home/home.component'; 13 | 14 | import { LoadingPageModule, MaterialBarModule } from 'angular-loading-page'; 15 | 16 | 17 | @NgModule({ 18 | imports: [ 19 | BrowserModule, 20 | AppRoutingModule, 21 | CoreModule, 22 | LayoutModule.forRoot(adminLteConf), 23 | LoadingPageModule, MaterialBarModule 24 | ], 25 | declarations: [ 26 | AppComponent, 27 | HomeComponent 28 | ], 29 | bootstrap: [AppComponent] 30 | }) 31 | export class AppModule {} 32 | -------------------------------------------------------------------------------- /src/app/core/core.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { HttpClientModule } from '@angular/common/http'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { BoxModule, TabsModule, DropdownModule } from 'angular-admin-lte'; 6 | 7 | import { HeaderInnerComponent } from './header-inner/header-inner.component'; 8 | import { SidebarLeftInnerComponent } from './sidebar-left-inner/sidebar-left-inner.component'; 9 | import { SidebarRightInnerComponent } from './sidebar-right-inner/sidebar-right-inner.component'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | HttpClientModule, 16 | DropdownModule, 17 | TabsModule, 18 | BoxModule 19 | ], 20 | declarations: [HeaderInnerComponent, SidebarLeftInnerComponent, SidebarRightInnerComponent], 21 | exports: [BoxModule, TabsModule, HeaderInnerComponent, SidebarLeftInnerComponent, SidebarRightInnerComponent] 22 | }) 23 | export class CoreModule { } 24 | -------------------------------------------------------------------------------- /src/app/core/header-inner/header-inner.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { HeaderInnerComponent } from './header-inner.component'; 4 | 5 | import { DropdownModule } from 'angular-admin-lte'; 6 | 7 | describe('HeaderInnerComponent', () => { 8 | let component: HeaderInnerComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [DropdownModule], 14 | declarations: [HeaderInnerComponent] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(HeaderInnerComponent); 21 | component = fixture.componentInstance; 22 | fixture.detectChanges(); 23 | }); 24 | 25 | it('should create', () => { 26 | expect(component).toBeTruthy(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/app/core/header-inner/header-inner.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | @Component({ 3 | selector: 'app-header-inner', 4 | templateUrl: './header-inner.component.html' 5 | }) 6 | export class HeaderInnerComponent {} 7 | -------------------------------------------------------------------------------- /src/app/core/sidebar-left-inner/sidebar-left-inner.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | User Image 4 |
    5 |
    6 |

    Alexander Pierce

    7 | Online 8 |
    9 |
    10 |
    11 |
    12 | 13 | 14 | 16 | 17 |
    18 |
    19 | -------------------------------------------------------------------------------- /src/app/core/sidebar-left-inner/sidebar-left-inner.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { SidebarLeftInnerComponent } from './sidebar-left-inner.component'; 4 | 5 | describe('SidebarLeftInnerComponent', () => { 6 | let component: SidebarLeftInnerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [SidebarLeftInnerComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SidebarLeftInnerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/core/sidebar-left-inner/sidebar-left-inner.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-sidebar-left-inner', 5 | templateUrl: './sidebar-left-inner.component.html' 6 | }) 7 | export class SidebarLeftInnerComponent {} 8 | -------------------------------------------------------------------------------- /src/app/core/sidebar-right-inner/sidebar-right-inner.component.ts: -------------------------------------------------------------------------------- 1 | import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core'; 2 | 3 | import {Subscription} from 'rxjs'; 4 | 5 | import {LayoutStore} from 'angular-admin-lte'; 6 | 7 | @Component({ 8 | selector: 'app-sidebar-right-inner', 9 | templateUrl: './sidebar-right-inner.component.html' 10 | }) 11 | export class SidebarRightInnerComponent implements OnInit, OnDestroy { 12 | 13 | public layout!: string; 14 | public isSidebarLeftCollapsed!: boolean; 15 | public isSidebarLeftExpandOnOver!: boolean; 16 | public isSidebarLeftMini!: boolean; 17 | 18 | private subscriptions: Subscription[] = []; 19 | 20 | constructor( 21 | public layoutStore: LayoutStore, 22 | private changeDetectorRef: ChangeDetectorRef 23 | ) {} 24 | 25 | /** 26 | * [ngOnInit description] 27 | * @method ngOnInit 28 | */ 29 | ngOnInit(): void { 30 | this.subscriptions.push(this.layoutStore.isSidebarLeftCollapsed.subscribe((value: boolean) => { 31 | this.isSidebarLeftCollapsed = value; 32 | this.changeDetectorRef.detectChanges(); 33 | })); 34 | this.subscriptions.push(this.layoutStore.isSidebarLeftExpandOnOver.subscribe((value: boolean) => { 35 | this.isSidebarLeftExpandOnOver = value; 36 | this.changeDetectorRef.detectChanges(); 37 | })); 38 | this.subscriptions.push(this.layoutStore.isSidebarLeftMini.subscribe((value: boolean) => { 39 | this.isSidebarLeftMini = value; 40 | this.changeDetectorRef.detectChanges(); 41 | })); 42 | } 43 | 44 | /** 45 | * @method ngOnDestroy 46 | */ 47 | ngOnDestroy(): void { 48 | this.removeSubscriptions(); 49 | } 50 | 51 | /** 52 | * [removeListeners description] 53 | * @method removeListeners 54 | */ 55 | private removeSubscriptions(): void { 56 | if (this.subscriptions) { 57 | this.subscriptions.forEach((subscription: Subscription) => { 58 | subscription.unsubscribe(); 59 | }); 60 | } 61 | this.subscriptions = []; 62 | } 63 | 64 | 65 | /** 66 | * [onLayoutChange description] 67 | * @method onLayoutChange 68 | */ 69 | public onLayoutChange(event: any): void { 70 | this.layout = event.target.checked ? event.target.getAttribute('value') : ''; 71 | this.layoutStore.setLayout(this.layout); 72 | } 73 | 74 | /** 75 | * [changeSkin description] 76 | * @method changeSkin 77 | */ 78 | public changeSkin(event: Event, color: string): void { 79 | event.preventDefault(); 80 | this.layoutStore.setSkin(color); 81 | } 82 | 83 | /** 84 | * [changeSidebarRightSkin description] 85 | * @method changeSidebarRightSkin 86 | */ 87 | public changeSidebarRightSkin(value: boolean): void { 88 | if (value) { 89 | this.layoutStore.setSidebarRightSkin('light'); 90 | } else { 91 | this.layoutStore.setSidebarRightSkin('dark'); 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /src/app/home/home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/app/home/home.component.css -------------------------------------------------------------------------------- /src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 | 2 |

    Angular Admin LTE is an implementation of the Admin LTE theme. It comes with native angular components and directive and do not need JS dependencies. It provides a layout module witch comes with components for header, sidebar right & left, footer...

    3 |     4 | 5 | 6 |

    Angular Admin LTE is available at npm, if you have an existing application run the following command to download it to your project.

    7 |

    Angular Admin LTE is distributed in commonjs format, a module manager of your choice is required.

    8 | 
    npm install angular-admin-lte --save
    9 |     10 | 11 | 12 |

    UI components are configured as modules, once Angular Admin LTE is downloaded and configured, modules and apis can be imported from 'angular-loading-page' shorthand in your application code.

    13 | 
    import { LayoutModule } from 'angular-admin-lte';    //Loading layout module
14 | import { BoxModule } from 'angular-admin-lte';       //Box component
    15 |     16 | 17 | 18 |

    Angular Admin LTE have no JS dependencies but still need Admin LTE and Bootstrap CSS. You can also use FontAwesome and Ionicons as it is used by default in Admin LTE.

    19 | 
    "styles": [
20 |   "node_modules/bootstrap-css-only/css/bootstrap.min.css",
21 |   "node_modules/font-awesome/css/font-awesome.css", // optional
22 |   "node_modules/ionicons/css/ionicons.css", // optional
23 |   "node_modules/admin-lte-css/dist/css/AdminLTE.css",
24 |   "node_modules/admin-lte-css/dist/css/skins/_all-skins.css"
25 | ]
    26 |     27 | -------------------------------------------------------------------------------- /src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | import { BoxModule } from 'angular-admin-lte'; 5 | 6 | describe('HomeComponent', () => { 7 | let component: HomeComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(waitForAsync(() => { 11 | TestBed.configureTestingModule({ 12 | imports: [BoxModule], 13 | declarations: [HomeComponent] 14 | }) 15 | .compileComponents(); 16 | })); 17 | 18 | beforeEach(() => { 19 | fixture = TestBed.createComponent(HomeComponent); 20 | component = fixture.componentInstance; 21 | fixture.detectChanges(); 22 | }); 23 | 24 | it('should create', () => { 25 | expect(component).toBeTruthy(); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | import * as Prism from 'prismjs'; 4 | 5 | @Component({ 6 | selector: 'app-home', 7 | templateUrl: './home.component.html', 8 | styleUrls: ['./home.component.css'] 9 | }) 10 | export class HomeComponent implements AfterViewInit { 11 | 12 | ngAfterViewInit(): void { 13 | Prism.highlightAll(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/avatar.png -------------------------------------------------------------------------------- /src/assets/img/avatar04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/avatar04.png -------------------------------------------------------------------------------- /src/assets/img/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/avatar2.png -------------------------------------------------------------------------------- /src/assets/img/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/avatar3.png -------------------------------------------------------------------------------- /src/assets/img/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/avatar5.png -------------------------------------------------------------------------------- /src/assets/img/boxed-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/boxed-bg.jpg -------------------------------------------------------------------------------- /src/assets/img/boxed-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/boxed-bg.png -------------------------------------------------------------------------------- /src/assets/img/credit/american-express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/credit/american-express.png -------------------------------------------------------------------------------- /src/assets/img/credit/cirrus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/credit/cirrus.png -------------------------------------------------------------------------------- /src/assets/img/credit/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/credit/mastercard.png -------------------------------------------------------------------------------- /src/assets/img/credit/mestro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/credit/mestro.png -------------------------------------------------------------------------------- /src/assets/img/credit/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/credit/paypal.png -------------------------------------------------------------------------------- /src/assets/img/credit/paypal2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/credit/paypal2.png -------------------------------------------------------------------------------- /src/assets/img/credit/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/credit/visa.png -------------------------------------------------------------------------------- /src/assets/img/default-50x50.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/default-50x50.gif -------------------------------------------------------------------------------- /src/assets/img/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/icons.png -------------------------------------------------------------------------------- /src/assets/img/photo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/photo1.png -------------------------------------------------------------------------------- /src/assets/img/photo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/photo2.png -------------------------------------------------------------------------------- /src/assets/img/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/photo3.jpg -------------------------------------------------------------------------------- /src/assets/img/photo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/photo4.jpg -------------------------------------------------------------------------------- /src/assets/img/user1-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/user1-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user2-160x160.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/user2-160x160.jpg -------------------------------------------------------------------------------- /src/assets/img/user3-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/user3-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user4-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/user4-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user5-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/user5-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user6-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/user6-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user7-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/user7-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user8-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/assets/img/user8-128x128.jpg -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * In development mode, to ignore zone related error stack frames such as 11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 12 | * import the following file, but please comment it out in production mode 13 | * because it will have performance impact when throw error 14 | */ 15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 16 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mledour/angular-admin-lte/596a4523c106e123fc1e5e0e7677ba82fb4734e1/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularAdminLteDemo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | .table-bordered > thead > tr > th, 4 | .table-bordered > tbody > tr > th, 5 | .table-bordered > tfoot > tr > th, 6 | .table-bordered > thead > tr > td, 7 | .table-bordered > tbody > tr > td, 8 | .table-bordered > tfoot > tr > td { 9 | border-color: #eae3e3; 10 | } 11 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "noImplicitReturns": true, 9 | "noFallthroughCasesInSwitch": true, 10 | "sourceMap": true, 11 | "declaration": false, 12 | "downlevelIteration": true, 13 | "experimentalDecorators": true, 14 | "moduleResolution": "node", 15 | "importHelpers": true, 16 | "target": "es2015", 17 | "module": "es2020", 18 | "lib": [ 19 | "es2018", 20 | "dom" 21 | ], 22 | "paths": { 23 | "angular-admin-lte": [ 24 | "dist/angular-admin-lte/angular-admin-lte", 25 | "dist/angular-admin-lte" 26 | ] 27 | } 28 | }, 29 | "angularCompilerOptions": { 30 | "strictInjectionParameters": true, 31 | "strictInputAccessModifiers": true, 32 | "strictTemplates": true 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rulesDirectory": [ 4 | "codelyzer" 5 | ], 6 | "rules": { 7 | "align": { 8 | "options": [ 9 | "parameters", 10 | "statements" 11 | ] 12 | }, 13 | "array-type": false, 14 | "arrow-return-shorthand": true, 15 | "curly": true, 16 | "deprecation": { 17 | "severity": "warning" 18 | }, 19 | "eofline": true, 20 | "import-blacklist": [ 21 | true, 22 | "rxjs/Rx" 23 | ], 24 | "import-spacing": true, 25 | "indent": { 26 | "options": [ 27 | "spaces" 28 | ] 29 | }, 30 | "max-classes-per-file": false, 31 | "max-line-length": [ 32 | true, 33 | 140 34 | ], 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-console": [ 47 | true, 48 | "debug", 49 | "info", 50 | "time", 51 | "timeEnd", 52 | "trace" 53 | ], 54 | "no-empty": false, 55 | "no-inferrable-types": [ 56 | true, 57 | "ignore-params" 58 | ], 59 | "no-non-null-assertion": true, 60 | "no-redundant-jsdoc": true, 61 | "no-switch-case-fall-through": true, 62 | "no-var-requires": false, 63 | "object-literal-key-quotes": [ 64 | true, 65 | "as-needed" 66 | ], 67 | "quotemark": [ 68 | true, 69 | "single" 70 | ], 71 | "semicolon": { 72 | "options": [ 73 | "always" 74 | ] 75 | }, 76 | "space-before-function-paren": { 77 | "options": { 78 | "anonymous": "never", 79 | "asyncArrow": "always", 80 | "constructor": "never", 81 | "method": "never", 82 | "named": "never" 83 | } 84 | }, 85 | "typedef": [ 86 | true, 87 | "call-signature" 88 | ], 89 | "typedef-whitespace": { 90 | "options": [ 91 | { 92 | "call-signature": "nospace", 93 | "index-signature": "nospace", 94 | "parameter": "nospace", 95 | "property-declaration": "nospace", 96 | "variable-declaration": "nospace" 97 | }, 98 | { 99 | "call-signature": "onespace", 100 | "index-signature": "onespace", 101 | "parameter": "onespace", 102 | "property-declaration": "onespace", 103 | "variable-declaration": "onespace" 104 | } 105 | ] 106 | }, 107 | "variable-name": { 108 | "options": [ 109 | "ban-keywords", 110 | "check-format", 111 | "allow-pascal-case" 112 | ] 113 | }, 114 | "whitespace": { 115 | "options": [ 116 | "check-branch", 117 | "check-decl", 118 | "check-operator", 119 | "check-separator", 120 | "check-type", 121 | "check-typecast" 122 | ] 123 | }, 124 | "component-class-suffix": true, 125 | "contextual-lifecycle": true, 126 | "directive-class-suffix": true, 127 | "no-conflicting-lifecycle": true, 128 | "no-host-metadata-property": true, 129 | "no-input-rename": true, 130 | "no-inputs-metadata-property": true, 131 | "no-output-native": true, 132 | "no-output-on-prefix": true, 133 | "no-output-rename": true, 134 | "no-outputs-metadata-property": true, 135 | "template-banana-in-box": true, 136 | "template-no-negated-async": true, 137 | "use-lifecycle-interface": true, 138 | "use-pipe-transform-interface": true, 139 | "directive-selector": [ 140 | true, 141 | "attribute", 142 | "app", 143 | "camelCase" 144 | ], 145 | "component-selector": [ 146 | true, 147 | "element", 148 | "app", 149 | "kebab-case" 150 | ] 151 | } 152 | } 153 | --------------------------------------------------------------------------------