@progress/kendo-themes-html 5.4.2-dev.5 → 5.5.1-dev.0

package/dist/notification/tests/notification-angular.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/notification/tests/notification-angular.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    body {\n        background: #fcfcfc;\n    }\n\n    #test-area {\n        justify-items: start;\n    }\n\n    .k-notification-container {\n        margin: 0;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span className=\"k-colspan-all\">LTR</span>\n\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Default notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Closable notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-primary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Primary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-secondary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Secondary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-tertiary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Tertiary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-info\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"info\" />\n                            <div className=\"k-notification-content\">Info notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-success\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"success\" />\n                            <div className=\"k-notification-content\">Success notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-warning\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"warning\" />\n                            <div className=\"k-notification-content\">Warning notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-error\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"error\" />\n                            <div className=\"k-notification-content\">Error notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-dark\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Dark notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-light\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Light notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-inverse\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Inverse notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <span className=\"k-colspan-all\">RTL</span>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Default notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Closable notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-primary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Primary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-secondary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Secondary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-tertiary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Tertiary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-info\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"info\" />\n                            <div className=\"k-notification-content\">Info notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-success\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"success\" />\n                            <div className=\"k-notification-content\">Success notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-warning\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"warning\" />\n                            <div className=\"k-notification-content\">Warning notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-error\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"error\" />\n                            <div className=\"k-notification-content\">Error notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-dark\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Dark notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-light\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Light notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-inverse\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Inverse notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAkB;AAClB,sBAAqB;;;ACDrB,cAAuB;;;ACChB,MAAM,aAAa,IAAI,SAAiB;AAC3C,UAAM,SAAS,CAAC;AAEhB,UAAM,cAAc,CAAC,QAAQ;AACzB,MAAC,OAAO,QAAQ,WACV,OAAO,KAAK,GAAG,EAAE,QAAQ,CAAC,QAAQ;AAChC,eAAO,OAAO,IAAI;AAAA,MACtB,CAAC,IACE,OAAO,OAAO;AAAA,IAEzB;AAEA,UAAM,UAAU,CAAC,SACb,KACK,OAAO,CAAC,QAAQ,QAAQ,QAAQ,QAAQ,GAAG,CAAC,EAC5C,IAAI,CAAC,QACD,MAAM,QAAQ,GAAG,IAAI,QAAQ,GAAG,IAAI,YAAY,GAAG,CACxD;AAER,YAAQ,IAAI;AAEZ,WAAO,OAAO,KAAK,MAAM,EACpB,IAAI,CAAC,QAAS,OAAO,QAAQ,OAAQ,IAAI,EACzC,OAAO,CAAC,OAAO,OAAO,IAAI,EAC1B,KAAK,GAAG;AAAA,EACjB;;;ADjBO,MAAM,OAAN,cAAyB,gBAAqB;AAAA,IAEjD,SAAS;AACL,YAAM;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,UACA,KAAK;AAET,aACI,0DACM,QACE,oCAAC;AAAA,QACG,WAAW,WACP,WACA,UACA;AAAA,UACI,CAAC,OAAO,SAAS;AAAA,QACrB,CACJ;AAAA,QACA;AAAA,OACJ,CAER;AAAA,IAER;AAAA,EACJ;;;AD/BA,MAAM,OAAO,sBAAS,WAClB,SAAS,eAAe,KAAK,CACjC;AAEA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcf,OAAK,OACD,wFACI,mDAAC,eAAO,MAAO,GACf,mDAAC;AAAA,IAAI,IAAG;AAAA,IAAY,WAAU;AAAA,KAE1B,mDAAC;AAAA,IAAK,WAAU;AAAA,KAAgB,KAAG,GAEnC,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,sBAAoB,CAChE,CACJ,CACJ,CACJ,GACA,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,uBAAqB,GAC7D,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAQ,CACvB,CACJ,CACJ,CACJ,GACA,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,sBAAoB,CAChE,CACJ,CACJ,CACJ,GACA,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,wBAAsB,CAClE,CACJ,CACJ,CACJ,GACA,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,uBAAqB,CACjE,CACJ,CACJ,CACJ,GACA,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAO,GAClB,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,mBAAiB,CAC7D,CACJ,CACJ,CACJ,GACA,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAU,GACrB,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,sBAAoB,CAChE,CACJ,CACJ,CACJ,GACA,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAU,GACrB,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,sBAAoB,CAChE,CACJ,CACJ,CACJ,GACA,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAQ,GACnB,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,oBAAkB,CAC9D,CACJ,CACJ,CACJ,GACA,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,mBAAiB,CAC7D,CACJ,CACJ,CACJ,GACA,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,oBAAkB,CAC9D,CACJ,CACJ,CACJ,GACA,mDAAC,aACG,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,sBAAoB,CAChE,CACJ,CACJ,CACJ,GAEA,mDAAC;AAAA,IAAK,WAAU;AAAA,KAAgB,KAAG,GACnC,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,sBAAoB,CAChE,CACJ,CACJ,CACJ,GACA,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,uBAAqB,GAC7D,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAQ,CACvB,CACJ,CACJ,CACJ,GACA,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,sBAAoB,CAChE,CACJ,CACJ,CACJ,GACA,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,wBAAsB,CAClE,CACJ,CACJ,CACJ,GACA,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,uBAAqB,CACjE,CACJ,CACJ,CACJ,GACA,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAO,GAClB,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,mBAAiB,CAC7D,CACJ,CACJ,CACJ,GACA,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAU,GACrB,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,sBAAoB,CAChE,CACJ,CACJ,CACJ,GACA,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAU,GACrB,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,sBAAoB,CAChE,CACJ,CACJ,CACJ,GACA,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAQ,GACnB,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,oBAAkB,CAC9D,CACJ,CACJ,CACJ,GACA,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,mBAAiB,CAC7D,CACJ,CACJ,CACJ,GACA,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,oBAAkB,CAC9D,CACJ,CACJ,CACJ,GACA,mDAAC;AAAA,IAAI,KAAI;AAAA,KACL,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KACX,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAyB,sBAAoB,CAChE,CACJ,CACJ,CACJ,CAEJ,CACJ,CACJ;",
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    body {\n        background: #fcfcfc;\n    }\n\n    #test-area {\n        justify-items: start;\n    }\n\n    .k-notification-container {\n        margin: 0;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span className=\"k-colspan-all k-col-span-full\">LTR</span>\n\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Default notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Closable notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-primary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Primary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-secondary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Secondary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-tertiary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Tertiary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-info\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"info\" />\n                            <div className=\"k-notification-content\">Info notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-success\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"success\" />\n                            <div className=\"k-notification-content\">Success notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-warning\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"warning\" />\n                            <div className=\"k-notification-content\">Warning notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-error\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"error\" />\n                            <div className=\"k-notification-content\">Error notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-dark\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Dark notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-light\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Light notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-inverse\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Inverse notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <span className=\"k-colspan-all k-col-span-full\">RTL</span>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Default notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Closable notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-primary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Primary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-secondary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Secondary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-tertiary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Tertiary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-info\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"info\" />\n                            <div className=\"k-notification-content\">Info notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-success\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"success\" />\n                            <div className=\"k-notification-content\">Success notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-warning\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"warning\" />\n                            <div className=\"k-notification-content\">Warning notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-error\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"error\" />\n                            <div className=\"k-notification-content\">Error notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-dark\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Dark notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-light\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Light notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-notification-container\">\n                    <div className=\"k-widget k-notification k-notification-inverse\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Inverse notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/notification/tests/notification-custom-angular.js

@@ -84,7 +84,7 @@
     id: "test-area",
     className: "k-d-grid k-grid-cols-4"
   }, /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all"
+    className: "k-colspan-all k-col-span-full"
   }, "LTR"), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-notification-group"
   }, /* @__PURE__ */ import_react.default.createElement("div", {
@@ -106,7 +106,7 @@
   }, /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-notification-content"
   }, "Custom notification")))))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-colspan-3"
