mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 20:15:07 +00:00
Merge branch 'dev' into dev-starter
This commit is contained in:
Sercan Yemen
commit
db6fcc208b
|
|
@ -1,16 +0,0 @@
|
||||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
|
||||||
# For additional information regarding the format and rule options, please see:
|
|
||||||
# https://github.com/browserslist/browserslist#queries
|
|
||||||
|
|
||||||
# For the full list of supported browsers by the Angular framework, please see:
|
|
||||||
# https://angular.io/guide/browser-support
|
|
||||||
|
|
||||||
# You can see what browsers were selected by your queries by running:
|
|
||||||
# npx browserslist
|
|
||||||
|
|
||||||
last 1 Chrome version
|
|
||||||
last 1 Firefox version
|
|
||||||
last 2 Edge major versions
|
|
||||||
last 2 Safari major versions
|
|
||||||
last 2 iOS major versions
|
|
||||||
Firefox ESR
|
|
||||||
|
|
@ -4,7 +4,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
|
||||||
|
|
||||||
## Development server
|
## Development server
|
||||||
|
|
||||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||||
|
|
||||||
## Code scaffolding
|
## Code scaffolding
|
||||||
|
|
||||||
|
|
|
||||||
32
angular.json
32
angular.json
|
|
@ -1,11 +1,6 @@
|
||||||
{
|
{
|
||||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
"version": 1,
|
"version": 1,
|
||||||
"cli": {
|
|
||||||
"schematicCollections": [
|
|
||||||
"@angular-eslint/schematics"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"newProjectRoot": "projects",
|
"newProjectRoot": "projects",
|
||||||
"projects": {
|
"projects": {
|
||||||
"fuse": {
|
"fuse": {
|
||||||
|
|
@ -25,7 +20,9 @@
|
||||||
"outputPath": "dist/fuse",
|
"outputPath": "dist/fuse",
|
||||||
"index": "src/index.html",
|
"index": "src/index.html",
|
||||||
"main": "src/main.ts",
|
"main": "src/main.ts",
|
||||||
"polyfills": "src/polyfills.ts",
|
"polyfills": [
|
||||||
|
"zone.js"
|
||||||
|
],
|
||||||
"tsConfig": "tsconfig.app.json",
|
"tsConfig": "tsconfig.app.json",
|
||||||
"inlineStyleLanguage": "scss",
|
"inlineStyleLanguage": "scss",
|
||||||
"allowedCommonJsDependencies": [
|
"allowedCommonJsDependencies": [
|
||||||
|
|
@ -35,7 +32,6 @@
|
||||||
"crypto-js/hmac-sha256",
|
"crypto-js/hmac-sha256",
|
||||||
"crypto-js/enc-base64",
|
"crypto-js/enc-base64",
|
||||||
"flat",
|
"flat",
|
||||||
"moment",
|
|
||||||
"quill"
|
"quill"
|
||||||
],
|
],
|
||||||
"assets": [
|
"assets": [
|
||||||
|
|
@ -77,12 +73,6 @@
|
||||||
"maximumError": "90kb"
|
"maximumError": "90kb"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"fileReplacements": [
|
|
||||||
{
|
|
||||||
"replace": "src/environments/environment.ts",
|
|
||||||
"with": "src/environments/environment.prod.ts"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"outputHashing": "all"
|
"outputHashing": "all"
|
||||||
},
|
},
|
||||||
"development": {
|
"development": {
|
||||||
|
|
@ -117,10 +107,11 @@
|
||||||
"test": {
|
"test": {
|
||||||
"builder": "@angular-devkit/build-angular:karma",
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
"options": {
|
"options": {
|
||||||
"main": "src/test.ts",
|
"polyfills": [
|
||||||
"polyfills": "src/polyfills.ts",
|
"zone.js",
|
||||||
|
"zone.js/testing"
|
||||||
|
],
|
||||||
"tsConfig": "tsconfig.spec.json",
|
"tsConfig": "tsconfig.spec.json",
|
||||||
"karmaConfig": "karma.conf.js",
|
|
||||||
"inlineStyleLanguage": "scss",
|
"inlineStyleLanguage": "scss",
|
||||||
"assets": [
|
"assets": [
|
||||||
"src/favicon-16x16.png",
|
"src/favicon-16x16.png",
|
||||||
|
|
@ -132,15 +123,6 @@
|
||||||
],
|
],
|
||||||
"scripts": []
|
"scripts": []
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"lint": {
|
|
||||||
"builder": "@angular-eslint/builder:lint",
|
|
||||||
"options": {
|
|
||||||
"lintFilePatterns": [
|
|
||||||
"src/**/*.ts",
|
|
||||||
"src/**/*.html"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
// Karma configuration file, see link for more information
|
|
||||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
|
||||||
|
|
||||||
module.exports = function (config)
|
|
||||||
{
|
|
||||||
config.set({
|
|
||||||
basePath : '',
|
|
||||||
frameworks : ['jasmine', '@angular-devkit/build-angular'],
|
|
||||||
plugins : [
|
|
||||||
require('karma-jasmine'),
|
|
||||||
require('karma-chrome-launcher'),
|
|
||||||
require('karma-jasmine-html-reporter'),
|
|
||||||
require('karma-coverage'),
|
|
||||||
require('@angular-devkit/build-angular/plugins/karma')
|
|
||||||
],
|
|
||||||
client : {
|
|
||||||
jasmine : {
|
|
||||||
// you can add configuration options for Jasmine here
|
|
||||||
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
|
|
||||||
// for example, you can disable the random execution with `random: false`
|
|
||||||
// or set a specific seed with `seed: 4321`
|
|
||||||
},
|
|
||||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
|
||||||
},
|
|
||||||
jasmineHtmlReporter: {
|
|
||||||
suppressAll: true // removes the duplicated traces
|
|
||||||
},
|
|
||||||
coverageReporter : {
|
|
||||||
dir : require('path').join(__dirname, './coverage/fuse'),
|
|
||||||
subdir : '.',
|
|
||||||
reporters: [
|
|
||||||
{type: 'html'},
|
|
||||||
{type: 'text-summary'}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
reporters : ['progress', 'kjhtml'],
|
|
||||||
port : 9876,
|
|
||||||
colors : true,
|
|
||||||
logLevel : config.LOG_INFO,
|
|
||||||
autoWatch : true,
|
|
||||||
browsers : ['Chrome'],
|
|
||||||
singleRun : false,
|
|
||||||
restartOnFileChange: true
|
|
||||||
});
|
|
||||||
};
|
|
||||||
12075
package-lock.json
generated
12075
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
74
package.json
74
package.json
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "fuse-angular",
|
"name": "fuse-angular",
|
||||||
"version": "16.0.0",
|
"version": "17.0.0",
|
||||||
"description": "Fuse - Angular Admin Template and Starter Project",
|
"description": "Fuse - Angular Admin Template and Starter Project",
|
||||||
"author": "https://themeforest.net/user/srcn",
|
"author": "https://themeforest.net/user/srcn",
|
||||||
"license": "https://themeforest.net/licenses/standard",
|
"license": "https://themeforest.net/licenses/standard",
|
||||||
|
|
@ -10,71 +10,59 @@
|
||||||
"start": "ng serve",
|
"start": "ng serve",
|
||||||
"build": "ng build",
|
"build": "ng build",
|
||||||
"watch": "ng build --watch --configuration development",
|
"watch": "ng build --watch --configuration development",
|
||||||
"test": "ng test",
|
"test": "ng test"
|
||||||
"lint": "ng lint"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "14.2.4",
|
"@angular/animations": "15.0.0",
|
||||||
"@angular/cdk": "14.2.3",
|
"@angular/cdk": "15.0.0",
|
||||||
"@angular/common": "14.2.4",
|
"@angular/common": "15.0.0",
|
||||||
"@angular/compiler": "14.2.4",
|
"@angular/compiler": "15.0.0",
|
||||||
"@angular/core": "14.2.4",
|
"@angular/core": "15.0.0",
|
||||||
"@angular/forms": "14.2.4",
|
"@angular/forms": "15.0.0",
|
||||||
"@angular/material": "14.2.3",
|
"@angular/material": "15.0.0",
|
||||||
"@angular/material-luxon-adapter": "14.2.3",
|
"@angular/material-luxon-adapter": "15.0.0",
|
||||||
"@angular/platform-browser": "14.2.4",
|
"@angular/platform-browser": "15.0.0",
|
||||||
"@angular/platform-browser-dynamic": "14.2.4",
|
"@angular/platform-browser-dynamic": "15.0.0",
|
||||||
"@angular/router": "14.2.4",
|
"@angular/router": "15.0.0",
|
||||||
"@ngneat/transloco": "4.1.1",
|
"@ngneat/transloco": "4.1.1",
|
||||||
"apexcharts": "3.35.5",
|
"apexcharts": "3.36.3",
|
||||||
"crypto-js": "3.3.0",
|
"crypto-js": "3.3.0",
|
||||||
"highlight.js": "11.6.0",
|
"highlight.js": "11.6.0",
|
||||||
"lodash-es": "4.17.21",
|
"lodash-es": "4.17.21",
|
||||||
"luxon": "3.0.4",
|
"luxon": "3.1.0",
|
||||||
"ng-apexcharts": "1.7.1",
|
"ng-apexcharts": "1.7.4",
|
||||||
"ngx-markdown": "13.1.0",
|
"ngx-markdown": "14.0.1",
|
||||||
"ngx-quill": "19.0.1",
|
"ngx-quill": "19.0.1",
|
||||||
"perfect-scrollbar": "1.5.5",
|
"perfect-scrollbar": "1.5.5",
|
||||||
"quill": "1.3.7",
|
"quill": "1.3.7",
|
||||||
"rxjs": "7.5.7",
|
"rxjs": "7.5.7",
|
||||||
"tslib": "2.4.0",
|
"tslib": "2.4.1",
|
||||||
"zone.js": "0.11.8"
|
"zone.js": "0.12.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "14.2.4",
|
"@angular-devkit/build-angular": "15.0.0",
|
||||||
"@angular-eslint/builder": "14.1.2",
|
"@angular/cli": "15.0.0",
|
||||||
"@angular-eslint/eslint-plugin": "14.1.2",
|
"@angular/compiler-cli": "15.0.0",
|
||||||
"@angular-eslint/eslint-plugin-template": "14.1.2",
|
|
||||||
"@angular-eslint/schematics": "14.1.2",
|
|
||||||
"@angular-eslint/template-parser": "14.1.2",
|
|
||||||
"@angular/cli": "14.2.4",
|
|
||||||
"@angular/compiler-cli": "14.2.4",
|
|
||||||
"@tailwindcss/line-clamp": "0.4.2",
|
"@tailwindcss/line-clamp": "0.4.2",
|
||||||
"@tailwindcss/typography": "0.5.7",
|
"@tailwindcss/typography": "0.5.8",
|
||||||
"@types/chroma-js": "2.1.4",
|
"@types/chroma-js": "2.1.4",
|
||||||
"@types/crypto-js": "3.1.47",
|
"@types/crypto-js": "3.1.47",
|
||||||
"@types/highlight.js": "10.1.0",
|
"@types/highlight.js": "10.1.0",
|
||||||
"@types/jasmine": "4.0.3",
|
"@types/jasmine": "4.3.0",
|
||||||
"@types/lodash": "4.14.186",
|
"@types/lodash": "4.14.189",
|
||||||
"@types/lodash-es": "4.17.6",
|
"@types/lodash-es": "4.17.6",
|
||||||
"@types/luxon": "3.0.1",
|
"@types/luxon": "3.1.0",
|
||||||
"@typescript-eslint/eslint-plugin": "5.39.0",
|
"autoprefixer": "10.4.13",
|
||||||
"@typescript-eslint/parser": "5.39.0",
|
|
||||||
"autoprefixer": "10.4.12",
|
|
||||||
"chroma-js": "2.4.2",
|
"chroma-js": "2.4.2",
|
||||||
"eslint": "8.24.0",
|
"jasmine-core": "4.5.0",
|
||||||
"eslint-plugin-import": "2.26.0",
|
|
||||||
"eslint-plugin-jsdoc": "39.3.6",
|
|
||||||
"eslint-plugin-prefer-arrow": "1.2.3",
|
|
||||||
"jasmine-core": "4.3.0",
|
|
||||||
"karma": "6.4.1",
|
"karma": "6.4.1",
|
||||||
"karma-chrome-launcher": "3.1.1",
|
"karma-chrome-launcher": "3.1.1",
|
||||||
"karma-coverage": "2.2.0",
|
"karma-coverage": "2.2.0",
|
||||||
"karma-jasmine": "5.1.0",
|
"karma-jasmine": "5.1.0",
|
||||||
"karma-jasmine-html-reporter": "2.0.0",
|
"karma-jasmine-html-reporter": "2.0.0",
|
||||||
"lodash": "4.17.21",
|
"lodash": "4.17.21",
|
||||||
"postcss": "8.4.17",
|
"postcss": "8.4.19",
|
||||||
"tailwindcss": "3.1.8",
|
"tailwindcss": "3.2.4",
|
||||||
"typescript": "4.7.4"
|
"typescript": "4.8.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -63,11 +63,15 @@
|
||||||
-webkit-text-fill-color: currentColor;
|
-webkit-text-fill-color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Set the background and foreground colors */
|
||||||
body, .dark, .light {
|
body, .dark, .light {
|
||||||
@apply text-default bg-default #{'!important'};
|
@apply text-default bg-default #{'!important'};
|
||||||
}
|
}
|
||||||
|
|
||||||
*, *::before, *::after {
|
/* Set the border color */
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
--tw-border-opacity: 1 !important;
|
--tw-border-opacity: 1 !important;
|
||||||
border-color: rgba(var(--fuse-border-rgb), var(--tw-border-opacity));
|
border-color: rgba(var(--fuse-border-rgb), var(--tw-border-opacity));
|
||||||
|
|
||||||
|
|
@ -116,6 +120,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Set the foreground color for disabled elements */
|
||||||
[disabled] * {
|
[disabled] * {
|
||||||
@apply text-disabled #{'!important'};
|
@apply text-disabled #{'!important'};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,167 +1,164 @@
|
||||||
@use '@angular/material' as mat;
|
|
||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
|
@use '@angular/material' as mat;
|
||||||
|
@use "user-themes" as userThemes;
|
||||||
|
|
||||||
|
/* Set the base colors for light themes */
|
||||||
|
$light-base: (
|
||||||
|
foreground: (
|
||||||
|
base: #000000,
|
||||||
|
divider: #E2E8F0, /* slate.200 */
|
||||||
|
dividers: #E2E8F0, /* slate.200 */
|
||||||
|
disabled: #94A3B8, /* slate.400 */
|
||||||
|
disabled-button: #94A3B8, /* slate.400 */
|
||||||
|
disabled-text: #94A3B8, /* slate.400 */
|
||||||
|
elevation: #000000,
|
||||||
|
hint-text: #94A3B8, /* slate.400 */
|
||||||
|
secondary-text: #64748B, /* slate.500 */
|
||||||
|
icon: #64748B, /* slate.500 */
|
||||||
|
icons: #64748B, /* slate.500 */
|
||||||
|
mat-icon: #64748B, /* slate.500 */
|
||||||
|
text: #1E293B, /* slate.800 */
|
||||||
|
slider-min: #1E293B, /* slate.800 */
|
||||||
|
slider-off: #CBD5E1, /* slate.300 */
|
||||||
|
slider-off-active: #94A3B8 /* slate.400 */
|
||||||
|
),
|
||||||
|
background: (
|
||||||
|
status-bar: #CBD5E1, /* slate.300 */
|
||||||
|
app-bar: #FFFFFF,
|
||||||
|
background: #F1F5F9, /* slate.100 */
|
||||||
|
hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
|
||||||
|
card: #FFFFFF,
|
||||||
|
dialog: #FFFFFF,
|
||||||
|
disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
|
||||||
|
raised-button: #FFFFFF,
|
||||||
|
focused-button: #64748B, /* slate.500 */
|
||||||
|
selected-button: #E2E8F0, /* slate.200 */
|
||||||
|
selected-disabled-button: #E2E8F0, /* slate.200 */
|
||||||
|
disabled-button-toggle: #CBD5E1, /* slate.300 */
|
||||||
|
unselected-chip: #E2E8F0, /* slate.200 */
|
||||||
|
disabled-list-option: #CBD5E1, /* slate.300 */
|
||||||
|
tooltip: #1E293B /* slate.800 */
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
/* Set the base colors for dark themes */
|
||||||
|
$dark-base: (
|
||||||
|
foreground: (
|
||||||
|
base: #FFFFFF,
|
||||||
|
divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
|
||||||
|
dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
|
||||||
|
disabled: #475569, /* slate.600 */
|
||||||
|
disabled-button: #1E293B, /* slate.800 */
|
||||||
|
disabled-text: #475569, /* slate.600 */
|
||||||
|
elevation: #000000,
|
||||||
|
hint-text: #64748B, /* slate.500 */
|
||||||
|
secondary-text: #94A3B8, /* slate.400 */
|
||||||
|
icon: #F1F5F9, /* slate.100 */
|
||||||
|
icons: #F1F5F9, /* slate.100 */
|
||||||
|
mat-icon: #94A3B8, /* slate.400 */
|
||||||
|
text: #FFFFFF,
|
||||||
|
slider-min: #FFFFFF,
|
||||||
|
slider-off: #64748B, /* slate.500 */
|
||||||
|
slider-off-active: #94A3B8 /* slate.400 */
|
||||||
|
),
|
||||||
|
background: (
|
||||||
|
status-bar: #0F172A, /* slate.900 */
|
||||||
|
app-bar: #0F172A, /* slate.900 */
|
||||||
|
background: #0F172A, /* slate.900 */
|
||||||
|
hover: rgba(255, 255, 255, 0.05),
|
||||||
|
card: #1E293B, /* slate.800 */
|
||||||
|
dialog: #1E293B, /* slate.800 */
|
||||||
|
disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
|
||||||
|
raised-button: #0F172A, /* slate.900 */
|
||||||
|
focused-button: #E2E8F0, /* slate.200 */
|
||||||
|
selected-button: rgba(255, 255, 255, 0.05),
|
||||||
|
selected-disabled-button: #1E293B, /* slate.800 */
|
||||||
|
disabled-button-toggle: #0F172A, /* slate.900 */
|
||||||
|
unselected-chip: #475569, /* slate.600 */
|
||||||
|
disabled-list-option: #E2E8F0, /* slate.200 */
|
||||||
|
tooltip: #64748B /* slate.500 */
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
/* Include the core Angular Material styles */
|
/* Include the core Angular Material styles */
|
||||||
@include mat.core();
|
@include mat.core();
|
||||||
|
|
||||||
/* Create a base theme without color.
|
/* Create a base theme without any color to set the density and typography */
|
||||||
This will globally set the density and typography for all future color themes. */
|
|
||||||
@include mat.all-component-themes((
|
@include mat.all-component-themes((
|
||||||
color: null,
|
color: null,
|
||||||
density: -2,
|
density: 0,
|
||||||
typography: mat.define-typography-config(
|
typography: mat.define-typography-config(
|
||||||
$font-family: theme('fontFamily.sans'),
|
$font-family: theme('fontFamily.sans'),
|
||||||
$title: mat.define-typography-level(1.25rem, 2rem, 600),
|
$headline-1: mat.define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
|
||||||
$body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
|
$headline-2: mat.define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
|
||||||
$button: mat.define-typography-level(0.875rem, 0.875rem, 500),
|
$headline-3: mat.define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
|
||||||
$input: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */
|
$headline-4: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
|
||||||
|
$headline-5: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
|
||||||
|
$headline-6: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
|
||||||
|
$subtitle-1: mat.define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
|
||||||
|
$subtitle-2: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
|
||||||
|
$body-1: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
|
||||||
|
$body-2: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
|
||||||
|
$caption: mat.define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
|
||||||
|
$button: mat.define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
|
||||||
|
$overline: mat.define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
|
||||||
)
|
)
|
||||||
));
|
));
|
||||||
|
|
||||||
/* Generate Primary, Accent and Warn palettes */
|
/* Loop through user themes and generate Angular Material themes */
|
||||||
$palettes: ();
|
@each $name, $theme in userThemes.$user-themes {
|
||||||
@each $name in (primary, accent, warn) {
|
|
||||||
$palettes: map.merge($palettes, (#{$name}: (
|
|
||||||
50: var(--fuse-#{$name}-50),
|
|
||||||
100: var(--fuse-#{$name}-100),
|
|
||||||
200: var(--fuse-#{$name}-200),
|
|
||||||
300: var(--fuse-#{$name}-300),
|
|
||||||
400: var(--fuse-#{$name}-400),
|
|
||||||
500: var(--fuse-#{$name}-500),
|
|
||||||
600: var(--fuse-#{$name}-600),
|
|
||||||
700: var(--fuse-#{$name}-700),
|
|
||||||
800: var(--fuse-#{$name}-800),
|
|
||||||
900: var(--fuse-#{$name}-900),
|
|
||||||
contrast: (
|
|
||||||
50: var(--fuse-on-#{$name}-50),
|
|
||||||
100: var(--fuse-on-#{$name}-100),
|
|
||||||
200: var(--fuse-on-#{$name}-200),
|
|
||||||
300: var(--fuse-on-#{$name}-300),
|
|
||||||
400: var(--fuse-on-#{$name}-400),
|
|
||||||
500: var(--fuse-on-#{$name}-500),
|
|
||||||
600: var(--fuse-on-#{$name}-600),
|
|
||||||
700: var(--fuse-on-#{$name}-700),
|
|
||||||
800: var(--fuse-on-#{$name}-800),
|
|
||||||
900: var(--fuse-on-#{$name}-900)
|
|
||||||
),
|
|
||||||
default: var(--fuse-#{$name}),
|
|
||||||
lighter: var(--fuse-#{$name}-100),
|
|
||||||
darker: var(--fuse-#{$name}-700),
|
|
||||||
text: var(--fuse-#{$name}),
|
|
||||||
default-contrast: var(--fuse-on-#{$name}),
|
|
||||||
lighter-contrast: var(--fuse-on-#{$name}-100),
|
|
||||||
darker-contrast: var(--fuse-on-#{$name}-700)
|
|
||||||
)));
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generate Angular Material themes. Since we are using CSS Custom Properties,
|
/* Generate the palettes */
|
||||||
we don't have to generate a separate Angular Material theme for each color
|
$palettes: ();
|
||||||
set. We can just create one light and one dark theme and then switch the
|
@each $name in (primary, accent, warn) {
|
||||||
CSS Custom Properties to dynamically switch the colors. */
|
|
||||||
body.light,
|
/* Define the Angular Material theme */
|
||||||
body .light {
|
$palette: mat.define-palette(map.get($theme, $name));
|
||||||
$base-light-theme: mat.define-light-theme((
|
|
||||||
|
/* Replace the default colors on the defined Material palette */
|
||||||
|
$palette: map.merge($palette, (
|
||||||
|
default: map.get(map.get($theme, $name), DEFAULT),
|
||||||
|
lighter: map.get(map.get($theme, $name), 100),
|
||||||
|
darker: map.get(map.get($theme, $name), 700),
|
||||||
|
text: map.get(map.get($theme, $name), DEFAULT),
|
||||||
|
default-contrast: map.get(map.get(map.get($theme, $name), contrast), DEFAULT),
|
||||||
|
lighter-contrast: map.get(map.get(map.get($theme, $name), contrast), 100),
|
||||||
|
darker-contrast: map.get(map.get(map.get($theme, $name), contrast), 700)
|
||||||
|
));
|
||||||
|
|
||||||
|
$palettes: map.merge($palettes, (#{$name}: $palette));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Define a light & dark Angular Material theme with the generated palettes */
|
||||||
|
$light-theme: mat.define-light-theme((
|
||||||
color: ($palettes)
|
color: ($palettes)
|
||||||
));
|
));
|
||||||
|
|
||||||
$light-theme: (
|
$dark-theme: mat.define-dark-theme((
|
||||||
color: (
|
|
||||||
primary: map.get(map.get($base-light-theme, color), primary),
|
|
||||||
accent: map.get(map.get($base-light-theme, color), accent),
|
|
||||||
warn: map.get(map.get($base-light-theme, color), warn),
|
|
||||||
is-dark: map.get(map.get($base-light-theme, color), is-dark),
|
|
||||||
foreground: (
|
|
||||||
base: #000000,
|
|
||||||
divider: #E2E8F0, /* slate.200 */
|
|
||||||
dividers: #E2E8F0, /* slate.200 */
|
|
||||||
disabled: #94A3B8, /* slate.400 */
|
|
||||||
disabled-button: #94A3B8, /* slate.400 */
|
|
||||||
disabled-text: #94A3B8, /* slate.400 */
|
|
||||||
elevation: #000000,
|
|
||||||
hint-text: #94A3B8, /* slate.400 */
|
|
||||||
secondary-text: #64748B, /* slate.500 */
|
|
||||||
icon: #64748B, /* slate.500 */
|
|
||||||
icons: #64748B, /* slate.500 */
|
|
||||||
mat-icon: #64748B, /* slate.500 */
|
|
||||||
text: #1E293B, /* slate.800 */
|
|
||||||
slider-min: #1E293B, /* slate.800 */
|
|
||||||
slider-off: #CBD5E1, /* slate.300 */
|
|
||||||
slider-off-active: #94A3B8 /* slate.400 */
|
|
||||||
),
|
|
||||||
background: (
|
|
||||||
status-bar: #CBD5E1, /* slate.300 */
|
|
||||||
app-bar: #FFFFFF,
|
|
||||||
background: #F1F5F9, /* slate.100 */
|
|
||||||
hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
|
|
||||||
card: #FFFFFF,
|
|
||||||
dialog: #FFFFFF,
|
|
||||||
disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
|
|
||||||
raised-button: #FFFFFF,
|
|
||||||
focused-button: #64748B, /* slate.500 */
|
|
||||||
selected-button: #E2E8F0, /* slate.200 */
|
|
||||||
selected-disabled-button: #E2E8F0, /* slate.200 */
|
|
||||||
disabled-button-toggle: #CBD5E1, /* slate.300 */
|
|
||||||
unselected-chip: #E2E8F0, /* slate.200 */
|
|
||||||
disabled-list-option: #CBD5E1, /* slate.300 */
|
|
||||||
tooltip: #1E293B /* slate.800 */
|
|
||||||
)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
/* Use all-component-colors to only generate the colors */
|
|
||||||
@include mat.all-component-colors($light-theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark,
|
|
||||||
body .dark {
|
|
||||||
$base-dark-theme: mat.define-dark-theme((
|
|
||||||
color: ($palettes)
|
color: ($palettes)
|
||||||
));
|
));
|
||||||
|
|
||||||
$dark-theme: (
|
/* Merge the custom base colors with the generated themes */
|
||||||
color: (
|
$light-theme-colors: map.merge(map.get($light-theme, color), $light-base);
|
||||||
primary: map.get(map.get($base-dark-theme, color), primary),
|
$light-theme: map.merge(
|
||||||
accent: map.get(map.get($base-dark-theme, color), accent),
|
(color: $light-theme-colors),
|
||||||
warn: map.get(map.get($base-dark-theme, color), warn),
|
$light-theme-colors
|
||||||
is-dark: map.get(map.get($base-dark-theme, color), is-dark),
|
|
||||||
foreground: (
|
|
||||||
base: #FFFFFF,
|
|
||||||
divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
|
|
||||||
dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
|
|
||||||
disabled: #475569, /* slate.600 */
|
|
||||||
disabled-button: #1E293B, /* slate.800 */
|
|
||||||
disabled-text: #475569, /* slate.600 */
|
|
||||||
elevation: #000000,
|
|
||||||
hint-text: #64748B, /* slate.500 */
|
|
||||||
secondary-text: #94A3B8, /* slate.400 */
|
|
||||||
icon: #F1F5F9, /* slate.100 */
|
|
||||||
icons: #F1F5F9, /* slate.100 */
|
|
||||||
mat-icon: #94A3B8, /* slate.400 */
|
|
||||||
text: #FFFFFF,
|
|
||||||
slider-min: #FFFFFF,
|
|
||||||
slider-off: #64748B, /* slate.500 */
|
|
||||||
slider-off-active: #94A3B8 /* slate.400 */
|
|
||||||
),
|
|
||||||
background: (
|
|
||||||
status-bar: #0F172A, /* slate.900 */
|
|
||||||
app-bar: #0F172A, /* slate.900 */
|
|
||||||
background: #0F172A, /* slate.900 */
|
|
||||||
hover: rgba(255, 255, 255, 0.05),
|
|
||||||
card: #1E293B, /* slate.800 */
|
|
||||||
dialog: #1E293B, /* slate.800 */
|
|
||||||
disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
|
|
||||||
raised-button: #0F172A, /* slate.900 */
|
|
||||||
focused-button: #E2E8F0, /* slate.200 */
|
|
||||||
selected-button: rgba(255, 255, 255, 0.05),
|
|
||||||
selected-disabled-button: #1E293B, /* slate.800 */
|
|
||||||
disabled-button-toggle: #0F172A, /* slate.900 */
|
|
||||||
unselected-chip: #475569, /* slate.600 */
|
|
||||||
disabled-list-option: #E2E8F0, /* slate.200 */
|
|
||||||
tooltip: #64748B /* slate.500 */
|
|
||||||
)
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
/* Use all-component-colors to only generate the colors */
|
$dark-theme-colors: map.merge(map.get($dark-theme, color), $dark-base);
|
||||||
@include mat.all-component-colors($dark-theme);
|
$dark-theme: map.merge(
|
||||||
|
(color: $dark-theme-colors),
|
||||||
|
$dark-theme-colors
|
||||||
|
);
|
||||||
|
|
||||||
|
/* Generate and encapsulate Angular Material themes */
|
||||||
|
#{map.get($theme, selector)} .light,
|
||||||
|
#{map.get($theme, selector)}.light {
|
||||||
|
@include mat.all-component-colors($light-theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
#{map.get($theme, selector)} .dark,
|
||||||
|
#{map.get($theme, selector)}.dark {
|
||||||
|
@include mat.all-component-colors($dark-theme);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
1
src/@fuse/styles/user-themes.scss
Normal file
1
src/@fuse/styles/user-themes.scss
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,10 +1,12 @@
|
||||||
const chroma = require('chroma-js');
|
const chroma = require('chroma-js');
|
||||||
const _ = require('lodash');
|
const _ = require('lodash');
|
||||||
|
const fs = require('fs');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const colors = require('tailwindcss/colors');
|
const colors = require('tailwindcss/colors');
|
||||||
const plugin = require('tailwindcss/plugin');
|
const plugin = require('tailwindcss/plugin');
|
||||||
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
|
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
|
||||||
const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts')));
|
const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts')));
|
||||||
|
const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-map')));
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
// @ Utilities
|
// @ Utilities
|
||||||
|
|
@ -39,6 +41,88 @@ const theming = plugin.withOptions((options) => ({
|
||||||
theme
|
theme
|
||||||
}) =>
|
}) =>
|
||||||
{
|
{
|
||||||
|
/**
|
||||||
|
* Create user themes object by going through the provided themes and
|
||||||
|
* merging them with the provided "default" so, we can have a complete
|
||||||
|
* set of color palettes for each user theme.
|
||||||
|
*/
|
||||||
|
const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
|
||||||
|
themeName,
|
||||||
|
_.defaults({}, theme, options.themes['default'])
|
||||||
|
]));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Normalize the themes and assign it to the themes object. This will
|
||||||
|
* be the final object that we create a SASS map from
|
||||||
|
*/
|
||||||
|
let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
|
||||||
|
themeName,
|
||||||
|
normalizeTheme(theme)
|
||||||
|
]));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Go through the themes to generate the contrasts and filter the
|
||||||
|
* palettes to only have "primary", "accent" and "warn" objects.
|
||||||
|
*/
|
||||||
|
themes = _.fromPairs(_.map(themes, (theme, themeName) => [
|
||||||
|
themeName,
|
||||||
|
_.pick(
|
||||||
|
_.fromPairs(_.map(theme, (palette, paletteName) => [
|
||||||
|
paletteName,
|
||||||
|
{
|
||||||
|
...palette,
|
||||||
|
contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
|
||||||
|
hue,
|
||||||
|
_.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
|
||||||
|
]))
|
||||||
|
}
|
||||||
|
])),
|
||||||
|
['primary', 'accent', 'warn']
|
||||||
|
)
|
||||||
|
]));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Go through the themes and attach appropriate class selectors so,
|
||||||
|
* we can use them to encapsulate each theme.
|
||||||
|
*/
|
||||||
|
themes = _.fromPairs(_.map(themes, (theme, themeName) => [
|
||||||
|
themeName,
|
||||||
|
{
|
||||||
|
selector: `".theme-${themeName}"`,
|
||||||
|
...theme
|
||||||
|
}
|
||||||
|
]));
|
||||||
|
|
||||||
|
/* Generate the SASS map using the themes object */
|
||||||
|
const sassMap = jsonToSassMap(JSON.stringify({'user-themes': themes}));
|
||||||
|
|
||||||
|
/* Get the file path */
|
||||||
|
const filename = path.resolve(__dirname, ('../../styles/user-themes.scss'));
|
||||||
|
|
||||||
|
/* Read the file and get its data */
|
||||||
|
let data;
|
||||||
|
try
|
||||||
|
{
|
||||||
|
data = fs.readFileSync(filename, {encoding: 'utf8'});
|
||||||
|
}
|
||||||
|
catch ( err )
|
||||||
|
{
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Write the file if the map has been changed */
|
||||||
|
if ( data !== sassMap )
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
fs.writeFileSync(filename, sassMap, {encoding: 'utf8'});
|
||||||
|
}
|
||||||
|
catch ( err )
|
||||||
|
{
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Iterate through the user's themes and build Tailwind components containing
|
* Iterate through the user's themes and build Tailwind components containing
|
||||||
* CSS Custom Properties using the colors from them. This allows switching
|
* CSS Custom Properties using the colors from them. This allows switching
|
||||||
|
|
@ -61,9 +145,9 @@ const theming = plugin.withOptions((options) => ({
|
||||||
]))
|
]))
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
/**
|
||||||
// @ Generate scheme based css custom properties and utility classes
|
* Generate scheme based css custom properties and utility classes
|
||||||
// -----------------------------------------------------------------------------------------------------
|
*/
|
||||||
const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) =>
|
const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) =>
|
||||||
{
|
{
|
||||||
const isDark = colorScheme === 'dark';
|
const isDark = colorScheme === 'dark';
|
||||||
|
|
@ -78,7 +162,7 @@ const theming = plugin.withOptions((options) => ({
|
||||||
/**
|
/**
|
||||||
* If a custom property is not available, browsers will use
|
* If a custom property is not available, browsers will use
|
||||||
* the fallback value. In this case, we want to use '--is-dark'
|
* the fallback value. In this case, we want to use '--is-dark'
|
||||||
* as the indicator of a dark theme so we can use it like this:
|
* as the indicator of a dark theme so, we can use it like this:
|
||||||
* background-color: var(--is-dark, red);
|
* background-color: var(--is-dark, red);
|
||||||
*
|
*
|
||||||
* If we set '--is-dark' as "true" on dark themes, the above rule
|
* If we set '--is-dark' as "true" on dark themes, the above rule
|
||||||
|
|
@ -99,7 +183,7 @@ const theming = plugin.withOptions((options) => ({
|
||||||
*/
|
*/
|
||||||
...(!isDark ? {'--is-dark': 'false'} : {}),
|
...(!isDark ? {'--is-dark': 'false'} : {}),
|
||||||
|
|
||||||
// Generate custom properties from customProps
|
/* Generate custom properties from customProps */
|
||||||
..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
|
..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
|
||||||
..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
|
..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
|
||||||
}
|
}
|
||||||
|
|
@ -108,7 +192,7 @@ const theming = plugin.withOptions((options) => ({
|
||||||
|
|
||||||
const schemeUtilities = (() =>
|
const schemeUtilities = (() =>
|
||||||
{
|
{
|
||||||
// Generate general styles & utilities
|
/* Generate general styles & utilities */
|
||||||
return {};
|
return {};
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|
|
||||||
67
src/@fuse/tailwind/utils/json-to-sass-map.js
Normal file
67
src/@fuse/tailwind/utils/json-to-sass-map.js
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
const _ = require('lodash');
|
||||||
|
|
||||||
|
module.exports = (data) =>
|
||||||
|
{
|
||||||
|
if ( !data )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
data = JSON.parse(data);
|
||||||
|
|
||||||
|
const getSCSS = (chunk) =>
|
||||||
|
{
|
||||||
|
let scss = '';
|
||||||
|
|
||||||
|
if ( typeof chunk === "object" && !Array.isArray(chunk) )
|
||||||
|
{
|
||||||
|
_.mapKeys(chunk, (value, key) =>
|
||||||
|
{
|
||||||
|
scss += key + ': ';
|
||||||
|
|
||||||
|
if ( typeof value === "object" )
|
||||||
|
{
|
||||||
|
if ( Array.isArray(value) )
|
||||||
|
{
|
||||||
|
scss += '(';
|
||||||
|
_.each(value, (val1) =>
|
||||||
|
{
|
||||||
|
if ( Array.isArray(val1) )
|
||||||
|
{
|
||||||
|
_.each(val1, (val2) =>
|
||||||
|
{
|
||||||
|
scss += val2 + ' ';
|
||||||
|
});
|
||||||
|
scss = scss.slice(0, -1) + ', ';
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
scss += val1 + ', ';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
scss = scss.slice(0, -2);
|
||||||
|
scss += ')';
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
scss += '(' + getSCSS(value) + ')';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
scss += getSCSS(value);
|
||||||
|
}
|
||||||
|
scss += ', ';
|
||||||
|
});
|
||||||
|
scss = scss.slice(0, -2);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
scss += chunk;
|
||||||
|
}
|
||||||
|
|
||||||
|
return scss;
|
||||||
|
};
|
||||||
|
|
||||||
|
return '$' + getSCSS(data) + ';';
|
||||||
|
};
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
import { Version } from '@fuse/version/version';
|
import { Version } from '@fuse/version/version';
|
||||||
|
|
||||||
export const FUSE_VERSION = new Version('16.0.0').full;
|
export const FUSE_VERSION = new Version('17.0.0').full;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
import { Translation, TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
|
import { Translation, TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
|
||||||
import { APP_INITIALIZER, NgModule } from '@angular/core';
|
import { APP_INITIALIZER, NgModule } from '@angular/core';
|
||||||
import { environment } from 'environments/environment';
|
|
||||||
import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
|
import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
@ -25,7 +24,7 @@ import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
|
||||||
defaultLang : 'en',
|
defaultLang : 'en',
|
||||||
fallbackLang : 'en',
|
fallbackLang : 'en',
|
||||||
reRenderOnLangChange: true,
|
reRenderOnLangChange: true,
|
||||||
prodMode : environment.production
|
prodMode : true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -151,12 +151,12 @@
|
||||||
|
|
||||||
<!-- Message field -->
|
<!-- Message field -->
|
||||||
<div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
|
<div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
|
||||||
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full">
|
<mat-form-field
|
||||||
|
class="fuse-mat-dense fuse-mat-rounded fuse-mat-bold w-full"
|
||||||
|
[subscriptSizing]="'dynamic'">
|
||||||
<textarea
|
<textarea
|
||||||
class="min-h-5 my-0 resize-none"
|
|
||||||
style="margin: 11px 0 !important; padding: 0 !important;"
|
|
||||||
[rows]="1"
|
|
||||||
matInput
|
matInput
|
||||||
|
cdkTextareaAutosize
|
||||||
#messageInput></textarea>
|
#messageInput></textarea>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<div class="flex items-center h-11 my-px ml-4">
|
<div class="flex items-center h-11 my-px ml-4">
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,9 @@
|
||||||
<!-- Basic search -->
|
<!-- Basic search -->
|
||||||
<ng-container *ngIf="appearance === 'basic'">
|
<ng-container *ngIf="appearance === 'basic'">
|
||||||
<div class="w-full sm:min-w-80">
|
<div class="w-full sm:min-w-80">
|
||||||
<mat-form-field class="fuse-mat-no-subscript w-full">
|
<mat-form-field
|
||||||
|
class="w-full"
|
||||||
|
[subscriptSizing]="'dynamic'">
|
||||||
<mat-icon
|
<mat-icon
|
||||||
matPrefix
|
matPrefix
|
||||||
[svgIcon]="'heroicons_outline:search'"></mat-icon>
|
[svgIcon]="'heroicons_outline:search'"></mat-icon>
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
<!-- Alert -->
|
<!-- Alert -->
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
class="mt-8 -mb-4"
|
class="mt-8"
|
||||||
*ngIf="showAlert"
|
*ngIf="showAlert"
|
||||||
[appearance]="'outline'"
|
[appearance]="'outline'"
|
||||||
[showIcon]="false"
|
[showIcon]="false"
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
<!-- Alert -->
|
<!-- Alert -->
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
class="mt-8 -mb-4"
|
class="mt-8"
|
||||||
*ngIf="showAlert"
|
*ngIf="showAlert"
|
||||||
[appearance]="'outline'"
|
[appearance]="'outline'"
|
||||||
[showIcon]="false"
|
[showIcon]="false"
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,16 @@
|
||||||
|
|
||||||
<!-- Alert -->
|
<!-- Alert -->
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
class="mt-8 -mb-4"
|
class="mt-8"
|
||||||
|
[appearance]="'outline'"
|
||||||
|
[showIcon]="false"
|
||||||
|
[type]="'info'">
|
||||||
|
You are browsing <strong>Fuse Demo</strong>. Click on the "Sign in" button to access the Demo and Documentation.
|
||||||
|
</fuse-alert>
|
||||||
|
|
||||||
|
<!-- Alert -->
|
||||||
|
<fuse-alert
|
||||||
|
class="mt-8"
|
||||||
*ngIf="showAlert"
|
*ngIf="showAlert"
|
||||||
[appearance]="'outline'"
|
[appearance]="'outline'"
|
||||||
[showIcon]="false"
|
[showIcon]="false"
|
||||||
|
|
@ -77,8 +86,9 @@
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
<div class="inline-flex items-end justify-between w-full mt-1.5">
|
<div class="inline-flex items-center justify-between w-full mt-1.5">
|
||||||
<mat-checkbox
|
<mat-checkbox
|
||||||
|
class="-ml-2"
|
||||||
[color]="'primary'"
|
[color]="'primary'"
|
||||||
[formControlName]="'rememberMe'">
|
[formControlName]="'rememberMe'">
|
||||||
Remember me
|
Remember me
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
|
|
||||||
<!-- Alert -->
|
<!-- Alert -->
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
class="mt-8 -mb-4"
|
class="mt-8"
|
||||||
*ngIf="showAlert"
|
*ngIf="showAlert"
|
||||||
[appearance]="'outline'"
|
[appearance]="'outline'"
|
||||||
[showIcon]="false"
|
[showIcon]="false"
|
||||||
|
|
@ -100,12 +100,13 @@
|
||||||
<!-- ToS and PP -->
|
<!-- ToS and PP -->
|
||||||
<div class="inline-flex items-end w-full mt-1.5">
|
<div class="inline-flex items-end w-full mt-1.5">
|
||||||
<mat-checkbox
|
<mat-checkbox
|
||||||
|
class="-ml-2"
|
||||||
[color]="'primary'"
|
[color]="'primary'"
|
||||||
[formControlName]="'agreements'">
|
[formControlName]="'agreements'">
|
||||||
<span>I agree to the</span>
|
<span>I agree with</span>
|
||||||
<a
|
<a
|
||||||
class="ml-1 text-primary-500 hover:underline"
|
class="ml-1 text-primary-500 hover:underline"
|
||||||
[routerLink]="['./']">Terms of Service
|
[routerLink]="['./']">Terms
|
||||||
</a>
|
</a>
|
||||||
<span>and</span>
|
<span>and</span>
|
||||||
<a
|
<a
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
<!-- Alert -->
|
<!-- Alert -->
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
class="mt-8 -mb-4"
|
class="mt-8"
|
||||||
*ngIf="showAlert"
|
*ngIf="showAlert"
|
||||||
[appearance]="'outline'"
|
[appearance]="'outline'"
|
||||||
[showIcon]="false"
|
[showIcon]="false"
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
export const environment = {
|
|
||||||
production: true
|
|
||||||
};
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
// This file can be replaced during build by using the `fileReplacements` array.
|
|
||||||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
|
||||||
// The list of file replacements can be found in `angular.json`.
|
|
||||||
|
|
||||||
export const environment = {
|
|
||||||
production: false
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
* For easier debugging in development mode, you can import the following file
|
|
||||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
|
||||||
*
|
|
||||||
* This import should be commented out in production mode because it will have a negative impact
|
|
||||||
* on performance if an error is thrown.
|
|
||||||
*/
|
|
||||||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
|
||||||
8
src/global.d.ts
vendored
8
src/global.d.ts
vendored
|
|
@ -1,8 +0,0 @@
|
||||||
/**
|
|
||||||
* Declare SCSS files as modules so we can import them into TS files and use their content
|
|
||||||
*/
|
|
||||||
declare module '*.scss'
|
|
||||||
{
|
|
||||||
const content: { [className: string]: string };
|
|
||||||
export = content;
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +1,5 @@
|
||||||
import { enableProdMode } from '@angular/core';
|
|
||||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||||
import { environment } from 'environments/environment';
|
|
||||||
import { AppModule } from 'app/app.module';
|
import { AppModule } from 'app/app.module';
|
||||||
|
|
||||||
if ( environment.production )
|
|
||||||
{
|
|
||||||
enableProdMode();
|
|
||||||
}
|
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||||
.catch(err => console.error(err));
|
.catch(err => console.error(err));
|
||||||
|
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
/**
|
|
||||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
|
||||||
* You can add your own extra polyfills to this file.
|
|
||||||
*
|
|
||||||
* This file is divided into 2 sections:
|
|
||||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
|
||||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
|
||||||
* file.
|
|
||||||
*
|
|
||||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
|
||||||
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
|
||||||
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
|
||||||
*
|
|
||||||
* Learn more in https://angular.io/guide/browser-support
|
|
||||||
*/
|
|
||||||
|
|
||||||
/***************************************************************************************************
|
|
||||||
* BROWSER POLYFILLS
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
|
||||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
|
||||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
|
||||||
* will put import in the top of bundle, so user need to create a separate file
|
|
||||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
|
||||||
* into that file, and then add the following code before importing zone.js.
|
|
||||||
* import './zone-flags';
|
|
||||||
*
|
|
||||||
* The flags allowed in zone-flags.ts are listed here.
|
|
||||||
*
|
|
||||||
* The following flags will work for all browsers.
|
|
||||||
*
|
|
||||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
|
||||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
|
||||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
|
||||||
*
|
|
||||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
|
||||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
|
||||||
*
|
|
||||||
* (window as any).__Zone_enable_cross_context_check = true;
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/***************************************************************************************************
|
|
||||||
* Zone JS is required by default for Angular itself.
|
|
||||||
*/
|
|
||||||
import 'zone.js'; // Included with Angular CLI.
|
|
||||||
|
|
||||||
/***************************************************************************************************
|
|
||||||
* APPLICATION IMPORTS
|
|
||||||
*/
|
|
||||||
24
src/test.ts
24
src/test.ts
|
|
@ -1,24 +0,0 @@
|
||||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
|
||||||
|
|
||||||
import 'zone.js/testing';
|
|
||||||
import { getTestBed } from '@angular/core/testing';
|
|
||||||
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
|
|
||||||
|
|
||||||
declare const require: {
|
|
||||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
|
||||||
<T>(id: string): T;
|
|
||||||
keys(): string[];
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// First, initialize the Angular testing environment.
|
|
||||||
getTestBed().initTestEnvironment(
|
|
||||||
BrowserDynamicTestingModule,
|
|
||||||
platformBrowserDynamicTesting()
|
|
||||||
);
|
|
||||||
|
|
||||||
// Then we find all the tests.
|
|
||||||
const context = require.context('./', true, /\.spec\.ts$/);
|
|
||||||
|
|
||||||
// And load the modules.
|
|
||||||
context.keys().forEach(context);
|
|
||||||
|
|
@ -17,7 +17,7 @@ const customPalettes = {
|
||||||
* Themes
|
* Themes
|
||||||
*/
|
*/
|
||||||
const themes = {
|
const themes = {
|
||||||
// Default theme is required for theming system to work correctly
|
// Default theme is required for theming system to work correctly!
|
||||||
'default': {
|
'default': {
|
||||||
primary : {
|
primary : {
|
||||||
...colors.indigo,
|
...colors.indigo,
|
||||||
|
|
@ -36,7 +36,7 @@ const themes = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// Rest of the themes will use the 'default' as the base
|
// Rest of the themes will use the 'default' as the base
|
||||||
// theme and extend it with their given configuration
|
// theme and will extend it with their given configuration.
|
||||||
'brand' : {
|
'brand' : {
|
||||||
primary: customPalettes.brand
|
primary: customPalettes.brand
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,7 @@
|
||||||
"types": []
|
"types": []
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"src/main.ts",
|
"src/main.ts"
|
||||||
"src/polyfills.ts"
|
|
||||||
],
|
],
|
||||||
"include": [
|
"include": [
|
||||||
"src/**/*.d.ts"
|
"src/**/*.d.ts"
|
||||||
|
|
|
||||||
|
|
@ -11,10 +11,11 @@
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"importHelpers": true,
|
"importHelpers": true,
|
||||||
"target": "es2020",
|
"target": "ES2022",
|
||||||
"module": "es2020",
|
"module": "ES2022",
|
||||||
|
"useDefineForClassFields": false,
|
||||||
"lib": [
|
"lib": [
|
||||||
"es2020",
|
"ES2022",
|
||||||
"dom"
|
"dom"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -7,10 +7,6 @@
|
||||||
"jasmine"
|
"jasmine"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"files": [
|
|
||||||
"src/test.ts",
|
|
||||||
"src/polyfills.ts"
|
|
||||||
],
|
|
||||||
"include": [
|
"include": [
|
||||||
"src/**/*.spec.ts",
|
"src/**/*.spec.ts",
|
||||||
"src/**/*.d.ts"
|
"src/**/*.d.ts"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user