@skyux/angular-tree-component 9.0.0-alpha.0 → 9.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +20 -20
- package/package.json +6 -6
package/documentation.json
CHANGED
|
@@ -1503,24 +1503,24 @@
|
|
|
1503
1503
|
},
|
|
1504
1504
|
"codeExamples": [
|
|
1505
1505
|
{
|
|
1506
|
-
"fileName": "angular-tree-demo
|
|
1507
|
-
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/
|
|
1508
|
-
"rawContents": "
|
|
1506
|
+
"fileName": "angular-tree-demo.module.ts",
|
|
1507
|
+
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/inline-help/angular-tree-demo.module.ts",
|
|
1508
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { TreeModule } from '@blackbaud/angular-tree-component';\nimport { SkyAngularTreeModule } from '@skyux/angular-tree-component';\nimport { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyFluidGridModule } from '@skyux/layout';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AngularTreeDemoComponent } from './angular-tree-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyAngularTreeModule,\n SkyCheckboxModule,\n SkyDropdownModule,\n SkyFluidGridModule,\n SkyRadioModule,\n TreeModule,\n SkyHelpInlineModule,\n ],\n declarations: [AngularTreeDemoComponent],\n exports: [AngularTreeDemoComponent],\n})\nexport class AngularTreeDemoModule {}\n"
|
|
1509
1509
|
},
|
|
1510
1510
|
{
|
|
1511
|
-
"fileName": "angular-tree-demo.component.
|
|
1512
|
-
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/
|
|
1513
|
-
"rawContents": "
|
|
1511
|
+
"fileName": "angular-tree-demo.component.ts",
|
|
1512
|
+
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/inline-help/angular-tree-demo.component.ts",
|
|
1513
|
+
"rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'app-angular-tree-component-demo',\n styleUrls: ['./angular-tree-demo.component.scss'],\n templateUrl: './angular-tree-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AngularTreeDemoComponent {\n public nodes = [\n {\n name: 'Animals',\n isExpanded: true,\n showHelp: true,\n children: [\n {\n name: 'Cats',\n isExpanded: true,\n showHelp: true,\n children: [\n { name: 'Burmese' },\n { name: 'Persian' },\n { name: 'Tabby' },\n ],\n },\n {\n name: 'Dogs',\n isExpanded: true,\n children: [\n {\n name: 'Beagle',\n showHelp: true,\n },\n { name: 'German shepherd' },\n { name: 'Labrador retriever' },\n ],\n },\n ],\n },\n ];\n\n public onActionClick(): void {\n alert('Help inline button clicked!');\n }\n}\n"
|
|
1514
1514
|
},
|
|
1515
1515
|
{
|
|
1516
1516
|
"fileName": "angular-tree-demo.component.scss",
|
|
1517
|
-
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/
|
|
1517
|
+
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/inline-help/angular-tree-demo.component.scss",
|
|
1518
1518
|
"rawContents": ".app-demo-container {\n border: 1px solid #cdcfd2;\n padding: 20px;\n\n .angular-tree-component {\n background: #fff;\n }\n}\n"
|
|
1519
1519
|
},
|
|
1520
1520
|
{
|
|
1521
|
-
"fileName": "angular-tree-demo.component.
|
|
1522
|
-
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/
|
|
1523
|
-
"rawContents": "
|
|
1521
|
+
"fileName": "angular-tree-demo.component.html",
|
|
1522
|
+
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/inline-help/angular-tree-demo.component.html",
|
|
1523
|
+
"rawContents": "<sky-angular-tree-wrapper>\n <tree-root [nodes]=\"nodes\" #tree>\n <ng-template\n let-index=\"index\"\n let-node\n let-templates=\"templates\"\n #treeNodeFullTemplate\n >\n <sky-angular-tree-node\n [index]=\"index\"\n [node]=\"node\"\n [templates]=\"templates\"\n >\n <sky-help-inline\n *ngIf=\"node.data.showHelp\"\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n </sky-angular-tree-node>\n </ng-template>\n </tree-root>\n</sky-angular-tree-wrapper>\n"
|
|
1524
1524
|
},
|
|
1525
1525
|
{
|
|
1526
1526
|
"fileName": "angular-tree-demo.module.ts",
|
|
@@ -1528,24 +1528,24 @@
|
|
|
1528
1528
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { TreeModule } from '@blackbaud/angular-tree-component';\nimport { SkyAngularTreeModule } from '@skyux/angular-tree-component';\nimport { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';\nimport { SkyFluidGridModule } from '@skyux/layout';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AngularTreeDemoComponent } from './angular-tree-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyAngularTreeModule,\n SkyCheckboxModule,\n SkyDropdownModule,\n SkyFluidGridModule,\n SkyRadioModule,\n TreeModule,\n ],\n declarations: [AngularTreeDemoComponent],\n exports: [AngularTreeDemoComponent],\n})\nexport class AngularTreeDemoModule {}\n"
|
|
1529
1529
|
},
|
|
1530
1530
|
{
|
|
1531
|
-
"fileName": "angular-tree-demo.component.
|
|
1532
|
-
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/
|
|
1533
|
-
"rawContents": "
|
|
1531
|
+
"fileName": "angular-tree-demo.component.ts",
|
|
1532
|
+
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/advanced/angular-tree-demo.component.ts",
|
|
1533
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n OnInit,\n ViewChild,\n} from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n ITreeOptions,\n ITreeState,\n TreeModel,\n TreeNode,\n} from '@blackbaud/angular-tree-component';\n\nimport { AngularTreeDemoNode } from './angular-tree-demo-node';\n\n@Component({\n selector: 'app-angular-tree-component-demo',\n styleUrls: ['./angular-tree-demo.component.scss'],\n templateUrl: './angular-tree-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AngularTreeDemoComponent implements OnInit {\n public demoOptions: FormGroup;\n\n public set enableCascading(value: boolean) {\n this.#resetSelection();\n this.treeOptions.useTriState = value;\n this.#_enableCascading = value;\n\n if (value) {\n this.selectLeafNodesOnly = false;\n }\n }\n\n public get enableCascading(): boolean {\n return this.#_enableCascading;\n }\n\n public readOnly = false;\n\n public selectedSelectMode = 'multiSelect';\n\n public set selectLeafNodesOnly(value: boolean) {\n this.#resetSelection();\n this.#_selectLeafNodesOnly = value;\n\n if (value) {\n this.enableCascading = false;\n }\n }\n\n public get selectLeafNodesOnly(): boolean {\n return this.#_selectLeafNodesOnly;\n }\n\n public selectSingle = false;\n\n public showContextMenus = false;\n\n public showToolbar = false;\n\n #_enableCascading = false;\n\n #_selectLeafNodesOnly = false;\n\n public treeOptions: ITreeOptions = {\n animateExpand: true,\n useTriState: false,\n };\n\n public dropdownItems: { name: string; disabled: boolean }[] = [\n { name: 'Insert an item at this level', disabled: false },\n { name: 'Insert an item under this level', disabled: false },\n { name: 'Move up', disabled: false },\n { name: 'Move down', disabled: false },\n { name: 'Move left', disabled: false },\n { name: 'Move right', disabled: false },\n { name: 'Edit', disabled: false },\n { name: 'Delete', disabled: false },\n ];\n\n public nodes: AngularTreeDemoNode[] = [\n {\n name: 'Animals',\n isExpanded: true,\n children: [\n {\n name: 'Cats',\n isExpanded: true,\n children: [\n { name: 'Burmese' },\n { name: 'Persian' },\n { name: 'Tabby' },\n ],\n },\n {\n name: 'Dogs',\n isExpanded: true,\n children: [\n { name: 'Beagle' },\n { name: 'German shepherd' },\n { name: 'Labrador retriever' },\n ],\n },\n ],\n },\n ];\n\n @ViewChild(TreeModel)\n public tree: TreeModel | undefined;\n\n #changeRef: ChangeDetectorRef;\n\n constructor(changeRef: ChangeDetectorRef, formBuilder: FormBuilder) {\n this.#changeRef = changeRef;\n\n this.demoOptions = formBuilder.group({\n treeMode: new FormControl('navigation'),\n selectMode: new FormControl('multiSelect'),\n selectLeafNodesOnly: new FormControl(),\n enableCascading: new FormControl(),\n showToolbar: new FormControl(),\n showContextMenus: new FormControl(),\n });\n }\n\n public ngOnInit(): void {\n this.demoOptions.valueChanges.subscribe((value) => {\n if (value.treeMode) {\n switch (value.treeMode) {\n case 'selection':\n this.readOnly = false;\n this.#enableSelection(true);\n break;\n\n case 'readOnly':\n this.readOnly = true;\n this.#enableSelection(false);\n break;\n\n case 'navigation':\n this.readOnly = false;\n this.#enableSelection(false);\n break;\n\n default:\n break;\n }\n }\n\n if (value.selectMode) {\n switch (value.selectMode) {\n case 'singleSelect':\n this.#resetSelection();\n this.selectSingle = true;\n this.enableCascading = false;\n break;\n\n case 'multiSelect':\n this.#resetSelection();\n this.selectSingle = false;\n this.enableCascading = false;\n break;\n\n default:\n break;\n }\n }\n\n if (value.enableCascading) {\n this.enableCascading = value.enableCascading;\n }\n\n if (value.selectLeafNodesOnly) {\n this.selectLeafNodesOnly = value.selectLeafNodesOnly;\n }\n\n this.#changeRef.markForCheck();\n });\n }\n\n public actionClicked(name: string, node: TreeNode): void {\n // Add custom actions here.\n alert(name + `: \"${node.data.name}\"`);\n }\n\n public onTreeStateChange(treeModel: ITreeState): void {\n // Watch for tree state changes here.\n console.log(treeModel);\n }\n\n #enableSelection(value: boolean): void {\n this.#resetSelection();\n this.treeOptions.useCheckbox = value;\n this.selectLeafNodesOnly = false;\n this.enableCascading = false;\n }\n\n #resetSelection(): void {\n if (this.tree) {\n this.tree.selectedLeafNodeIds = {};\n this.tree.activeNodeIds = {};\n }\n }\n}\n"
|
|
1534
1534
|
},
|
|
1535
1535
|
{
|
|
1536
1536
|
"fileName": "angular-tree-demo.component.scss",
|
|
1537
|
-
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/
|
|
1537
|
+
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/advanced/angular-tree-demo.component.scss",
|
|
1538
1538
|
"rawContents": ".app-demo-container {\n border: 1px solid #cdcfd2;\n padding: 20px;\n\n .angular-tree-component {\n background: #fff;\n }\n}\n"
|
|
1539
1539
|
},
|
|
1540
1540
|
{
|
|
1541
|
-
"fileName": "angular-tree-demo.component.
|
|
1542
|
-
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/
|
|
1543
|
-
"rawContents": "
|
|
1541
|
+
"fileName": "angular-tree-demo.component.html",
|
|
1542
|
+
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/advanced/angular-tree-demo.component.html",
|
|
1543
|
+
"rawContents": "<div class=\"sky-margin-stacked-xl\">\n <!-- #region The following tree options are for demonstration purposes only. -->\n <form novalidate [formGroup]=\"demoOptions\">\n <sky-fluid-grid>\n <sky-row>\n <sky-column [screenSmall]=\"6\">\n <h4 id=\"sky-demo-modes\">Modes</h4>\n <sky-radio-group ariaLabel=\"Tree modes\" formControlName=\"treeMode\">\n <ul class=\"sky-list-unstyled\">\n <li>\n <sky-radio value=\"navigation\">\n <sky-radio-label> Navigation </sky-radio-label>\n </sky-radio>\n </li>\n <li>\n <sky-radio value=\"readOnly\">\n <sky-radio-label> Read-only </sky-radio-label>\n </sky-radio>\n </li>\n <li>\n <sky-radio value=\"selection\">\n <sky-radio-label> Selection </sky-radio-label>\n </sky-radio>\n </li>\n </ul>\n </sky-radio-group>\n <ul class=\"sky-list-unstyled\" style=\"margin: 10px 0 10px 20px\">\n <li>\n <sky-checkbox\n [disabled]=\"\n demoOptions.value.treeMode !== 'selection' || enableCascading\n \"\n formControlName=\"selectLeafNodesOnly\"\n >\n <sky-checkbox-label>\n Leaf-node selection only\n </sky-checkbox-label>\n </sky-checkbox>\n </li>\n <li>\n <sky-radio-group\n ariaLabel=\"Select modes\"\n formControlName=\"selectMode\"\n >\n <ul class=\"sky-list-unstyled\">\n <li>\n <sky-radio\n value=\"singleSelect\"\n [disabled]=\"demoOptions.value.treeMode !== 'selection'\"\n >\n <sky-radio-label> Single-select </sky-radio-label>\n </sky-radio>\n </li>\n <li>\n <sky-radio\n value=\"multiSelect\"\n [disabled]=\"demoOptions.value.treeMode !== 'selection'\"\n >\n <sky-radio-label> Multi-select </sky-radio-label>\n </sky-radio>\n <ul\n class=\"sky-list-unstyled\"\n style=\"margin: 10px 0 10px 20px\"\n >\n <li>\n <sky-checkbox\n formControlName=\"enableCascading\"\n [disabled]=\"\n demoOptions.value.treeMode !== 'selection' ||\n selectLeafNodesOnly ||\n selectSingle\n \"\n >\n <sky-checkbox-label>\n Enable cascading\n </sky-checkbox-label>\n </sky-checkbox>\n </li>\n </ul>\n </li>\n </ul>\n </sky-radio-group>\n </li>\n </ul>\n </sky-column>\n <sky-column [screenSmall]=\"6\">\n <ul class=\"sky-list-unstyled\">\n <li>\n <sky-checkbox formControlName=\"showToolbar\">\n <sky-checkbox-label> Include toolbar </sky-checkbox-label>\n </sky-checkbox>\n </li>\n <li>\n <sky-checkbox formControlName=\"showContextMenus\">\n <sky-checkbox-label> Include context menus </sky-checkbox-label>\n </sky-checkbox>\n </li>\n </ul>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </form>\n <!-- #endregion -->\n\n <div class=\"sky-padding-even-xl app-demo-container\">\n <sky-angular-tree-wrapper\n [readOnly]=\"readOnly\"\n [selectLeafNodesOnly]=\"selectLeafNodesOnly\"\n [selectSingle]=\"selectSingle\"\n [showToolbar]=\"demoOptions.value.showToolbar\"\n >\n <tree-root\n [nodes]=\"nodes\"\n [options]=\"treeOptions\"\n (stateChange)=\"onTreeStateChange($event)\"\n #tree\n >\n <ng-template\n let-index=\"index\"\n let-node\n let-templates=\"templates\"\n #treeNodeFullTemplate\n >\n <sky-angular-tree-node\n [index]=\"index\"\n [node]=\"node\"\n [templates]=\"templates\"\n >\n <sky-dropdown\n *ngIf=\"demoOptions.value.showContextMenus\"\n buttonType=\"context-menu\"\n >\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let item of dropdownItems\">\n <button\n type=\"button\"\n (click)=\"actionClicked(item.name, node)\"\n >\n {{ item.name }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-angular-tree-node>\n </ng-template>\n </tree-root>\n </sky-angular-tree-wrapper>\n </div>\n</div>\n"
|
|
1544
1544
|
},
|
|
1545
1545
|
{
|
|
1546
|
-
"fileName": "angular-tree-demo.
|
|
1547
|
-
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/
|
|
1548
|
-
"rawContents": "
|
|
1546
|
+
"fileName": "angular-tree-demo-node.ts",
|
|
1547
|
+
"filePath": "/projects/angular-tree-component/documentation/code-examples/angular-tree/advanced/angular-tree-demo-node.ts",
|
|
1548
|
+
"rawContents": "export interface AngularTreeDemoNode {\n name: string;\n isExpanded?: boolean;\n children?: AngularTreeDemoNode[];\n}\n"
|
|
1549
1549
|
}
|
|
1550
1550
|
]
|
|
1551
1551
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/angular-tree-component",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
"@angular/common": "^16.1.7",
|
|
34
34
|
"@angular/core": "^16.1.7",
|
|
35
35
|
"@blackbaud/angular-tree-component": "^1.0.0-alpha.0",
|
|
36
|
-
"@skyux/core": "9.0.0-alpha.
|
|
37
|
-
"@skyux/forms": "9.0.0-alpha.
|
|
38
|
-
"@skyux/i18n": "9.0.0-alpha.
|
|
39
|
-
"@skyux/indicators": "9.0.0-alpha.
|
|
40
|
-
"@skyux/layout": "9.0.0-alpha.
|
|
36
|
+
"@skyux/core": "9.0.0-alpha.1",
|
|
37
|
+
"@skyux/forms": "9.0.0-alpha.1",
|
|
38
|
+
"@skyux/i18n": "9.0.0-alpha.1",
|
|
39
|
+
"@skyux/indicators": "9.0.0-alpha.1",
|
|
40
|
+
"@skyux/layout": "9.0.0-alpha.1"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"tslib": "^2.5.0"
|