+    className: "k-colspan-3 k-col-span-3"
   }, /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-notification-container fullwidth"
   }, /* @__PURE__ */ import_react.default.createElement("div", {
@@ -118,7 +118,7 @@
   }, "Full width notification"), /* @__PURE__ */ import_react.default.createElement(Icon, {
     name: "close"
   }))))), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all"
+    className: "k-colspan-all k-col-span-full"
   }, "RTL"), /* @__PURE__ */ import_react.default.createElement("div", {
     dir: "rtl"
   }, /* @__PURE__ */ import_react.default.createElement("div", {
@@ -142,7 +142,7 @@
   }, /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-notification-content"
   }, "Custom notification")))))), /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-colspan-3",
+    className: "k-colspan-3 k-col-span-3",
     dir: "rtl"
   }, /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-notification-container fullwidth"

package/dist/notification/tests/notification-custom-angular.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/notification/tests/notification-custom-angular.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    body {\n        background: #fcfcfc;\n    }\n\n    .k-notification-group {\n        position: static;\n    }\n\n    .fullwidth,\n    .fullwidth > .k-notification {\n        width: 100%;\n    }\n\n    .k-custom-notification {\n        font-size: 20px;\n        color: gray;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span className=\"k-colspan-all\">LTR</span>\n\n            <div>\n                {/* notification group */}\n                <div className=\"k-notification-group\">\n                    <div className=\"k-notification-container\">\n                        <div className=\"k-widget k-notification k-notification-closable\">\n                            <div className=\"k-notification-wrap\">\n                                <div className=\"k-notification-content\">\n                                    Multiline notification\n                                    <div>Closable multiline notification</div>\n                                    <div>Closable multiline notification</div>\n                                    <div>Closable multiline notification</div>\n                                </div>\n                                <Icon name=\"close\" />\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-notification-container\">\n                        <div className=\"k-widget k-notification k-custom-notification\">\n                            <div className=\"k-notification-wrap\">\n                                <div className=\"k-notification-content\">Custom notification</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div className=\"k-colspan-3\">\n                <div className=\"k-notification-container fullwidth\">\n                    <div className=\"k-widget k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Full width notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <span className=\"k-colspan-all\">RTL</span>\n\n            <div dir=\"rtl\">\n                {/* notification group */}\n                <div className=\"k-notification-group\">\n                    <div className=\"k-notification-container\">\n                        <div className=\"k-widget k-notification k-notification-closable\">\n                            <div className=\"k-notification-wrap\">\n                                <div className=\"k-notification-content\">\n                                    Multiline notification\n                                    <div>Closable multiline notification</div>\n                                    <div>Closable multiline notification</div>\n                                    <div>Closable multiline notification</div>\n                                </div>\n                                <Icon name=\"close\" />\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-notification-container\">\n                        <div className=\"k-widget k-notification k-custom-notification\">\n                            <div className=\"k-notification-wrap\">\n                                <div className=\"k-notification-content\">Custom notification</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div className=\"k-colspan-3\" dir=\"rtl\">\n                <div className=\"k-notification-container fullwidth\">\n                    <div className=\"k-widget k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Full width notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    body {\n        background: #fcfcfc;\n    }\n\n    .k-notification-group {\n        position: static;\n    }\n\n    .fullwidth,\n    .fullwidth > .k-notification {\n        width: 100%;\n    }\n\n    .k-custom-notification {\n        font-size: 20px;\n        color: gray;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span className=\"k-colspan-all k-col-span-full\">LTR</span>\n\n            <div>\n                {/* notification group */}\n                <div className=\"k-notification-group\">\n                    <div className=\"k-notification-container\">\n                        <div className=\"k-widget k-notification k-notification-closable\">\n                            <div className=\"k-notification-wrap\">\n                                <div className=\"k-notification-content\">\n                                    Multiline notification\n                                    <div>Closable multiline notification</div>\n                                    <div>Closable multiline notification</div>\n                                    <div>Closable multiline notification</div>\n                                </div>\n                                <Icon name=\"close\" />\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-notification-container\">\n                        <div className=\"k-widget k-notification k-custom-notification\">\n                            <div className=\"k-notification-wrap\">\n                                <div className=\"k-notification-content\">Custom notification</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div className=\"k-colspan-3 k-col-span-3\">\n                <div className=\"k-notification-container fullwidth\">\n                    <div className=\"k-widget k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Full width notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <span className=\"k-colspan-all k-col-span-full\">RTL</span>\n\n            <div dir=\"rtl\">\n                {/* notification group */}\n                <div className=\"k-notification-group\">\n                    <div className=\"k-notification-container\">\n                        <div className=\"k-widget k-notification k-notification-closable\">\n                            <div className=\"k-notification-wrap\">\n                                <div className=\"k-notification-content\">\n                                    Multiline notification\n                                    <div>Closable multiline notification</div>\n                                    <div>Closable multiline notification</div>\n                                    <div>Closable multiline notification</div>\n                                </div>\n                                <Icon name=\"close\" />\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-notification-container\">\n                        <div className=\"k-widget k-notification k-custom-notification\">\n                            <div className=\"k-notification-wrap\">\n                                <div className=\"k-notification-content\">Custom notification</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div className=\"k-colspan-3 k-col-span-3\" dir=\"rtl\">\n                <div className=\"k-notification-container fullwidth\">\n                    <div className=\"k-widget k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Full width notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/notification/tests/notification-jquery.js

@@ -79,7 +79,7 @@
     id: "test-area",
     className: "k-d-grid k-grid-cols-4"
   }, /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all"
