{"id":20796622,"url":"https://github.com/lidorsystems/integralui-treeview","last_synced_at":"2026-05-10T05:46:30.084Z","repository":{"id":111622238,"uuid":"211109171","full_name":"lidorsystems/integralui-treeview","owner":"lidorsystems","description":"IntegralUI TreeView for Angular - Includes TreeView and other common UI components","archived":false,"fork":false,"pushed_at":"2019-09-26T15:47:10.000Z","size":1618,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-04T07:40:20.690Z","etag":null,"topics":["angular","angular8","components","integralui","treeview","ui"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lidorsystems.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE_LOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-26T14:28:17.000Z","updated_at":"2019-09-26T15:47:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"3075df0d-3a5d-4cc4-852d-2f81c9a6737c","html_url":"https://github.com/lidorsystems/integralui-treeview","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidorsystems%2Fintegralui-treeview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidorsystems%2Fintegralui-treeview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidorsystems%2Fintegralui-treeview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidorsystems%2Fintegralui-treeview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lidorsystems","download_url":"https://codeload.github.com/lidorsystems/integralui-treeview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243141256,"owners_count":20242817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular8","components","integralui","treeview","ui"],"created_at":"2024-11-17T16:28:23.748Z","updated_at":"2026-05-10T05:46:30.041Z","avatar_url":"https://github.com/lidorsystems.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# IntegralUI TreeView for Angular, v19.3\n\nIntegralUI TreeView is a library built on top of Angular 8 framework. It consists of TreeView and other common components, directives and services that can help you build modern web applications. \n\n\u003cb\u003eNote\u003c/b\u003e   The TreeView and other common components are also part of the [IntegralUI Web](https://github.com/lidorsystems/integralui-web) product package. \n\n\nHere is a brief overview of what is included:\n\n## Components\n\n[AutoComplete](https://www.lidorsystems.com/products/web/studio/samples/angular/#/autocomplete/overview/) - Represents a text box with a dropdown list where you can choose among suggested options\u003c\n\n[Breadcrumb](https://www.lidorsystems.com/products/web/studio/samples/angular/#/breadcrumb/overview/) - Used for navigation, where each item can have a link that is automatically separated\n\n[Button](https://www.lidorsystems.com/products/web/studio/samples/angular/#/button/overview/) - Represents a button\n\n[Calendar](https://www.lidorsystems.com/products/web/studio/samples/angular/#/calendar/overview/) - Enables the user to select a date using a visual monthly calendar display\n\n[CheckBox](https://www.lidorsystems.com/products/web/studio/samples/angular/#/checkbox/overview/) - Represents a check box\n\n[ComboBox](https://www.lidorsystems.com/support/articles/angular/combobox/combobox-component.aspx) - Advanced version of standard ComboBox element\n\n[DatePicker](https://www.lidorsystems.com/products/web/studio/samples/angular/#/datepicker/overview/) - Allows the user to select a date by using a drop-down calendar\n\n[Dialog](https://www.lidorsystems.com/products/web/studio/samples/angular/#/dialog/overview/) - Displays a modal window\n\n[ListScroller](https://www.lidorsystems.com/products/web/studio/samples/angular/#/listscroller/overview/) - Displays a scrollable item list in horizontal or vertical layout\n\n[NumericUpDown](https://www.lidorsystems.com/products/web/studio/samples/angular/#/numeric-updown/overview/) - Displays a numeric value and allows changes within a range of defined minimum and maximum values\n\n[Paginator](https://www.lidorsystems.com/support/articles/angular/paginator/paginator-component.aspx) - Allows you to divide the content in multiple views in single page\n\n[ProgressBar](https://www.lidorsystems.com/products/web/studio/samples/angular/#/progressbar/overview/) - Visualize the progression of an operation\n\n[RadioButton](https://www.lidorsystems.com/products/web/studio/samples/angular/#/radiobutton/overview/) - Represents a radio button\n\n[Rating](https://www.lidorsystems.com/products/web/studio/samples/angular/#/rating/overview/) - Visualizes ratings\n\n[Slider](https://www.lidorsystems.com/products/web/studio/samples/angular/#/slider/overview/) - Allows changes to a numeric value within a range of defined minimum and maximum values\n\n[Splitter](https://www.lidorsystems.com/support/articles/angular/splitter/splitter-component.aspx) - Allows you to resize two block elements during run-time\n\n[Toolbar](https://www.lidorsystems.com/products/web/studio/samples/angular/#/toolbar/overview/) - Displays a collection of different tool items and editors in one line\n\n[TreeView](https://www.lidorsystems.com/support/articles/angular/treeview/treeview-component.aspx) - Displays hierarchical data structures\n\n\n## Directives\n\n\u003cb\u003eDropDown\u003c/b\u003e - Represents a dropdown window\n\n[Frame](https://www.lidorsystems.com/support/articles/angular/frame/frame-component.aspx) - Places a grip handle that allows you to resize a container during run-time\n\n[Popover](https://www.lidorsystems.com/products/web/studio/samples/angular/#/popover/overview/) - Displays custom HTML content over specified element\n\n[Range](https://www.lidorsystems.com/support/articles/angular/range/range-component.aspx) - Allows you to set limits in which an element can resize during run-time\n\n\u003cb\u003eResize\u003c/b\u003e - Detects changes to the element size and fires notifications when it happens\n\n[Tooltip](https://www.lidorsystems.com/support/articles/angular/tooltip/tooltip-component.aspx) - Adds a tooltip to an element\n\n## Services\n\n\u003cb\u003eCommon\u003c/b\u003e - Includes a set of common functions usable in most applications\n\n\u003cb\u003eData\u003c/b\u003e - Includes a set of data related functions for different operations like: add/remove, search, etc.\n\n\u003cb\u003eDragDrop\u003c/b\u003e - Provides a way to use drag drop operations between custom components or elements.\n\n\u003cb\u003eFilter\u003c/b\u003e - Includes a set of related functions for filter operations\n\n\nAll components are inheritable, you can further extend functionalities of specific component by simple create a subclass of component main class. To get access to the TreeView component import the IntegralUITreeViewModule in your application. For other common components, import the IntegralUICommonModule.\n\n## Dependencies\n\nIntegralUI TreeView requires only the following library:\n\nAngular - v8.0 and above\n\n\n## DEMO\n\n[Online QuickStart App](https://www.lidorsystems.com/products/web/studio/samples/angular/) - An online demo of each component included\n\n\n## Installation\n\nInstall the repository by running\n\n```bash\nnpm install https://github.com/lidorsystems/integralui-treeview.git\n```\n\nOpen your application module and add a reference to the IntegralUIBaseListModule and IntegralUITreeViewModule\n\n```bash\nimport { IntegralUIBaseListModule } from 'node_modules/integralui-treeview/bin/integralui/integralui.baselist.module';\nimport { IntegralUITreeViewModule } from 'node_modules/integralui-treeview/bin/integralui/integralui.treeview.module';\n\n@NgModule({\n  imports:      [ IntegralUIBaseListModule, IntegralUITreeViewModule ],\n  declarations: [ AppComponent ],\n  bootstrap:    [ AppComponent ]\n})\nexport class AppModule { }\n```\n\u003cb\u003eNote\u003c/b\u003e   Common components like Button, Calendar, CheckBox etc. are included in IntegralUICommonModule. In order to use them, you also need to import the module from '~ ... integralui/integralui.common.module.ts' file. Depending on the component, the standard FormsModule from Angular framework may also be required to import.\u003c/p\u003e \n\n\u003cb\u003eNote\u003c/b\u003e   In order to use a specific component or directive in your application, follow the [guidelines from corresponding article](https://www.lidorsystems.com/support/help/web/angular/guide/articles.aspx). You can find a separate article available for each component or directive.\n\n### Angular CLI\n\nAfter installation, in angular.json under styles section add this code line:\n\n```bash\n\"node_modules/integralui-treeview/bin/integralui/css/integralui.treeview.module.css\"\n```\n\nTo apply a theme, also add code line for corresonding theme file. For example to use the Office theme, add this:\n```bash\n\"node_modules/integralui-treeview/bin/integralui/themes/integralui.themes.office.css\"\n```\n\n\u003cb\u003eNote\u003c/b\u003e   You can choose a theme from available themes located at '~ ... /integralui/themes' folder.\n\n\nTo include resources that are used by IntegralUI components in your project during build, you need to:\n1. Under assets folder create a subfolder named integralui\n2. Copy/Paste the node_modules/integralui-treeview/bin/integralui/resources folder to it\n3. Add the following code under \u003cb\u003eassets\u003c/b\u003e section in angular.json file:\n\n```bash\n\"src/assets/integralui/resources\"\n```\nThen you can access these resources by specifing its location in your project CSS files. For example:\n\n```bash\n.some-class\n{\n    background-image: url(src/assets/integralui/resources/computer.png).\n}\n```\n\n\u003cb\u003eNote\u003c/b\u003e   This is required because Angular compiler cannot detect resources that are outside the /src section of your app. It is needed if you are using resources that are part of IntegralUI Web, in your application.\n\n### Creating Custom Styles for IntegralUI Components\n\nWhen you create custom styles or changes to built-in CSS classes of IntegralUI components, placed for example within app.component.css file, make sure ViewEncapsulation is set to None. This allows to override default settings from corresponding component css file. For example:\n\n\u003cb\u003eapp.component.ts\u003c/b\u003e\n\n```bash\nimport { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css'],\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n}\n```\n\n\u003cb\u003eapp.component.css\u003c/b\u003e\n\n```bash\n.iui-treeview\n{\n  width: 400px;\n  height: 300px;\n}\n```\n\nIn this example, the TreeView component will have its width and height set from within the app.component. \n\n\u003cb\u003eNote\u003c/b\u003e   Changes to ViewEncapsulation set to None is avoidable, if you create your own CSS style sheet and include it in angular.json file under styles section. Like it is explained above for general IntegralUI styles.\n\n## QuickStart App\n\nThere is a demo application with source code that contains samples for each component included. You can access this app from the [IntegralUI Web](https://github.com/lidorsystems/integralui-web) repository. It can help you to get started quickly with learning about the components and write tests immediatelly.\n\nIn order to start this application, you only need to install the latest Angular library. Open the nodejs command prompt, go to application directory and type:\n\n```bash\n    npm install\n```\nAfter installation completes, start the application by typing:\n\n```bash\n    ng serve --open\n```\n\nThe application will start displaying the main window with links to all components included. Each component window contains a demo and description about the component functionality. You can checkout the sample source code (located under integralui-web/quickstart/src/app/samples subfolder) for more information on the sample and component used.\n\n\n## Release Notes\n\nThis is Trial version of the product. All features are fully functional, except that each component displays a pop-up trial window.\n\n## License Information\n\nYou may use this version for the limited purposes of demonstrations, trials or design-time evaluations.\n\nThis project has been released under the IntegralUI Web License, and may not be used except in compliance with the License.\nA copy of the License should have been installed in the product's root installation directory or it can be found here: [License Agreement](https://www.lidorsystems.com/products/web/treeview/license-agreement.aspx).\n\nThis SOFTWARE is provided \"AS IS\", WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language governing rights and limitations under the License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flidorsystems%2Fintegralui-treeview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flidorsystems%2Fintegralui-treeview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flidorsystems%2Fintegralui-treeview/lists"}