Upgrade angular framework from 9 to 12

[mm-ryo]

Hi, there are many errors when I upgrade angular to v12. do we need to change anything to adapt to the new version of angular? thanks

integralui-web-treeview-212000-tGc9.zip

Error: src/third-party/integralui/components/integralui.autocomplete.d.ts:64:21 - error TS2694: Namespace '"'"*****/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDef'.

64 static ɵfac: i0.ɵɵFactoryDef<IntegralUIAutoComplete, never>;

Error: src/third-party/integralui/components/integralui.autocomplete.d.ts:65:21 - error TS2694: Namespace '"*****/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDefWithMeta'.

65     static ɵcmp: i0.ɵɵComponentDefWithMeta<IntegralUIAutoComplete, "iui-autocomplete", never, { "controlStyle": "controlStyle"; "data": "data"; "enabled": "enabled"; "name": "name"; "size": "size"; "state": "state"; "appRef": "appRef"; "dataFields": "dataFields"; "dropDownWidth": "dropDownWidth"; "list": "list"; "maxVisibleItems": "maxVisibleItems"; "placeHolder": "placeHolder"; "text": "text"; }, { "valueChanged": "valueChanged"; }, never, never>;

{ ****， "private": true, "dependencies": { "@angular/animations": "~12.0.4", "@angular/common": "~12.0.4", "@angular/compiler": "~12.0.4", "@angular/core": "~12.0.4", "@angular/forms": "~12.0.4", "@angular/platform-browser": "~12.0.4", "@angular/platform-browser-dynamic": "~12.0.4", "@angular/router": "~12.0.4",

---

"tslib": "^2.2.0",
"zone.js": "~0.11.4"

}, "devDependencies": { "@angular-devkit/build-angular": "^12.0.3", "@angular/cli": "^12.0.3", "@angular/compiler-cli": "~12.0.4", "@angular/language-service": "~12.0.4",

---

"tslint": "^6.1.3",
"typescript": "~4.2.4"

} }

[Lidor-Systems]

We will check this out. We will let you know when we have more news.

