inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-17 14:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

angular 12 with theming workaround

Browse Source
This commit is contained in:
Denys Vuika
2022-02-23 12:10:03 +00:00
committed by eromano
parent 270d98b7dc
commit c2904c5a1d
37 changed files with 3394 additions and 4046 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
angular.json
View File

@@ -11,7 +11,6 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"allowedCommonJsDependencies": [
"minimatch",
"minimatch-browser",
@@ -176,7 +175,13 @@
"node_modules/pdfjs-dist/web/pdf_viewer.js",
"node_modules/raphael/raphael.min.js",
"node_modules/moment/min/moment.min.js"
]
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
@@ -190,9 +195,7 @@
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true,
"verbose": false,
"fileReplacements": [
@@ -213,9 +216,7 @@
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true,
"verbose": false,
"fileReplacements": [
@@ -225,7 +226,8 @@
}
]
}
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",

20
demo-shell/src/custom-style-dev.scss
View File

@@ -1,11 +1,11 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import '../../lib/core/styles/index';
@include mat-core($alfresco-typography);
@include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme(
$primary: mat.define-palette($alfresco-accent-orange);
$accent: mat.define-palette($alfresco-accent-purple);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-light-theme(
(
color: (
primary: $primary,
@@ -14,7 +14,7 @@ $theme: mat-light-theme(
)
);
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);
body,
@@ -22,9 +22,9 @@ html {
margin: 0;
height: 100%;
overflow: hidden;
font-size: mat-font-size($alfresco-typography, body-1);
font-family: mat-font-family($alfresco-typography);
line-height: mat-line-height($alfresco-typography, body-1);
font-size: mat.font-size($alfresco-typography, body-1);
font-family: mat.font-family($alfresco-typography);
line-height: mat.line-height($alfresco-typography, body-1);
}
body {

20
demo-shell/src/custom-style.scss
View File

@@ -1,11 +1,11 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import '~@alfresco/adf-core/theming';
@include mat-core($alfresco-typography);
@include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme(
$primary: mat.define-palette($alfresco-accent-orange);
$accent: mat.define-palette($alfresco-accent-purple);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-light-theme(
(
color: (
primary: $primary,
@@ -14,7 +14,7 @@ $theme: mat-light-theme(
)
);
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);
body,
@@ -22,9 +22,9 @@ html {
margin: 0;
height: 100%;
overflow: hidden;
font-size: mat-font-size($alfresco-typography, body-1);
font-family: mat-font-family($alfresco-typography);
line-height: mat-line-height($alfresco-typography, body-1);
font-size: mat.font-size($alfresco-typography, body-1);
font-family: mat.font-family($alfresco-typography);
line-height: mat.line-height($alfresco-typography, body-1);
}
body {

2
demo-shell/src/polyfills.ts
View File

@@ -41,7 +41,7 @@
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
import 'zone.js'; // Included with Angular CLI.
/**
* Support custom event in IE11

2
demo-shell/src/test.ts
View File

@@ -17,7 +17,7 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,

4
lib/content-services/src/lib/search/components/search-control.component.scss
View File

@@ -1,11 +1,11 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
$mat-menu-overlay-min-width: 112px !default; // 56 * 2
$mat-menu-overlay-max-width: 280px !default; // 56 * 5
.adf {
&-search-result-autocomplete {
@include mat-overridable-elevation(2);
@include mat.overridable-elevation(2);
min-width: $mat-menu-overlay-min-width;
max-width: $mat-menu-overlay-max-width;

4
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
View File

@@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
.adf-search-filter-chip {
&.mat-chip {
@@ -53,6 +53,6 @@
min-width: 320px;
border-radius: 12px;
@include mat-elevation(2);
@include mat.elevation(2);
}
}

4
lib/content-services/src/lib/search/components/search-form/search-form.component.scss
View File

@@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
.adf-search-form {
&.mat-button {
@@ -37,7 +37,7 @@
}
&-menu + * .mat-menu-panel {
@include mat-elevation(2);
@include mat.elevation(2);
border-radius: 6px;

4
lib/content-services/src/test.ts
View File

@@ -15,8 +15,8 @@
* limitations under the License.
*/
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-testing';
import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,

6
lib/core/datatable/components/datatable/datatable.component.scss
View File

@@ -1,5 +1,5 @@
/* stylelint-disable no-descending-specificity */
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import '../../../styles/mixins';
$data-table-header-font-size: var(--theme-caption-font-size) !default;
@@ -48,8 +48,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
margin: 6px;
padding: 15px;
@include mat-elevation-transition;
@include mat-overridable-elevation(2);
@include mat.elevation-transition;
@include mat.overridable-elevation(2);
}
.adf-datatable-row-empty-card {

4
lib/core/directives/tooltip-card/tooltip-card.component.scss
View File

@@ -1,11 +1,11 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
:host {
display: block;
}
div.adf-tooltip-card {
@include mat-elevation(8);
@include mat.elevation(8);
background-color: var(--theme-card-bg-color);
border: 1px solid var(--theme-primary-color);

1
lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss
View File

@@ -1,5 +1,4 @@
/* stylelint-disable no-descending-specificity */
@import '~@angular/material/theming';
@import '../../../../styles/mixins';
$dynamic-table-font-size: var(--theme-body-1-font-size) !default;

4
lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss
View File

@@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
.adf {
&-sidebar-action-menu {
@@ -58,6 +58,6 @@
margin-top: 7.5px;
border-radius: 2px;
@include mat-elevation(2);
@include mat.elevation(2);
}
}

10
lib/core/scss-bundle.config.json
View File

@@ -1,10 +0,0 @@
{
"bundlerOptions": {
"entryFile": "./lib/core/styles/_index.scss",
"rootDir": ".",
"project": "../../",
"outFile": "./lib/dist/core/_theming.scss",
"ignoreImports": ["~@angular/.*"],
"logLevel": "info"
}
}

133
lib/core/styles/_index.scss
View File

@@ -1,4 +1,5 @@
/* stylelint-disable value-keyword-case */
@use '~@angular/material' as mat;
/* stylelint-disable value-list-max-empty-lines */
/* stylelint-disable scss/no-global-function-names */
/* stylelint-disable scss/at-import-partial-extension */
@@ -24,76 +25,76 @@
// map SCSS variables to expose as CSS variables
$defaults: (
// material colors
--theme-primary-color: mat-color($primary),
--theme-primary-color-default-contrast: mat-color($primary, default-contrast),
--theme-warn-color: mat-color($warn),
--theme-warn-color-default-contrast: mat-color($warn, default-contrast),
--theme-accent-color: mat-color($accent),
--theme-accent-color-a200: mat-color($accent, A200),
--theme-accent-color-default-contrast: mat-color($accent, default-contrast),
--theme-primary-color: mat.get-color-from-palette($primary),
--theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
--theme-warn-color: mat.get-color-from-palette($warn),
--theme-warn-color-default-contrast: mat.get-color-from-palette($warn, default-contrast),
--theme-accent-color: mat.get-color-from-palette($accent),
--theme-accent-color-a200: mat.get-color-from-palette($accent, A200),
--theme-accent-color-default-contrast: mat.get-color-from-palette($accent, default-contrast),
// component themes
--adf-snackbar-error-bg-color: mat-color($warn),
--adf-snackbar-error-bg-color: mat.get-color-from-palette($warn),
--adf-snackbar-error-action-color: white,
--adf-snackbar-warning-bg-color: mat-color($accent),
--adf-snackbar-warning-bg-color: mat.get-color-from-palette($accent),
--adf-snackbar-warning-action-color: white,
--adf-snackbar-info-bg-color: mat-color($primary),
--adf-snackbar-info-bg-color: mat.get-color-from-palette($primary),
--adf-snackbar-info-action-color: white,
--adf-breadcrumb-item-active-color: mat-color($foreground, text, 0.87),
--adf-breadcrumb-item-active-hover-color: mat-color($foreground, text, 0.64),
--adf-node-selector-icon-color: mat-color($foreground, icon, 0.54),
--adf-node-selector-base-color: mat-color($foreground, base, 0.45),
--adf-node-selector-base-bold-color: mat-color($foreground, base, 0.65),
--adf-datatable-cell-link-hover-color: mat-color($accent, 500),
--adf-datatable-selected-color: mat-color($primary, 100),
--adf-user-info-color: mat-color($primary, 300),
--adf-comment-list-primary-color: mat-color($primary, 100),
--adf-comment-list-ripple-color: mat-color($primary, 300),
--adf-search-input-bg-color: mat-color($primary, 50),
--adf-search-input-highlight-color: mat-color($primary, 900),
--adf-tooltip-card-color: mat-color($foreground, text, 0.75),
--adf-card-view-text-color: mat-color($foreground, text, 0.25),
--adf-card-view-label-color: mat-color($foreground, text, 0.4),
--adf-card-view-datetime-border-color: mat-color($foreground, text, 0.42),
--adf-upload-border-color: mat-color($foreground, text, 0.14),
--adf-header-background-color: mat-color($primary),
--adf-header-text-color: mat-color($primary, default-contrast),
--adf-breadcrumb-item-active-color: mat.get-color-from-palette($foreground, text, 0.87),
--adf-breadcrumb-item-active-hover-color: mat.get-color-from-palette($foreground, text, 0.64),
--adf-node-selector-icon-color: mat.get-color-from-palette($foreground, icon, 0.54),
--adf-node-selector-base-color: mat.get-color-from-palette($foreground, base, 0.45),
--adf-node-selector-base-bold-color: mat.get-color-from-palette($foreground, base, 0.65),
--adf-datatable-cell-link-hover-color: mat.get-color-from-palette($accent, 500),
--adf-datatable-selected-color: mat.get-color-from-palette($primary, 100),
--adf-user-info-color: mat.get-color-from-palette($primary, 300),
--adf-comment-list-primary-color: mat.get-color-from-palette($primary, 100),
--adf-comment-list-ripple-color: mat.get-color-from-palette($primary, 300),
--adf-search-input-bg-color: mat.get-color-from-palette($primary, 50),
--adf-search-input-highlight-color: mat.get-color-from-palette($primary, 900),
--adf-tooltip-card-color: mat.get-color-from-palette($foreground, text, 0.75),
--adf-card-view-text-color: mat.get-color-from-palette($foreground, text, 0.25),
--adf-card-view-label-color: mat.get-color-from-palette($foreground, text, 0.4),
--adf-card-view-datetime-border-color: mat.get-color-from-palette($foreground, text, 0.42),
--adf-upload-border-color: mat.get-color-from-palette($foreground, text, 0.14),
--adf-header-background-color: mat.get-color-from-palette($primary),
--adf-header-text-color: mat.get-color-from-palette($primary, default-contrast),
--theme-hover-bg-color: mat-color($background, hover),
--theme-text-color: mat-color($foreground, text, 0.54),
--theme-text-bold-color: mat-color($foreground, text, 0.87),
--theme-background-color: mat-color($background, background),
--theme-text-fg-color: mat-color($foreground, text),
--theme-text-fg-shadow-color: mat-color($foreground, text, 0.27),
--theme-border-color: mat-color($foreground, text, 0.07),
--theme-card-bg-color: mat-color($background, card),
--theme-card-bg-bold-color: mat-color($background, card, 0.87),
--theme-foreground-text-color: mat-color($foreground, text, 0.72),
--theme-secondary-text-color: mat-color($foreground, secondary-text),
--theme-dialog-bg-color: mat-color($background, dialog),
--theme-bg-hover-color: mat-color($background, hover),
--theme-fg-base-color: mat-color($foreground, base),
--theme-fg-divider: mat-color($foreground, divider),
--theme-disabled-text-color: mat-color($foreground, disabled-text),
--theme-selected-button-bg-color: mat-color($background, selected-button),
--theme-icon-fg-color: mat-color($foreground, icon),
--theme-unselected-chip-bg-color: mat-color($background, unselected-chip),
--theme-status-bar-bg-color: mat-color($background, status-bar),
--theme-hover-bg-color: mat.get-color-from-palette($background, hover),
--theme-text-color: mat.get-color-from-palette($foreground, text, 0.54),
--theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
--theme-background-color: mat.get-color-from-palette($background, background),
--theme-text-fg-color: mat.get-color-from-palette($foreground, text),
--theme-text-fg-shadow-color: mat.get-color-from-palette($foreground, text, 0.27),
--theme-border-color: mat.get-color-from-palette($foreground, text, 0.07),
--theme-card-bg-color: mat.get-color-from-palette($background, card),
--theme-card-bg-bold-color: mat.get-color-from-palette($background, card, 0.87),
--theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72),
--theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
--theme-dialog-bg-color: mat.get-color-from-palette($background, dialog),
--theme-bg-hover-color: mat.get-color-from-palette($background, hover),
--theme-fg-base-color: mat.get-color-from-palette($foreground, base),
--theme-fg-divider: mat.get-color-from-palette($foreground, divider),
--theme-disabled-text-color: mat.get-color-from-palette($foreground, disabled-text),
--theme-selected-button-bg-color: mat.get-color-from-palette($background, selected-button),
--theme-icon-fg-color: mat.get-color-from-palette($foreground, icon),
--theme-unselected-chip-bg-color: mat.get-color-from-palette($background, unselected-chip),
--theme-status-bar-bg-color: mat.get-color-from-palette($background, status-bar),
// fonts
--theme-font-family: mat-font-family($alfresco-typography),
--theme-body-1-font-size: mat-font-size($alfresco-typography, body-1),
--theme-body-2-font-size: mat-font-size($alfresco-typography, body-2),
--theme-body-1-line-height: mat-line-height($alfresco-typography, body-1),
--theme-display-1-font-size: mat-font-size($alfresco-typography, display-1),
--theme-display-3-font-size: mat-font-size($alfresco-typography, display-3),
--theme-display-4-font-size: mat-font-size($alfresco-typography, display-4),
--theme-caption-font-size: mat-font-size($alfresco-typography, caption),
--theme-title-font-size: mat-font-size($alfresco-typography, title),
--theme-subheading-1-font-size: mat-font-size($alfresco-typography, subheading-1),
--theme-subheading-2-font-size: mat-font-size($alfresco-typography, subheading-2),
--theme-button-font-size: mat-font-size($alfresco-typography, button),
--theme-headline-font-size: mat-font-size($alfresco-typography, headline),
--theme-headline-line-height: mat-line-height($alfresco-typography, headline),
--theme-font-family: mat.font-family($alfresco-typography),
--theme-body-1-font-size: mat.font-size($alfresco-typography, body-1),
--theme-body-2-font-size: mat.font-size($alfresco-typography, body-2),
--theme-body-1-line-height: mat.line-height($alfresco-typography, body-1),
--theme-display-1-font-size: mat.font-size($alfresco-typography, display-1),
--theme-display-3-font-size: mat.font-size($alfresco-typography, display-3),
--theme-display-4-font-size: mat.font-size($alfresco-typography, display-4),
--theme-caption-font-size: mat.font-size($alfresco-typography, caption),
--theme-title-font-size: mat.font-size($alfresco-typography, title),
--theme-subheading-1-font-size: mat.font-size($alfresco-typography, subheading-1),
--theme-subheading-2-font-size: mat.font-size($alfresco-typography, subheading-2),
--theme-button-font-size: mat.font-size($alfresco-typography, button),
--theme-headline-font-size: mat.font-size($alfresco-typography, headline),
--theme-headline-line-height: mat.line-height($alfresco-typography, headline),
--theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'),
--theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),
@@ -101,9 +102,9 @@
--theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'),
// specific colors
--theme-colors-mat-grey: mat-color($mat-grey, A200),
--theme-colors-mat-grey-dark: mat-color($mat-grey, A400),
--theme-colors-mag-grey-light: mat-color($mat-grey, 50),
--theme-colors-mat-grey: mat.get-color-from-palette(mat.$grey-palette, A200),
--theme-colors-mat-grey-dark: mat.get-color-from-palette(mat.$grey-palette, A400),
--theme-colors-mag-grey-light: mat.get-color-from-palette(mat.$grey-palette, 50),
);
// propagates SCSS variables into the CSS variables scope

1
lib/core/styles/_theming.scss
View File

@@ -1,4 +1,3 @@
@import '~@angular/material/theming';
@import '~@angular/flex-layout/mq';
@import './colors';
@import './mixins';

30
lib/core/styles/_typography.scss
View File

@@ -1,19 +1,19 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
$alfresco-typography: mat-typography-config(
$alfresco-typography: mat.define-typography-config(
$font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300),
$display-3: mat-typography-level(56px, 56px, 400),
$display-2: mat-typography-level(45px, 48px, 400),
$display-1: mat-typography-level(34px, 40px, 400),
$headline: mat-typography-level(24px, 32px, 400),
$title: mat-typography-level(20px, 32px, 500),
$subheading-2: mat-typography-level(16px, 28px, 400),
$subheading-1: mat-typography-level(15px, 24px, 400),
$body-2: mat-typography-level(14px, 24px, 500),
$body-1: mat-typography-level(14px, 20px, 400),
$caption: mat-typography-level(12px, 20px, 400),
$button: mat-typography-level(14px, 14px, 500),
$display-4: mat.define-typography-level(112px, 112px, 300),
$display-3: mat.define-typography-level(56px, 56px, 400),
$display-2: mat.define-typography-level(45px, 48px, 400),
$display-1: mat.define-typography-level(34px, 40px, 400),
$headline: mat.define-typography-level(24px, 32px, 400),
$title: mat.define-typography-level(20px, 32px, 500),
$subheading-2: mat.define-typography-level(16px, 28px, 400),
$subheading-1: mat.define-typography-level(15px, 24px, 400),
$body-2: mat.define-typography-level(14px, 24px, 500),
$body-1: mat.define-typography-level(14px, 20px, 400),
$caption: mat.define-typography-level(12px, 20px, 400),
$button: mat.define-typography-level(14px, 14px, 500),
// Line-height must be unit-less fraction of the font-size.
$input: mat-typography-level(16px, 1.25, 400)
$input: mat.define-typography-level(16px, 1.25, 400)
);

13
lib/core/styles/prebuilt/adf-blue-orange.scss
View File

@@ -1,11 +1,12 @@
@use '~@angular/material' as mat;
@import '../theming';
@import './all-theme';
@include mat-core($alfresco-typography);
@include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-ecm-blue);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme(
$primary: mat.define-palette($alfresco-ecm-blue);
$accent: mat.define-palette($alfresco-accent-orange);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-light-theme(
(
color: (
primary: $primary,
@@ -14,5 +15,5 @@ $theme: mat-light-theme(
)
);
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);

13
lib/core/styles/prebuilt/adf-blue-purple.scss
View File

@@ -1,11 +1,12 @@
@use '~@angular/material' as mat;
@import '../theming';
@import './all-theme';
@include mat-core($alfresco-typography);
@include mat.core($alfresco-typography);
$primary: mat-palette($mat-pink, 700, 500, 900);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme(
$primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
$accent: mat.define-palette($alfresco-accent-purple);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-light-theme(
(
color: (
primary: $primary,
@@ -14,5 +15,5 @@ $theme: mat-light-theme(
)
);
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);

13
lib/core/styles/prebuilt/adf-cyan-orange.scss
View File

@@ -1,11 +1,12 @@
@use '~@angular/material' as mat;
@import '../theming';
@import './all-theme';
@include mat-core($alfresco-typography);
@include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-ecm-cyan);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme(
$primary: mat.define-palette($alfresco-ecm-cyan);
$accent: mat.define-palette($alfresco-accent-orange);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-light-theme(
(
color: (
primary: $primary,
@@ -14,5 +15,5 @@ $theme: mat-light-theme(
)
);
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);

13
lib/core/styles/prebuilt/adf-cyan-purple.scss
View File

@@ -1,11 +1,12 @@
@use '~@angular/material' as mat;
@import '../theming';
@import './all-theme';
@include mat-core($alfresco-typography);
@include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-ecm-cyan);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme(
$primary: mat.define-palette($alfresco-ecm-cyan);
$accent: mat.define-palette($alfresco-accent-purple);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-light-theme(
(
color: (
primary: $primary,
@@ -14,5 +15,5 @@ $theme: mat-light-theme(
)
);
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);

13
lib/core/styles/prebuilt/adf-green-orange.scss
View File

@@ -1,11 +1,12 @@
@use '~@angular/material' as mat;
@import '../theming';
@import './all-theme';
@include mat-core($alfresco-typography);
@include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-bpm-green);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme(
$primary: mat.define-palette($alfresco-bpm-green);
$accent: mat.define-palette($alfresco-accent-orange);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-light-theme(
(
color: (
primary: $primary,
@@ -14,5 +15,5 @@ $theme: mat-light-theme(
)
);
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);

13
lib/core/styles/prebuilt/adf-green-purple.scss
View File

@@ -1,11 +1,12 @@
@use '~@angular/material' as mat;
@import '../theming';
@import './all-theme';
@include mat-core($alfresco-typography);
@include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-bpm-green);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme(
$primary: mat.define-palette($alfresco-bpm-green);
$accent: mat.define-palette($alfresco-accent-purple);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-light-theme(
(
color: (
primary: $primary,
@@ -14,5 +15,5 @@ $theme: mat-light-theme(
)
);
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);

13
lib/core/styles/prebuilt/adf-indigo-pink.scss
View File

@@ -1,12 +1,13 @@
/* stylelint-disable value-keyword-case */
@use '~@angular/material' as mat;
@import '../theming';
@import './all-theme';
@include mat-core($alfresco-typography);
@include mat.core($alfresco-typography);
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme(
$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-light-theme(
(
color: (
primary: $primary,
@@ -15,5 +16,5 @@ $theme: mat-light-theme(
)
);
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);

13
lib/core/styles/prebuilt/adf-pink-bluegrey.scss
View File

@@ -1,12 +1,13 @@
/* stylelint-disable value-keyword-case */
@use '~@angular/material' as mat;
@import '../theming';
@import './all-theme';
@include mat-core($alfresco-typography);
@include mat.core($alfresco-typography);
$primary: mat-palette($mat-pink, 700, 500, 900);
$accent: mat-palette($mat-blue-grey, A200, A100, A400);
$warn: mat-palette($alfresco-warn);
$theme: mat-dark-theme(
$primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
$accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-dark-theme(
(
color: (
primary: $primary,
@@ -15,5 +16,5 @@ $theme: mat-dark-theme(
)
);
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);

13
lib/core/styles/prebuilt/adf-purple-green.scss
View File

@@ -1,12 +1,13 @@
/* stylelint-disable value-keyword-case */
@use '~@angular/material' as mat;
@import '../theming';
@import './all-theme';
@include mat-core($alfresco-typography);
@include mat.core($alfresco-typography);
$primary: mat-palette($mat-purple, 700, 500, 800);
$accent: mat-palette($mat-green, A200, A100, A400);
$warn: mat-palette($alfresco-warn);
$theme: mat-dark-theme(
$primary: mat.define-palette(mat.$purple-palette, 700, 500, 800);
$accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-dark-theme(
(
color: (
primary: $primary,
@@ -15,5 +16,5 @@ $theme: mat-dark-theme(
)
);
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);

4
lib/core/test.ts
View File

@@ -15,8 +15,8 @@
* limitations under the License.
*/
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-testing';
import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,

1
lib/core/theming/_index.scss Normal file
View File

@@ -0,0 +1 @@
@forward '../styles';

4
lib/extensions/src/test.ts
View File

@@ -17,8 +17,8 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-testing';
import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,

4
lib/insights/src/test.ts
View File

@@ -17,8 +17,8 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-testing';
import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,

4
lib/process-services-cloud/src/test.ts
View File

@@ -17,8 +17,8 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-testing';
import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,

4
lib/process-services/src/test.ts
View File

@@ -15,8 +15,8 @@
* limitations under the License.
*/
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-testing';
import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,

6966
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

35
package.json
View File

@@ -25,7 +25,6 @@
"affected:libs": "nx affected:libs",
"inspect.bundle": "ng build demoshell --configuration production --stats-json && npx webpack-bundle-analyzer dist/demo-shell/stats.json",
"coverage": "./lib/config/create-coverage-index.sh && lite-server -c ./lib/config/proxy-coverage.json",
"scss-bundle:core": "npx scss-bundle -c ./lib/core/scss-bundle.config.json",
"03": "echo -------------------------------------------- Lint -----------------------------------------------",
"03s": "",
"lint-demo": "tslint -p tsconfig.json -c tslint.json",
@@ -70,18 +69,18 @@
],
"dependencies": {
"@alfresco/js-api": "4.8.0",
"@angular/animations": "^11.2.14",
"@angular/cdk": "11.2.13",
"@angular/common": "^11.2.14",
"@angular/compiler": "^11.2.14",
"@angular/core": "^11.2.14",
"@angular/animations": "^12.2.16",
"@angular/cdk": "12.2.13",
"@angular/common": "^12.2.16",
"@angular/compiler": "^12.2.16",
"@angular/core": "^12.2.16",
"@angular/flex-layout": "^11.0.0-beta.33",
"@angular/forms": "^11.2.14",
"@angular/material": "^11.2.13",
"@angular/material-moment-adapter": "^11.2.13",
"@angular/platform-browser": "^11.2.14",
"@angular/platform-browser-dynamic": "^11.2.14",
"@angular/router": "^11.2.14",
"@angular/forms": "^12.2.16",
"@angular/material": "^12.2.13",
"@angular/material-moment-adapter": "^12.2.13",
"@angular/platform-browser": "^12.2.16",
"@angular/platform-browser-dynamic": "^12.2.16",
"@angular/router": "^12.2.16",
"@apollo/client": "^3.5.6",
"@mat-datetimepicker/core": "^5.1.1",
"@mat-datetimepicker/moment": "^5.1.1",
@@ -103,17 +102,17 @@
"rxjs": "^6.6.3",
"subscriptions-transport-ws": "^0.11.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.18",
"@angular-devkit/build-angular": "^12.2.16",
"@angular-eslint/builder": "1.2.0",
"@angular-eslint/eslint-plugin": "1.2.0",
"@angular-eslint/eslint-plugin-template": "1.2.0",
"@angular-eslint/schematics": "1.2.0",
"@angular-eslint/template-parser": "1.2.0",
"@angular/cli": "^11.2.18",
"@angular/compiler-cli": "^11.2.14",
"@angular/cli": "^12.2.16",
"@angular/compiler-cli": "^12.2.16",
"@nrwl/schematics": "8.12.11",
"@nrwl/storybook": "^12.9.0",
"@nrwl/workspace": "^11.2.11",
@@ -165,7 +164,7 @@
"lite-server": "^2.6.1",
"mini-css-extract-plugin": "^1.6.0",
"nconf": "^0.11.1",
"ng-packagr": "^11.2.4",
"ng-packagr": "^12.2.7",
"postcss": "^8.4.5",
"postcss-sass": "^0.5.0",
"protractor": "^7.0.0",
@@ -181,7 +180,7 @@
"ts-node": "^10.4.0",
"tsconfig-paths": "^3.12.0",
"tslint": "6.1.3",
"typescript": "4.1.6",
"typescript": "4.3.5",
"webdriver-manager": "12.1.8"
},
"license": "Apache-2.0",

4
scripts/build/build-all-lib.sh
View File

@@ -31,6 +31,10 @@ echo "====== Run testing ====="
echo "====== Run Cli ====="
./build-cli.sh || exit 1
echo "====== Prebuilt Themes ====="
./build-themes.sh || exit 1
echo "====== Copy schema ====="
cp ../../lib/core/app-config/schema.json ../../lib/dist/core/app.config.schema.json

34
scripts/build/build-core.sh
View File

@@ -15,9 +15,6 @@ else
NODE_OPTIONS="--max-old-space-size=8192" nx build core || exit 1
fi
echo "====== Bundle styles ======"
npm run scss-bundle:core || exit 1
echo "====== Copy i18n ======"
mkdir -p ./lib/dist/core/bundles/assets/adf-core/i18n
cp -R ./lib/core/i18n/* ./lib/dist/core/bundles/assets/adf-core/i18n
@@ -27,34 +24,3 @@ cp -R ./lib/core/app-config/schema.json lib/dist/core/app.config.schema.json
echo "====== Copy assets ======"
cp -R ./lib/core/assets/* ./lib/dist/core/bundles/assets
echo "====== Bundle prebuilt styles ======"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-blue-orange.scss" -o "./lib/dist/core/prebuilt-themes/adf-blue-orange.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-blue-purple.scss" -o "./lib/dist/core/prebuilt-themes/adf-blue-purple.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-cyan-purple.scss" -o "./lib/dist/core/prebuilt-themes/adf-cyan-purple.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-green-purple.scss" -o "./lib/dist/core/prebuilt-themes/adf-green-purple.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-pink-bluegrey.scss" -o "./lib/dist/core/prebuilt-themes/adf-pink-bluegrey.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-cyan-orange.scss" -o "./lib/dist/core/prebuilt-themes/adf-cyan-orange.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-green-orange.scss" -o ".lib/dist/core/prebuilt-themes/adf-green-orange.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-indigo-pink.scss" -o "./lib/dist/core/prebuilt-themes/adf-indigo-pink.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-purple-green.scss" -o "./lib/dist/core/prebuilt-themes/adf-purple-green.scss" -p "./"
node-sass "./lib/dist/core/prebuilt-themes/adf-blue-orange.scss" "./lib/dist/core/prebuilt-themes/adf-blue-orange.css"
node-sass "./lib/dist/core/prebuilt-themes/adf-blue-purple.scss" "./lib/dist/core/prebuilt-themes/adf-blue-purple.css"
node-sass "./lib/dist/core/prebuilt-themes/adf-cyan-purple.scss" "./lib/dist/core/prebuilt-themes/adf-cyan-purple.css"
node-sass "./lib/dist/core/prebuilt-themes/adf-green-purple.scss" "./lib/dist/core/prebuilt-themes/adf-green-purple.css"
node-sass "./lib/dist/core/prebuilt-themes/adf-pink-bluegrey.scss" "./lib/dist/core/prebuilt-themes/adf-pink-bluegrey.css"
node-sass "./lib/dist/core/prebuilt-themes/adf-cyan-orange.scss" "./lib/dist/core/prebuilt-themes/adf-cyan-orange.css"
node-sass "./lib/dist/core/prebuilt-themes/adf-green-orange.scss" "./lib/dist/core/prebuilt-themes/adf-green-orange.css"
node-sass "./lib/dist/core/prebuilt-themes/adf-indigo-pink.scss" "./lib/dist/core/prebuilt-themes/adf-indigo-pink.css"
node-sass "./lib/dist/core/prebuilt-themes/adf-purple-green.scss" "./lib/dist/core/prebuilt-themes/adf-purple-green.css"
rm "./lib/dist/core/prebuilt-themes/adf-blue-orange.scss"
rm "./lib/dist/core/prebuilt-themes/adf-blue-purple.scss"
rm "./lib/dist/core/prebuilt-themes/adf-cyan-purple.scss"
rm "./lib/dist/core/prebuilt-themes/adf-green-purple.scss"
rm "./lib/dist/core/prebuilt-themes/adf-pink-bluegrey.scss"
rm "./lib/dist/core/prebuilt-themes/adf-cyan-orange.scss"
rm "./lib/dist/core/prebuilt-themes/adf-green-orange.scss"
rm "./lib/dist/core/prebuilt-themes/adf-indigo-pink.scss"
rm "./lib/dist/core/prebuilt-themes/adf-purple-green.scss"

10
scripts/build/build-themes.sh Executable file
View File

@@ -0,0 +1,10 @@
#!/usr/bin/env bash
DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
cd $DIR/../..
echo "====== Build Themes ====="
nx build demoshell && \
mkdir -p ./lib/dist/core/prebuilt-themes && \
cp ./dist/demo-shell/adf-*.css ./lib/dist/core/prebuilt-themes/