Merge branch 'dev' into dev-starter

This commit is contained in:
Sercan Yemen
2022-11-17 13:17:47 +03:00
31 changed files with 6369 additions and 7678 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -63,11 +63,15 @@
-webkit-text-fill-color: currentColor;
}
/* Set the background and foreground colors */
body, .dark, .light {
@apply text-default bg-default #{'!important'};
}
*, *::before, *::after {
/* Set the border color */
*,
::before,
::after {
--tw-border-opacity: 1 !important;
border-color: rgba(var(--fuse-border-rgb), var(--tw-border-opacity));
@@ -116,6 +120,7 @@
}
}
/* Set the foreground color for disabled elements */
[disabled] * {
@apply text-disabled #{'!important'};
}

View File

@@ -1,167 +1,164 @@
@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),
$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 */
$headline-1: mat.define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
$headline-2: mat.define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
$headline-3: mat.define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
$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 */
$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-colors: map.merge(map.get($light-theme, color), $light-base);
$light-theme: map.merge(
(color: $light-theme-colors),
$light-theme-colors
);
/* Use all-component-colors to only generate the colors */
@include mat.all-component-colors($dark-theme);
$dark-theme-colors: map.merge(map.get($dark-theme, color), $dark-base);
$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);
}
}

File diff suppressed because one or more lines are too long

View File

@@ -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,88 @@ 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}));
/* 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
* 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 isDark = colorScheme === 'dark';
@@ -78,7 +162,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 +183,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 +192,7 @@ const theming = plugin.withOptions((options) => ({
const schemeUtilities = (() =>
{
// Generate general styles & utilities
/* Generate general styles & utilities */
return {};
})();

View 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) + ';';
};

View File

@@ -1,3 +1,3 @@
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;

View File

@@ -1,6 +1,5 @@
import { Translation, TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { environment } from 'environments/environment';
import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
@NgModule({
@@ -25,7 +24,7 @@ import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
defaultLang : 'en',
fallbackLang : 'en',
reRenderOnLangChange: true,
prodMode : environment.production
prodMode : true
})
},
{

View File

@@ -151,12 +151,12 @@
<!-- Message field -->
<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
class="min-h-5 my-0 resize-none"
style="margin: 11px 0 !important; padding: 0 !important;"
[rows]="1"
matInput
cdkTextareaAutosize
#messageInput></textarea>
</mat-form-field>
<div class="flex items-center h-11 my-px ml-4">

View File

@@ -68,7 +68,9 @@
<!-- Basic search -->
<ng-container *ngIf="appearance === 'basic'">
<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
matPrefix
[svgIcon]="'heroicons_outline:search'"></mat-icon>

View File

@@ -12,7 +12,7 @@
<!-- Alert -->
<fuse-alert
class="mt-8 -mb-4"
class="mt-8"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"

View File

@@ -12,7 +12,7 @@
<!-- Alert -->
<fuse-alert
class="mt-8 -mb-4"
class="mt-8"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"

View File

@@ -18,7 +18,16 @@
<!-- 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"
[appearance]="'outline'"
[showIcon]="false"
@@ -77,8 +86,9 @@
</mat-form-field>
<!-- 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
class="-ml-2"
[color]="'primary'"
[formControlName]="'rememberMe'">
Remember me

View File

@@ -18,7 +18,7 @@
<!-- Alert -->
<fuse-alert
class="mt-8 -mb-4"
class="mt-8"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"
@@ -100,12 +100,13 @@
<!-- ToS and PP -->
<div class="inline-flex items-end w-full mt-1.5">
<mat-checkbox
class="-ml-2"
[color]="'primary'"
[formControlName]="'agreements'">
<span>I agree to the</span>
<span>I agree with</span>
<a
class="ml-1 text-primary-500 hover:underline"
[routerLink]="['./']">Terms of Service
[routerLink]="['./']">Terms
</a>
<span>and</span>
<a

View File

@@ -12,7 +12,7 @@
<!-- Alert -->
<fuse-alert
class="mt-8 -mb-4"
class="mt-8"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"

View File

@@ -1,3 +0,0 @@
export const environment = {
production: true
};

View File

@@ -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
View File

@@ -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;
}

View File

@@ -1,12 +1,5 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from 'environments/environment';
import { AppModule } from 'app/app.module';
if ( environment.production )
{
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

View File

@@ -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
*/

View File

@@ -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);