@progress/kendo-themes-html 5.4.2-dev.1 → 5.4.2-dev.4

package/src/dropdownlist/dropdownlist.jsx

@@ -1,191 +0,0 @@
-import { globalDefaultProps } from '../component/index';
-import { Picker, PickerStatic, InputInnerSpanStatic } from '../input/index';
-import { InputValidationIconStatic, InputLoadingIconStatic, InputClearValueStatic } from '../input/index';
-import { ButtonStatic } from '../button/index';
-import { IconStatic } from '../icon/index';
-
-class DropdownList extends Picker {
-    render() {
-        return <DropdownListStatic {...this.props} />;
-    }
-}
-
-function DropdownListStatic(props) {
-
-    const {
-        className: ownClassName,
-
-        type,
-        value,
-        placeholder,
-        autocomplete,
-
-        showValue,
-        valueIcon,
-        valueIconName,
-        arrowIconName,
-
-        prefix,
-        suffix,
-
-        size,
-        rounded,
-
-        fillMode,
-
-        hover,
-        focus,
-        valid,
-        invalid,
-        required,
-        disabled,
-
-        aria,
-        legacy,
-
-        ...htmlAttributes
-    } = props;
-
-    htmlAttributes.size = size;
-    htmlAttributes.rounded = rounded;
-    htmlAttributes.fillMode = fillMode;
-    htmlAttributes.hover = hover;
-    htmlAttributes.focus = focus;
-    htmlAttributes.valid = valid;
-    htmlAttributes.invalid = invalid;
-    htmlAttributes.required = required;
-    htmlAttributes.disabled = disabled;
-
-    const inputAttributes = {
-        type,
-        value,
-        placeholder,
-        autocomplete,
-
-        showValue,
-        valueIcon,
-        valueIconName,
-
-        disabled
-    };
-
-    let dropdownListClasses = [
-        ownClassName,
-        'k-dropdown',
-        {
-            'k-icon-picker': showValue !== true && (valueIcon !== null || valueIconName !== '')
-        }
-    ];
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    if (legacy) {
-
-        let legacyClasses = [
-            ownClassName,
-            'k-widget',
-            'k-dropdown',
-            {
-                'k-state-hover': hover === true,
-                'k-state-focus': focus === true,
-                'k-state-invalid': invalid === true,
-                'k-state-disabled': disabled === true
-            }
-        ];
-
-        let legacyWrapClasses = [
-            'k-dropdown-wrap'
-        ];
-
-        return (
-            <PickerStatic className={legacyClasses} {...htmlAttributes}>
-                <span className={legacyWrapClasses}>
-                    <InputInnerSpanStatic {...inputAttributes} />
-                    <InputValidationIconStatic {...props} />
-                    <InputLoadingIconStatic {...props} />
-                    <InputClearValueStatic {...props} />
-                    <span className="k-select"><IconStatic name={arrowIconName} /></span>
-                </span>
-            </PickerStatic>
-        );
-    }
-
-    return (
-        <PickerStatic className={dropdownListClasses} {...ariaAttr} {...htmlAttributes}>
-            {prefix}
-            <InputInnerSpanStatic {...inputAttributes} />
-            {suffix}
-            <InputValidationIconStatic {...props} />
-            <InputLoadingIconStatic {...props} />
-            <InputClearValueStatic {...props} />
-            <ButtonStatic className="k-input-button" icon={arrowIconName} shape={null} rounded={null} size={size} fillMode={fillMode}></ButtonStatic>
-        </PickerStatic>
-    );
-}
-
-DropdownListStatic.defaultProps = {
-    ...globalDefaultProps,
-
-    type: 'text',
-    value: '',
-    placeholder: '',
-    autocomplete: 'off',
-
-    showValue: true,
-    valueIcon: null,
-    valueIconName: '',
-    arrowIconName: 'arrow-s',
-
-    showValidationIcon: true,
-    showLoadingIcon: true,
-    showClearButton: false,
-
-    size: 'medium',
-    rounded: 'medium',
-
-    fillMode: 'solid'
-};
-
-DropdownListStatic.propTypes = {
-    children: typeof [],
-    className: typeof '',
-
-    type: typeof [ 'text', 'password' ],
-    value: typeof '',
-    placeholder: typeof '',
-    autocomplete: typeof [ 'on', 'off' ],
-
-    showValue: typeof true,
-    valueIcon: '#fragment',
-    valueIconName: typeof '',
-    arrowIconName: typeof '',
-
-    showValidationIcon: typeof true,
-    showLoadingIcon: typeof true,
-    showClearButton: typeof true,
-
-    prefix: typeof '#fragment',
-    suffix: typeof '#fragment',
-
-    size: typeof [ null, 'small', 'medium', 'large' ],
-    rounded: typeof [ null, 'small', 'medium', 'large', 'full' ],
-
-    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
-
-    hover: typeof false,
-    focus: typeof false,
-    valid: typeof false,
-    invalid: typeof false,
-    loading: typeof false,
-    required: typeof false,
-    disabled: typeof false,
-
-    aria: typeof false,
-    legacy: typeof false,
-
-    htmlAttributes: typeof []
-};
-
-export { DropdownList, DropdownListStatic };