+    className: "k-colspan-all k-col-span-full"
   }, "LTR"), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-animation-container"
   }, /* @__PURE__ */ import_react.default.createElement("div", {
@@ -187,7 +187,7 @@
   }, /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-notification-content"
   }, "Inverse notification"))))), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all"
+    className: "k-colspan-all k-col-span-full"
   }, "RTL"), /* @__PURE__ */ import_react.default.createElement("div", {
     dir: "rtl"
   }, /* @__PURE__ */ import_react.default.createElement("div", {

package/dist/notification/tests/notification-jquery.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/notification/tests/notification-jquery.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    body {\n        background: #fcfcfc;\n    }\n\n    #test-area {\n        justify-items: start;\n    }\n\n    .k-animation-container {\n        position: static;\n        overflow: visible;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span className=\"k-colspan-all\">LTR</span>\n\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Default notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Closable notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-primary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Primary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-secondary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Secondary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-tertiary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Tertiary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-info\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"info\" />\n                            <div className=\"k-notification-content\">Info notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-success\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"success\" />\n                            <div className=\"k-notification-content\">Success notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-warning\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"warning\" />\n                            <div className=\"k-notification-content\">Warning notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-error\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"error\" />\n                            <div className=\"k-notification-content\">Error notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-dark\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Dark notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-light\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Light notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-inverse\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Inverse notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <span className=\"k-colspan-all\">RTL</span>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Default notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Closable notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-primary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Primary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-secondary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Secondary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-tertiary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Tertiary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-info\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"info\" />\n                            <div className=\"k-notification-content\">Info notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-success\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"success\" />\n                            <div className=\"k-notification-content\">Success notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-warning\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"warning\" />\n                            <div className=\"k-notification-content\">Warning notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-error\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"error\" />\n                            <div className=\"k-notification-content\">Error notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-dark\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Dark notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-light\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Light notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-inverse\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Inverse notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    body {\n        background: #fcfcfc;\n    }\n\n    #test-area {\n        justify-items: start;\n    }\n\n    .k-animation-container {\n        position: static;\n        overflow: visible;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span className=\"k-colspan-all k-col-span-full\">LTR</span>\n\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Default notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Closable notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-primary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Primary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-secondary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Secondary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-tertiary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Tertiary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-info\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"info\" />\n                            <div className=\"k-notification-content\">Info notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-success\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"success\" />\n                            <div className=\"k-notification-content\">Success notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-warning\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"warning\" />\n                            <div className=\"k-notification-content\">Warning notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-error\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"error\" />\n                            <div className=\"k-notification-content\">Error notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-dark\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Dark notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-light\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Light notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-inverse\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Inverse notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <span className=\"k-colspan-all k-col-span-full\">RTL</span>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Default notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-closable\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Closable notification</div>\n                            <Icon name=\"close\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-primary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Primary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-secondary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Secondary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-tertiary\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Tertiary notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-info\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"info\" />\n                            <div className=\"k-notification-content\">Info notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-success\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"success\" />\n                            <div className=\"k-notification-content\">Success notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-warning\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"warning\" />\n                            <div className=\"k-notification-content\">Warning notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-error\">\n                        <div className=\"k-notification-wrap\">\n                            <Icon name=\"error\" />\n                            <div className=\"k-notification-content\">Error notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-dark\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Dark notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-light\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Light notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div dir=\"rtl\">\n                <div className=\"k-animation-container\">\n                    <div className=\"k-widget k-popup k-notification k-notification-inverse\">\n                        <div className=\"k-notification-wrap\">\n                            <div className=\"k-notification-content\">Inverse notification</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/panelbar/tests/panelbar-angular.js

@@ -76,7 +76,7 @@
     id: "test-area",
     className: "k-d-grid k-grid-cols-4"
   }, /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all"
+    className: "k-colspan-all k-col-span-full"
   }, "LTR"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-widget k-panelbar"
   }, /* @__PURE__ */ import_react.default.createElement("div", {
@@ -243,7 +243,7 @@
   })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-panelbar-content"
   }, /* @__PURE__ */ import_react.default.createElement("h4", null, "Title in template"), /* @__PURE__ */ import_react.default.createElement("p", null, "Multi line paragraph in template. Some more content to break onto multiple lines")))))), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all"
