diff --git a/projects/ng-core-tester/src/app/app.component.ts b/projects/ng-core-tester/src/app/app.component.ts
index fc82771a..4a53c7b6 100644
--- a/projects/ng-core-tester/src/app/app.component.ts
+++ b/projects/ng-core-tester/src/app/app.component.ts
@@ -14,7 +14,7 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see
.
*/
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, inject } from '@angular/core';
import { CoreConfigService, RecordEvent, RecordService, TitleMetaService } from '@rero/ng-core';
import { MenuItem, MessageService } from 'primeng/api';
diff --git a/projects/ng-core-tester/src/app/record/editor/schema.json b/projects/ng-core-tester/src/app/record/editor/schema.json
index b8c9aeae..e84e3603 100644
--- a/projects/ng-core-tester/src/app/record/editor/schema.json
+++ b/projects/ng-core-tester/src/app/record/editor/schema.json
@@ -262,7 +262,7 @@
"widget": {
"formlyConfig": {
"props": {
- "cssClass": "border border-info rounded p-2"
+ "cssClass": "p-2"
}
}
}
diff --git a/projects/ng-core-tester/src/styles.scss b/projects/ng-core-tester/src/styles.scss
index 2a23fd1a..f169d9cd 100644
--- a/projects/ng-core-tester/src/styles.scss
+++ b/projects/ng-core-tester/src/styles.scss
@@ -14,21 +14,12 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see
.
*/
-$fa-font-path: "~font-awesome/fonts";
@import "font-awesome/scss/font-awesome.scss";
-
-@import "node_modules/primeng/resources/primeng.min.css";
-@import "node_modules/primeflex/primeflex";
-@import "node_modules/primeicons/primeicons.css";
-@import "node_modules/primeng/resources/themes/aura-light-blue/theme.css";
-@import "../../rero/ng-core/assets/scss/ng-core.scss";
+@import "primeng/resources/primeng";
+@import "primeicons/primeicons.css";
+@import "primeng/resources/themes/aura-light-blue/theme.css";
@import "easymde/dist/easymde.min";
-
-.p-menubar {
- @extend .mb-0, .border-none, .bg-white;
-}
-
-.container {
- @extend .p-4, .border-1, .surface-border, .border-round-md;
-}
+@import "node_modules/ngx-spinner/animations/ball-zig-zag.css";
+@import "primeflex/primeflex";
+@import "projects/rero/ng-core/assets/scss/ng-core.scss";
diff --git a/projects/rero/ng-core/assets/scss/_editor.scss b/projects/rero/ng-core/assets/scss/_editor.scss
index 27383725..e1519595 100644
--- a/projects/rero/ng-core/assets/scss/_editor.scss
+++ b/projects/rero/ng-core/assets/scss/_editor.scss
@@ -1,8 +1,27 @@
-ng-core-editor-formly-field-textarea,
-ng-core-formly-field-primeng-input,
-ng-core-tree-select,
-ng-core-multi-select,
-ng-core-primeng-select,
-ng-core-date-picker {
- @extend .w-full;
+/*
+ * RERO angular core
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see
.
+ */
+
+@layer ng-core {
+ ng-core-editor-formly-field-textarea,
+ ng-core-formly-field-primeng-input,
+ ng-core-tree-select,
+ ng-core-multi-select,
+ ng-core-primeng-select,
+ ng-core-date-picker {
+ @extend .w-full;
+ }
}
diff --git a/projects/rero/ng-core/assets/scss/_theme.scss b/projects/rero/ng-core/assets/scss/_theme.scss
index f7e0503a..e8ba1ca3 100644
--- a/projects/rero/ng-core/assets/scss/_theme.scss
+++ b/projects/rero/ng-core/assets/scss/_theme.scss
@@ -14,34 +14,51 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see
.
*/
-@import 'primeflex/primeflex';
-:root {
- font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
- --font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-html,
-body {
- @extend .line-height-1, .text-sm;
-}
+@layer ng-core {
+ :root {
+ font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial,
+ sans-serif;
+ --font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial,
+ sans-serif;
-a {
- @extend .text-blue-500, .no-underline;
-}
+ @extend .text-sm;
-a:hover {
- @extend .text-blue-600, .underline;
-}
+ a {
+ @extend .text-blue-500, .no-underline;
+ }
-.p-submenu-list {
- z-index: 1000;
-}
+ a:hover {
+ @extend .text-blue-600, .underline;
+ }
-.p-menuitem {
- a {
- @extend .text-color;
- }
- a:hover {
- @extend .no-underline;
+ .p-submenu-list {
+ z-index: 1000;
+ }
+
+ .p-menuitem {
+ a {
+ @extend .text-color;
+ }
+ a:hover {
+ @extend .no-underline;
+ }
+ }
+
+ dl.metadata {
+ @extend .grid, .my-0, .w-full;
+ dt {
+ @extend .font-bold, .col-12, .py-0;
+ @include styleclass('md:col-4');
+ }
+ dd {
+ @extend .col-12, .py-0;
+ @include styleclass('md:col-8');
+ margin-inline-start: 0;
+ }
+ }
+ .p-menubar {
+ @extend .mb-0, .border-none, .bg-white;
+ }
}
}
diff --git a/projects/rero/ng-core/assets/scss/_typography.scss b/projects/rero/ng-core/assets/scss/_typography.scss
index 94b524a6..619da83b 100644
--- a/projects/rero/ng-core/assets/scss/_typography.scss
+++ b/projects/rero/ng-core/assets/scss/_typography.scss
@@ -14,69 +14,76 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see
.
*/
-@import "primeflex/primeflex";
+@layer ng-core {
+ :root {
+ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+ @extend .mt-0, .mb-2, .font-medium, .line-height-2;
+ }
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
- @extend .mt-0, .mb-2, .font-medium, .line-height-2;
-}
+ h1, .h1 {
+ @extend .text-5xl;
+ }
-h1, .h1 {
- @extend .text-5xl;
-}
+ h2, .h2 {
+ @extend .text-4xl;
+ }
-h2, .h2 {
- @extend .text-4xl;
-}
+ h3, .h3 {
+ @extend .text-3xl;
+ }
-h3, .h3 {
- @extend .text-3xl;
-}
+ h4, .h4 {
+ @extend .text-2xl;
+ }
-h4, .h4 {
- @extend .text-2xl;
-}
+ h5, .h5 {
+ @extend .text-xl;
+ }
-h5, .h5 {
- @extend .text-xl;
-}
+ h6, .h6 {
+ @extend .text-lg;
+ }
-h6, .h6 {
- @extend .text-lg;
-}
+ // from aura-light-blue message theme
+ .text-info {
+ color: #2563eb;
+ }
-// from aura-light-blue message theme
-.text-info {
- color: #2563eb;
-}
+ .text-success {
+ color: #16a34a;
+ }
-.text-success {
- color: #16a34a;
-}
+ .text-warning {
+ color: #ca8a04;
+ }
-.text-warning {
- color: #ca8a04;
-}
+ .text-error {
+ color: #dc2626;
+ }
-.text-error {
- color: #dc2626;
-}
+ .border-info {
+ border-color: #2563eb;
+ }
-.text-link-color {
- @extend .text-blue-500;
-}
+ .border-success {
+ border-color: #16a34a;
+ }
-.text-link-color-hover {
- @extend .text-blue-600;
-}
+ .border-warning {
+ border-color: #ca8a04;
+ }
-.text-link {
- @extend .text-link-color;
- &:hover {
- @extend .text-link-color-hover;
- @extend .underline;
- }
-}
+ .border-error {
+ border-color: #dc2626;
+ }
+ .text-link {
+ @include styleclass('text-blue-500 hover:text-blue-600 hover:underline cursor-pointer');
+ }
+ .text-link-secondary {
+ @include styleclass('text-color-secondary hover:text-blue-600 cursor-pointer');
+ }
+ }
+}
diff --git a/projects/rero/ng-core/assets/scss/ng-core.scss b/projects/rero/ng-core/assets/scss/ng-core.scss
index bfe01d10..2181f68a 100644
--- a/projects/rero/ng-core/assets/scss/ng-core.scss
+++ b/projects/rero/ng-core/assets/scss/ng-core.scss
@@ -18,3 +18,6 @@
@import "./_editor";
@import "./_theme";
@import "./_typography";
+
+@import "../../src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss";
+@import "../../src/lib/record/editor/editor.component.scss";
diff --git a/projects/rero/ng-core/ng-package.json b/projects/rero/ng-core/ng-package.json
index af14cf8b..c03b1172 100644
--- a/projects/rero/ng-core/ng-package.json
+++ b/projects/rero/ng-core/ng-package.json
@@ -1,7 +1,7 @@
{
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../../dist/rero/ng-core",
- "assets": ["./assets"],
+ "assets": ["./assets", "./src/**/*.scss"],
"lib": {
"entryFile": "src/public-api.ts"
}
diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.html b/projects/rero/ng-core/src/lib/record/editor/editor.component.html
index c79bccc0..529c4de6 100644
--- a/projects/rero/ng-core/src/lib/record/editor/editor.component.html
+++ b/projects/rero/ng-core/src/lib/record/editor/editor.component.html
@@ -15,9 +15,9 @@
along with this program. If not, see
.
-->