mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-06 18:45:08 +00:00
First step for upgrading to Angular & Angular Material v15
This commit is contained in:
Sercan Yemen
parent
127280c040
commit
388456b937
|
|
@ -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
|
||||
50510
package-lock.json
generated
50510
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
30
package.json
30
package.json
|
|
@ -14,17 +14,17 @@
|
|||
"lint": "ng lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "14.2.4",
|
||||
"@angular/cdk": "14.2.3",
|
||||
"@angular/common": "14.2.4",
|
||||
"@angular/compiler": "14.2.4",
|
||||
"@angular/core": "14.2.4",
|
||||
"@angular/forms": "14.2.4",
|
||||
"@angular/material": "14.2.3",
|
||||
"@angular/material-luxon-adapter": "14.2.3",
|
||||
"@angular/platform-browser": "14.2.4",
|
||||
"@angular/platform-browser-dynamic": "14.2.4",
|
||||
"@angular/router": "14.2.4",
|
||||
"@angular/animations": "15.0.0-rc.0",
|
||||
"@angular/cdk": "15.0.0-next.5",
|
||||
"@angular/common": "15.0.0-rc.0",
|
||||
"@angular/compiler": "15.0.0-rc.0",
|
||||
"@angular/core": "15.0.0-rc.0",
|
||||
"@angular/forms": "15.0.0-rc.0",
|
||||
"@angular/material": "15.0.0-next.5",
|
||||
"@angular/material-luxon-adapter": "15.0.0-next.5",
|
||||
"@angular/platform-browser": "15.0.0-rc.0",
|
||||
"@angular/platform-browser-dynamic": "15.0.0-rc.0",
|
||||
"@angular/router": "15.0.0-rc.0",
|
||||
"@ngneat/transloco": "4.1.1",
|
||||
"apexcharts": "3.35.5",
|
||||
"crypto-js": "3.3.0",
|
||||
|
|
@ -41,14 +41,14 @@
|
|||
"zone.js": "0.11.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "14.2.4",
|
||||
"@angular-devkit/build-angular": "15.0.0-rc.0",
|
||||
"@angular-eslint/builder": "14.1.2",
|
||||
"@angular-eslint/eslint-plugin": "14.1.2",
|
||||
"@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",
|
||||
"@angular/cli": "15.0.0-rc.0",
|
||||
"@angular/compiler-cli": "15.0.0-rc.0",
|
||||
"@tailwindcss/line-clamp": "0.4.2",
|
||||
"@tailwindcss/typography": "0.5.7",
|
||||
"@types/chroma-js": "2.1.4",
|
||||
|
|
@ -75,6 +75,6 @@
|
|||
"lodash": "4.17.21",
|
||||
"postcss": "8.4.17",
|
||||
"tailwindcss": "3.1.8",
|
||||
"typescript": "4.7.4"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,167 +1,146 @@
|
|||
@use '@angular/material' as mat;
|
||||
@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 mat.core();
|
||||
|
||||
/* Create a base theme without color.
|
||||
This will globally set the density and typography for all future color themes. */
|
||||
/* Create a base theme without any color to set the density and typography */
|
||||
@include mat.all-component-themes((
|
||||
color: null,
|
||||
density: -2,
|
||||
density: 0,
|
||||
typography: mat.define-typography-config(
|
||||
$font-family: theme('fontFamily.sans'),
|
||||
$title: mat.define-typography-level(1.25rem, 2rem, 600),
|
||||
/* $title: mat.define-typography-level(1.25rem, 2rem, 600), */
|
||||
$body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
|
||||
$button: mat.define-typography-level(0.875rem, 0.875rem, 500),
|
||||
$input: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */
|
||||
$subtitle-1: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */
|
||||
)
|
||||
));
|
||||
|
||||
/* Generate Primary, Accent and Warn palettes */
|
||||
$palettes: ();
|
||||
@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)
|
||||
)));
|
||||
}
|
||||
/* Loop through user themes and generate Angular Material themes */
|
||||
@each $name, $theme in userThemes.$user-themes {
|
||||
|
||||
/* Generate Angular Material themes. Since we are using CSS Custom Properties,
|
||||
we don't have to generate a separate Angular Material theme for each color
|
||||
set. We can just create one light and one dark theme and then switch the
|
||||
CSS Custom Properties to dynamically switch the colors. */
|
||||
body.light,
|
||||
body .light {
|
||||
$base-light-theme: mat.define-light-theme((
|
||||
/* Generate the palettes */
|
||||
$palettes: ();
|
||||
@each $name in (primary, accent, warn) {
|
||||
|
||||
/* Define the Angular Material theme */
|
||||
$palette: mat.define-palette(map.get($theme, $name));
|
||||
|
||||
/* 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)
|
||||
));
|
||||
|
||||
$light-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((
|
||||
$dark-theme: mat.define-dark-theme((
|
||||
color: ($palettes)
|
||||
));
|
||||
|
||||
$dark-theme: (
|
||||
color: (
|
||||
primary: map.get(map.get($base-dark-theme, color), primary),
|
||||
accent: map.get(map.get($base-dark-theme, color), accent),
|
||||
warn: map.get(map.get($base-dark-theme, color), warn),
|
||||
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 */
|
||||
)
|
||||
)
|
||||
);
|
||||
/* Merge the custom base colors with the generated themes */
|
||||
$light-theme: map.merge($light-theme, $light-base);
|
||||
$dark-theme: map.merge($dark-theme, $dark-base);
|
||||
|
||||
/* Use all-component-colors to only generate the colors */
|
||||
@include mat.all-component-colors($dark-theme);
|
||||
/* 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 _ = require('lodash');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const colors = require('tailwindcss/colors');
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
|
||||
const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts')));
|
||||
const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-map')));
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Utilities
|
||||
|
|
@ -39,6 +41,70 @@ const theming = plugin.withOptions((options) => ({
|
|||
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}));
|
||||
|
||||
/* Write the SASS map to the file */
|
||||
fs.writeFile(path.resolve(__dirname, ('../../styles/user-themes.scss')), sassMap, (err) =>
|
||||
{
|
||||
if ( err )
|
||||
{
|
||||
return console.log(err);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Iterate through the user's themes and build Tailwind components containing
|
||||
* CSS Custom Properties using the colors from them. This allows switching
|
||||
|
|
@ -61,9 +127,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 isDark = colorScheme === 'dark';
|
||||
|
|
@ -78,7 +144,7 @@ const theming = plugin.withOptions((options) => ({
|
|||
/**
|
||||
* If a custom property is not available, browsers will use
|
||||
* 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);
|
||||
*
|
||||
* If we set '--is-dark' as "true" on dark themes, the above rule
|
||||
|
|
@ -99,7 +165,7 @@ const theming = plugin.withOptions((options) => ({
|
|||
*/
|
||||
...(!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(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
|
||||
}
|
||||
|
|
@ -108,7 +174,7 @@ const theming = plugin.withOptions((options) => ({
|
|||
|
||||
const schemeUtilities = (() =>
|
||||
{
|
||||
// Generate general styles & utilities
|
||||
/* Generate general styles & utilities */
|
||||
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) + ';';
|
||||
};
|
||||
|
|
@ -455,38 +455,32 @@
|
|||
<mat-form-field
|
||||
[ngClass]="formFieldHelpers"
|
||||
class="flex-auto">
|
||||
<mat-chip-list #chipList01>
|
||||
<mat-chip
|
||||
[removable]="true"
|
||||
[selectable]="true">
|
||||
<mat-chip-grid #chipGrid01>
|
||||
<mat-chip-row [editable]="true">
|
||||
Lemon
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matChipRemove
|
||||
[svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
|
||||
</mat-chip>
|
||||
<mat-chip
|
||||
[removable]="true"
|
||||
[selectable]="true">
|
||||
</mat-chip-row>
|
||||
<mat-chip-row [editable]="true">
|
||||
Lime
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matChipRemove
|
||||
[svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
|
||||
</mat-chip>
|
||||
<mat-chip
|
||||
[removable]="true"
|
||||
[selectable]="true">
|
||||
</mat-chip-row>
|
||||
<mat-chip-row [editable]="true">
|
||||
Apple
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matChipRemove
|
||||
[svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-row>
|
||||
<input
|
||||
[placeholder]="'New fruit...'"
|
||||
[matChipInputFor]="chipList01">
|
||||
</mat-chip-list>
|
||||
[matChipInputFor]="chipGrid01">
|
||||
</mat-chip-grid>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex">
|
||||
|
|
@ -734,38 +728,32 @@
|
|||
<mat-form-field
|
||||
[ngClass]="formFieldHelpers"
|
||||
class="flex-auto">
|
||||
<mat-chip-list #chipList02>
|
||||
<mat-chip
|
||||
[removable]="true"
|
||||
[selectable]="true">
|
||||
<mat-chip-grid #chipGrid02>
|
||||
<mat-chip-row [editable]="true">
|
||||
Lemon
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matChipRemove
|
||||
[svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
|
||||
</mat-chip>
|
||||
<mat-chip
|
||||
[removable]="true"
|
||||
[selectable]="true">
|
||||
</mat-chip-row>
|
||||
<mat-chip-row [editable]="true">
|
||||
Lime
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matChipRemove
|
||||
[svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
|
||||
</mat-chip>
|
||||
<mat-chip
|
||||
[removable]="true"
|
||||
[selectable]="true">
|
||||
</mat-chip-row>
|
||||
<mat-chip-row [editable]="true">
|
||||
Apple
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matChipRemove
|
||||
[svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-row>
|
||||
<input
|
||||
[placeholder]="'New fruit...'"
|
||||
[matChipInputFor]="chipList02">
|
||||
</mat-chip-list>
|
||||
[matChipInputFor]="chipGrid02">
|
||||
</mat-chip-grid>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex">
|
||||
|
|
|
|||
|
|
@ -393,9 +393,11 @@
|
|||
Toggle determinate mode
|
||||
</mat-slide-toggle>
|
||||
|
||||
<mat-slider
|
||||
[color]="'primary'"
|
||||
(change)="setProgress($event)">
|
||||
<mat-slider [color]="'primary'">
|
||||
<input
|
||||
matSliderThumb
|
||||
[(value)]="sliderValue"
|
||||
(valueChange)="setProgress()">
|
||||
Progress value
|
||||
</mat-slider>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { MatSliderChange } from '@angular/material/slider';
|
||||
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
|
||||
import { finalize } from 'rxjs';
|
||||
import { FuseLoadingService } from '@fuse/services/loading';
|
||||
|
|
@ -14,6 +13,7 @@ export class LoadingBarComponent
|
|||
{
|
||||
apiCallStatus: string = '-';
|
||||
mode: 'determinate' | 'indeterminate' = 'indeterminate';
|
||||
sliderValue: number = 0;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
|
|
@ -96,11 +96,9 @@ export class LoadingBarComponent
|
|||
|
||||
/**
|
||||
* Set the progress
|
||||
*
|
||||
* @param change
|
||||
*/
|
||||
setProgress(change: MatSliderChange): void
|
||||
setProgress(): void
|
||||
{
|
||||
this._fuseLoadingService.setProgress(change.value);
|
||||
this._fuseLoadingService.setProgress(this.sliderValue);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
13
src/test.ts
13
src/test.ts
|
|
@ -4,21 +4,8 @@ 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
|
||||
*/
|
||||
const themes = {
|
||||
// Default theme is required for theming system to work correctly
|
||||
// Default theme is required for theming system to work correctly!
|
||||
'default': {
|
||||
primary : {
|
||||
...colors.indigo,
|
||||
|
|
@ -36,7 +36,7 @@ const themes = {
|
|||
}
|
||||
},
|
||||
// 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' : {
|
||||
primary: customPalettes.brand
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,12 +11,13 @@
|
|||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user