@progress/kendo-themes-html 7.0.2-dev.4 → 7.0.2

package/src/multiselecttree/tests/multiselecttree-opened.tsx

@@ -1,10 +1,5 @@
+import { MultiSelectTreeFiltering, MultiSelectTreePopup } from '..';
 import { Chip, ChipAction } from '../../chip';
-import { MultiSelectTree } from '..';
-import { Checkbox } from '../../checkbox';
-import { Textbox } from '../../textbox';
-import { Icon } from '../../icon';
-import { Treeview, TreeviewGroup, TreeviewItem } from '../../treeview';
-
 
 const styles = `
     #test-area {
@@ -27,92 +22,36 @@ export default () =>(
 
             <div>Opened</div>
             <div>
-                <MultiSelectTree opened
-                    tags={(
-                        <>
-                            <Chip text="Furniture" actions={ <ChipAction type="remove"/> } />
-                        </>
-                    )}
-                    popup={(
-                        <>
-                            <div className="k-list-filter">
-                                <Textbox
-                                    prefix={
-                                        <>
-                                            <Icon icon="search" />
-                                        </>
-                                    }
-                                />
-                            </div>
-                            <div className="k-check-all">
-                                <Checkbox/>
-                                <span className="k-checkbox-label">
-                                    Check all
-                                </span>
-                            </div>
-                            <Treeview>
-                                <TreeviewItem text="Furniture" showCheckbox checked>
-                                    <TreeviewGroup>
-                                        <TreeviewItem text="Child 1" showCheckbox />
-                                        <TreeviewItem text="Child 2" showCheckbox />
-                                        <TreeviewItem text="Child 3" showCheckbox />
-                                    </TreeviewGroup>
-                                </TreeviewItem>
-                                <TreeviewItem text="Decor" showCheckbox>
-                                    <TreeviewGroup>
-                                        <TreeviewItem text="Child 1" showCheckbox />
-                                        <TreeviewItem text="Child 2" showCheckbox />
-                                        <TreeviewItem text="Child 3" showCheckbox />
-                                    </TreeviewGroup>
-                                </TreeviewItem>
-                            </Treeview>
-                        </>
-                    )}
-                />
+                <MultiSelectTreePopup tags={(
+                    <>
+                        <Chip text="Furniture" actions={<ChipAction type="remove" />} />
+                    </>
+                )}/>
+            </div>
+            <div>
+                <MultiSelectTreePopup tags={(
+                    <>
+                        <Chip text="Furniture" actions={<ChipAction type="remove" />} />
+                    </>
+                )}
+                dir="rtl"/>
+            </div>
+
+            <div>Filtering</div>
+            <div>
+                <MultiSelectTreeFiltering tags={(
+                    <>
+                        <Chip text="Furniture" actions={<ChipAction type="remove" />} />
+                    </>
+                )}/>
             </div>
             <div>
-                <MultiSelectTree opened dir="rtl"
-                    tags={(
-                        <>
-                            <Chip text="Furniture" actions={ <ChipAction type="remove"/> } />
-                        </>
-                    )}
-                    popup={(
-                        <>
-                            <div className="k-list-filter">
-                                <Textbox
-                                    prefix={
-                                        <>
-                                            <Icon icon="search" />
-                                        </>
-                                    }
-                                />
-                            </div>
-                            <div className="k-check-all">
-                                <Checkbox/>
-                                <span className="k-checkbox-label">
-                                    Check all
-                                </span>
-                            </div>
-                            <Treeview dir="rtl">
-                                <TreeviewItem text="Furniture" showCheckbox checked>
-                                    <TreeviewGroup>
-                                        <TreeviewItem text="Child 1" showCheckbox />
-                                        <TreeviewItem text="Child 2" showCheckbox />
-                                        <TreeviewItem text="Child 3" showCheckbox />
-                                    </TreeviewGroup>
-                                </TreeviewItem>
-                                <TreeviewItem text="Decor" showCheckbox>
-                                    <TreeviewGroup>
-                                        <TreeviewItem text="Child 1" showCheckbox />
-                                        <TreeviewItem text="Child 2" showCheckbox />
-                                        <TreeviewItem text="Child 3" showCheckbox />
-                                    </TreeviewGroup>
-                                </TreeviewItem>
-                            </Treeview>
-                        </>
-                    )}
-                />
+                <MultiSelectTreeFiltering tags={(
+                    <>
+                        <Chip text="Furniture" actions={<ChipAction type="remove" />} />
+                    </>
+                )}
+                dir="rtl"/>
             </div>
         </div>
     </>

package/src/multiselecttree/tests/multiselecttree-outline.tsx

@@ -1,5 +1,5 @@
 import { Chip, ChipAction } from '../../chip';
-import { MultiSelectTree } from '../../multiselecttree';
+import { MultiSelectTree, MultiSelectTreeNormal, MultiSelectTreeArrowButton, MultiSelectTreeValue } from '..';
 
 
 const styles = `
