+
+
+
-
-
+
+
+
+
-
-
+
+
+
+
-
-
+
+
+
+
-
-
+
+
+
+
-
+
+
+
-
-
-
-
-
-
- {{ syncVal?.label }}
-
+
+
+
+
+
+
-
-
-
+ [(ngModel)]="syncVal"
+ [ngModelOptions]="{ standalone: true }">
+ {{ syncVal?.label }}
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss
index f902635d4..fe6f52680 100644
--- a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss
+++ b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss
@@ -1,9 +1,3 @@
-.tree-autocompletes-group {
- gap: 1.5rem;
- display: flex;
- flex-direction: column;
-}
-
.sync-val-example {
display: flex;
align-items: center;
diff --git a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts
index 679681b3c..db3aa9fed 100644
--- a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts
+++ b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts
@@ -7,16 +7,18 @@ import {
Validators
} from '@angular/forms';
import { CpsTreeAutocompleteComponent } from 'cps-ui-kit';
-
import ComponentData from '../../api-data/cps-tree-autocomplete.json';
import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { treeAutocompleteExamples } from './tree-autocomplete-page.examples';
@Component({
imports: [
CpsTreeAutocompleteComponent,
FormsModule,
ReactiveFormsModule,
- ComponentDocsViewerComponent
+ ComponentDocsViewerComponent,
+ CodeExampleComponent
],
selector: 'app-tree-autocomplete-page',
templateUrl: './tree-autocomplete-page.component.html',
@@ -24,6 +26,7 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
host: { class: 'composition-page' }
})
export class TreeAutocompletePageComponent implements OnInit {
+ readonly examples = treeAutocompleteExamples;
selectedItems = [
{
label: 'AttrB',
diff --git a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.examples.ts b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.examples.ts
new file mode 100644
index 000000000..f3d14b988
--- /dev/null
+++ b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.examples.ts
@@ -0,0 +1,269 @@
+const treeOptionsTs = `
+options = [
+ {
+ isDirectory: true, // RESERVED KEY
+ label: 'Dataset 1',
+ children: [
+ {
+ label: 'Attr1_1',
+ data: 'This is attribute 1 1',
+ attrType: 'struct',
+ children: [
+ {
+ label: 'AttrA',
+ desc: 'Attribute A'
+ },
+ {
+ label: 'AttrB',
+ info: 'AttrB',
+ attrType: 'number'
+ }
+ ]
+ },
+ {
+ label: 'Attr2_1',
+ data: 'This is attribute 2 1',
+ attrType: 'struct',
+ children: [
+ {
+ label: 'AttrC',
+ desc: 'C'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ isDirectory: true, // RESERVED KEY
+ label: 'Dataset 2',
+ children: [
+ {
+ label: 'Attr1_2',
+ data: 'attr1 data'
+ },
+ {
+ label: 'Attr2_2',
+ desc: 'attr2 desc'
+ },
+ {
+ label: 'Attr3_2',
+ data: 'attr3 data'
+ }
+ ]
+ },
+ {
+ isDirectory: true, // RESERVED KEY
+ label: 'Dataset 3',
+ children: [
+ {
+ label: 'Attr1_3',
+ data: 'attr1 data',
+ children: [
+ {
+ label: 'Attr1 A',
+ data: 'attr 1 a data',
+ attrType: 'decimal'
+ },
+ {
+ label: 'Attr1 B',
+ desc: 'Attr1 b desc'
+ }
+ ]
+ },
+ {
+ label: 'Attr2_3',
+ data: 'De Niro Movies',
+ attrType: 'struct',
+ children: [
+ {
+ label: 'Attr2 A',
+ data: 'attr2 a data',
+ description: 'attr2 a description'
+ }
+ ]
+ }
+ ]
+ }
+];`;
+
+export const treeAutocompleteExamples: Record<
+ string,
+ { html: string; ts?: string }
+> = {
+ requiredTreeAutocomplete: {
+ html: `
+
`,
+ ts: `
+private readonly _formBuilder = inject(UntypedFormBuilder);
+
+${treeOptionsTs.trim()}
+
+form!: UntypedFormGroup;
+
+ngOnInit(): void {
+ this.form = this._formBuilder.group({
+ requiredTreeAutocomplete: [
+ this.options[1].children[0],
+ [Validators.required]
+ ]
+ });
+}`
+ },
+
+ loadingTreeAutocomplete: {
+ html: `
+
+`,
+ ts: treeOptionsTs
+ },
+
+ disabledTreeAutocomplete: {
+ html: `
+
+`
+ },
+
+ multipleTreeAutocomplete: {
+ html: `
+
+`,
+ ts: `
+${treeOptionsTs.trim()}
+
+selectedItems = [
+ {
+ label: 'AttrB',
+ info: 'AttrB',
+ attrType: 'number'
+ }
+];`
+ },
+
+ virtualScrollTreeAutocomplete: {
+ html: `
+
+`,
+ ts: treeOptionsTs
+ },
+
+ nonClosableChipsTreeAutocomplete: {
+ html: `
+
`,
+ ts: treeOptionsTs
+ },
+
+ prefixIconTreeAutocomplete: {
+ html: `
+
+`,
+ ts: treeOptionsTs
+ },
+
+ twoWayBindingTreeAutocomplete: {
+ html: `
+
+
+
+ {{ syncVal?.label }}
+
`,
+ ts: `
+${treeOptionsTs.trim()}
+
+syncVal: any = null;`
+ },
+
+ underlinedTreeAutocomplete: {
+ html: `
+
+`,
+ ts: treeOptionsTs
+ },
+
+ borderlessTreeAutocomplete: {
+ html: `
+
+`,
+ ts: treeOptionsTs
+ }
+};
diff --git a/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.html b/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.html
index 1f96f4b6a..6e8dae9b9 100644
--- a/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.html
+++ b/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.html
@@ -1,7 +1,10 @@
-