We are no longer working on product development specifically build on Angular framework, to avoid this kind of breaking changes that Angular team constantly adds to their framework. Since 16 Mar 2021, the components built specifically for Angular are in maintenance mode (you can find this information on our web site under What's New/History section at bottom). Any future updates will be based on Web Components standard (see below).

We have already created all IntegralUI Web components based on Web Components standard which is framework agnostic. Now you can use them in Angular, React, Vue, Vanilla JavaScript or any future framework without compatibility issues. We highly recommend you to try them out, embedding these web components in Angular is straight forward with only few changes needed in your code.

In addition, these components are faster, smaller and with improved overall performance.

[Lidor-Systems]

We have tested the native angular components under Angular 12 and it seems there are too many errors, mostly caused by new version of TypeScript. This requires to redo many of the internal code of IntegralUI and then compile it to work with Angular 12. As we mentioned, these components that are built on Angular are now in maintenance mode so we recommend you to use the new native Web Components instead.

We have tested the new Web Components under Angular 12, and integration is as simple as possible and there are no these kind of errors thrown by TypeScript. Although you may need to add some settings to tsconfig.json file, that is:

"angularCompilerOptions": {

        . . .

        "suppressImplicitAnyIndexErrors": true,     // solves implicit any values
        "noImplicitAny": false,             // solves angular could not find a declaration file for module implicitly has an 'any' type
        "strictNullChecks": false           // solves type null is not assignable to type

    }

The full version of IntegralUI Web - TreeView is already send to your company representative. You can find these components under /web components/bin/integralui folder. A quick start application with samples for TreeView component is available here: IntegralUI Web - QuickStart.

These samples can help you to integrate the new TreeView component in Angular 12 applications.

If you have any questions, please let us know.

[mm-ryo]

Hi, I put the config in tsconfig.json but it's no use. it's still the same error. I also checked the definition file (angular core), there is no defined the object which is in use in your library. like 'ɵɵFactoryDef' or 'ɵɵComponentDefWithMeta' etc...

[Lidor-Systems]

The config settings are for Web Components use, not for native Angular components you are currently trying. We have clearly stated this in our message.

The problem is with Angular, we have seen this error in the past if for example you are using Angular 9.0, and a component is compiled with 9.1. Then the error with 'ɵɵFactoryDef' or 'ɵɵComponentDefWithMeta' message is thrown.

Here is a link to a solution (but that is for Angular 9, we are not sure whether it works for Angular 12): Angular 9 Ivy - Generic type 'ɵɵFactoryDef' requires 2 type argument(s)

Again, we suggest to use the Web Components part, you will have much less problems with compatibility issues that Angular team constantly creates.

[mm-ryo]

but I think I am using the web component. can you send me the latest version of the component again? and do you have the guideline for setting up this web component in angular 12? if you can provide it then it could be helpful. is it having the same functionalities as the component using Angular 9.0? thanks

here is the zip file name which we get it from you: integralui-web-treeview-212000-tGc9.zip

[Lidor-Systems]

Follow these steps:

Make sure you are using the library files from /web components/bin/integralui folder in your project. DO NOT USE the angular/bin/integralui, it is totally different.

1. Copy/paste the /web components/bin/integralui to a folder in your project from where you are referencing the TreeView component. Usually we set this in our samples under src/app/integralui

2. With Web Components you need at first to set usage of custom elements in Angular app.module.ts file:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
    . . .

    schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule { }

3. In angular.json file add a reference to icons used by IntegralUI library. In this case that is src/app/integralui/icons

. . .

            "assets": [
                "src/favicon.ico",
                "src/app/integralui/icons",
                "src/assets"
            ],

It can be different in your project, depending on referencing folder you put in step 1.

4. Now you are ready to add the TreeView component in your project. Open app.component.ts file (or any other component file where you will be using the TreeView) and import the TreeView component:

import './integralui/components/integralui.treeview.js';

5. Set the TreeView HTML and its counterpart in angular like this:

HTML

<iui-treeview #treeview id="treeview-overview"
    [allowAnimation]="true"
    [items]="items"
    [resourcePath]="currentResourcePath"
    [size]="ctrlSize"
> 
</iui-treeview>

Angular

export class AppComponent {
    public ctrlSize: any = { width: 350, height: 300 };
    public currentResourcePath: string = 'app/integralui/icons';
    public items: Array<any> = [];

    constructor(){
        this.items = [
            { 
                id: 1,
                text: "Favorites",
                icon: "favorites",
                items: [
                    { id: 11, pid: 1, text: "Desktop", icon: "empty-doc" },
                    { id: 12, pid: 1, text: "Downloads", icon: "downloads" }
                ]
            },
            { 
                id: 2,
                text: "Libraries",
                icon: "folder",
            },

            // some more data here
         ];
    } 
}

6. If you are using a Theme, first you need to import it and apply it to theme property:

Angular

import { IntegralUITheme } from './integralui/components/integralui.enums.js';

export class AppComponent {
    // . . .

    public currentTheme: IntegralUITheme = IntegralUITheme.Office;
}

HTML

<iui-treeview #treeview id="treeview-overview"

    [theme]="currentTheme"
> 
</iui-treeview>

Unfortunately, this will create an error in TypeScript for Angular 12. To solve it add this line in tsconfig.ts file:

"angularCompilerOptions": {

        . . .

        "noImplicitAny": false,             // solves angular could not find a declaration file for module implicitly has an 'any' type

    }

7. Now working with templates in Web Components in different. IntegralUI Web is built on top of LitElement, and we are using its syntax to add custom content to item template. At first you need to import the html from LitElement. This is already available from /external folder under /integralui:

app.component.ts

import { Component, ElementRef, ViewChild } from '@angular/core';
import { html } from './integralui/external/lit-element.js';

export class AppComponent {
    @ViewChild('treeview', { static: false }) treeview: ElementRef;

    //
    // Currently when using templates, the LitElement binding syntax is required
    // for properties, methods and events
    //
    public currentItemTemplate = (item: any) => { 
        return html`
            <div>
                <span class="computer-icons ${item.icon}"></span>
                <span>${item.text}</span>
            </div>
        `;
    };

   // Apply the template after the TreeView is initialized
    ngAfterViewInit(){
        this.treeview.nativeElement.itemTemplate = this.currentItemTemplate;
    }
}

Again here the TypeScript from Angular 12 will throw an error stating that treeview variable set above is not initialized. To solve this in tsconfig.ts file add this line:

"angularCompilerOptions": {

        . . .

        "strictNullChecks": false           // solves type null is not assignable to type
    }

8. Now any STYLE changes to item template requires to have a style file which will include any CSS settings. Then you need to load this settings and apply it to customStyle property of the TreeView component. The reason why this is done this way is because Web Components don;t allow changes to internal parts of the component from outside, because of shadow dom. You can override this by using the customStyle property.

In this case we want to show some icons before item label (based on item template settings in thie current example). At first create a file where you will put these CSS settings:

treeview-overview.style.js

import { css } from './integralui/external/lit-element.js';

export const iuiTreeViewOverviewStyle = css`
    .computer-icons {
        background-image: url(assets/resources/computer.png);
        background-repeat: no-repeat;
        display: inline-block;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 2px 0 0;
        width: 24px;
        height: 24px;
        vertical-align: middle;
    }
    .favorites {
        background-position: -72px 0px;
    }
}

Then import this file and set it to the customStyle property:

app.component.ts

import { iuiTreeViewOverviewStyle } from './treeview-overview.style.js';

export class AppComponent {
    // . . .

    public customStyle: any = iuiTreeViewOverviewStyle;
}

HTML

<iui-treeview #treeview id="treeview-overview"

    [customStyle]="customStyle"

> 
</iui-treeview>

Here make sure you have icons at your referencing folder. In this case assets/resources/computer.png.

That's it. This covers in general how to setup the TreeView as a native web component in Angular.

In similar way you can setup any other web component and this will be the same for any future updates, no compatibility issues anymore.

A quick start application with samples for TreeView component is available here: IntegralUI Web - QuickStart. These samples can help you to quickly learn how to use TreeView as a Web Component.

If you need more information about using Web Components, please let us know.

[mm-ryo]

Hi, is it having the same functionalities as the component using Angular 9.0? do you have ts definition file for web component? it's hard to know what's in it. I also checked the demo it's built on top of angular 9. can you provide a demo for angular 12?

I didn't find 'integralui.breadcrumb' inside web component folder. how do i add it to my project? or i just need to install the package from npm.

[Lidor-Systems]

is it having the same functionalities as the component using Angular 9.0?

Yes.

do you have ts definition file for web component? it's hard to know what's in it.

No, ts files are not required for web components.

I also checked the demo it's built on top of angular 9. can you provide a demo for angular 12?

We don't have a sample project built on Angular 12. We cannot create one, currently we saw too many TypeScript errors, which probably require to do many changes to the internal code. Like we mention the Angular components are now in maintenance mode, we can only fix bugs for previous versions of Angular.

I didn't find 'integralui.breadcrumb' inside web component folder. how do i add it to my project? or i just need to install the package from npm.

To reduce overall package size for individual components like TreeView, only the files required by the TreeView are present. The Breadcrumb component like other common components are available currently in full package.

There is a LITE version of IntegralUI Web, which includes most common components in full. Only components like TreeView, ListBox etc. are with reduced functionalities. This version is not yet updated to v21.2.

We will prepare a zip file including the Breadcrumb and other common web components and post it here.

[Lidor-Systems]

You can download common components from here: IntegralUI Web - Common Components.

Note You don't have to copy/paste all component files, just pick up the files for components that you may use in your project.

Samples for these components are included in a separate project for all components, available here: IntegralUI Web - QuickStart.

[mm-ryo]

You can download common components from here: IntegralUI Web - Common Components.

Note You don't have to copy/paste all component files, just pick up the files for components that you may use in your project.

Samples for these components are included in a separate project for all components, available here: IntegralUI Web - QuickStart.

thanks a lot. let me try and test it. it's really hard to do upgrading for angular from 9 to 12.

[mm-ryo]

Hi, How to inject IntegralUIDragDropService?

I did like this, but it won't work.

import { IntegralUIDragDropService } from 'integralui-web/services/integralui.dragdrop.service.js';

this.dragDropService = new IntegralUIDragDropService();

Here is the error.

[Lidor-Systems]

import the service without curly brackets:

import IntegralUIDragDropService from 'integralui-web/services/integralui.dragdrop.service.js';

[mm-ryo]

import the service without curly brackets:

import IntegralUIDragDropService from 'integralui-web/services/integralui.dragdrop.service.js';

yes.

Can i put angular component inside item template?

    this.treeview.nativeElement.itemTemplate = this.currentItemTemplate;
    this.treeview.nativeElement.itemHoverTemplate =
      this.currentItemHoverTemplate;

[Lidor-Systems]

No. We have tried to add Angular components as they are, inside the web component template, but it doesn't appear compiled in the DOM.

Maybe there is a way, but currently we don't know whether is possible.

What component you need to add inside the item template? It works with other web components.

[mm-ryo]

No. We have tried to add Angular components as they are, inside the web component template, but it doesn't appear compiled in the DOM.

Maybe there is a way, but currently we don't know whether is possible.

What component you need to add inside the item template? It works with other web components.

the toolbar which will be shown when the mouse moves or over on the item. actually the web component is inconvenient, for instance, the scss feature(define a variable, inheritance) we can not use it. you should provide a guideline for upgrading from angular component to web component. it's really painful for me to do upgrading.

how to set tree height/width 100%? the below code doesn't work. public treeSize = { width: '100%', height: '100%' };

how about angular features like '*ngIf' and customized directive if want to put it in the template? how to pass extra parameters to 'itemTemplate'?

[Lidor-Systems]

the toolbar which will be shown when the mouse moves or over on the item.

from QuickStart samples check out the treeview-overview.ts example code. In this example you will see we are showing custom toolbar when item is hovered. In this case the toolbar only has one tool button, for deleting the item.

you should provide a guideline for upgrading from angular component to web component.

We give you steps in this topic above on how to set up a web component for use in Angular. For more specific ones concerning your project, please let us know and we will help you as much as we can.

how to set tree height/width 100%? the below code doesn't work.

If the control width and height are set in percentages, then you can use CSS. Because of shadow DOM, web components are closed from outside changes to CSS. So you need to use the customStyle property where you can add your own CSS. For example, changes to step 6 in above code that affect the TreeView size:

import { css } from './integralui/external/lit-element.js';

export const iuiTreeViewOverviewStyle = css`
      .iui-treeview {
            width: 100%;
            height: 100%;
      }
`;

then import this file into the angular component where TreeView is placed and apply it to customStyle property.

There is another way, using custom properties, but currently not all CSS properties are implemented for the TreeView. To set up a CSS this way, first set a variable id for TreeView, then use it as a selector in CSS. This doesn't require custom style.

HTML

<iui-treeview #treeview id="treeview-overview"
        [items]="items"
    > 
    </iui-treeview>

CSS

/* Changes to the tree item layout*/
[id="treeview-overview"] {
    --treeitem-expand-box-margin: 4px 5px 0 0;
}

To see which custom CSS properties are supported, just open the integralui.treeview.style file.

how about angular features like '*ngIf' and customized directive if want to put it in the template?

You can add conditions to item template using Lit Element syntax. Now the item template can show a BUTTON if someVariable is true:

public currentItemTemplate = (item: any) => { 
    return html`
        <div>
            <span class="computer-icons ${item.icon}"></span>
            <span>${item.text}</span>
            ${this.someVariable
                ? html`<button @click="${(e) => this.buttonClicked(e, item.data)}">Click me</button>`
                : html``
            }
        </div>
    `;
};

private someVariable: boolean = false;

someFunc(){
      this.someVariable = true;
}

how to pass extra parameters to 'itemTemplate'?

and then when clicked you can handle the event buttonClicked provided some extra data attached to the item.

    buttonClicked(e, data){
        console.log(data);
    }

in this case you can use the item data field or any other custom field to item object and pass it to the function in item template. In this example we are using the item.data field:

@click="${(e) => this.buttonClicked(e, item.data)}"

To learn more about LitElement syntax check out the official guide.

[Lidor-Systems]

In previous posts about using IntregralUI DragDrop Service we forgot to mention that it is a shared service with persistent data that is shared across different components. So you cannot create an instance of it by calling the new constructor, instead use the getInstance method:

import IntegralUIDragDropService from './integralui/services/integralui.dragdrop.service.js';

export class AppComponent {

    private _ddService: IntegralUIDragDropService = null;

    constructor(){
        this._ddService = IntegralUIDragDropService.getInstance();
    }
}

When using this service the drag and drop data can be accessed from other components. This allows you to store any custom data and move it (drag drop) from one component to another.

[mm-ryo]

Hi, thanks for your reply. i known how to pass parameter inside html template. but for below question, I am talking about this property 'this.treeview.nativeElement.itemTemplate'.

how to pass extra parameters to 'itemTemplate'?

[Lidor-Systems]

You can't pass extra paramaters to the itemTemplate function, it accepts only the item. But you can instead add a custom field to item object and pass any kind of extra objects there.

The code shows that the parameter passed is item:

public currentItemTemplate = (item: any) => { 
    return html`<span>${item.text}</span>`
}

the item parameter relates to the tree item object, set when creating items:

this.items = [
    { text: "Item 1" },
    { text: "Item 2" },
    { text: "Item 3 }
];

It is similar with Angular template. Here you don;t have other parameter than let-item:

<ng-template let-item>
    <span>{{item.text}}</span>
 </ng-template>

In case of web components, the difference is you need create a function where you pass the item parameter. Internally we use this function to change the content of the item. We cycle through each item present and pass this function. Based on custom content of item template, the content for that item changes.

So even if it is possible to pass an extra parameter, we cannot pass it during this iteration internally. So setting extra parameters makes sense only for that specific template you are creating, in relation to the item object. As a solution, pass extra parameters as custom fields to item object.

If you need to pass other objects not related to the item object (that is set outside of the item object), you can use any custom variable or function and directly use it inside the template:

public someVar: any = { field1: true, field2: 123 }
public someFunc(){
    return this.someVar.field1;
}

public currentItemTemplate = (item: any) => { 
    return html`<div>
            <span>${item.text}</span>
            <div>${this.someVar.field2} ${this.someFunc()}</div>
        </div>
    `
}

[mm-ryo]

Hi, Actually, I want to pass values from the parent component. why I need to change our tree-view data structure. if I want to implement new functions like this I need to keep change the data structure. I think it's unacceptable. what do you think?

we want to reuse our component (with tree-view) but depend on the mode to display the content.

[Lidor-Systems]

Actually, I want to pass values from the parent component.

Can you give us more details on how you want to achieve this?

why I need to change our tree-view data structure.

What do you mean? You don't need to change your tree data to work with the web component.

[mm-ryo]

Actually, I want to pass values from the parent component.

Can you give us more details on how you want to achieve this?

why I need to change our tree-view data structure.

What do you mean? You don't need to change your tree data to work with the web component.

1. i want to pass extra parameter to "itemtemplate" which is not related to data-item. and i split template to another file.
2. for your solution is not compatible to us. the value shouldn't be fixed. it's depend on the usage. you can take a look at below codes. `public itemTemplate = (item) => { return html`` <span class="${this.getExpandBoxClass(item)}" @mousedown="${event => this.toggleExpandBox(item, event)}"

3. how to access tree-view(reference) from template?
4. drag/drop error
5. the toolbar is gone if i call api updateLayout() i thought you already fixed this issue before. this.treeview.nativeElement.updateLayout();
6. is this api removed? this.treeView.scrollItemList
7. do you have context menu component?
8. breadcrumb items are missing, the same code is working previously

[Lidor-Systems]

i want to pass extra parameter to "itemtemplate" which is not related to data-item. and i split template to another file.

Can you give us more details, code sample on how you have done this in Anglular, so we can give a sample code with solution for web components.

for your solution is not compatible to us. the value shouldn't be fixed. it's depend on the usage. you can take a look at below codes.

We presume you are using different HTML inside the item template, based on some condition? If that's the case, then use a variable to split the internal code of template (like we show it in the code from previous posts). We need more details, in order to give you a better answer.

how to access tree-view(reference) from template?

Simple, by calling the variable which is a reference to the TreeView component. In code below, it is presumed the TreeView data property is set:

public currentItemTemplate = (item: any) => { 
    return html`<div>
            <span>${item.text}</span>
            <div>${this.treeview.nativeElement.data}</div>
        </div>
    `
}

drag/drop error

How to recreate this error? When it happens? More details ....

5. the toolbar is gone if i call api updateLayout() i thought you already fixed this issue before.

This is a bug in web components, we will fix it. The fix we have previously was for Breadcrumb as Angular component, it is totally different project.

6. is this api removed? this.treeView.scrollItemList

scrollItemList was never part of the public API. This variable is for internal use only, but because it is used in TreeView HTML, it must be set as public. It is not recommended to use it, it is not even part of Documentation API.

In web components, all private variables or functions have underscore '_' prefix. So if you must use the scrollItemList in your code (again not recommended), you can access it this way:

this.treeview.nativeElement._scrollItemList

Note Better solution it would be to send us a request, for example to create a public function that will be part of the public API that will return a list of all items that are currently present in the DOM.

do you have context menu component?

Yes, it is part of the main package, IntegralUI Web or as pat of IntegralUI Web - Menu.

breadcrumb items are missing, the same code is working previously

Do you have all files present in your project. The Breadcrumb component uses the List, DropDown and ScrollBar components. So you need to include them in /integralui/components folder. Also the same for styles and themes.

The following needs to be present in the /integralui folders so that Breadcrumb operates:

/components

integralui.base.js integralui.breadcrumb.js integralui.dropdown.js integralui.enums.js integralui.list.js integralui.scrollbar.js

/styles

integralui.breadcrumb.style.js integralui.list.style.js integralui.listitem.style.js integralui.scrollbar.style.js

/themes/midnight

integralui.breadcrumb.midnight.js integralui.list.midnight.js integralui.listitem.midnight.js integralui.scrollbar.midnight.js

/themes/office

integralui.breadcrumb.office.js integralui.list.office.js integralui.listitem.office.js integralui.scrollbar.office.js

Also make sure you copy/paste all icons from IntegralUI Web - Common package (from /integralui/icons/ folder) inside the /integralui/icons/ folder in your project.

This happens because you are combining the IntgeralUI Web - TreeView and IntegralUI Web - Common packages, of which the TreeView package has less content.

[Lidor-Systems]

One addition to our answer considering your comment:

for your solution is not compatible to us. the value shouldn't be fixed. it's depend on the usage. you can take a look at below codes.

Each IntegralUI as a web component has a data property. You can store ANY kind of objects or values in this property and then use whenever you need it, like inside the item template:

public currentItemTemplate = (item: any) => { 
    return html`<div>
            <span>${item.text}</span>
            <div>${this.treeview.nativeElement.data}</div>
        </div>
    `
}

You can set this property via HTML, to point to a property set from a parent component, or to a variable in Angular code:

<parent-comp *ngFor="let obj of collection">
    <iui-treeview [data]="obj.field" items="treeItems"></iui-treeview>
</parent-comp>

public collection: Array<any> = [{ field: someData }];

public currentItemTemplate = (item: any) => { 
    return html`<div>
            <span>${item.text}</span>
            <div>${this.treeview.nativeElement.data}</div>
        </div>
    `
}

Note We used here ngFor just as a ilustration. It can be any other way you pass variables from parent component to a child in Angular.

or simply put object directly to TreeView data property:

<iui-treeview [data]="someData" items="treeItems"></iui-treeview>

public someData: any = { field: someData };

[Lidor-Systems]

i want to pass extra parameter to "itemtemplate" which is not related to data-item. and i split template to another file.

A more detailed explanation on how to create item template in a file and then import it. This allows you to create different kinds of templates and call them on demand.

First lets create an item template:

import { html } from './integralui/external/lit-element.js';

export default function itemTemplate1(item){ 
    return html`
        <div>
            <span>${item.text}</span>
            <button @click="${(e) => this.buttonClicked(e, item)}">Click me</button>
        </div>
    `;
};

You can save this template in a file named 'item-template-1.js'.

Then import this template in the angular component where TreeView is present:

import itemTemplate1 from './item-template-1.js';

You don't need to create a separate variable when importing this template, you can directly attach it to the TreeView.

ngAfterViewInit(){
    this.treeview.nativeElement.itemTemplate = itemTemplate1.bind(this);
}

The key here is to bind the this object to the function included in the template file, so that you can use the app component's this inside the template.

Using this, you can call other functions or variables inside the template function and also use the data property if you have passed some values from parent components.

We hope this helps.

[mm-ryo]

thanks a lot for your replies.

1. can you expose an api to get scrollitem? or is it possible to scroll to item which is not in current view port? this.treeview.nativeElement._scrollItemList
2. drag/drop error i just select an item and drag it then the error comes out
3. could you send me the full release packages for web components?

[Lidor-Systems]

can you expose an api to get scrollitem? or is it possible to scroll to item which is not in current view port?

We already have a method that depending on provided parameter returns a tree item list. It is the getList(key, item) method, which has the following functionality:

• If key is set to 'current', returns a flat list of all currently non-expanded items
• If key is set to 'selected', returns a list of all currently selected items
• If key is not set, returns a list of all root items or if item is set a list of its child items

If you still need to get a list of all items that are present in the DOM (i.e. the scrollItemList), we can add a new value for key paramater that will return this kind of list. Let us know whether you need it.

In order to scroll to a specific item (you don;t need above method), just use the scrollTo(item) method:

this.treeview.nativeElement.scrollTo(someItem);

drag/drop error

Based on your provided error information (sccreenshot), we have pinpointed what may be the causing this error. It is inside the popup window that shows drag drop information about the target. We will fix this. Thanks.

could you send me the full release packages for web components?

You already have the full release (latest versions) for all components from TreeView and Common package. If you are referring to all web components from the IntegralUI Web package, you need to acquire a license for it first. Because you already have a license for IntegralUI Web - TreeView, we can give you a discount when upgrading to the full package IntegralUI Web.

Let us know if you want to upgrade your license. Please send your request to support@lidorsystems.com, so we can give you a discount coupon.

[mm-ryo]

Hi, I found another issue. it's flickered when expanding an item that has children. I think it's due to the 'updateLayout' method called. I remember you already fixed it in the angular version. please help to check it and also merge other fixed issue to web component. thanks.

[question] how to use context-menu inside tree-view?

[Lidor-Systems]

it's flickered when expanding an item that has children.

This is not a bug. When expand/collapse is happening, the current view is refreshed and if you are using Office theme, the CSS animation restarts, causing for animated background color for hovered or selected items to reset.

You can solve this by modifying the CSS style in style sheet attached to customStyle property:

import { css } from './integralui/external/lit-element.js';

export const iuiTreeViewOverviewStyle = css`
    /* . . . previous CSS style settings of the sample here */

    .iui-treeitem-hovered, .iui-treeitem-content-hovered {
        animation-name: none;
        background: #d9edfd; 
        border-color: #d9edfd;
    }

    .iui-treeitem-selected, .iui-treeitem-content-selected {
        animation-name: none;
        background: #a5d3fa; 
        border-color: #a5d3fa;
    }
`;

Note You can check the /themes/office/integralui.treeview.office.js file for more details how this change affects the appearance.

how to use context-menu inside tree-view?

You can use the IntegralUI ContextMenu component like this in item template:

import { html } from './integralui/external/lit-element.js';
import './integralui/components/integralui.contextmenu.js';

export default function itemTemplate1(item){ 
    return html`
        <iui-contextmenu .settings=${this.menuSettings} .theme=${this.currentTheme} @menuClick=${(e) => this.menuItemClick(e, item)}>
            <span>${item.text}</span>
            <button @click="${(e) => this.buttonClicked(e, item.data)}">Click me</button>
        </iui-contextmenu>
    `;
};

where in Angular you need to add menuSettings variable and menuItemClick function to handle menuClick event:

export class AppComponent {

    // . . .

    public menuSettings: any = {
        items: [
            { id: 1, text: "Menu Item 1" },
            { id: 2, text: "Menu Item 2" },
            { id: 3, text: "Menu Item 3" }
        ]
    }

    menuItemClick(e: any, item: any){
        console.log(e.detail, item);
    }
}

In general, when using a ContextMenu or a Tooltip, you need to wrap the HTML content to which the context menu will be attached. In this way, the context menu can appear whenever a right-click is made inside the HTML content space. The area of control for the context menu is related to the HTML content space.

Of course, this requires to have the ContextMenu component. Like we mention before this component is not part of the IntegralUI Web - Common, it is only available from the full package IntegralUI Web or as part of IntegralUI Menu.

Note From the full package if you need only the ContextMenu component in addition to already having a license for the TreeView component, we are willing to send it to you for free, let us know. But if you need other components from the full package, then you need to upgrade your license.

[Lidor-Systems]

An updated version that includes following fixes and features is already sent to your company representative:

• To get the list of all items currently present in the DOM, specify the key value as 'virtual' in the getList method
• Fixed the issue that caused an error when drag and drop starts, caused from drag and drop popup window
• Position of custom toolbar during hovering and selecting of items is now fixed.

This update also includes the ContextMenu files.

Note Instead of using updateLayout to refresh the current view in the TreeView, in some cases is better to use the updateView method. It is optimized to update only the current view, try it out.