@alfresco/adf-core 8.4.0-19063861366 → 8.4.0-19066638615

package/lib/datatable/components/datatable/datatable.component.scss

@@ -3,9 +3,13 @@
 @use '../../../styles/mixins' as mixins;
 @use '../../../styles/mat-selectors' as ms;
 
+$data-table-header-font-size: var(--theme-caption-font-size) !default;
+$data-table-header-sort-icon-size: var(--theme-subheading-2-font-size) !default;
+$data-table-row-height: var(--theme-display-3-font-size) !default;
 $data-table-column-spacing: 36px !default;
 $data-table-column-padding: 18px !default;
-$data-table-row-height: var(--mat-sys-display-large-size);
+$data-table-card-padding: var(--theme-headline-line-height) !default;
+$data-table-cell-top: calc($data-table-card-padding / 2);
 $data-table-thumbnail-width: 65px !default;
 $data-table-cell-min-width-1: 65px !default;
 $data-table-cell-min-width-2: 110px !default;
@@ -34,7 +38,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
         &--divider {
             padding: 24px 0;
-            border: 1px solid var(--mat-sys-outline-variant);
+            border: 1px solid var(--adf-theme-foreground-text-color-007);
         }
 
         &:hover {
@@ -53,8 +57,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 #{ms.$cdk-drag-preview} {
     display: flex;
     flex-direction: column;
-    background-color: var(--mat-sys-surface);
-    border: var(--mat-sys-outline-variant);
+    background-color: var(--adf-theme-background-card-color);
+    border: 1px solid var(--adf-theme-foreground-text-color-007);
     box-sizing: border-box;
     overflow-x: auto;
 
@@ -104,20 +108,20 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         &:not(.adf-datatable-data-loading) {
             &:hover,
             &:focus {
-                background-color: var(--mat-sys-surface-container);
+                background-color: var(--adf-theme-background-hover-color);
             }
         }
 
         &:focus {
             outline-offset: -1px;
-            outline: 1px solid var(--mat-sys-primary);
+            outline: 1px solid var(--theme-accent-color-a200);
         }
 
         .adf-cell-value,
         .adf-datatable-cell-header {
             &:focus {
                 outline-offset: -1px;
-                outline: 1px solid var(--mat-sys-primary);
+                outline: 1px solid var(--theme-accent-color-a200);
             }
         }
     }
