@net7/components 4.3.2 → 4.4.0

package/fesm2022/net7-components.mjs

@@ -2325,6 +2325,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+//---------------------------
+// NETWORK.ts
+//---------------------------
+class NetworkComponent {
+    constructor() {
+        /** Knows if the component is loaded */
+        this._loaded = false;
+        /** Dynamically load required node modules */
+        this.loadModules = async () => ({
+            ...(await import('vis-network/peer')),
+            ...(await import('vis-data/peer')),
+        });
+    }
+    ngAfterContentChecked() {
+        if (!this.data || this._loaded)
+            return;
+        this._loaded = true;
+        setTimeout(() => {
+            this.loadModules().then((modules) => {
+                const { Network, DataSet } = modules;
+                const nodes = new DataSet(this.data.nodes);
+                const edges = new DataSet(this.data.edges);
+                const network = new Network(document.getElementById(this.data.containerID), // container
+                { nodes, edges }, this.data.libOptions);
+                network.on('click', (params) => {
+                    this.onClick(params);
+                });
+                // Set the network instance
+                if (this.data._setInstance)
+                    this.data._setInstance(network);
+            });
+        });
+    }
+    onClick(payload) {
+        let url;
+        if (payload.nodes && payload.nodes.length > 0) {
+            const nodeId = payload.nodes[0];
+            const node = this.data.nodes.find(n => n.id === nodeId);
+            // console.log('Node trovato:', node);
+            if (node && node.payload) {
+                url = node.payload;
+                console.log('url:', url);
+            }
+        }
+        if (!this.emit)
+            return;
+        this.emit('click', payload);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NetworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NetworkComponent, selector: "n7-network", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div [id]=\"data.containerID\" style=\"width: 100%; height: 100vh;\"></div>" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NetworkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-network', template: "<div [id]=\"data.containerID\" style=\"width: 100%; height: 100vh;\"></div>" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 const COMPONENTS = [
     AdvancedAutocompleteComponent,
     AlertComponent,
@@ -2374,6 +2434,7 @@ const COMPONENTS = [
     TreeComponent,
     WizardComponent,
     ProgressLineComponent,
+    NetworkComponent,
 ];
 class DvComponentsLibModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DvComponentsLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -2424,7 +2485,8 @@ class DvComponentsLibModule {
             TooltipContentComponent,
             TreeComponent,
             WizardComponent,
-            ProgressLineComponent], imports: [CommonModule, RouterModule], exports: [AdvancedAutocompleteComponent,
+            ProgressLineComponent,
+            NetworkComponent], imports: [CommonModule, RouterModule], exports: [AdvancedAutocompleteComponent,
             AlertComponent,
             AnchorWrapperComponent,
             AvatarComponent,
@@ -2471,7 +2533,8 @@ class DvComponentsLibModule {
             TooltipContentComponent,
             TreeComponent,
             WizardComponent,
-            ProgressLineComponent] }); }
+            ProgressLineComponent,
+            NetworkComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DvComponentsLibModule, imports: [CommonModule, RouterModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DvComponentsLibModule, decorators: [{
@@ -5683,7 +5746,11 @@ const TIMELINE_MOCK = {
         cluster: {
             // contentTemplate: '{count}',
             // fitOnDoubleClick: true,
-            clusterCriteria: (f, s) => f.content.charAt(0) === s.content.charAt(0),
+            clusterCriteria: (f, s) => {
+                const fContent = typeof f.content === 'string' ? f.content : '';
+                const sContent = typeof s.content === 'string' ? s.content : '';
+                return fContent.charAt(0) === sContent.charAt(0);
+            },
         },
         showTooltips: false,
         tooltip: {
@@ -5821,7 +5888,11 @@ const TIMELINE_GROUP_MOCK = {
         cluster: {
             // contentTemplate: '{count}',
             // fitOnDoubleClick: true,
-            clusterCriteria: (f, s) => f.content.charAt(0) === s.content.charAt(0),
+            clusterCriteria: (f, s) => {
+                const fContent = typeof f.content === 'string' ? f.content : '';
+                const sContent = typeof s.content === 'string' ? s.content : '';
+                return fContent.charAt(0) === sContent.charAt(0);
+            },
         },
         showTooltips: false,
         tooltip: {
@@ -6380,6 +6451,159 @@ const WIZARD_MOCK = {
     ],
 };
 
+const NETWORK_MOCK = {
+    containerID: 'demo-network',
+    nodes: [
+        { id: 1, label: 'Girolamo Zavattari', group: 'Fulmine', payload: 'https://adalgisa.muruca.cloud/character/65/girolamo-zavattari' },
+        { id: 2, label: 'Pietro e Luigi Borlotti', group: 'Fulmine' },
+        { id: 3, label: 'avvocato Cazzuola', group: 'Fulmine' },
+        { id: 4, label: 'Elsa Delmonte', group: 'Fulmine' },
+        { id: 5, label: 'Maria', group: 'Fulmine' },
+        { id: 6, label: 'Bruno Locati', group: 'Fulmine' },
+        { id: 7, label: 'Felice Testori', group: 'Fulmine' },
+        { id: 8, label: 'Gian Maria Cavenaghi/Caviggioni', group: 'Fulmine' },
+        { id: 9, label: 'Doralice', group: 'Altro (Claudio)' },
+        { id: 10, label: 'Claudio Valeri', group: 'Altro (Claudio)' },
+        { id: 11, label: 'donna Carla', group: 'Altro (Claudio)' },
+        { id: 12, label: 'Antenore', group: 'Altro (Claudio)' },
+        { id: 13, label: 'cav. Bertoloni', group: 'Cognizione' },
+        { id: 14, label: 'Carlos Caçoncellos', group: 'Cognizione' },
+        { id: 15, label: 'Giuseppina', group: 'Cognizione' },
+        { id: 16, label: 'colonnello medico Di Pascuale', group: 'Cognizione' },
+        { id: 17, label: 'dottore', group: 'Cognizione' },
+        { id: 18, label: 'José/Giuseppe', group: 'Cognizione' },
+        { id: 19, label: 'figlio/Gonzalo', group: 'Cognizione' },
+        { id: 20, label: 'mamma/Signora', group: 'Cognizione' }
+    ],
+    edges: [
+        // Relazioni di Girolamo Zavattari (1)
+        { id: 1, from: 1, to: 2, label: 'lavoro (dipendente di)' },
+        { id: 2, from: 1, to: 4, label: 'lavoro (dipendente di)' },
+        { id: 3, from: 1, to: 8, label: 'lavoro (dipendente di)' },
+        // Relazioni di Pietro e Luigi Borlotti (2)
+        { id: 4, from: 2, to: 1, label: 'lavoro (datore di lavoro di)' },
+        // Relazioni di avvocato Cazzuola (3)
+        { id: 5, from: 3, to: 2, label: 'lavoro' },
+        // Relazioni di Elsa Delmonte (4)
+        { id: 6, from: 4, to: 1, label: 'lavoro (datrice di lavoro di)' },
+        { id: 7, from: 4, to: 8, label: 'famiglia (matrimonio con)' },
+        { id: 8, from: 4, to: 6, label: 'relazione amorosa' },
+        // Relazioni di Maria (5)
+        { id: 9, from: 5, to: 4, label: 'lavoro (dipendente di)' },
+        { id: 10, from: 5, to: 8, label: 'lavoro (dipendente di)' },
+        // Relazioni di Bruno Locati (6)
+        { id: 11, from: 6, to: 7, label: 'lavoro (dipendente di)' },
+        { id: 12, from: 6, to: 8, label: 'lavoro (dipendente di)' },
+        // Relazioni di Felice Testori (7)
+        { id: 13, from: 7, to: 7, label: 'lavoro (datore di lavoro di)' },
+        // Relazioni di Gian Maria Cavenaghi/Caviggioni (8)
+        { id: 14, from: 8, to: 1, label: 'lavoro (datore di lavoro di)' },
+        { id: 15, from: 8, to: 4, label: 'famiglia (matrimonio con)' },
+        { id: 16, from: 8, to: 5, label: 'lavoro (datore di lavoro di)' },
+        { id: 17, from: 8, to: 6, label: 'lavoro (datore di lavoro di)' },
+        // Relazioni di Doralice (9)
+        { id: 18, from: 9, to: 10, label: 'relazione amorosa' },
+        // Relazioni di Claudio Valeri (10)
+        { id: 19, from: 10, to: 9, label: 'relazione amorosa' },
+        // Relazioni di donna Carla (11)
+        { id: 20, from: 11, to: 9, label: 'famiglia (zia di)' },
+        // Relazioni di Antenore (12)
+        { id: 21, from: 12, to: 9, label: 'famiglia (zio di)' },
+        // Relazioni di cav. Bertoloni (13)
+        { id: 22, from: 13, to: 14, label: 'proprietario di casa di' },
+        { id: 23, from: 13, to: 16, label: 'proprietario di casa di' },
+        // Relazioni di Carlos Caçoncellos (14)
+        { id: 24, from: 14, to: 13, label: 'affittuario di' },
+        // Relazioni di Giuseppina (15)
+        { id: 25, from: 15, to: 14, label: 'lavoro (dipendente di)' },
+        // Relazioni di colonnello medico Di Pascuale (16)
+        { id: 26, from: 16, to: 13, label: 'affittuario di' },
+        // Relazioni di dottore (17)
+        { id: 27, from: 17, to: 19, label: 'medico di' },
+        // Relazioni di José/Giuseppe (18)
+        { id: 28, from: 18, to: 19, label: 'lavoro (dipendente di)' },
+        { id: 29, from: 18, to: 20, label: 'lavoro (dipendente di)' },
+        // Relazioni di figlio/Gonzalo (19)
+        { id: 30, from: 19, to: 20, label: 'famiglia (figlio di)' },
+        // Relazioni di mamma/Signora (20)
+        { id: 31, from: 20, to: 19, label: 'famiglia (madre di)' }
+    ],
+    libOptions: {
+        nodes: {
+            shape: 'dot',
+            size: 40,
+            font: {
+                size: 14,
+                color: '#333333'
+            }
+        },
+        edges: {
+            arrows: {
+                to: { enabled: true, scaleFactor: 1.2 }
+            },
+            width: 1,
+            font: {
+                size: 10,
+                align: 'middle',
+                color: '#333333'
+            },
+            color: {
+                color: '#666666',
+                highlight: '#333333'
+            }
+        },
+        groups: {
+            'Fulmine': {
+                color: '#fff2cc',
+                shape: "icon",
+                icon: {
+                    face: "'Arial Unicode MS'",
+                    code: "☻",
+                    size: 40,
+                    color: "#fff2cc",
+                }
+            },
+            'Altro (Claudio)': {
+                color: '#ead1dc',
+                shape: "icon",
+                icon: {
+                    face: "'Arial Unicode MS'",
+                    code: "☻",
+                    size: 40,
+                    color: "#ead1dc",
+                }
+            },
+            'Cognizione': {
+                color: '#c9daf8',
+                shape: "icon",
+                icon: {
+                    face: "'Arial Unicode MS'",
+                    code: "☻",
+                    size: 40,
+                    color: "#c9daf8",
+                }
+            }
+        },
+        physics: {
+            stabilization: true,
+            barnesHut: {
+                gravitationalConstant: -3000,
+                springLength: 300,
+                springConstant: 0.02
+            }
+        },
+        interaction: {
+            hover: true,
+            tooltipDelay: 200,
+            zoomView: true,
+            dragView: true
+        },
+        layout: {
+            improvedLayout: true
+        }
+    }
+};
+
 /*
  * Public API Surface of dv-components-lib
  */
@@ -6389,5 +6613,5 @@ const WIZARD_MOCK = {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AVATAR_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, AvatarComponent, BREADCRUMBS_MOCK, BUBBLECHART_MOCK, BUTTON_MOCK, BreadcrumbsComponent, BubbleChartComponent, ButtonComponent, CAROUSEL_MOCK, CHART_MOCK, CONTENT_PLACEHOLDER_MOCK, CarouselComponent, ChartComponent, ContentPlaceholderComponent, DATA_WIDGET_MOCK, DATEPICKER_MOCK, DataWidgetComponent, DatepickerComponent, DvComponentsLibModule, FACET_HEADER_MOCK, FACET_MOCK, FACET_YEAR_RANGE_MOCK, FILE_SELECTOR_MOCK, FOOTER_MOCK, FacetComponent, FacetHeaderComponent, FacetYearRangeComponent, FileSelectorComponent, FooterComponent, HEADER_MOCK, HERO_MOCK, HISTOGRAM_RANGE_MOCK, HeaderComponent, HeroComponent, HistogramRangeComponent, ICON_MOCK, IMAGE_VIEWER_MOCK, IMAGE_VIEWER_TOOLS_MOCK, INNER_TITLE_MOCK, INPUT_CHECKBOX_MOCK, INPUT_LINK_MOCK, INPUT_SELECT_MOCK, INPUT_TEXTAREA_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, IconComponent, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, ItemPreviewComponent, LOADER_MOCK, LoaderComponent, MAP_MOCK, METADATA_VIEWER_MOCK, MIRADOR_MOCK, MapComponent, MetadataViewerComponent, MiradorComponent, NAV_MOCK, NavComponent, PAGINATION_MOCK, PROGRESS_LINE_MOCK, PaginationComponent, ProgressLineComponent, SIDEBAR_HEADER_MOCK, SIGNUP_MOCK, SIMPLE_AUTOCOMPLETE_MOCK, SidebarHeaderComponent, SignupComponent, SimpleAutocompleteComponent, TABLE_MOCK, TAG_MOCK, TEXT_VIEWER_MOCK, TEXT_VIEWER_MOCK_PETRARCA, TIMELINE_GROUP_MOCK, TIMELINE_MOCK, TOAST_MOCK, TOOLTIP_CONTENT_MOCK, TREE_MOCK, TableComponent, TagComponent, TextViewerComponent, TimelineComponent, ToastComponent, TooltipContentComponent, TreeComponent, WIZARD_MOCK, WizardComponent };
+export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AVATAR_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, AvatarComponent, BREADCRUMBS_MOCK, BUBBLECHART_MOCK, BUTTON_MOCK, BreadcrumbsComponent, BubbleChartComponent, ButtonComponent, CAROUSEL_MOCK, CHART_MOCK, CONTENT_PLACEHOLDER_MOCK, CarouselComponent, ChartComponent, ContentPlaceholderComponent, DATA_WIDGET_MOCK, DATEPICKER_MOCK, DataWidgetComponent, DatepickerComponent, DvComponentsLibModule, FACET_HEADER_MOCK, FACET_MOCK, FACET_YEAR_RANGE_MOCK, FILE_SELECTOR_MOCK, FOOTER_MOCK, FacetComponent, FacetHeaderComponent, FacetYearRangeComponent, FileSelectorComponent, FooterComponent, HEADER_MOCK, HERO_MOCK, HISTOGRAM_RANGE_MOCK, HeaderComponent, HeroComponent, HistogramRangeComponent, ICON_MOCK, IMAGE_VIEWER_MOCK, IMAGE_VIEWER_TOOLS_MOCK, INNER_TITLE_MOCK, INPUT_CHECKBOX_MOCK, INPUT_LINK_MOCK, INPUT_SELECT_MOCK, INPUT_TEXTAREA_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, IconComponent, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, ItemPreviewComponent, LOADER_MOCK, LoaderComponent, MAP_MOCK, METADATA_VIEWER_MOCK, MIRADOR_MOCK, MapComponent, MetadataViewerComponent, MiradorComponent, NAV_MOCK, NETWORK_MOCK, NavComponent, NetworkComponent, PAGINATION_MOCK, PROGRESS_LINE_MOCK, PaginationComponent, ProgressLineComponent, SIDEBAR_HEADER_MOCK, SIGNUP_MOCK, SIMPLE_AUTOCOMPLETE_MOCK, SidebarHeaderComponent, SignupComponent, SimpleAutocompleteComponent, TABLE_MOCK, TAG_MOCK, TEXT_VIEWER_MOCK, TEXT_VIEWER_MOCK_PETRARCA, TIMELINE_GROUP_MOCK, TIMELINE_MOCK, TOAST_MOCK, TOOLTIP_CONTENT_MOCK, TREE_MOCK, TableComponent, TagComponent, TextViewerComponent, TimelineComponent, ToastComponent, TooltipContentComponent, TreeComponent, WIZARD_MOCK, WizardComponent };
 //# sourceMappingURL=net7-components.mjs.map