@@ -14,158 +14,64 @@ export default () =>(
         <div id="test-area" className="k-d-grid">
 
             <span></span>
-            <span>MultiSelectTree Outline</span>
-            <span>MultiSelectTree Outline RTL</span>
+            <span>MultiSelectTree</span>
+            <span>MultiSelectTree RTL</span>
 
-            <div>Empty</div>
+            <div>empty</div>
             <div>
-                <MultiSelectTree fillMode="outline" placeholder="MultiSelectTree..." />
+                <MultiSelectTreeNormal fillMode="outline" placeholder="MultiSelectTree..." />
             </div>
             <div dir="rtl">
-                <MultiSelectTree fillMode="outline" placeholder="MultiSelectTree..." />
+                <MultiSelectTreeNormal fillMode="outline" placeholder="MultiSelectTree..." />
             </div>
 
-            <div>Arrow button</div>
+            <div>arrow button</div>
             <div>
-                <MultiSelectTree fillMode="outline" showArrowButton placeholder="MultiSelectTree with arrow button" />
+                <MultiSelectTreeArrowButton fillMode="outline" showArrowButton placeholder="MultiSelectTree with arrow button" />
             </div>
             <div dir="rtl">
-                <MultiSelectTree fillMode="outline" showArrowButton placeholder="MultiSelectTree with arrow button" />
+                <MultiSelectTreeArrowButton fillMode="outline" showArrowButton placeholder="MultiSelectTree with arrow button" />
             </div>
 
-            <div>Normal</div>
-            <div>
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
-                    )}
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
-                    )}
-                />
-            </div>
-
-            <div>Hover</div>
-            <div>
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    hover
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    hover
-                />
-            </div>
-
-            <div>Focus</div>
-            <div>
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
-                    )}
-                    focus
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
-                    )}
-                    focus
-                />
-            </div>
-
-            <div>Disabled</div>
-            <div>
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    disabled
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    disabled
-                />
-            </div>
-
-            <div>Invalid</div>
-            <div>
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                />
-            </div>
-
-            <div>Invalid + Focus</div>
-            <div>
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                    focus
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree fillMode="outline"
-                    tags={(
-                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                    focus
-                />
-            </div>
+            {[ 'normal', ...MultiSelectTree.states ].map((state) => (
+                <>
+                    <div>{state}</div>
+                    <div>
+                        <MultiSelectTreeValue fillMode="outline" { ...{ [state]: true }}>{state}</MultiSelectTreeValue>
+                    </div>
+                    <div dir="rtl">
+                        <MultiSelectTreeValue fillMode="outline" { ...{ [state]: true }}>{state}</MultiSelectTreeValue>
+                    </div>
+                </>
+            ))}
 
-            <div>Loading</div>
+            <div>invalid + focus</div>
             <div>
-                <MultiSelectTree fillMode="outline" placeholder="Loading..." loading/>
+                <MultiSelectTreeValue fillMode="outline" invalid focus>invalid + focus</MultiSelectTreeValue>
             </div>
             <div dir="rtl">
-                <MultiSelectTree fillMode="outline" placeholder="Loading..." loading />
+                <MultiSelectTreeValue fillMode="outline" invalid focus>invalid + focus</MultiSelectTreeValue>
             </div>
 
-            <div>Multi Line + Overflow</div>
+            <div>multi line + overflow</div>
             <div>
-                <MultiSelectTree fillMode="outline"
+                <MultiSelectTreeNormal
+                    fillMode="outline"
                     tags={(
                         <>
-                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
-                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="multi-line + overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
                         </>
                     )}
                 />
             </div>
             <div dir="rtl">
-                <MultiSelectTree fillMode="outline"
+                <MultiSelectTreeNormal
+                    fillMode="outline"
                     tags={(
                         <>
-                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
-                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="multi-line + overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
                         </>
                     )}
                 />

package/src/multiselecttree/tests/multiselecttree-size-rounded.tsx

@@ -0,0 +1,38 @@
+import { Chip, ChipAction } from '../../chip';
+import { MultiSelectTree, MultiSelectTreeNormal } from '..';
+
+
+const styles = `
+    #test-area {
+        grid-template-columns: 120px repeat(3, 1fr);
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <span><small>rounded / size</small></span>
+            <span>small</span>
+            <span>medium</span>
+            <span>large</span>
+
+            { MultiSelectTree.options.rounded.map((rounded) => (
+                <>
+                    <span>{ rounded }</span>
+                    {MultiSelectTree.options.size.map((size) => (
+                        <MultiSelectTreeNormal
+                            size={size}
+                            rounded={rounded}
+                            tags={(
+                                <>
+                                    <Chip text="Chip Text" rounded={rounded} size={size} actions={ <ChipAction type="remove"/> } />
+                                </>
+                            )}
+                        />
+                    ))}
+                </>
+            ))}
+        </div>
+    </>
+);

package/src/multiselecttree/tests/multiselecttree-solid.tsx

@@ -0,0 +1,79 @@
+import { Chip, ChipAction } from '../../chip';
+import { MultiSelectTree, MultiSelectTreeNormal, MultiSelectTreeArrowButton, MultiSelectTreeValue } from '..';
+
+
+const styles = `
+    #test-area {
+        grid-template-columns: 160px repeat(2, 300px);
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+
+            <span></span>
+            <span>MultiSelectTree</span>
+            <span>MultiSelectTree RTL</span>
+
+            <div>empty</div>
+            <div>
+                <MultiSelectTreeNormal placeholder="MultiSelectTree..." />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTreeNormal placeholder="MultiSelectTree..." />
+            </div>
+
+            <div>arrow button</div>
+            <div>
+                <MultiSelectTreeArrowButton showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTreeArrowButton showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+
+            {[ 'normal', ...MultiSelectTree.states ].map((state) => (
+                <>
+                    <div>{state}</div>
+                    <div>
+                        <MultiSelectTreeValue { ...{ [state]: true }}>{state}</MultiSelectTreeValue>
+                    </div>
+                    <div dir="rtl">
+                        <MultiSelectTreeValue { ...{ [state]: true }}>{state}</MultiSelectTreeValue>
+                    </div>
+                </>
+            ))}
+
+            <div>invalid + focus</div>
+            <div>
+                <MultiSelectTreeValue invalid focus>invalid + focus</MultiSelectTreeValue>
+            </div>
+            <div dir="rtl">
+                <MultiSelectTreeValue invalid focus>invalid + focus</MultiSelectTreeValue>
+            </div>
+
+            <div>multi line + overflow</div>
+            <div>
+                <MultiSelectTreeNormal
+                    tags={(
+                        <>
+                            <Chip text="multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="multi-line + overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTreeNormal
+                    tags={(
+                        <>
+                            <Chip text="multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="multi-line + overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+        </div>
+    </>
+);

package/src/notification/index.tsx

@@ -1,2 +1,6 @@
 export * from './notification.spec';
 export * from './notification-action';
+export * from './templates/icon-notification';
+export * from './templates/icon-notification-closable';
+export * from './templates/notification-closable';
+export * from './templates/notification-normal';

package/src/notification/templates/icon-notification-closable.tsx

@@ -0,0 +1,10 @@
+import { Notification, NotificationAction } from "..";
+
+export const IconNotificationClosable = (props) => (
+    <Notification
+        closable={true}
+        text="Notification"
+        icon="exclamation-circle"
+        actions={<NotificationAction type="close" />}
+        {...props} />
+);

package/src/notification/templates/icon-notification.tsx

@@ -0,0 +1,9 @@
+import { Notification } from "..";
+
+export const IconNotification = (props) => (
+    <Notification
+        text="Notification"
+        icon="exclamation-circle"
+        {...props}
+    />
+);

package/src/notification/templates/notification-closable.tsx

@@ -0,0 +1,9 @@
+import { Notification, NotificationAction } from "..";
+
+export const NotificationClosable = (props) => (
+    <Notification
+        closable={true}
+        text="Notification"
+        actions={<NotificationAction type="close" />}
+        {...props} />
+);

package/src/notification/templates/notification-normal.tsx

@@ -0,0 +1,8 @@
+import { Notification } from "..";
+
+export const NotificationNormal = (props) => (
+    <Notification
+        text="Notification"
+        {...props}
+    />
+);

package/src/notification/tests/notification-angular-colors.tsx

@@ -0,0 +1,28 @@
+import { Notification, NotificationClosable } from '../../notification';
+
+
+const styles = `
+    #test-area {
+        justify-items: start;
+    }
+
+    .k-notification-container {
+        margin: 0;
+    }
+`;
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            {Notification.options.themeColor.map((color) => (
+                <div>
+                    <div className="k-notification-container">
+                        <NotificationClosable themeColor={color} text={`${color} notification`} />
+                    </div>
+                </div>
+            ))}
+
+        </div>
+    </>
+);