@@ -129,7 +133,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     .adf-datatable-body {
         display: flex;
         flex-direction: column;
-        background-color: var(--mat-sys-surface);
+        background-color: inherit;
         width: 100%;
         min-width: 100%;
 
@@ -145,7 +149,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             @include mixins.material-animation-default(0.28s);
 
             transition-property: background-color;
-            border-top: 1px solid var(--mat-sys-outline);
+            border-top: 1px solid var(--adf-theme-foreground-text-color-007);
             min-height: $data-table-row-height;
             cursor: pointer;
 
@@ -153,7 +157,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
             &.adf-is-selected,
             &.adf-is-selected:hover {
-                background-color: var(--mat-sys-surface-container);
+                background-color: var(--adf-theme-background-selected-button-color);
             }
 
             &.adf-drag-row {
@@ -161,7 +165,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             }
 
             &:last-child {
-                border-bottom: 1px solid var(--mat-sys-outline);
+                border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
             }
 
             label {
@@ -278,7 +282,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 
     .adf-datatable-cell {
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-text-color);
         min-height: inherit;
     }
 
@@ -373,10 +377,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     .adf-location-cell {
         a {
             text-decoration: none;
-            color: var(--mat-sys-on-surface);
+            color: var(--adf-theme-foreground-text-color);
 
             &:hover {
-                color: var(--mat-sys-primary);
+                color: var(--theme-accent-500);
                 text-decoration: underline;
             }
         }
@@ -395,15 +399,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 
     .adf-is-selected {
-        background: var(--mat-sys-primary-container);
+        background: var(--adf-theme-primary-100);
     }
 
     .adf-datatable-link {
         text-decoration: none;
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-text-color);
 
         &:hover {
-            color: var(--mat-sys-secondary);
+            color: var(--theme-accent-500);
             text-decoration: underline;
         }
     }
@@ -495,13 +499,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     /* stylelint-disable media-feature-range-notation */
 
     /* mobile phone */
-    @media all and (width <=768px) {
+    @media all and (width <= 768px) {
         .adf-desktop-only.adf-ellipsis-cell {
             display: none;
         }
     }
 
-    @media (device-width <=768px) {
+    @media (device-width <= 768px) {
         .adf-desktop-only.adf-ellipsis-cell {
             display: none;
         }
@@ -519,7 +523,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     line-height: 24px;
     letter-spacing: 0;
     min-height: $data-table-row-height;
-    font-size: var(--mat-sys-body-medium-size);
+    font-size: $data-table-header-font-size;
+    color: var(--adf-theme-foreground-text-color);
     box-sizing: border-box;
 
     &_subtitle {
@@ -536,11 +541,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
     .adf-datatable__header--sorted-asc,
     .adf-datatable__header--sorted-desc {
+        color: var(--adf-theme-foreground-text-color);
         padding-right: 0.25rem;
 
         &::after {
             @include mixins.typo-icon;
 
+            font-size: $data-table-header-sort-icon-size;
             content: '\e5d8';
             left: 5px;
             right: 5px;
@@ -572,6 +579,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         }
 
         &--hovered {
+            background-color: var(--adf-theme-background-hover-color);
             border-radius: 6px;
         }
     }
@@ -598,6 +606,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 .adf-drop-header-cell-placeholder {
     display: flex;
     flex: 1;
+    background: var(--adf-theme-background-hover-color);
     border: dotted 1px rgba(0, 0, 0, 0.25);
     min-height: 55px;
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
@@ -624,11 +633,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     flex-direction: row;
     align-items: center;
     box-sizing: unset;
-    border-top: 2px solid var(--mat-sys-primary);
+    background-color: var(--theme-background-color);
+    border-top: 2px solid var(--theme-selected-background-color);
     opacity: 1;
 
     &.adf-datatable-cell-header {
         border-radius: 6px;
+        background-color: var(--theme-background-color);
 
         @include mat.elevation-transition;
         @include mat.elevation(4);
@@ -654,8 +665,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     .adf-datatable-header {
         display: block;
         margin-right: 0;
-        border-top: 1px solid var(--mat-sys-outline-variant);
-        border-bottom: 1px solid var(--mat-sys-outline-variant);
+        border-top: 1px solid var(--adf-theme-foreground-text-color-007);
+        border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
     }
 
     .adf-datatable-body {
@@ -668,15 +679,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
 .adf-upload__dragging {
     & > div {
-        border-top: 1px dashed var(--mat-sys-secondary);
-        border-bottom: 1px dashed var(--mat-sys-secondary);
+        border-top: 1px dashed var(--theme-accent-color-a200);
+        border-bottom: 1px dashed var(--theme-accent-color-a200);
 
         &:first-child {
-            border-left: 1px dashed var(--mat-sys-secondary);
+            border-left: 1px dashed var(--theme-accent-color-a200);
         }
 
         &:last-child {
-            border-right: 1px dashed var(--mat-sys-secondary);
+            border-right: 1px dashed var(--theme-accent-color-a200);
         }
     }
 }
@@ -691,6 +702,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     .adf-datatable-body[role='rowgroup'] {
         .adf-datatable-row {
             height: 100%;
+            background-color: var(--adf-theme-background-card-color);
             border: none;
 
             &:hover,
@@ -704,7 +716,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
 .adf-datatable--empty--header-visible {
     .adf-datatable-header {
-        border: 1px solid var(--mat-sys-outline-variant);
+        border: 1px solid var(--adf-theme-foreground-text-color-007);
     }
 
     .adf-datatable-body {
@@ -715,6 +727,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
         .adf-datatable-row {
             height: 100%;
+            background-color: var(--adf-theme-background-card-color);
             border: none;
 
             &:hover,
@@ -726,7 +739,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 }
 
-@media screen and (width <=380px) {
+@media screen and (width <= 380px) {
     .adf-datatable-header {
         max-height: 50%;
     }

package/lib/dialogs/dialog/dialog.component.scss

@@ -165,7 +165,7 @@ $dialog-padding: 24px;
             left: -$dialog-padding;
             display: block;
             height: 0;
-            border-bottom: 1px solid var(--mat-sys-outline-variant);
+            border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
             width: calc(100% + $dialog-padding * 2);
         }
     }
@@ -284,5 +284,5 @@ $dialog-padding: 24px;
 }
 
 .adf-additional-actions {
-    color: var(--mat-sys-primary);
+    color: var(--theme-primary-color);
 }

package/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.scss

@@ -1,5 +1,3 @@
-@use '@angular/material' as mat;
-
 .adf-unsaved-changes-dialog {
     .adf-unsaved-changes-dialog {
         &-header {
@@ -24,9 +22,14 @@
         &-content {
             padding: 0 8px 0 0;
             overflow: unset;
+            color: var(--adf-secondary-modal-text-color);
 
             &-checkbox {
                 margin-top: 20px;
+
+                label {
+                    color: var(--adf-secondary-modal-text-color);
+                }
             }
         }
 
@@ -38,19 +41,13 @@
             align-items: flex-end;
 
             &-cancel-button {
+                background-color: var(--adf-secondary-button-background);
                 margin-right: 4px;
             }
 
             &-discard-changes-button {
-                color: var(--mat-sys-on-error);
-                background-color: var(--mat-sys-error);
-
-                @include mat.button-overrides(
-                    (
-                        filled-label-text-color: var(--mat-sys-on-error),
-                        filled-container-color: var(--mat-sys-error)
-                    )
-                );
+                color: white;
+                background-color: var(--adf-error-color);
             }
 
             &-cancel-button,

package/lib/directives/tooltip-card/tooltip-card.component.scss

@@ -7,18 +7,20 @@
 div.adf-tooltip-card {
     @include mat.elevation(8);
 
-    border: 1px solid var(--mat-sys-primary);
+    background-color: var(--adf-theme-background-card-color);
+    border: 1px solid var(--theme-primary-color);
     padding: 12px;
     border-radius: 6px;
 
     p,
     div {
-        font-size: var(--mat-sys-body-small-size);
+        font-size: var(--theme-caption-font-size);
+        color: var(--adf-theme-foreground-text-color-075);
         margin: 0;
     }
 
     hr {
-        border: 1px solid var(--mat-sys-primary);
+        border: 1px solid var(--theme-primary-color);
         margin: 6px 0;
     }
 
@@ -26,3 +28,7 @@ div.adf-tooltip-card {
         border-radius: 6px;
     }
 }
+
+::ng-deep .cdk-overlay-connected-position-bounding-box {
+    margin-top: 10px;
+}

package/lib/dynamic-chip-list/dynamic-chip-list.component.scss

@@ -62,6 +62,10 @@
 
         #{ms.$mat-evolution-chip-action} {
             padding: 2px 12px;
+
+            #{ms.$mat-evolution-chip-text-label} {
+                color: var(--adf-theme-foreground-text-color-054);
+            }
         }
     }
 }

package/lib/form/components/form-renderer.component.d.ts

@@ -1,18 +1,19 @@
 import { OnDestroy, OnInit } from '@angular/core';
-import { FormRulesManager } from '../models/form-rules.model';
 import { FormService } from '../services/form.service';
 import { FormFieldModelRenderMiddleware } from './middlewares/middleware';
 import { ContainerModel, FormFieldModel, FormModel, TabModel } from './widgets';
 import * as i0 from "@angular/core";
 export declare class FormRendererComponent<T> implements OnInit, OnDestroy {
-    formService: FormService;
-    private formRulesManager;
     private middlewareServices?;
+    readonly formService: FormService;
+    private readonly formRulesManager;
+    private readonly dialog;
+    private cdr;
     formDefinition: FormModel;
     readOnly: boolean;
     debugMode: boolean;
     fields: FormFieldModel[];
-    constructor(formService: FormService, formRulesManager: FormRulesManager<T>, middlewareServices?: FormFieldModelRenderMiddleware[]);
+    constructor(middlewareServices?: FormFieldModelRenderMiddleware[]);
     ngOnInit(): void;
     ngOnDestroy(): void;
     hasTabs(): boolean;
@@ -26,6 +27,7 @@ export declare class FormRendererComponent<T> implements OnInit, OnDestroy {
      */
     getContainerFields(content: ContainerModel): FormFieldModel[];
     private getMaxColumnFieldSize;
+    displayDialogToRemoveRow(field: FormFieldModel, rowIndex: number): void;
     /**
      * Calculate the column width based on the numberOfColumns and current field's colspan property
      *
@@ -34,6 +36,6 @@ export declare class FormRendererComponent<T> implements OnInit, OnDestroy {
      */
     getColumnWidth(container: ContainerModel): string;
     private runMiddlewareServices;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FormRendererComponent<any>, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormRendererComponent<any>, [{ optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FormRendererComponent<any>, "adf-form-renderer", never, { "formDefinition": { "alias": "formDefinition"; "required": true; }; "readOnly": { "alias": "readOnly"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/form/components/form-renderer.component.scss

@@ -97,6 +97,30 @@
             padding-left: 3px;
             padding-right: 3px;
         }
+
+        &-remove-row-button {
+            margin-top: 20px;
+
+            #{ms.$mat-icon} {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 20px;
+            }
+        }
+
+        &-container {
+            padding: 0 10px;
+
+            &-label {
+                margin: 5px 0 5px -10px;
+            }
+
+            &-multiple {
+                border-bottom: 1px solid rgba(0, 0, 0, 0.54);
+                margin-bottom: 25px;
+            }
+        }
     }
 
     @include flex.layout-bp(lt-md) {
@@ -123,6 +147,25 @@
         top: 1.8em;
     }
 
+    #{ms.$mat-focused} {
+        width: 100%;
+
+        #{ms.$mat-text-field-focused} {
+            label {
+                color: var(--theme-primary-color);
+            }
+        }
+
+        label {
+            transition: transform 150ms linear;
+            background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
+        }
+
+        #{ms.$mat-form-field-prefix} {
+            color: var(--theme-primary-color);
+        }
+    }
+
     #{ms.$mat-grid-tile} {
         overflow: visible;
         width: 80%;
@@ -159,6 +202,8 @@
         }
 
         & #{mat-tab-label-text} {
+            font-size: var(--theme-subheading-2-font-size);
+            line-height: var(--theme-headline-line-height);
             letter-spacing: -0.4px;
             text-align: left;
             color: rgba(0, 0, 0, 0.54);
@@ -177,7 +222,7 @@
     }
 
     &-form-title {
-        font-size: var(--mat-sys-title-medium-size);
+        font-size: var(--theme-title-font-size);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -193,10 +238,10 @@
         position: absolute;
         right: 50px;
         top: 39px;
-        color: var(--mat-sys-secondary);
+        color: var(--theme-accent-color);
 
         & .adf-invalid-color {
-            color: var(--mat-sys-error);
+            color: var(--theme-warn-color);
         }
     }
 
@@ -259,4 +304,10 @@
 
 form-field {
     width: 100%;
+
+    #{ms.$mat-input-element} {
+        font-size: var(--theme-body-2-font-size);
+        padding-top: 8px;
+        line-height: normal;
+    }
 }

package/lib/form/components/inplace-form-input/inplace-form-input.component.scss

@@ -4,6 +4,16 @@
 $adf-inplace-input-padding: 7px;
 
 .adf-inplace-input-container {
+    &-error {
+        .adf-inplace-input {
+            border: 1px solid var(--theme-warn-color);
+        }
+    }
+
+    #{ms.$mat-line-ripple} {
+        display: none;
+    }
+
     #{ms.$mat-form-text-field-infix} {
         display: flex;
         border-top: 0;
@@ -21,5 +31,14 @@ $adf-inplace-input-padding: 7px;
         padding: $adf-inplace-input-padding;
         border: 1px solid transparent;
         border-radius: 4px;
+
+        &:focus {
+            border: 1px solid var(--theme-primary-color);
+        }
+
+        &:hover:not(:focus) {
+            border: 1px solid var(--adf-theme-background-hover-color);
+            background-color: var(--adf-theme-background-hover-color);
+        }
     }
 }

package/lib/form/components/widgets/amount/amount.widget.scss

@@ -23,5 +23,11 @@
         .adf-input {
             margin-top: 3px;
         }
+
+        &:not(#{ms.$mat-focused}):not(#{ms.$mat-form-field-invalid}) {
+            .adf-amount-widget__prefix-spacing {
+                color: var(--adf-theme-foreground-secondary-text-color);
+            }
+        }
     }
 }

package/lib/form/components/widgets/core/container-column.model.d.ts

@@ -16,9 +16,11 @@
  */
 import { FormFieldModel } from './form-field.model';
 export declare class ContainerColumnModel {
+    id: string;
     size: number;
     fields: FormFieldModel[];
     colspan: number;
     rowspan: number;
+    constructor();
     hasFields(): boolean;
 }

package/lib/form/components/widgets/core/container-row.model.d.ts

@@ -0,0 +1,26 @@
+/*!
+ * @license
+ * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ContainerColumnModel } from './container-column.model';
+export declare class ContainerRowModel {
+    id: string;
+    isInitial: boolean;
+    columns: ContainerColumnModel[];
+    size: number;
+    colspan: number;
+    rowspan: number;
+    constructor(isInitial?: boolean);
+}

package/lib/form/components/widgets/core/form-field-types.d.ts

@@ -18,6 +18,7 @@ import { MaybeReactiveFormWidget, ReactiveFormWidget } from '../reactive-widget.
 export declare class FormFieldTypes {
     static CONTAINER: string;
     static GROUP: string;
+    static REPEATABLE_SECTION: string;
     static SECTION: string;
     static DYNAMIC_TABLE: string;
     static TEXT: string;
@@ -59,4 +60,5 @@ export declare class FormFieldTypes {
     static isConstantValueType(type: string): boolean;
     static isContainerType(type: string): boolean;
     static isSectionType(type: string): boolean;
+    static isRepeatableSectionType(type: string): boolean;
 }

package/lib/form/components/widgets/core/form-field.model.d.ts

@@ -23,9 +23,17 @@ import { FormWidgetModel } from './form-widget.model';
 import { FormFieldRule } from './form-field-rule';
 import { VariableConfig } from './form-field-variable-options';
 import { DataColumn } from '../../../../datatable/data/data-column.model';
+import { ContainerRowModel } from './container-row.model';
 export type FieldOptionType = 'rest' | 'manual' | 'variable';
 export type FieldSelectionType = 'single' | 'multiple';
 export type FieldAlignmentType = 'vertical' | 'horizontal';
+interface RepeatableSectionModel {
+    id: string;
+    uid: string;
+    fields: FormFieldModel[];
+    rowIndex: number;
+    value?: any;
+}
 export declare class FormFieldModel extends FormWidgetModel {
     private _value;
     private _readOnly;
@@ -81,9 +89,11 @@ export declare class FormFieldModel extends FormWidgetModel {
     schemaDefinition: DataColumn[];
     externalProperty?: string;
     style?: string;
+    parent?: RepeatableSectionModel;
     numberOfColumns: number;
     fields: FormFieldModel[];
     columns: ContainerColumnModel[];
+    rows: ContainerRowModel[];
     emptyOption: FormFieldOption;
     validationSummary: ErrorMessageModel;
     get value(): any;
@@ -98,7 +108,7 @@ export declare class FormFieldModel extends FormWidgetModel {
     markAsValid(): void;
     validate(): boolean;
     private isFieldValidatable;
-    constructor(form: any, json?: any);
+    constructor(form: any, json?: any, parent?: RepeatableSectionModel);
     private getEmptyOption;
     private setValueForReadonlyType;
     private getDefaultDateFormat;
@@ -106,9 +116,21 @@ export declare class FormFieldModel extends FormWidgetModel {
     private getFieldNameWithLabel;
     private getProcessVariableValue;
     private containerFactory;
+    private repeatableSectionFactory;
+    private getNumberOfRows;
+    private createRow;
+    private createColumns;
+    private getUniqueId;
+    private updateChildrenFieldsRowIndex;
+    private createInitialValue;
     private updateContainerColspan;
-    parseValue(json: any): any;
+    addRow(fields: any, form: any): void;
+    private shouldAddRow;
+    removeRow(index: number): void;
+    private shouldRemoveRow;
+    parseValue(json: any, initialValue?: any): any;
     updateForm(): void;
+    private updateRepeatableSectionValue;
     /**
      * Check if the field type is invalid, requires a type to be a `container`
      *
@@ -129,3 +151,4 @@ export declare class FormFieldModel extends FormWidgetModel {
     private isDateTimeField;
     private isCheckboxField;
 }
+export {};

package/lib/form/components/widgets/date-time/date-time.widget.scss

@@ -28,5 +28,5 @@
 }
 
 #{ms.$mat-datetimepicker-toggle} {
-    color: var(--mat-sys-on-surface);
+    color: var(--adf-theme-foreground-icon-color);
 }