summaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/checklist.component.exp.ts
diff options
context:
space:
mode:
Diffstat (limited to 'stories/ng2-component-lab/checklist.component.exp.ts')
-rw-r--r--stories/ng2-component-lab/checklist.component.exp.ts213
1 files changed, 213 insertions, 0 deletions
diff --git a/stories/ng2-component-lab/checklist.component.exp.ts b/stories/ng2-component-lab/checklist.component.exp.ts
new file mode 100644
index 0000000..4700a74
--- /dev/null
+++ b/stories/ng2-component-lab/checklist.component.exp.ts
@@ -0,0 +1,213 @@
+import { experimentOn } from '@islavi/ng2-component-lab';
+import { ChecklistItemModel } from "../../src/angular/checklist/models/ChecklistItem";
+import { ChecklistModel } from "../../src/angular/checklist/models/Checklist";
+
+const styleCode = 'h5{color:red;} pre{background-color: #d1d1d1; padding: 10px;}';
+const checklistValuesExample1 = [];
+
+const checkListExample1: ChecklistModel = new ChecklistModel(checklistValuesExample1,
+ [new ChecklistItemModel('apple'),
+ new ChecklistItemModel('banana'),
+ new ChecklistItemModel('orange')]);
+
+const checklistValuesExample2 = [];
+const checkListExample2: ChecklistModel = new ChecklistModel(checklistValuesExample2,
+ [new ChecklistItemModel('apple', false, false, null, 0),
+ new ChecklistItemModel('banana', false, false, null, 1),
+ new ChecklistItemModel('orange', false, false, null, 2)]);
+
+const checklistValuesExample3 = [];
+const checkListExample3: ChecklistModel = new ChecklistModel(checklistValuesExample3,
+ [new ChecklistItemModel('apple', false, true),
+ new ChecklistItemModel('banana'),
+ new ChecklistItemModel('orange', false, true)]);
+
+const checklistValuesExample4 = [];
+const checkListExample4: ChecklistModel = new ChecklistModel(checklistValuesExample4,
+ [new ChecklistItemModel('apple', true, true),
+ new ChecklistItemModel('banana', true),
+ new ChecklistItemModel('orange')]);
+
+const checklistValuesExample5 = [];
+const innerChecklistValues = [];
+const checkListExample5: ChecklistModel = new ChecklistModel(checklistValuesExample5,
+ [new ChecklistItemModel('apple', false, false,
+ new ChecklistModel(innerChecklistValues,
+ [new ChecklistItemModel('red'), new ChecklistItemModel('green'), new ChecklistItemModel('yellow')])),
+ new ChecklistItemModel('banana'),
+ new ChecklistItemModel('orange')]);
+
+const checklistFirstLevelValuesExample6 = [];
+const checklistSecondLevelValuesExample6 = [];
+const checklistThirdLevelValuesExample6 = [];
+const checkListExample6: ChecklistModel = new ChecklistModel(checklistFirstLevelValuesExample6,
+ [new ChecklistItemModel('1', false, false,
+ new ChecklistModel(checklistSecondLevelValuesExample6, [new ChecklistItemModel('1.1'),
+ new ChecklistItemModel('1.2', false, false, new ChecklistModel(checklistThirdLevelValuesExample6, [new ChecklistItemModel('1.2.1'),
+ new ChecklistItemModel('1.2.2'),
+ new ChecklistItemModel('1.2.3')])),
+ new ChecklistItemModel('1.3')])),
+ new ChecklistItemModel('2'),
+ new ChecklistItemModel('3')]);
+
+export default experimentOn('Checklist')
+ .group("Checklist",[
+ {
+ id: 'checklist',
+ showSource: true,
+ context: {
+ checklistModel: checkListExample1,
+ checklistValues: checklistValuesExample1
+ },
+ styles: [styleCode],
+ title: 'Checklist',
+ description: `
+ <pre>
+ <h5>The checklistModel parameter:</h5>
+ const checklistValues = [];
+ const checklistModel: ChecklistModel =
+ new ChecklistModel(checklistValues,
+ [new ChecklistItemModel('apple'),
+ new ChecklistItemModel('banana'),
+ new ChecklistItemModel('orange')]);
+ </pre>
+ `,
+ template: `
+ <span>Selected values: {{checklistValues.toString()}}</span>
+ <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
+ `,
+ },
+ {
+ id: 'checklistWithValues',
+ showSource: true,
+ context: {
+ checklistModel: checkListExample2,
+ checklistValues: checklistValuesExample2
+ },
+ styles: [styleCode],
+ title: 'Checklist with values',
+ description: `
+ <pre>
+ <h5>The checklistModel parameter:</h5>
+ const checklistValues = [];
+ const checklistModel: ChecklistModel = new ChecklistModel(checklistValues,
+ [new ChecklistItemModel('apple', false, false, null, 0),
+ new ChecklistItemModel('banana', false, false, null, 1),
+ new ChecklistItemModel('orange', false, false, null, 2)]);
+ </pre>
+ `,
+ template: `
+ <span>Selected values: {{checklistValues.toString()}}</span>
+ <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
+ `
+ },
+ {
+ id: 'checklistWithSomeCheckedItems',
+ title: 'Checklist with some checked items',
+ showSource: true,
+ context: {
+ checklistModel: checkListExample3,
+ checklistValues: checklistValuesExample3
+ },
+ styles: [styleCode],
+ description: `
+ <pre><h5>The checklistModel parameter:</h5>
+ const checklistValues = [];
+ const checklistModel: ChecklistModel = new ChecklistModel(checklistValues,
+ [new ChecklistItemModel('apple', false, true),
+ new ChecklistItemModel('banana'),
+ new ChecklistItemModel('orange', false, true)]);
+ </pre>
+ `,
+ template: `
+ <span>Selected values: {{checklistValues.toString()}}</span>
+ <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
+ `
+ },
+ {
+ id: 'checklistWithSomeDisabledItems',
+ title: 'Checklist with some disabled items',
+ showSource: true,
+ context: {
+ checklistModel: checkListExample4,
+ checklistValues: checklistValuesExample4
+ },
+ styles: [styleCode],
+ description: `
+ <pre><h5>The checklistModel parameter:</h5>
+ const checklistValues = [];
+ const checklistModel: ChecklistModel = new ChecklistModel(checklistValues,
+ [new ChecklistItemModel('apple', true, true),
+ new ChecklistItemModel('banana', true),
+ new ChecklistItemModel('orange')]);
+ </pre>
+ `,
+ template: `
+ <span>Selected values: {{checklistValues.toString()}}</span>
+ <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
+ `
+ },
+ {
+ id: 'twoLevelsChecklist',
+ title: 'Multi-levels checklist',
+ showSource: true,
+ context: {
+ checklistModel: checkListExample5,
+ checklistValues: checklistValuesExample5,
+ innerChecklistValues: innerChecklistValues
+ },
+ styles: [styleCode],
+ description: `
+ <pre>
+ <h5>The checklistModel parameter:</h5>
+ const checklistValues = [];
+ const innerChecklistValues = [];
+ const checklistModel: ChecklistModel = new ChecklistModel(checklistValues,
+ [new ChecklistItemModel('apple', false, false,new ChecklistModel(innerChecklistValues,[new ChecklistItemModel('red'),
+ new ChecklistItemModel('green'),
+ new ChecklistItemModel('yellow')])),
+ new ChecklistItemModel('banana'),
+ new ChecklistItemModel('orange')]);</pre>
+ `,
+ template: `
+ <div>Selected values: {{checklistValues.toString()}}</div>
+ <div>Inner checklist selected values: {{innerChecklistValues.toString()}}</div>
+ <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
+ `
+ },
+ {
+ id: 'multiLevelsChecklist',
+ title: 'Multi-levels checklist',
+ showSource: true,
+ context: {
+ checklistModel: checkListExample6,
+ checklistFirstLevelValues: checklistFirstLevelValuesExample6,
+ checklistSecondLevelValues: checklistSecondLevelValuesExample6,
+ checklistThirdLevelValues: checklistThirdLevelValuesExample6
+ },
+ styles: [styleCode],
+ description: `
+ <pre><h5>The checklistModel parameter:</h5>
+ const checklistFirstLevelValues = [];
+ const checklistSecondLevelValues = [];
+ const checklistThirdLevelValues = [];
+ const checklistModel: ChecklistModel = new ChecklistModel(checklistFirstLevelValues,
+ [new ChecklistItemModel('1', false, false,
+ new ChecklistModel(checklistSecondLevelValues, [new ChecklistItemModel('1.1'),
+ new ChecklistItemModel('1.2', false, false,
+ new ChecklistModel(checklistThirdLevelValues, [new ChecklistItemModel('1.2.1'),
+ new ChecklistItemModel('1.2.2'),
+ new ChecklistItemModel('1.2.3')])),
+ new ChecklistItemModel('1.3')])),
+ new ChecklistItemModel('2'),
+ new ChecklistItemModel('3')]);
+ </pre>
+ `,
+ template: `
+ <div>Selected values: {{checklistFirstLevelValues.toString()}}</div>
+ <div>Second level checklist selected values: {{checklistSecondLevelValues.toString()}}</div>
+ <div>Third level checklist selected values: {{checklistThirdLevelValues.toString()}}</div>
+ <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
+ `
+ }
+ ]);