@progress/kendo-themes-html 6.7.0-dev.0 → 6.7.0-dev.2

package/src/multiselect/tests/multiselect-size.tsx

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

package/src/multiselect/tests/multiselect.tsx

@@ -1,176 +0,0 @@
-import { Chip, ChipAction } from '../../chip';
-import { MultiSelect } from '../../multiselect';
-
-
-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>MultiSelect</span>
-            <span>MultiSelect RTL</span>
-
-            <div>Empty</div>
-            <div>
-                <MultiSelect placeholder="MultiSelect..." />
-            </div>
-            <div dir="rtl">
-                <MultiSelect placeholder="MultiSelect..." />
-            </div>
-
-            <div>Arrow button</div>
-            <div>
-                <MultiSelect showArrowButton placeholder="MultiSelect with arrow button" />
-            </div>
-            <div dir="rtl">
-                <MultiSelect showArrowButton placeholder="MultiSelect with arrow button" />
-            </div>
-
-            <div>Normal</div>
-            <div>
-                <MultiSelect
-                    tags={(
-                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
-                    )}
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelect
-                    tags={(
-                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
-                    )}
-                />
-            </div>
-
-            <div>Hover</div>
-            <div>
-                <MultiSelect
-                    tags={(
-                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    hover
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelect
-                    tags={(
-                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    hover
-                />
-            </div>
-
-            <div>Focus</div>
-            <div>
-                <MultiSelect
-                    tags={(
-                        <Chip text="Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    focus
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelect
-                    tags={(
-                        <Chip text="Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    focus
-                />
-            </div>
-
-            <div>Disabled</div>
-            <div>
-                <MultiSelect
-                    tags={(
-                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    disabled
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelect
-                    tags={(
-                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    disabled
-                />
-            </div>
-
-            <div>Invalid</div>
-            <div>
-                <MultiSelect
-                    tags={(
-                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelect
-                    tags={(
-                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                />
-            </div>
-
-            <div>Invalid + Focus</div>
-            <div>
-                <MultiSelect
-                    tags={(
-                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                    focus
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelect
-                    tags={(
-                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                    focus
-                />
-            </div>
-
-            <div>Loading</div>
-            <div>
-                <MultiSelect placeholder="Loading..." loading/>
-            </div>
-            <div dir="rtl">
-                <MultiSelect placeholder="Loading..." loading />
-            </div>
-
-            <div>Multi Line + Overflow</div>
-            <div>
-                <MultiSelect
-                    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">
-                <MultiSelect
-                    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/pager/tests/pager-responsive.tsx

@@ -1,27 +0,0 @@
-import { Pager } from '../../pager';
-
-
-export default () =>(
-    <>
-        <div id="test-area" className="k-d-grid ">
-            <span>Large</span>
-            <Pager size="large" />
-            <span></span>
-            <Pager size="large" mobile="medium" />
-            <span></span>
-            <Pager size="large" mobile="small" />
-            <span>Medium</span>
-            <Pager />
-            <span></span>
-            <Pager mobile="medium" />
-            <span></span>
-            <Pager mobile="small" />
-            <span>Small</span>
-            <Pager size="small" />
-            <span></span>
-            <Pager size="small" mobile="medium" />
-            <span></span>
-            <Pager size="small" mobile="small" />
-        </div>
-    </>
-);

package/src/scrollview/tests/scrollview-angular.tsx

@@ -1,109 +0,0 @@
-import { Icon } from '../../icon';
-
-
-const style = `
-    .k-scrollview {
-        width: 100%;
-        height: 300px;
-    }
-
-    .k-scrollview { background: gray !important; }
-    .k-scrollview-dark { background: white !important; }
-    .k-scrollview-light { background: black !important; }
-`;
-
-export default () =>(
-    <>
-        <style>{style}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-3">
-
-            <span className="k-colspan-all k-col-span-full">Angular scrollview</span>
-
-            <span>Light mode</span>
-            <span>Normal</span>
-            <span>Dark mode</span>
-
-            <div className="k-widget k-scrollview k-scrollview-light">
-                <ul className="k-scrollview-wrap">
-                    <li style={{ transform: "translateX(-100%)" }}></li>
-                    <li style={{ transform: "translateX(0%)" }}></li>
-                    <li style={{ transform: "translateX(100%)" }}></li>
-                </ul>
-                <div className="k-scrollview-elements">
-                    <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
-                    </a>
-                    <a className="k-scrollview-next">
-                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
-                    </a>
-                    <div className="k-scrollview-nav-wrap">
-                        <ul className="k-scrollview-nav">
-                            <li className="k-link"></li>
-                            <li className="k-link k-primary"></li>
-                            <li className="k-link k-primary k-focus"></li>
-                            <li className="k-link k-focus"></li>
-                            <li className="k-link"></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <div className="k-widget k-scrollview">
-                <ul className="k-scrollview-wrap">
-                    <li style={{ transform: "translateX(-100%)" }}></li>
-                    <li style={{ transform: "translateX(0%)" }}></li>
-                    <li style={{ transform: "translateX(100%)" }}></li>
-                </ul>
-                <div className="k-scrollview-elements">
-                    <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
-                    </a>
-                    <a className="k-scrollview-next">
-                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
-                    </a>
-                    <div className="k-scrollview-nav-wrap">
-                        <ul className="k-scrollview-nav">
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.8)" }}></li>
-                            <li className="k-link"></li>
-                            <li className="k-link k-primary"></li>
-                            <li className="k-link"></li>
-                            <li className="k-link" style={{ transform: "scale(0.8)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <div className="k-widget k-scrollview k-scrollview-dark">
-                <ul className="k-scrollview-wrap">
-                    <li style={{ transform: "translateX(-100%)" }}></li>
-                    <li style={{ transform: "translateX(0%)" }}></li>
-                    <li style={{ transform: "translateX(100%)" }}></li>
-                </ul>
-                <div className="k-scrollview-elements">
-                    <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
-                    </a>
-                    <a className="k-scrollview-next">
-                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
-                    </a>
-                    <div className="k-scrollview-nav-wrap">
-                        <ul className="k-scrollview-nav">
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link"></li>
-                            <li className="k-link k-primary"></li>
-                            <li className="k-link"></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </>
-);

package/src/scrollview/tests/scrollview-blazor.tsx

@@ -1,120 +0,0 @@
-import { Icon } from '../../icon';
-
-
-const style = `
-    .k-scrollview {
-        width: 100%;
-        height: 300px;
-    }
-
-    .k-scrollview { background: gray !important; }
-    .k-scrollview-dark { background: white !important; }
-    .k-scrollview-light { background: black !important; }
-`;
-
-export default () =>(
-    <>
-        <style>{style}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-3">
-
-            <span className="k-colspan-all k-col-span-full">Blazor scrollview</span>
-
-            <span>Light mode</span>
-            <span>Normal</span>
-            <span>Dark mode</span>
-
-            <div className="k-widget k-scrollview k-scrollview-light">
-                <div className="k-scrollview-wrap k-scrollview-animate" style={{ ['--kendo-scrollview-views' as any]: "5", ['--kendo-scrollview-current' as any]: "3" }}>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"> </div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                </div>
-                <div className="k-scrollview-elements">
-                    <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
-                    </a>
-                    <a className="k-scrollview-next">
-                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
-                    </a>
-                    <div className="k-scrollview-nav-wrap">
-                        <ul className="k-scrollview-nav">
-                            <li className="k-link"></li>
-                            <li className="k-link k-primary"></li>
-                            <li className="k-link k-primary k-focus"></li>
-                            <li className="k-link k-focus"></li>
-                            <li className="k-link"></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <div className="k-widget k-scrollview">
-                <div className="k-scrollview-wrap k-scrollview-animate" style={{ ['--kendo-scrollview-views' as any]: "9", ['--kendo-scrollview-current' as any]: "5" }}>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"> </div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                </div>
-                <div className="k-scrollview-elements">
-                    <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
-                    </a>
-                    <a className="k-scrollview-next">
-                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
-                    </a>
-                    <div className="k-scrollview-nav-wrap">
-                        <ul className="k-scrollview-nav">
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.8)" }}></li>
-                            <li className="k-link"></li>
-                            <li className="k-link k-primary"></li>
-                            <li className="k-link"></li>
-                            <li className="k-link" style={{ transform: "scale(0.8)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <div className="k-widget k-scrollview k-scrollview-dark">
-                <div className="k-scrollview-wrap k-scrollview-animate" style={{ ['--kendo-scrollview-views' as any]: "7", ['--kendo-scrollview-current' as any]: "4" }}>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                    <div className="k-scrollview-view"></div>
-                </div>
-                <div className="k-scrollview-elements">
-                    <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
-                    </a>
-                    <a className="k-scrollview-next">
-                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
-                    </a>
-                    <div className="k-scrollview-nav-wrap">
-                        <ul className="k-scrollview-nav">
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link"></li>
-                            <li className="k-link k-primary"></li>
-                            <li className="k-link"></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </>
-);

package/src/split-button/tests/split-button-size.tsx

@@ -1,111 +0,0 @@
-import { SplitButton } from '../../split-button';
-
-
-const styles = `
-    #test-area {
-        max-width: 1240px;
-        grid-template-columns: 80px 320px 320px 1fr;
-    }
-    small,
-    section {
-        white-space: nowrap;
-    }
-`;
-
-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>
-
-            <span>null</span>
-            <section>
-                <SplitButton size="small" rounded={null}>Button</SplitButton>
-                <SplitButton size="small" rounded={null} icon="folder">Button</SplitButton>
-                <SplitButton size="small" rounded={null} icon="folder"></SplitButton>
-            </section>
-            <section>
-                <SplitButton size="medium" rounded={null}>Button</SplitButton>
-                <SplitButton size="medium" rounded={null} icon="folder">Button</SplitButton>
-                <SplitButton size="medium" rounded={null} icon="folder"></SplitButton>
-            </section>
-            <section>
-                <SplitButton size="large" rounded={null}>Button</SplitButton>
-                <SplitButton size="large" rounded={null} icon="folder">Button</SplitButton>
-                <SplitButton size="large" rounded={null} icon="folder"></SplitButton>
-            </section>
-
-            <span>small</span>
-            <section>
-                <SplitButton size="small" rounded="small">Button</SplitButton>
-                <SplitButton size="small" rounded="small" icon="folder">Button</SplitButton>
-                <SplitButton size="small" rounded="small" icon="folder"></SplitButton>
-            </section>
-            <section>
-                <SplitButton size="medium" rounded="small">Button</SplitButton>
-                <SplitButton size="medium" rounded="small" icon="folder">Button</SplitButton>
-                <SplitButton size="medium" rounded="small" icon="folder"></SplitButton>
-            </section>
-            <section>
-                <SplitButton size="large" rounded="small">Button</SplitButton>
-                <SplitButton size="large" rounded="small" icon="folder">Button</SplitButton>
-                <SplitButton size="large" rounded="small" icon="folder"></SplitButton>
-            </section>
-
-            <span>medium</span>
-            <section>
-                <SplitButton size="small">Button</SplitButton>
-                <SplitButton size="small" icon="folder">Button</SplitButton>
-                <SplitButton size="small" icon="folder"></SplitButton>
-            </section>
-            <section>
-                <SplitButton size="medium">Button</SplitButton>
-                <SplitButton size="medium" icon="folder">Button</SplitButton>
-                <SplitButton size="medium" icon="folder"></SplitButton>
-            </section>
-            <section>
-                <SplitButton size="large">Button</SplitButton>
-                <SplitButton size="large" icon="folder">Button</SplitButton>
-                <SplitButton size="large" icon="folder"></SplitButton>
-            </section>
-
-            <span>large</span>
-            <section>
-                <SplitButton size="small" rounded="large">Button</SplitButton>
-                <SplitButton size="small" rounded="large" icon="folder">Button</SplitButton>
-                <SplitButton size="small" rounded="large" icon="folder"></SplitButton>
-            </section>
-            <section>
-                <SplitButton size="medium" rounded="large">Button</SplitButton>
-                <SplitButton size="medium" rounded="large" icon="folder">Button</SplitButton>
-                <SplitButton size="medium" rounded="large" icon="folder"></SplitButton>
-            </section>
-            <section>
-                <SplitButton size="large" rounded="large">Button</SplitButton>
-                <SplitButton size="large" rounded="large" icon="folder">Button</SplitButton>
-                <SplitButton size="large" rounded="large" icon="folder"></SplitButton>
-            </section>
-
-            <span>full</span>
-            <section>
-                <SplitButton size="small" rounded="full">Button</SplitButton>
-                <SplitButton size="small" rounded="full" icon="folder">Button</SplitButton>
-                <SplitButton size="small" rounded="full" icon="folder"></SplitButton>
-            </section>
-            <section>
-                <SplitButton size="medium" rounded="full">Button</SplitButton>
-                <SplitButton size="medium" rounded="full" icon="folder">Button</SplitButton>
-                <SplitButton size="medium" rounded="full" icon="folder"></SplitButton>
-            </section>
-            <section>
-                <SplitButton size="large" rounded="full">Button</SplitButton>
-                <SplitButton size="large" rounded="full" icon="folder">Button</SplitButton>
-                <SplitButton size="large" rounded="full" icon="folder"></SplitButton>
-            </section>
-        </div>
-    </>
-);