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": { "build": {
"builder": "@angular-devkit/build-angular:browser", "builder": "@angular-devkit/build-angular:browser",
"options": { "options": {
"aot": true,
"allowedCommonJsDependencies": [ "allowedCommonJsDependencies": [
"minimatch", "minimatch",
"minimatch-browser", "minimatch-browser",
@@ -176,7 +175,13 @@
"node_modules/pdfjs-dist/web/pdf_viewer.js", "node_modules/pdfjs-dist/web/pdf_viewer.js",
"node_modules/raphael/raphael.min.js", "node_modules/raphael/raphael.min.js",
"node_modules/moment/min/moment.min.js" "node_modules/moment/min/moment.min.js"
] ],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
}, },
"configurations": { "configurations": {
"production": { "production": {
@@ -190,9 +195,7 @@
"outputHashing": "all", "outputHashing": "all",
"sourceMap": false, "sourceMap": false,
"namedChunks": false, "namedChunks": false,
"aot": true,
"extractLicenses": true, "extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true, "buildOptimizer": true,
"verbose": false, "verbose": false,
"fileReplacements": [ "fileReplacements": [
@@ -213,9 +216,7 @@
"outputHashing": "all", "outputHashing": "all",
"sourceMap": false, "sourceMap": false,
"namedChunks": false, "namedChunks": false,
"aot": true,
"extractLicenses": true, "extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true, "buildOptimizer": true,
"verbose": false, "verbose": false,
"fileReplacements": [ "fileReplacements": [
@@ -225,7 +226,8 @@
} }
] ]
} }
} },
"defaultConfiguration": ""
}, },
"serve": { "serve": {
"builder": "@angular-devkit/build-angular:dev-server", "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'; @import '../../lib/core/styles/index';
@include mat-core($alfresco-typography); @include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-accent-orange); $primary: mat.define-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme( $theme: mat.define-light-theme(
( (
color: ( color: (
primary: $primary, 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); @include alfresco-material-theme($theme);
body, body,
@@ -22,9 +22,9 @@ html {
margin: 0; margin: 0;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-size: mat-font-size($alfresco-typography, body-1); font-size: mat.font-size($alfresco-typography, body-1);
font-family: mat-font-family($alfresco-typography); font-family: mat.font-family($alfresco-typography);
line-height: mat-line-height($alfresco-typography, body-1); line-height: mat.line-height($alfresco-typography, body-1);
} }
body { 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'; @import '~@alfresco/adf-core/theming';
@include mat-core($alfresco-typography); @include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-accent-orange); $primary: mat.define-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme( $theme: mat.define-light-theme(
( (
color: ( color: (
primary: $primary, 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); @include alfresco-material-theme($theme);
body, body,
@@ -22,9 +22,9 @@ html {
margin: 0; margin: 0;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-size: mat-font-size($alfresco-typography, body-1); font-size: mat.font-size($alfresco-typography, body-1);
font-family: mat-font-family($alfresco-typography); font-family: mat.font-family($alfresco-typography);
line-height: mat-line-height($alfresco-typography, body-1); line-height: mat.line-height($alfresco-typography, body-1);
} }
body { body {

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

@@ -41,7 +41,7 @@
/*************************************************************************************************** /***************************************************************************************************
* Zone JS is required by Angular itself. * 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 * 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 // 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 { getTestBed } from '@angular/core/testing';
import { import {
BrowserDynamicTestingModule, 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-min-width: 112px !default; // 56 * 2
$mat-menu-overlay-max-width: 280px !default; // 56 * 5 $mat-menu-overlay-max-width: 280px !default; // 56 * 5
.adf { .adf {
&-search-result-autocomplete { &-search-result-autocomplete {
@include mat-overridable-elevation(2); @include mat.overridable-elevation(2);
min-width: $mat-menu-overlay-min-width; min-width: $mat-menu-overlay-min-width;
max-width: $mat-menu-overlay-max-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 { .adf-search-filter-chip {
&.mat-chip { &.mat-chip {
@@ -53,6 +53,6 @@
min-width: 320px; min-width: 320px;
border-radius: 12px; 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 { .adf-search-form {
&.mat-button { &.mat-button {
@@ -37,7 +37,7 @@
} }
&-menu + * .mat-menu-panel { &-menu + * .mat-menu-panel {
@include mat-elevation(2); @include mat.elevation(2);
border-radius: 6px; border-radius: 6px;

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

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

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

@@ -1,5 +1,5 @@
/* stylelint-disable no-descending-specificity */ /* stylelint-disable no-descending-specificity */
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@import '../../../styles/mixins'; @import '../../../styles/mixins';
$data-table-header-font-size: var(--theme-caption-font-size) !default; $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; margin: 6px;
padding: 15px; padding: 15px;
@include mat-elevation-transition; @include mat.elevation-transition;
@include mat-overridable-elevation(2); @include mat.overridable-elevation(2);
} }
.adf-datatable-row-empty-card { .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 { :host {
display: block; display: block;
} }
div.adf-tooltip-card { div.adf-tooltip-card {
@include mat-elevation(8); @include mat.elevation(8);
background-color: var(--theme-card-bg-color); background-color: var(--theme-card-bg-color);
border: 1px solid var(--theme-primary-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 */ /* stylelint-disable no-descending-specificity */
@import '~@angular/material/theming';
@import '../../../../styles/mixins'; @import '../../../../styles/mixins';
$dynamic-table-font-size: var(--theme-body-1-font-size) !default; $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 { .adf {
&-sidebar-action-menu { &-sidebar-action-menu {
@@ -58,6 +58,6 @@
margin-top: 7.5px; margin-top: 7.5px;
border-radius: 2px; 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 */ /* stylelint-disable value-keyword-case */
@use '~@angular/material' as mat;
/* stylelint-disable value-list-max-empty-lines */ /* stylelint-disable value-list-max-empty-lines */
/* stylelint-disable scss/no-global-function-names */ /* stylelint-disable scss/no-global-function-names */
/* stylelint-disable scss/at-import-partial-extension */ /* stylelint-disable scss/at-import-partial-extension */
@@ -24,76 +25,76 @@
// map SCSS variables to expose as CSS variables // map SCSS variables to expose as CSS variables
$defaults: ( $defaults: (
// material colors // material colors
--theme-primary-color: mat-color($primary), --theme-primary-color: mat.get-color-from-palette($primary),
--theme-primary-color-default-contrast: mat-color($primary, default-contrast), --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
--theme-warn-color: mat-color($warn), --theme-warn-color: mat.get-color-from-palette($warn),
--theme-warn-color-default-contrast: mat-color($warn, default-contrast), --theme-warn-color-default-contrast: mat.get-color-from-palette($warn, default-contrast),
--theme-accent-color: mat-color($accent), --theme-accent-color: mat.get-color-from-palette($accent),
--theme-accent-color-a200: mat-color($accent, A200), --theme-accent-color-a200: mat.get-color-from-palette($accent, A200),
--theme-accent-color-default-contrast: mat-color($accent, default-contrast), --theme-accent-color-default-contrast: mat.get-color-from-palette($accent, default-contrast),
// component themes // 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-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-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-snackbar-info-action-color: white,
--adf-breadcrumb-item-active-color: mat-color($foreground, text, 0.87), --adf-breadcrumb-item-active-color: mat.get-color-from-palette($foreground, text, 0.87),
--adf-breadcrumb-item-active-hover-color: mat-color($foreground, text, 0.64), --adf-breadcrumb-item-active-hover-color: mat.get-color-from-palette($foreground, text, 0.64),
--adf-node-selector-icon-color: mat-color($foreground, icon, 0.54), --adf-node-selector-icon-color: mat.get-color-from-palette($foreground, icon, 0.54),
--adf-node-selector-base-color: mat-color($foreground, base, 0.45), --adf-node-selector-base-color: mat.get-color-from-palette($foreground, base, 0.45),
--adf-node-selector-base-bold-color: mat-color($foreground, base, 0.65), --adf-node-selector-base-bold-color: mat.get-color-from-palette($foreground, base, 0.65),
--adf-datatable-cell-link-hover-color: mat-color($accent, 500), --adf-datatable-cell-link-hover-color: mat.get-color-from-palette($accent, 500),
--adf-datatable-selected-color: mat-color($primary, 100), --adf-datatable-selected-color: mat.get-color-from-palette($primary, 100),
--adf-user-info-color: mat-color($primary, 300), --adf-user-info-color: mat.get-color-from-palette($primary, 300),
--adf-comment-list-primary-color: mat-color($primary, 100), --adf-comment-list-primary-color: mat.get-color-from-palette($primary, 100),
--adf-comment-list-ripple-color: mat-color($primary, 300), --adf-comment-list-ripple-color: mat.get-color-from-palette($primary, 300),
--adf-search-input-bg-color: mat-color($primary, 50), --adf-search-input-bg-color: mat.get-color-from-palette($primary, 50),
--adf-search-input-highlight-color: mat-color($primary, 900), --adf-search-input-highlight-color: mat.get-color-from-palette($primary, 900),
--adf-tooltip-card-color: mat-color($foreground, text, 0.75), --adf-tooltip-card-color: mat.get-color-from-palette($foreground, text, 0.75),
--adf-card-view-text-color: mat-color($foreground, text, 0.25), --adf-card-view-text-color: mat.get-color-from-palette($foreground, text, 0.25),
--adf-card-view-label-color: mat-color($foreground, text, 0.4), --adf-card-view-label-color: mat.get-color-from-palette($foreground, text, 0.4),
--adf-card-view-datetime-border-color: mat-color($foreground, text, 0.42), --adf-card-view-datetime-border-color: mat.get-color-from-palette($foreground, text, 0.42),
--adf-upload-border-color: mat-color($foreground, text, 0.14), --adf-upload-border-color: mat.get-color-from-palette($foreground, text, 0.14),
--adf-header-background-color: mat-color($primary), --adf-header-background-color: mat.get-color-from-palette($primary),
--adf-header-text-color: mat-color($primary, default-contrast), --adf-header-text-color: mat.get-color-from-palette($primary, default-contrast),
--theme-hover-bg-color: mat-color($background, hover), --theme-hover-bg-color: mat.get-color-from-palette($background, hover),
--theme-text-color: mat-color($foreground, text, 0.54), --theme-text-color: mat.get-color-from-palette($foreground, text, 0.54),
--theme-text-bold-color: mat-color($foreground, text, 0.87), --theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
--theme-background-color: mat-color($background, background), --theme-background-color: mat.get-color-from-palette($background, background),
--theme-text-fg-color: mat-color($foreground, text), --theme-text-fg-color: mat.get-color-from-palette($foreground, text),
--theme-text-fg-shadow-color: mat-color($foreground, text, 0.27), --theme-text-fg-shadow-color: mat.get-color-from-palette($foreground, text, 0.27),
--theme-border-color: mat-color($foreground, text, 0.07), --theme-border-color: mat.get-color-from-palette($foreground, text, 0.07),
--theme-card-bg-color: mat-color($background, card), --theme-card-bg-color: mat.get-color-from-palette($background, card),
--theme-card-bg-bold-color: mat-color($background, card, 0.87), --theme-card-bg-bold-color: mat.get-color-from-palette($background, card, 0.87),
--theme-foreground-text-color: mat-color($foreground, text, 0.72), --theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72),
--theme-secondary-text-color: mat-color($foreground, secondary-text), --theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
--theme-dialog-bg-color: mat-color($background, dialog), --theme-dialog-bg-color: mat.get-color-from-palette($background, dialog),
--theme-bg-hover-color: mat-color($background, hover), --theme-bg-hover-color: mat.get-color-from-palette($background, hover),
--theme-fg-base-color: mat-color($foreground, base), --theme-fg-base-color: mat.get-color-from-palette($foreground, base),
--theme-fg-divider: mat-color($foreground, divider), --theme-fg-divider: mat.get-color-from-palette($foreground, divider),
--theme-disabled-text-color: mat-color($foreground, disabled-text), --theme-disabled-text-color: mat.get-color-from-palette($foreground, disabled-text),
--theme-selected-button-bg-color: mat-color($background, selected-button), --theme-selected-button-bg-color: mat.get-color-from-palette($background, selected-button),
--theme-icon-fg-color: mat-color($foreground, icon), --theme-icon-fg-color: mat.get-color-from-palette($foreground, icon),
--theme-unselected-chip-bg-color: mat-color($background, unselected-chip), --theme-unselected-chip-bg-color: mat.get-color-from-palette($background, unselected-chip),
--theme-status-bar-bg-color: mat-color($background, status-bar), --theme-status-bar-bg-color: mat.get-color-from-palette($background, status-bar),
// fonts // fonts
--theme-font-family: mat-font-family($alfresco-typography), --theme-font-family: mat.font-family($alfresco-typography),
--theme-body-1-font-size: mat-font-size($alfresco-typography, body-1), --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-2-font-size: mat.font-size($alfresco-typography, body-2),
--theme-body-1-line-height: mat-line-height($alfresco-typography, body-1), --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-1-font-size: mat.font-size($alfresco-typography, display-1),
--theme-display-3-font-size: mat-font-size($alfresco-typography, display-3), --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-display-4-font-size: mat.font-size($alfresco-typography, display-4),
--theme-caption-font-size: mat-font-size($alfresco-typography, caption), --theme-caption-font-size: mat.font-size($alfresco-typography, caption),
--theme-title-font-size: mat-font-size($alfresco-typography, title), --theme-title-font-size: mat.font-size($alfresco-typography, title),
--theme-subheading-1-font-size: mat-font-size($alfresco-typography, subheading-1), --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-subheading-2-font-size: mat.font-size($alfresco-typography, subheading-2),
--theme-button-font-size: mat-font-size($alfresco-typography, button), --theme-button-font-size: mat.font-size($alfresco-typography, button),
--theme-headline-font-size: mat-font-size($alfresco-typography, headline), --theme-headline-font-size: mat.font-size($alfresco-typography, headline),
--theme-headline-line-height: mat-line-height($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-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'), --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'), --theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'),
// specific colors // specific colors
--theme-colors-mat-grey: mat-color($mat-grey, A200), --theme-colors-mat-grey: mat.get-color-from-palette(mat.$grey-palette, A200),
--theme-colors-mat-grey-dark: mat-color($mat-grey, A400), --theme-colors-mat-grey-dark: mat.get-color-from-palette(mat.$grey-palette, A400),
--theme-colors-mag-grey-light: mat-color($mat-grey, 50), --theme-colors-mag-grey-light: mat.get-color-from-palette(mat.$grey-palette, 50),
); );
// propagates SCSS variables into the CSS variables scope // 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 '~@angular/flex-layout/mq';
@import './colors'; @import './colors';
@import './mixins'; @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', $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300), $display-4: mat.define-typography-level(112px, 112px, 300),
$display-3: mat-typography-level(56px, 56px, 400), $display-3: mat.define-typography-level(56px, 56px, 400),
$display-2: mat-typography-level(45px, 48px, 400), $display-2: mat.define-typography-level(45px, 48px, 400),
$display-1: mat-typography-level(34px, 40px, 400), $display-1: mat.define-typography-level(34px, 40px, 400),
$headline: mat-typography-level(24px, 32px, 400), $headline: mat.define-typography-level(24px, 32px, 400),
$title: mat-typography-level(20px, 32px, 500), $title: mat.define-typography-level(20px, 32px, 500),
$subheading-2: mat-typography-level(16px, 28px, 400), $subheading-2: mat.define-typography-level(16px, 28px, 400),
$subheading-1: mat-typography-level(15px, 24px, 400), $subheading-1: mat.define-typography-level(15px, 24px, 400),
$body-2: mat-typography-level(14px, 24px, 500), $body-2: mat.define-typography-level(14px, 24px, 500),
$body-1: mat-typography-level(14px, 20px, 400), $body-1: mat.define-typography-level(14px, 20px, 400),
$caption: mat-typography-level(12px, 20px, 400), $caption: mat.define-typography-level(12px, 20px, 400),
$button: mat-typography-level(14px, 14px, 500), $button: mat.define-typography-level(14px, 14px, 500),
// Line-height must be unit-less fraction of the font-size. // 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 '../theming';
@import './all-theme'; @import './all-theme';
@include mat-core($alfresco-typography); @include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-ecm-blue); $primary: mat.define-palette($alfresco-ecm-blue);
$accent: mat-palette($alfresco-accent-orange); $accent: mat.define-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme( $theme: mat.define-light-theme(
( (
color: ( color: (
primary: $primary, 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); @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 '../theming';
@import './all-theme'; @import './all-theme';
@include mat-core($alfresco-typography); @include mat.core($alfresco-typography);
$primary: mat-palette($mat-pink, 700, 500, 900); $primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
$accent: mat-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme( $theme: mat.define-light-theme(
( (
color: ( color: (
primary: $primary, 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); @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 '../theming';
@import './all-theme'; @import './all-theme';
@include mat-core($alfresco-typography); @include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-ecm-cyan); $primary: mat.define-palette($alfresco-ecm-cyan);
$accent: mat-palette($alfresco-accent-orange); $accent: mat.define-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme( $theme: mat.define-light-theme(
( (
color: ( color: (
primary: $primary, 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); @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 '../theming';
@import './all-theme'; @import './all-theme';
@include mat-core($alfresco-typography); @include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-ecm-cyan); $primary: mat.define-palette($alfresco-ecm-cyan);
$accent: mat-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme( $theme: mat.define-light-theme(
( (
color: ( color: (
primary: $primary, 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); @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 '../theming';
@import './all-theme'; @import './all-theme';
@include mat-core($alfresco-typography); @include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-bpm-green); $primary: mat.define-palette($alfresco-bpm-green);
$accent: mat-palette($alfresco-accent-orange); $accent: mat.define-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme( $theme: mat.define-light-theme(
( (
color: ( color: (
primary: $primary, 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); @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 '../theming';
@import './all-theme'; @import './all-theme';
@include mat-core($alfresco-typography); @include mat.core($alfresco-typography);
$primary: mat-palette($alfresco-bpm-green); $primary: mat.define-palette($alfresco-bpm-green);
$accent: mat-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme( $theme: mat.define-light-theme(
( (
color: ( color: (
primary: $primary, 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); @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 */ /* stylelint-disable value-keyword-case */
@use '~@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat-core($alfresco-typography); @include mat.core($alfresco-typography);
$primary: mat-palette($mat-indigo); $primary: mat.define-palette(mat.$indigo-palette);
$accent: mat-palette($mat-pink, A200, A100, A400); $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme( $theme: mat.define-light-theme(
( (
color: ( color: (
primary: $primary, 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); @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 */ /* stylelint-disable value-keyword-case */
@use '~@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat-core($alfresco-typography); @include mat.core($alfresco-typography);
$primary: mat-palette($mat-pink, 700, 500, 900); $primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
$accent: mat-palette($mat-blue-grey, A200, A100, A400); $accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-dark-theme( $theme: mat.define-dark-theme(
( (
color: ( color: (
primary: $primary, 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); @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 */ /* stylelint-disable value-keyword-case */
@use '~@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat-core($alfresco-typography); @include mat.core($alfresco-typography);
$primary: mat-palette($mat-purple, 700, 500, 800); $primary: mat.define-palette(mat.$purple-palette, 700, 500, 800);
$accent: mat-palette($mat-green, A200, A100, A400); $accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-dark-theme( $theme: mat.define-dark-theme(
( (
color: ( color: (
primary: $primary, 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); @include alfresco-material-theme($theme);

4
lib/core/test.ts
View File

@@ -15,8 +15,8 @@
* limitations under the License. * limitations under the License.
*/ */
import 'zone.js/dist/zone'; import 'zone.js';
import 'zone.js/dist/zone-testing'; import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing'; import { getTestBed } from '@angular/core/testing';
import { import {
BrowserDynamicTestingModule, 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 // 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';
import 'zone.js/dist/zone-testing'; import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing'; import { getTestBed } from '@angular/core/testing';
import { import {
BrowserDynamicTestingModule, 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 // 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';
import 'zone.js/dist/zone-testing'; import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing'; import { getTestBed } from '@angular/core/testing';
import { import {
BrowserDynamicTestingModule, 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 // 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';
import 'zone.js/dist/zone-testing'; import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing'; import { getTestBed } from '@angular/core/testing';
import { import {
BrowserDynamicTestingModule, BrowserDynamicTestingModule,

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

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

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

@@ -31,6 +31,10 @@ echo "====== Run testing ====="
echo "====== Run Cli =====" echo "====== Run Cli ====="
./build-cli.sh || exit 1 ./build-cli.sh || exit 1
echo "====== Prebuilt Themes ====="
./build-themes.sh || exit 1
echo "====== Copy schema =====" echo "====== Copy schema ====="
cp ../../lib/core/app-config/schema.json ../../lib/dist/core/app.config.schema.json 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 NODE_OPTIONS="--max-old-space-size=8192" nx build core || exit 1
fi fi
echo "====== Bundle styles ======"
npm run scss-bundle:core || exit 1
echo "====== Copy i18n ======" echo "====== Copy i18n ======"
mkdir -p ./lib/dist/core/bundles/assets/adf-core/i18n mkdir -p ./lib/dist/core/bundles/assets/adf-core/i18n
cp -R ./lib/core/i18n/* ./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 ======" echo "====== Copy assets ======"
cp -R ./lib/core/assets/* ./lib/dist/core/bundles/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/