+    className: "k-colspan-all k-col-span-full"
   }, "RTL"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-widget k-panelbar",
     dir: "rtl"

package/dist/panelbar/tests/panelbar-angular.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/panelbar/tests/panelbar-angular.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    .k-sprite {\n        background-color: gray;\n    }\n    .k-image {\n        width: 16px;\n        height: 16px;\n        display: inline-block;\n        background-color: gold;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span className=\"k-colspan-all\">LTR</span>\n\n            <section>\n                <div className=\"k-widget k-panelbar\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            <Icon name=\"cog\" />\n                            Root\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-hover\">\n                            <span className=\"k-image\"></span>\n                            Root hover\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-focus\">\n                            <span className=\"k-sprite\"></span>\n                            Root focus\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-selected\">\n                            Root selected\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-disabled\">\n                            Root disabled\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            Root last\n                        </span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">First</span>\n                    </div>\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            Middle expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panel k-group\">\n                                <div className=\"k-item\">\n                                    <span className=\"k-link\">Child</span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-hover\">\n                                        Child hover\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-focus\">\n                                        Child focus\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-selected\">\n                                        Child selected\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item k-state-expanded\">\n                                    <span className=\"k-link\">\n                                        Child expanded\n                                        <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                                    </span>\n                                    <div>\n                                        <div className=\"k-panel k-group\">\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-disabled\">\n                                        Child disabled\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link\">\n                                        <span className=\"k-panelbar-item-text\">Child last</span>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            <span className=\"k-panelbar-item-text\">Last</span>\n                        </span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\">\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            First expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panelbar-content\">\n                                <h4>Title in template</h4>\n                                <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Middle</span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Last</span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">First</span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Middle</span>\n                    </div>\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            Last expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panelbar-content\">\n                                <h4>Title in template</h4>\n                                <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <span className=\"k-colspan-all\">RTL</span>\n\n            <section>\n                <div className=\"k-widget k-panelbar\" dir=\"rtl\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            <Icon name=\"cog\" />\n                            Root\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-hover\">\n                            <span className=\"k-image\"></span>\n                            Root hover\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-focus\">\n                            <span className=\"k-sprite\"></span>\n                            Root focus\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-selected\">\n                            Root selected\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-disabled\">\n                            Root disabled\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            Root last\n                        </span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\" dir=\"rtl\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">First</span>\n                    </div>\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            Middle expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panel k-group\">\n                                <div className=\"k-item\">\n                                    <span className=\"k-link\">Child</span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-hover\">\n                                        Child hover\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-focus\">\n                                        Child focus\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-selected\">\n                                        Child selected\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item k-state-expanded\">\n                                    <span className=\"k-link\">\n                                        Child expanded\n                                        <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                                    </span>\n                                    <div>\n                                        <div className=\"k-panel k-group\">\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-disabled\">\n                                        Child disabled\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link\">\n                                        <span className=\"k-panelbar-item-text\">Child last</span>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            <span className=\"k-panelbar-item-text\">Last</span>\n                        </span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\" dir=\"rtl\">\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            First expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panelbar-content\">\n                                <h4>Title in template</h4>\n                                <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Middle</span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Last</span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\" dir=\"rtl\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">First</span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Middle</span>\n                    </div>\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            Last expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panelbar-content\">\n                                <h4>Title in template</h4>\n                                <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    .k-sprite {\n        background-color: gray;\n    }\n    .k-image {\n        width: 16px;\n        height: 16px;\n        display: inline-block;\n        background-color: gold;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n            <span className=\"k-colspan-all k-col-span-full\">LTR</span>\n\n            <section>\n                <div className=\"k-widget k-panelbar\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            <Icon name=\"cog\" />\n                            Root\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-hover\">\n                            <span className=\"k-image\"></span>\n                            Root hover\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-focus\">\n                            <span className=\"k-sprite\"></span>\n                            Root focus\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-selected\">\n                            Root selected\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-disabled\">\n                            Root disabled\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            Root last\n                        </span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">First</span>\n                    </div>\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            Middle expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panel k-group\">\n                                <div className=\"k-item\">\n                                    <span className=\"k-link\">Child</span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-hover\">\n                                        Child hover\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-focus\">\n                                        Child focus\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-selected\">\n                                        Child selected\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item k-state-expanded\">\n                                    <span className=\"k-link\">\n                                        Child expanded\n                                        <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                                    </span>\n                                    <div>\n                                        <div className=\"k-panel k-group\">\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-disabled\">\n                                        Child disabled\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link\">\n                                        <span className=\"k-panelbar-item-text\">Child last</span>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            <span className=\"k-panelbar-item-text\">Last</span>\n                        </span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\">\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            First expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panelbar-content\">\n                                <h4>Title in template</h4>\n                                <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Middle</span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Last</span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">First</span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Middle</span>\n                    </div>\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            Last expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panelbar-content\">\n                                <h4>Title in template</h4>\n                                <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <span className=\"k-colspan-all k-col-span-full\">RTL</span>\n\n            <section>\n                <div className=\"k-widget k-panelbar\" dir=\"rtl\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            <Icon name=\"cog\" />\n                            Root\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-hover\">\n                            <span className=\"k-image\"></span>\n                            Root hover\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-focus\">\n                            <span className=\"k-sprite\"></span>\n                            Root focus\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-selected\">\n                            Root selected\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header k-state-disabled\">\n                            Root disabled\n                            <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                        </span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            Root last\n                        </span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\" dir=\"rtl\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">First</span>\n                    </div>\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            Middle expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panel k-group\">\n                                <div className=\"k-item\">\n                                    <span className=\"k-link\">Child</span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-hover\">\n                                        Child hover\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-focus\">\n                                        Child focus\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-selected\">\n                                        Child selected\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item k-state-expanded\">\n                                    <span className=\"k-link\">\n                                        Child expanded\n                                        <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                                    </span>\n                                    <div>\n                                        <div className=\"k-panel k-group\">\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                            <div className=\"k-item\">\n                                                <span className=\"k-link\">Child</span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link k-state-disabled\">\n                                        Child disabled\n                                        <Icon className=\"k-panelbar-expand\" name=\"arrow-s\" />\n                                    </span>\n                                </div>\n                                <div className=\"k-item\">\n                                    <span className=\"k-link\">\n                                        <span className=\"k-panelbar-item-text\">Child last</span>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">\n                            <span className=\"k-panelbar-item-text\">Last</span>\n                        </span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\" dir=\"rtl\">\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            First expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panelbar-content\">\n                                <h4>Title in template</h4>\n                                <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Middle</span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Last</span>\n                    </div>\n                </div>\n            </section>\n\n            <section>\n                <div className=\"k-widget k-panelbar\" dir=\"rtl\">\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">First</span>\n                    </div>\n                    <div className=\"k-item\">\n                        <span className=\"k-link k-header\">Middle</span>\n                    </div>\n                    <div className=\"k-item k-state-expanded\">\n                        <span className=\"k-link k-header\">\n                            Last expanded\n                            <Icon className=\"k-panelbar-collapse\" name=\"arrow-n\" />\n                        </span>\n                        <div>\n                            <div className=\"k-panelbar-content\">\n                                <h4>Title in template</h4>\n                                <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/panelbar/tests/panelbar-jquery.js

@@ -76,7 +76,7 @@
     id: "test-area",
     className: "k-d-grid k-grid-cols-4"
   }, /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all"
+    className: "k-colspan-all k-col-span-full"
   }, "LTR"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("ul", {
     className: "k-widget k-reset k-header k-panelbar"
   }, /* @__PURE__ */ import_react.default.createElement("li", {
@@ -239,7 +239,7 @@
   })), /* @__PURE__ */ import_react.default.createElement("div", {
     className: "k-panelbar-content"
   }, /* @__PURE__ */ import_react.default.createElement("h4", null, "Title in template"), /* @__PURE__ */ import_react.default.createElement("p", null, "Multi line paragraph in template. Some more content to break onto multiple lines"))))), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all"
+    className: "k-colspan-all k-col-span-full"
   }, "RTL"), /* @__PURE__ */ import_react.default.createElement("section", {
     className: "k-rtl"
   }, /* @__PURE__ */ import_react.default.createElement("ul", {