package/src/dropdownlist/index.js

@@ -1 +0,0 @@
-export * from './dropdownlist.jsx';

package/src/fab/README.md

@@ -1,19 +0,0 @@
-```html
-<!-- default rendering -->
-<button type="button" class="k-fab k-fab-rectangle k-fab-md k-rounded-full k-fab-solid k-fab-solid-primary">
-    <span class="k-fab-icon k-icon k-i-plus"></span>
-    <span class="k-fab-text">Create</span>
-</button>
-
-<!-- canonical rendering -->
-<button class="
-    k-fab
-    k-fab-{size}
-    k-fab-{rounded}
-    k-fab-{fillMode}
-    k-fab-{fillMode}-{themeColor}
-">
-    {icon !== '' && <span class="k-fab-icon k-icon k-i-{icon}"></span>}
-    {text !== '' && <span class="k-fab-text">{text}</span>}
-</button>
-```

package/src/fab/fab.jsx

@@ -1,150 +0,0 @@
-import * as styles from '../../utils/styles';
-import { Component, globalDefaultProps } from '../component/index';
-import { IconStatic } from '../icon/index';
-
-class Fab extends Component {
-
-    init() {
-        this._props.text = this.element.innerHTML;
-    }
-
-    render() {
-        return <FabStatic {...this.props} />;
-    }
-}
-
-function FabStatic(props) {
-    const {
-        className: ownClassName,
-
-        text,
-        type,
-
-        size,
-        rounded,
-        shape,
-
-        fillMode,
-        themeColor,
-
-        icon,
-
-        position,
-
-        hover,
-        focus,
-        active,
-        selected,
-        disabled,
-
-        aria,
-        legacy,
-
-        ...htmlAttributes
-    } = props;
-
-    let buttonClasses = [
-        ownClassName,
-        'k-fab',
-        styles.positionClass( position, 'k'),
-        styles.shapeClass( shape, 'k-fab' ),
-        styles.sizeClass( size, 'k-fab' ),
-        styles.roundedClass( rounded ),
-        styles.fillModeClass( fillMode, 'k-fab' ),
-        styles.themeColorClass( fillMode, themeColor, 'k-fab' ),
-        {
-            'k-hover': hover === true,
-            'k-focus': focus === true,
-            'k-active': active === true,
-            'k-selected': selected === true,
-            'k-disabled': disabled === true
-        }
-    ];
-
-    // Augment attributes
-    htmlAttributes.disabled = disabled;
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    if (legacy) {
-        let legacyClasses = [
-            ownClassName,
-            'k-fab',
-            `k-fab-${themeColor}`,
-            styles.roundedClass( rounded ),
-            {
-                'k-state-hover': hover === true,
-                'k-state-focus': focus === true,
-                'k-state-active': active === true,
-                'k-state-selected': selected === true,
-                'k-state-disabled': disabled === true
-            },
-            styles.positionClass( position, 'k'),
-            styles.sizeClass( size, 'k-fab' )
-        ];
-
-        return (
-            <button type={type} className={legacyClasses} {...ariaAttr} {...htmlAttributes}>
-                <IconStatic className="k-fab-icon" name={icon} />
-                {text && <span className="k-fab-text">{text}</span>}
-            </button>
-        );
-    }
-
-    return (
-        <button type={type} className={buttonClasses} {...ariaAttr} {...htmlAttributes}>
-            <IconStatic className="k-fab-icon" name={icon} />
-            {text && <span className="k-fab-text">{text}</span>}
-        </button>
-    );
-}
-
-FabStatic.defaultProps = {
-    ...globalDefaultProps,
-
-    text: '',
-    icon: '',
-
-    className: '',
-    type: 'button',
-
-    size: 'medium',
-    rounded: 'full',
-    shape: 'rectangle',
-
-    position: null,
-
-    fillMode: 'solid',
-    themeColor: 'primary'
-};
-
-FabStatic.propTypes = {
-    text: typeof '',
-    icon: typeof '',
-
-    type: typeof [ 'button', 'submit', 'reset' ],
-
-    size: typeof [ null, 'small', 'medium', 'large' ],
-    rounded: typeof [ null, 'small', 'medium', 'large', 'full' ],
-    shape: typeof [ null, 'rectangle', 'square' ],
-    fillMode: typeof [ null, 'solid' ],
-    themeColor: typeof [ null, 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse' ],
-
-    position: typeof [ null, 'top-start', 'top-center', 'top-end', 'middle-start', 'middle-end', 'bottom-start', 'bottom-center', 'bottom-end' ],
-
-    hover: typeof false,
-    focus: typeof false,
-    active: typeof false,
-    selected: typeof false,
-    disabled: typeof false,
-
-    aria: typeof false,
-    legacy: typeof false,
-
-    className: typeof '',
-    htmlAttributes: typeof []
-};
-
-export { Fab, FabStatic };

package/src/fab/index.js

@@ -1 +0,0 @@
-export * from './fab.jsx';

package/src/icon/icon.jsx

@@ -1,59 +0,0 @@
-import { Component, globalDefaultProps } from '../component/index';
-
-class Icon extends Component {
-    render() {
-        return <IconStatic {...this.props} />;
-    }
-}
-
-function IconStatic(props) {
-    const {
-        className: ownClassName,
-
-        name,
-
-        aria,
-
-        ...htmlAttributes
-
-    } = props;
-
-    let iconClasses = [
-        ownClassName,
-        'k-icon',
-        `k-i-${name}`
-    ];
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    return (
-        <>
-            { name &&
-                <span className={iconClasses} {...ariaAttr} {...htmlAttributes}>
-                    {props.children}
-                </span>
-            }
-        </>
-    );
-}
-
-IconStatic.defaultProps = {
-    ...globalDefaultProps,
-
-    name: ''
-};
-IconStatic.propTypes = {
-    className: typeof '',
-
-    name: typeof '',
-
-    children: typeof [],
-
-    aria: typeof false,
-
-    htmlAttributes: typeof [],
-};
-
-export { Icon, IconStatic };

package/src/icon/index.js

@@ -1 +0,0 @@
-export * from './icon.jsx';

package/src/index.js

@@ -1,107 +0,0 @@
-/* eslint-disable no-new */
-/* global kendo */
-import { isFunction } from '../utils/object';
-
-export function init() {
-    document.querySelectorAll('[is]').forEach( element => {
-        const componentName = element.getAttribute('is');
-        const component = kendo.Html[componentName];
-
-        if (isFunction( component )) {
-            new component( element );
-        }
-    });
-}
-
-window.addEventListener('DOMContentLoaded', init);
-
-// Dependencies
-export * from './component/index';
-
-// Typography and utils
-export * from './typography/index';
-
-// Generic content
-export * from './icon/index';
-
-// Primitive components
-export * from './input/index';
-// export * from './picker/index';
-export * from './popup/index';
-export * from './list/index';
-export * from './nodata/index';
-
-// Indicators
-export * from './avatar/index';
-// export * from './badge/index';
-export * from './chip/index';
-// export * from './color-preview/index';
-// export * from './loader/index';
-// export * from './skeleton/index';
-
-// Native forms
-export * from './button/index';
-export * from './menubutton/index';
-export * from './splitbutton/index';
-export * from './textbox/index';
-export * from './textarea/index';
-export * from './checkbox/index';
-export * from './radio/index';
-// export * from './listbox/index';
-// export * from './progressbar/index';
-// export * from './slider/index';
-
-// Augmented inputs
-export * from './autocomplete/index';
-export * from './colorpalette/index';
-export * from './captcha/index';
-export * from './colorpicker/index';
-export * from './combobox/index';
-export * from './dateinput/index';
-export * from './datepicker/index';
-export * from './timepicker/index';
-export * from './datetimepicker/index';
-export * from './daterangepicker/index';
-export * from './dropdowngrid/index';
-export * from './dropdownlist/index';
-// export * from './dropdowntree/index';
-export * from './maskedtextbox/index';
-export * from './multiselect/index';
-export * from './numerictextbox/index';
-// export * from './rating/index';
-export * from './searchbox/index';
-export * from './switch/index';
-// export * from './upload/index';
-// export * from './dropzone/index';
-
-// Command interfaces
-// export * from './action-buttons/index';
-export * from './fab/index';
-export * from './menu/index';
-// export * from './toolbar/index';
-
-// Popups and modals
-// export * from './action-sheet/index';
-// export * from './dialog/index';
-// export * from './drawer/index';
-// export * from './notification/index';
-export * from './popover/index';
-// export * from './tooltip/index';
-// export * from './window/index';
-
-// Navigation
-// export * from './appbar/index';
-// export * from './bottom-nav/index';
-// export * from './breadcrumb/index';
-// export * from './pager/index';
-// export * from './stepper/index';
-// export * from './tabstrip/index';
-export * from './treeview/index';
-// export * from './wizard/index';
-
-// Layout & containers
-// export * from './card/index';
-// export * from './expander/index';
-// export * from './panelbar/index';
-// export * from './splitter/index';
-// export * from './tile-layout/index';

package/src/input/floating-label.jsx

@@ -1,78 +0,0 @@
-import { Component, globalDefaultProps } from '../component/index';
-
-class FloatingLabel extends Component {
-    render() {
-        return <FloatingLabelStatic {...this.props} />;
-    }
-}
-
-function FloatingLabelStatic(props) {
-
-    const {
-        className: ownClassName,
-
-        children,
-
-        label,
-
-        focus,
-        valid,
-        invalid,
-        empty,
-        disabled,
-
-        aria,
-
-        ...htmlAttributes
-    } = props;
-
-
-    htmlAttributes.empty = empty;
-
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    let floatingLabelClasses = [
-        ownClassName,
-        'k-floating-label-container',
-        {
-            'k-focus': focus === true,
-            'k-valid': valid === true,
-            'k-invalid': invalid === true,
-            'k-empty': empty === true,
-            'k-disabled': disabled === true,
-        }
-    ];
-
-    return (
-        <span className={floatingLabelClasses} {...ariaAttr} {...htmlAttributes} >
-            <>{children}</>
-            { label && <label className="k-label">{label}</label> }
-        </span>
-    );
-}
-
-FloatingLabelStatic.defaultProps = {
-    ...globalDefaultProps,
-};
-
-FloatingLabelStatic.propTypes = {
-    className: typeof '',
-    children: typeof [],
-
-    label: typeof '',
-
-    focus: typeof false,
-    valid: typeof false,
-    invalid: typeof false,
-    empty: typeof false,
-    disabled: typeof false,
-
-    aria: typeof false,
-
-    htmlAttributes: typeof []
-};
-
-export { FloatingLabel, FloatingLabelStatic };

package/src/input/index.js

@@ -1,9 +0,0 @@
-export * from './input.jsx';
-export * from './picker.jsx';
-export * from './input-inner.jsx';
-export * from './input-prefix.jsx';
-export * from './input-suffix.jsx';
-export * from './input-validation-icon.jsx';
-export * from './input-loading-icon.jsx';
-export * from './input-clear-value.jsx';
-export * from './floating-label.jsx';

package/src/input/input-clear-value.jsx

@@ -1,31 +0,0 @@
-import { IconStatic } from '../icon/index';
-
-function InputClearValueStatic(inputProps) {
-
-    const {
-        value,
-
-        showClearButton,
-
-        readonly,
-        loading,
-        disabled,
-
-        aria
-    } = inputProps;
-
-    if (disabled || readonly || loading || !showClearButton || value === '' || (value.type === "#fragment" && !value.props.children.length) ) {
-        return <></>;
-    }
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    return (
-        <span className="k-clear-value" {...ariaAttr}><IconStatic name="x" /></span>
-    );
-
-}
-
-export { InputClearValueStatic };