diff --git a/core-web/libs/dotcms-models/src/lib/dot-content-types.model.ts b/core-web/libs/dotcms-models/src/lib/dot-content-types.model.ts
index a56a1895e959..6534e53ba2a7 100644
--- a/core-web/libs/dotcms-models/src/lib/dot-content-types.model.ts
+++ b/core-web/libs/dotcms-models/src/lib/dot-content-types.model.ts
@@ -61,6 +61,7 @@ export interface DotCMSContentTypeField {
variable: string;
forceIncludeInApi?: boolean;
fieldContentTypeProperties?: string[];
+ skipRelationshipCreation?: boolean;
metadata?: { [key: string]: string | number | boolean };
}
diff --git a/core-web/libs/dotcms-scss/shared/_colors.scss b/core-web/libs/dotcms-scss/shared/_colors.scss
index 441cea8acc30..a97692781437 100644
--- a/core-web/libs/dotcms-scss/shared/_colors.scss
+++ b/core-web/libs/dotcms-scss/shared/_colors.scss
@@ -226,7 +226,17 @@ $success: $color-accessible-text-green;
--color-palette-primary-800: hsl(var(--color-primary-h) var(--color-primary-s) 27%);
--color-palette-primary-900: hsl(var(--color-primary-h) var(--color-primary-s) 21%);
- --color-palette-primary-op-10: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.1);
+ --primary-100: var(--color-palette-primary-100);
+ --primary-200: var(--color-palette-primary-200);
+ --primary-300: var(--color-palette-primary-300);
+ --primary-400: var(--color-palette-primary-400);
+ --primary-500: var(--color-palette-primary-500);
+ --primary-600: var(--color-palette-primary-600);
+ --primary-700: var(--color-palette-primary-700);
+ --primary-800: var(--color-palette-primary-800);
+ --primary-900: var(--color-palette-primary-900);
+
+ --color-palette-primary-op-10: var(--color-palette-primary-op-10);
--color-palette-primary-op-20: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.2);
--color-palette-primary-op-30: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.3);
--color-palette-primary-op-40: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.4);
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
index 84e0eeb93eb8..115d82c9bd5a 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
@@ -142,6 +142,14 @@
[field]="field" />
}
}
+ @case (fieldTypes.RELATIONSHIP) {
+ @defer (on immediate) {
+
+ }
+ }
}
@if (field.hint) {
{{ field.hint }}
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts
index 9b8ab39beb1d..874b2ba95039 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts
@@ -34,6 +34,7 @@ import { DotEditContentJsonFieldComponent } from '../../fields/dot-edit-content-
import { DotEditContentKeyValueComponent } from '../../fields/dot-edit-content-key-value/dot-edit-content-key-value.component';
import { DotEditContentMultiSelectFieldComponent } from '../../fields/dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component';
import { DotEditContentRadioFieldComponent } from '../../fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component';
+import { DotEditContentRelationshipFieldComponent } from '../../fields/dot-edit-content-relationship-field/dot-edit-content-relationship-field.component';
import { DotEditContentSelectFieldComponent } from '../../fields/dot-edit-content-select-field/dot-edit-content-select-field.component';
import { DotEditContentTagFieldComponent } from '../../fields/dot-edit-content-tag-field/dot-edit-content-tag-field.component';
import { DotEditContentTextAreaComponent } from '../../fields/dot-edit-content-text-area/dot-edit-content-text-area.component';
@@ -73,6 +74,9 @@ declare module '@tiptap/core' {
const FIELD_TYPES_COMPONENTS: Record | DotEditFieldTestBed> = {
// We had to use unknown because components have different types.
[FIELD_TYPES.TEXT]: DotEditContentTextFieldComponent,
+ [FIELD_TYPES.RELATIONSHIP]: {
+ component: DotEditContentRelationshipFieldComponent
+ },
[FIELD_TYPES.FILE]: {
component: DotEditContentFileFieldComponent,
providers: [
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts
index 511ad1382b37..86ffe887a20a 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts
@@ -3,24 +3,25 @@ import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
import { BlockEditorModule } from '@dotcms/block-editor';
import { DotCMSContentlet, DotCMSContentTypeField } from '@dotcms/dotcms-models';
+import { DotEditContentBinaryFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component';
+import { DotEditContentCalendarFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component';
+import { DotEditContentCategoryFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-category-field/dot-edit-content-category-field.component';
+import { DotEditContentCheckboxFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component';
+import { DotEditContentCustomFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component';
+import { DotEditContentFileFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-file-field/dot-edit-content-file-field.component';
+import { DotEditContentHostFolderFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component';
+import { DotEditContentJsonFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-json-field/dot-edit-content-json-field.component';
+import { DotEditContentKeyValueComponent } from '@dotcms/edit-content/fields/dot-edit-content-key-value/dot-edit-content-key-value.component';
+import { DotEditContentMultiSelectFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component';
+import { DotEditContentRadioFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component';
+import { DotEditContentRelationshipFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-relationship-field/dot-edit-content-relationship-field.component';
+import { DotEditContentSelectFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-select-field/dot-edit-content-select-field.component';
+import { DotEditContentTagFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-tag-field/dot-edit-content-tag-field.component';
+import { DotEditContentTextAreaComponent } from '@dotcms/edit-content/fields/dot-edit-content-text-area/dot-edit-content-text-area.component';
+import { DotEditContentTextFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-text-field/dot-edit-content-text-field.component';
+import { DotEditContentWYSIWYGFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-wysiwyg-field/dot-edit-content-wysiwyg-field.component';
import { DotFieldRequiredDirective } from '@dotcms/ui';
-import { DotEditContentBinaryFieldComponent } from '../../fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component';
-import { DotEditContentCalendarFieldComponent } from '../../fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component';
-import { DotEditContentCategoryFieldComponent } from '../../fields/dot-edit-content-category-field/dot-edit-content-category-field.component';
-import { DotEditContentCheckboxFieldComponent } from '../../fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component';
-import { DotEditContentCustomFieldComponent } from '../../fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component';
-import { DotEditContentFileFieldComponent } from '../../fields/dot-edit-content-file-field/dot-edit-content-file-field.component';
-import { DotEditContentHostFolderFieldComponent } from '../../fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component';
-import { DotEditContentJsonFieldComponent } from '../../fields/dot-edit-content-json-field/dot-edit-content-json-field.component';
-import { DotEditContentKeyValueComponent } from '../../fields/dot-edit-content-key-value/dot-edit-content-key-value.component';
-import { DotEditContentMultiSelectFieldComponent } from '../../fields/dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component';
-import { DotEditContentRadioFieldComponent } from '../../fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component';
-import { DotEditContentSelectFieldComponent } from '../../fields/dot-edit-content-select-field/dot-edit-content-select-field.component';
-import { DotEditContentTagFieldComponent } from '../../fields/dot-edit-content-tag-field/dot-edit-content-tag-field.component';
-import { DotEditContentTextAreaComponent } from '../../fields/dot-edit-content-text-area/dot-edit-content-text-area.component';
-import { DotEditContentTextFieldComponent } from '../../fields/dot-edit-content-text-field/dot-edit-content-text-field.component';
-import { DotEditContentWYSIWYGFieldComponent } from '../../fields/dot-edit-content-wysiwyg-field/dot-edit-content-wysiwyg-field.component';
import { CALENDAR_FIELD_TYPES } from '../../models/dot-edit-content-field.constant';
import { FIELD_TYPES } from '../../models/dot-edit-content-field.enum';
@@ -54,10 +55,10 @@ import { FIELD_TYPES } from '../../models/dot-edit-content-field.enum';
DotEditContentCategoryFieldComponent,
DotFieldRequiredDirective,
BlockEditorModule,
- DotEditContentBinaryFieldComponent,
DotEditContentKeyValueComponent,
DotEditContentWYSIWYGFieldComponent,
- DotEditContentFileFieldComponent
+ DotEditContentFileFieldComponent,
+ DotEditContentRelationshipFieldComponent
]
})
export class DotEditContentFieldComponent {
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/utils.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/utils.ts
index 8a9d760c60af..d879cde01f78 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/utils.ts
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/utils.ts
@@ -62,5 +62,6 @@ export const resolutionValue: Record = {
}
return field.defaultValue ?? [];
- }
+ },
+ [FIELD_TYPES.RELATIONSHIP]: defaultResolutionFn
};
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/pagination/pagination.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/pagination/pagination.component.html
new file mode 100644
index 000000000000..1be37dd3eabb
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/pagination/pagination.component.html
@@ -0,0 +1,26 @@
+@let currentPage = $currentPage();
+@let totalPages = $totalPages();
+
+
+
+ {{ currentPage }} of {{ totalPages }}
+
+
+
+
+
+
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/pagination/pagination.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/pagination/pagination.component.ts
new file mode 100644
index 000000000000..bc683e77c09a
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/pagination/pagination.component.ts
@@ -0,0 +1,33 @@
+import { Component, input, output } from '@angular/core';
+
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+ selector: 'dot-pagination',
+ standalone: true,
+ imports: [ButtonModule],
+ templateUrl: './pagination.component.html'
+})
+export class PaginationComponent {
+ /**
+ * A signal that holds the total number of pages.
+ * It is used to display the total number of pages in the pagination component.
+ */
+ $totalPages = input.required({ alias: 'totalPages' });
+
+ /**
+ * A signal that holds the current page number.
+ * It is used to display the current page number in the pagination component.
+ */
+ $currentPage = input.required({ alias: 'currentPage' });
+
+ /**
+ * An output signal that emits when the previous page button is clicked.
+ */
+ previousPage = output();
+
+ /**
+ * An output signal that emits when the next page button is clicked.
+ */
+ nextPage = output();
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/search/search.compoment.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/search/search.compoment.html
new file mode 100644
index 000000000000..afb2448dd39a
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/search/search.compoment.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/search/search.compoment.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/search/search.compoment.ts
new file mode 100644
index 000000000000..6a64d8187821
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/search/search.compoment.ts
@@ -0,0 +1,44 @@
+import { Component, inject, output } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+
+import { ButtonModule } from 'primeng/button';
+import { DropdownModule } from 'primeng/dropdown';
+import { InputGroupModule } from 'primeng/inputgroup';
+import { InputTextModule } from 'primeng/inputtext';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+
+import { DotMessagePipe } from '@dotcms/ui';
+
+@Component({
+ selector: 'dot-search',
+ standalone: true,
+ imports: [
+ InputTextModule,
+ ButtonModule,
+ InputGroupModule,
+ OverlayPanelModule,
+ DotMessagePipe,
+ DropdownModule,
+ ReactiveFormsModule
+ ],
+ templateUrl: './search.compoment.html'
+})
+export class SearchComponent {
+ /**
+ * An output signal that emits when the search input is changed.
+ */
+ onSearch = output();
+
+ /**
+ * Injects FormBuilder to create form control groups.
+ */
+ readonly #formBuilder = inject(FormBuilder);
+
+ /**
+ * Initializes the form group with default values for language and site.
+ */
+ readonly form = this.#formBuilder.group({
+ language: [''],
+ site: ['']
+ });
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html
new file mode 100644
index 000000000000..0d942a65b77d
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html
@@ -0,0 +1,118 @@
+@let data = store.data();
+@let pagination = store.pagination();
+
+
+
+
+