fix

README.md

@@ -126,11 +126,16 @@ PluginManager.ready(deps, callback)
 | z-index | plugin | selector |
 | --- | --- | --- |
 | 100 | flex-kit | .flex-card:hover .flex-card__content |
+| 1000 | bs | dropdown |
+| 1020 | bs | sticky |
+| 1030 | bs | fixed |
+| 1040 | bs | modal-backdrop |
+| 1050 | bs | offcanvas |
+| 1060 | bs | modal |
+| 1070 | bs | popover |
+| 1080 | bs | tooltip |
 
 
-## License
-
-MIT
 
 
 [//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)

assets/bsCore/bsCore.js

@@ -1,8 +1,6 @@
 kit.PluginManager.register('bsCore', function(module, exports, require, global){
 
-    /**
+    /** @class kitBsCore */
-     * @class kit.bsCore
-     */
     var bsCore = {};
     var dom = {};
     var util = {};

assets/config/config.js

@@ -1,7 +1,16 @@
+/**
+ * @var kit
+ * @type {kitCore}
+ */
 window.kit = window.kit || {};
+/**
+ * @var kit.config
+ * @type {kitConfig}
+ */
 kit.config = kit.config || {};
 
 kit.config.assetsPath = '/local/templater.dev/kit/assets';
 kit.config.requiredDependencies = ['bsCore', 'toolkit'];
 kit.config.autoloadPluginList = ['tooltip'];
-kit.config.debug = true;
+kit.config.debug = true;
+kit.config.defaultPhoneMask = '+7 (999) 999-99-99';

assets/config/toolkit.config.css

@@ -63,13 +63,13 @@
     --kit-color: #1a1a1a;
     --kit-color-text-hover: var(--kit-color-primary);
 
-    --kit-color-primary-w3: hsl(22, 100%, 70%);
+    --kit-color-primary-w3: hsl(210, 100%, 70%);
-    --kit-color-primary-w2: hsl(22, 100%, 65%);
+    --kit-color-primary-w2: hsl(210, 100%, 65%);
-    --kit-color-primary-w1: hsl(22, 100%, 60%);
+    --kit-color-primary-w1: hsl(210, 100%, 60%);
-    --kit-color-primary: hsl(22, 100%, 55%);
+    --kit-color-primary: hsl(210, 100%, 55%);
-    --kit-color-primary-b1: hsl(22, 100%, 50%);
+    --kit-color-primary-b1: hsl(210, 100%, 50%);
-    --kit-color-primary-b2: hsl(22, 100%, 45%);
+    --kit-color-primary-b2: hsl(210, 100%, 45%);
-    --kit-color-primary-b3: hsl(22, 100%, 40%);
+    --kit-color-primary-b3: hsl(210, 100%, 40%);
     --kit-color-primary-text: #FFF;
 
     --kit-color-secondary-w3: hsl(0, 0%, 70%);

assets/cookie/cookie.js

@@ -96,7 +96,7 @@ kit.PluginManager.register('cookie', function(module, exports, require){
 
 
         /**
-         * @class kit.cookie
+         * @class kitCookie
          */
         return Object.create(
             {

assets/core/core.js

@@ -1,9 +1,6 @@
 /**
- * @class kit
+ * @class kitCore
- * @property  {kit.bsCore}
+ * @extends kitCorePlugins
- * @property  {kit.toolkit}
- * @property  {kit.Modal}
- * @property  {kit.cookie}
  */
 window.kit = window.kit || {};
 (function(global){
@@ -52,6 +49,12 @@ window.kit = window.kit || {};
         return this;
     };
 
+    /**
+     *
+     * @param pluginId
+     * @param {kitModuleTypeLoader|{}} config
+     * @return {boolean}
+     */
     __proto.register = function (pluginId, config = {}) {
         //console.warn('PluginManager.register: plugin ' + pluginId + ' ('+(this.plugins[pluginId]?this.plugins[pluginId].state:'0')+')');
         var defaultPlugin = {
@@ -427,6 +430,12 @@ window.kit = window.kit || {};
         return this;
     };
 
+    /**
+     * @name kitPluginManagerRequire
+     * @param {string} pluginId
+     * @param {callback} callback
+     * @return {boolean}
+     */
     __proto.require = function (pluginId, callback) {
         //console.warn('PluginManager.require: plugin ' + pluginId + ' ('+(this.plugins[pluginId]?this.plugins[pluginId].state:'0')+')');
 
@@ -584,11 +593,15 @@ window.kit = window.kit || {};
         return undefined;
     };
 
+    /**
+     * @class kitConfig
+     */
     var defaultConfig = {
         assetsPath: '',
         requiredDependencies: [],
         autoloadPluginList: [],
         debug: false,
+        defaultPhoneMask: '+7 (999) 999-99-99',
     };
     var manager = new PluginManager(global);
     manager.register('PluginManager', {
@@ -613,5 +626,7 @@ window.kit = window.kit || {};
     global.ready = manager.ready.bind(manager);
     global.exec = manager.exec.bind(manager);
     global.require = manager.require.bind(manager);
+    /** @type {kitCore} */
+    window.__pmGlobal__ = global;
 })(kit);
 

assets/core/core.register.js

@@ -29,21 +29,12 @@ __PluginManager__.registerPlugins({
         type: 'loader',
         alias: '$',
     },
-    tooltip: {
-        path: __pmConfig__.assetsPath + '/tooltip',
-        module: '/tooltip.js',
-        type: 'loader',
-        css: '/tooltip.css',
-        onInstall: function(){
-            kit.$('[data-toggle="tooltip"]').tooltip();
-        },
-        deps: ['popper', 'bsCore'],
-    },
     popper: {
         path: __pmConfig__.assetsPath + '/popper',
         alias: 'popper.js',
         module: '/popper.js',
         type: 'loader',
+        css: '/popper.css',
     },
     bsCore: {
         path: __pmConfig__.assetsPath + '/bsCore',
@@ -53,6 +44,32 @@ __PluginManager__.registerPlugins({
             '/bsCore.css'
         ]
     },
+    Tooltip: {
+        path: __pmConfig__.assetsPath + '/tooltip',
+        module: '/tooltip.js',
+        type: 'loader',
+        css: '/tooltip.css',
+        onInstall: function(){
+            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new __pmGlobal__.Tooltip(tooltipTriggerEl, {sanitize: false});
+            });
+        },
+        deps: ['popper', 'bsCore'],
+    },
+    Popover: {
+        path: __pmConfig__.assetsPath + '/popover',
+        module: '/popover.js',
+        type: 'loader',
+        css: '/popover.css',
+        onInstall: function(){
+            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+            var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+                return new __pmGlobal__.Popover(popoverTriggerEl);
+            });
+        },
+        deps: ['popper', 'bsCore'],
+    },
     mask: {
         path: __pmConfig__.assetsPath + '/mask',
         module: '/mask.js',

assets/core/doc.js

@@ -0,0 +1,20 @@
+/**
+ * @typedef kitModuleTypeLoader
+ * @param module {{exports: Object}}
+ * @param exports {Object}
+ * @param require {kitPluginManagerRequire}
+ * @param global {kitCore}
+ */
+
+/**
+ * @typedef {Object} kitCorePlugins
+ * @property {kitPluginManagerRequire} require
+ * @property {kitBsCore} bsCore
+ * @property {kitToolkit} toolkit
+ * @property {kitModal} Modal
+ * @property {kitCookie} cookie
+ * @property {kitConfig} config
+ * @property {kitTooltip} tooltip
+ * @property {kitPopover} popover
+ * @property {kitPopper} popper
+ */

assets/modal/modal.js

@@ -74,7 +74,7 @@ kit.PluginManager.register('modal', function(module, exports, require){
    * ------------------------------------------------------------------------
    */
   /**
-   * @class kit.Modal
+   * @class kitModal
    */
   class Modal extends BaseComponent {
     constructor(element, config) {

assets/popover/popover.css

@@ -0,0 +1,71 @@
+:root {
+
+}
+.popover {
+    --gap: 10px;
+    --popper-border-width: 1px;
+    --popper-border-color: #ccc;
+    position: absolute;
+    top: 0;
+    left: 0 /* rtl:ignore */;
+    z-index: 1070;
+    display: block;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: left;
+    text-align: start;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-break: normal;
+    word-spacing: normal;
+    white-space: normal;
+    line-break: auto;
+    font-size: var(--popper-font-size);
+    word-wrap: break-word;
+    background-color: transparent;
+    background-clip: padding-box;
+    border: 0;
+    border-radius: 0;
+}
+.popover .popover-arrow {
+
+}
+
+.popover-header:empty {
+    display: none;
+}
+
+.popover-content {
+    border-radius: 3px;
+    overflow: hidden;
+    max-width: 200px;
+    padding: 0;
+    color: var(--popper-color);
+    text-align: center;
+    background-color: var(--popper-content-color);
+    border: var(--popper-border-width) solid var(--popper-border-color);
+    box-shadow: 0px 0px 5px -1px var(--popper-border-color);
+}
+.popover-header {
+    padding: calc(var(--gap) / 2) calc(var(--gap));
+    margin-bottom: 0;
+    font-size: 1em;
+    background-color: #f0f0f0;
+    border-bottom: var(--popper-border-width) solid var(--popper-border-color);
+    border-radius: 0;
+}
+.popover-body {
+    padding: calc(var(--gap) / 2) calc(var(--gap));
+    background-color: var(--popper-body-content-color);
+}
+.popover-footer:empty {
+    display: none;
+}
+.popover-footer {
+    padding: calc(var(--gap) / 2) calc(var(--gap));
+    background-color: var(--popper-footer-content-color);
+}

assets/popover/popover.js

@@ -0,0 +1,185 @@
+kit.PluginManager.register('popover',function(module, exports, require){
+    /**
+     * --------------------------------------------------------------------------
+     * Bootstrap (v5.0.2): popover.js
+     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+     * --------------------------------------------------------------------------
+     */
+
+    /** @type {kitTooltip} */
+    var Tooltip = require('tooltip');
+
+    /** @type {kitBsCore} */
+    var bsCore = require('bsCore');
+
+    var { defineJQueryPlugin } = bsCore.util.index;
+    var SelectorEngine = bsCore.dom.SelectorEngine;
+
+    /**
+     * ------------------------------------------------------------------------
+     * Constants
+     * ------------------------------------------------------------------------
+     */
+
+    const NAME = 'popover'
+    const DATA_KEY = 'bs.popover'
+    const EVENT_KEY = `.${DATA_KEY}`
+    const CLASS_PREFIX = 'bs-popover'
+    const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
+
+    const Default = {
+        ...Tooltip.Default,
+        placement: 'right',
+        offset: [0, 0],
+        trigger: 'click',
+        content: '',
+        template: '<div class="popover" role="tooltip">' +
+            '<div class="popover-arrow" data-popper-arrow="true"></div>' +
+            '<div class="popover-content">' +
+            '<h3 class="popover-header"></h3>' +
+            '<div class="popover-body"></div>' +
+            '<div class="popover-footer"></div>' +
+            '</div>' +
+            '</div>'
+    }
+
+    const DefaultType = {
+        ...Tooltip.DefaultType,
+        content: '(string|element|function)'
+    }
+
+    const Event = {
+        HIDE: `hide${EVENT_KEY}`,
+        HIDDEN: `hidden${EVENT_KEY}`,
+        SHOW: `show${EVENT_KEY}`,
+        SHOWN: `shown${EVENT_KEY}`,
+        INSERTED: `inserted${EVENT_KEY}`,
+        CLICK: `click${EVENT_KEY}`,
+        FOCUSIN: `focusin${EVENT_KEY}`,
+        FOCUSOUT: `focusout${EVENT_KEY}`,
+        MOUSEENTER: `mouseenter${EVENT_KEY}`,
+        MOUSELEAVE: `mouseleave${EVENT_KEY}`
+    }
+
+    const CLASS_NAME_FADE = 'fade'
+    const CLASS_NAME_SHOW = 'show'
+
+    const SELECTOR_TITLE = '.popover-header'
+    const SELECTOR_CONTENT = '.popover-body'
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+    /** @class kitPopover */
+    class Popover extends Tooltip {
+        // Getters
+
+        static get Default() {
+            return Default
+        }
+
+        static get NAME() {
+            return NAME
+        }
+
+        static get Event() {
+            return Event
+        }
+
+        static get DefaultType() {
+            return DefaultType
+        }
+
+        // Overrides
+
+        isWithContent() {
+            return this.getTitle() || this._getContent()
+        }
+
+        getTipElement() {
+            if (this.tip) {
+                return this.tip
+            }
+
+            this.tip = super.getTipElement()
+
+            if (!this.getTitle()) {
+                SelectorEngine.findOne(SELECTOR_TITLE, this.tip).remove()
+            }
+
+            if (!this._getContent()) {
+                SelectorEngine.findOne(SELECTOR_CONTENT, this.tip).remove()
+            }
+
+            return this.tip
+        }
+
+        setContent() {
+            const tip = this.getTipElement()
+
+            // we use append for html objects to maintain js events
+            this.setElementContent(SelectorEngine.findOne(SELECTOR_TITLE, tip), this.getTitle())
+            let content = this._getContent()
+            if (typeof content === 'function') {
+                content = content.call(this._element)
+            }
+
+            this.setElementContent(SelectorEngine.findOne(SELECTOR_CONTENT, tip), content)
+
+            tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW)
+        }
+
+        // Private
+
+        _addAttachmentClass(attachment) {
+            this.getTipElement().classList.add(`${CLASS_PREFIX}-${this.updateAttachment(attachment)}`)
+        }
+
+        _getContent() {
+            return this._element.getAttribute('data-bs-content') || this._config.content
+        }
+
+        _cleanTipClass() {
+            const tip = this.getTipElement()
+            const tabClass = tip.getAttribute('class').match(BSCLS_PREFIX_REGEX)
+            if (tabClass !== null && tabClass.length > 0) {
+                tabClass.map(token => token.trim())
+                    .forEach(tClass => tip.classList.remove(tClass))
+            }
+        }
+
+        // Static
+
+        static jQueryInterface(config) {
+            return this.each(function () {
+                const data = Popover.getOrCreateInstance(this, config)
+
+                if (typeof config === 'string') {
+                    if (typeof data[config] === 'undefined') {
+                        throw new TypeError(`No method named "${config}"`)
+                    }
+
+                    data[config]()
+                }
+            })
+        }
+    }
+
+    /**
+     * ------------------------------------------------------------------------
+     * jQuery
+     * ------------------------------------------------------------------------
+     * add .Popover to jQuery only if jQuery is present
+     */
+
+    defineJQueryPlugin(Popover)
+
+    module.exports = Popover;
+
+    return module.exports;
+});
+
+
+

assets/popper/popper.css

@@ -0,0 +1,139 @@
+:root {
+    --popper-font-size: 0.8em;
+    --popper-border-color: #212121fa;
+    --popper-border-width: 1px;
+    --popper-arrow-width: 0.7em;
+    --popper-color: #1a1a1a;
+    --popper-content-color: #fff;
+    --popper-header-color: #1a1a1a;
+    --popper-header-content-color: #fff;
+    --popper-body-color: #1a1a1a;
+    --popper-body-content-color: #fff;
+    --popper-footer-color: #1a1a1a;
+    --popper-footer-content-color: #fff;
+    --math-sqrt-2: 1.414213562373095;
+}
+
+
+[data-popper-arrow] {
+    position: absolute;
+    display: block;
+    width: 0.8rem;
+    height: 0.4rem;
+    overflow: hidden;
+}
+
+[data-popper-arrow]::before {
+    border-width: var(--popper-border-width) var(--popper-border-width) 0px 0px;
+    position: absolute;
+    content: "";
+    border-color: transparent;
+    border-style: solid;
+    width: calc(var(--popper-arrow-width) + var(--popper-border-width));
+    height: calc(var(--popper-arrow-width) + var(--popper-border-width));
+    background-color: var(--popper-content-color);
+    box-shadow: 0px 0px 4px -2px var(--popper-content-color);
+}
+/*top*/
+[data-popper-placement^="top"] {
+    padding: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1)) 0;
+}
+
+[data-popper-placement^="top"] [data-popper-arrow] {
+    bottom: 0;
+    width: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    height: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    /* left: 50% !important; */
+    /* transform: translate(-50%, 0); */
+}
+
+[data-popper-placement^="top"] [data-popper-arrow]::before {
+    bottom: 0;
+    left: 50%;
+    transform: rotate(
+            225deg
+    ) translate(0, 100%);
+    transform-origin: 0 100%;
+    border-left-color: var(
+            --popper-border-color);
+    border-top-color: var(
+            --popper-border-color);
+    border-width: var(--popper-border-width) 0 0 var(--popper-border-width);
+}
+/*right*/
+[data-popper-placement^="right"] {
+    padding: 0 calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1));
+}
+
+[data-popper-placement^="right"] [data-popper-arrow] {
+    left: 0;
+    width: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    height: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    top: 50% !important;
+    transform: translate(0px, -50%) !important;
+}
+
+[data-popper-placement^="right"] [data-popper-arrow]::before {
+    left: 0px;
+    top: 50%;
+    transform: rotate(
+            225deg
+    ) translate(25%, -50%);
+    transform-origin: 75% 0;
+    border-right-color: var(
+            --popper-border-color);
+    border-top-color: var(
+            --popper-border-color);
+}
+/*bottom*/
+[data-popper-placement^="bottom"] {
+    padding: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1)) 0;
+}
+
+[data-popper-placement^="bottom"] [data-popper-arrow] {
+    top: 0;
+    width: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    height: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    /*left: 50% !important;*/
+    /*transform: translate(-50%, 0);*/
+}
+
+[data-popper-placement^="bottom"] [data-popper-arrow]::before {
+    top: 0;
+    left: 50%;
+    transform: rotate(
+            45deg
+    ) translate(0, 0);
+    transform-origin: 0 0;
+    border-left-color: var(
+            --popper-border-color);
+    border-top-color: var(
+            --popper-border-color);
+    border-width: var(--popper-border-width) 0 0 var(--popper-border-width);
+}
+
+/*left*/
+[data-popper-placement^="left"] {
+    padding: 0 calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1));
+}
+
+[data-popper-placement^="left"] [data-popper-arrow] {
+    right: 0;
+    width: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    height: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
+    top: 50% !important;
+    transform: translate(0px, -50%) !important;
+}
+
+[data-popper-placement^="left"] [data-popper-arrow]::before {
+    right: 0;
+    top: 50%;
+    transform: rotate(
+            45deg
+    ) translate(-25%, -50%);
+    transform-origin: 25% 0;
+    border-right-color: var(
+            --popper-border-color);
+    border-top-color: var(
+            --popper-border-color);
+}

assets/toolkit/toolkit.css

@@ -705,12 +705,16 @@
 .kit-button * {
     pointer-events: none;
 }
-.kit-button:hover,
+.kit-button:hover {
-.kit-button:focus {
     --kit-color-button-text: var(--kit-color-button-text-hover);
     --kit-color-button-content: var(--kit-color-button-content-hover);
     --kit-color-button-material: var(--kit-color-button-material-hover);
 }
+.kit-button:focus {
+    --kit-color-button-text: var(--kit-color-button-text-active);
+    --kit-color-button-content: var(--kit-color-button-content-active);
+    --kit-color-button-material: var(--kit-color-button-material-active);
+}
 .kit-button:active {
     --kit-color-button-text: var(--kit-color-button-text-active);
     --kit-color-button-content: var(--kit-color-button-content-active);
@@ -727,7 +731,7 @@
     box-shadow: inset 0 -2px 0 var(--kit-color-button-material);
 }
 .kit-button.kit-button--material:hover {
-    box-shadow: inset 0 -3px 0 var(--kit-color-button-material);
+    box-shadow: inset 0 -2px 0 var(--kit-color-button-material);
 }
 .kit-button__icon {
     display: inline-block;
@@ -750,7 +754,10 @@
 .kit-button:disabled,
 .kit-button[disabled],
 .kit-button.disabled,
-.kit-button.inactive-button {
+.kit-button.inactive-button,
+.kit-button[loading],
+.kit-button.loading {
+    opacity: 0.7;
     --kit-color-button-content: var(--kit-color-button-content-disabled);
     --kit-color-button-text:var(--kit-color-button-text-disabled);
     --kit-color-button-material: var(--kit-color-button-material-disabled);

assets/toolkit/toolkit.js

@@ -1,35 +1,10 @@
-import assign from "../../../../../_utils/cookie/src/assign";
+kit.PluginManager.register('toolkit', function(module, exports, require, global) {
-import defaultConverter from "../../../../../_utils/cookie/src/converter";
-
-kit.PluginManager.register('toolkit',function(module, exports, require) {
 
     var $ = require('jquery');
 
-
-
-    var __Config = function () {
-
-        function Config() {
-            this.mask =
-                {
-                    tel: '+375 (99) 999-99-99'
-                }
-        }
-
-        Config.prototype.test = function test() {
-
-        };
-
-        return Config;
-    }();
-    var Config = new __Config();
-
-
     var __Helper = function () {
 
-        function Helper() {
+        function Helper() {}
-
-        }
 
         /**
          * @description Вызывает событие
@@ -859,7 +834,7 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
         Inputs.prototype.setTelMask = function () {
             var _this3 = this;
 
-            $('[type=tel]').mask(Config.mask.tel, {
+            $('[type=tel]').mask(global.config.defaultPhoneMask, {
                 placeholder: '_', completed: function completed() {
                     _this3.fieldNormalize(this);
                 }
@@ -953,12 +928,11 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
 
 
     /**
-     * @class kit.toolkit
+     * @class kitToolkit
      */
     var toolkit = {
         Helper: Helper,
         Select: Select(),
-        Config: Config,
         Message: Message,
         Inputs: Inputs,
         device: device,

assets/tooltip/tooltip.css

@@ -1,13 +1,10 @@
-:root {
+
-    --kit-tooltip-font-size: 0.8em;
-    --kit-tooltip-color: #ffffff;
-    --kit-tooltip-content-color: #212121fa;
-    --kit-tooltip-border-color: #212121fa;
-    --kit-tooltip-border-width: 0px;
-    --kit-tooltip-arrow-width: 0.7em;
-    --math-sqrt-2: 1.414213562373095;
-}
 .tooltip {
+    --popper-border-color: #212121fa;
+    --popper-border-width: 0em;
+    --popper-arrow-width: 0.7em;
+    --popper-color: #ffffff;
+    --popper-content-color: #212121fa;
     position: absolute;
     z-index: 1070;
     display: block;
@@ -26,7 +23,7 @@
     word-spacing: normal;
     white-space: normal;
     line-break: auto;
-    font-size: var(--kit-tooltip-font-size);
+    font-size: var(--popper-font-size);
     word-wrap: break-word;
     opacity: 0;
 }
@@ -35,145 +32,13 @@
     opacity: 0.9;
 }
 
-.tooltip .tooltip-arrow {
-    position: absolute;
-    display: block;
-    width: 0.8rem;
-    height: 0.4rem;
-    overflow: hidden;
-}
-
-.tooltip .tooltip-arrow::before {
-    border-width: var(--kit-tooltip-border-width) var(--kit-tooltip-border-width) 0px 0px;
-    position: absolute;
-    content: "";
-    border-color: transparent;
-    border-style: solid;
-    width: var(--kit-tooltip-arrow-width);
-    height: var(--kit-tooltip-arrow-width);
-    background-color: var(--kit-tooltip-content-color);
-    box-shadow: 0px 0px 4px -2px var(--kit-tooltip-content-color);
-}
-/*top*/
-.kit-tooltip-top, .kit-tooltip-auto[x-placement^="top"] {
-    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
-}
-
-.kit-tooltip-top .tooltip-arrow, .kit-tooltip-auto[x-placement^="top"] .tooltip-arrow {
-    bottom: 0;
-    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    /* left: 50% !important; */
-    /* transform: translate(-50%, 0); */
-}
-
-.kit-tooltip-top .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="top"] .tooltip-arrow::before {
-    bottom: 0;
-    left: 50%;
-    transform: rotate(
-            225deg
-    ) translate(0, 100%);
-    transform-origin: 0 100%;
-    border-left-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
-}
-/*right*/
-.kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"], .kit-tooltip-end {
-    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
-}
-
-.kit-tooltip-right .arrow,
-.kit-tooltip-auto[x-placement^="right"] .arrow,
-.kit-tooltip-end .tooltip-arrow {
-    left: 0;
-    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    top: 50% !important;
-    transform: translate(0px, -50%) !important;
-}
-
-.kit-tooltip-right .arrow::before,
-.kit-tooltip-auto[x-placement^="right"] .arrow::before,
-.kit-tooltip-end .tooltip-arrow::before {
-    left: 0px;
-    top: 50%;
-    transform: rotate(
-            225deg
-    ) translate(25%, -50%);
-    transform-origin: 75% 0;
-    border-right-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-}
-/*bottom*/
-.kit-tooltip-bottom, .kit-tooltip-auto[x-placement^="bottom"] {
-    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
-}
-
-.kit-tooltip-bottom .tooltip-arrow, .kit-tooltip-auto[x-placement^="bottom"] .arrow {
-    top: 0;
-    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    /*left: 50% !important;*/
-    /*transform: translate(-50%, 0);*/
-}
-
-.kit-tooltip-bottom .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .arrow::before {
-    top: 0;
-    left: 50%;
-    transform: rotate(
-            45deg
-    ) translate(0, 0);
-    transform-origin: 0 0;
-    border-left-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
-}
-
-/*left*/
-.kit-tooltip-left,
-.kit-tooltip-auto[x-placement^="left"],
-.kit-tooltip-start {
-    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
-}
-
-.kit-tooltip-left .arrow, .kit-tooltip-auto[x-placement^="left"] .arrow,
-.kit-tooltip-start .tooltip-arrow {
-    right: 0;
-    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    top: 50% !important;
-    transform: translate(0px, -50%) !important;
-}
-
-.kit-tooltip-left .arrow::before,
-.kit-tooltip-auto[x-placement^="left"] .arrow::before,
-.kit-tooltip-start .tooltip-arrow::before {
-    right: 0;
-    top: 50%;
-    transform: rotate(
-            45deg
-    ) translate(-25%, -50%);
-    transform-origin: 25% 0;
-    border-right-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-}
-
 .tooltip-inner {
     max-width: 200px;
     padding: 0.25rem 0.5rem;
-    color: var(--kit-tooltip-color);
+    color: var(--popper-color);
     text-align: center;
-    background-color: var(--kit-tooltip-content-color);
+    background-color: var(--popper-content-color);
     border-radius: 0.25rem;
-    border: var(--kit-tooltip-border-width) solid var(--kit-tooltip-border-color);
+    border: var(--popper-border-width) solid var(--popper-border-color);
-    box-shadow: 0px 0px 5px -1px var(--kit-tooltip-content-color);
+    box-shadow: 0px 0px 5px -1px var(--popper-content-color);
 }

assets/tooltip/tooltip.js

@@ -25,9 +25,9 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
      */
 
     const NAME = 'tooltip'
-    const DATA_KEY = 'kit.tooltip'
+    const DATA_KEY = 'bs.tooltip'
     const EVENT_KEY = `.${DATA_KEY}`
-    const CLASS_PREFIX = 'kit-tooltip'
+    const CLASS_PREFIX = 'bs-tooltip'
     const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
     const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn'])
 
@@ -62,7 +62,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
     const Default = {
         animation: true,
         template: '<div class="tooltip" role="tooltip">' +
-            '<div class="tooltip-arrow"></div>' +
+            '<div class="tooltip-arrow" data-popper-arrow="true"></div>' +
             '<div class="tooltip-inner"></div>' +
             '</div>',
         trigger: 'hover focus',
@@ -76,7 +76,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
         fallbackPlacements: ['top', 'right', 'bottom', 'left'],
         boundary: 'clippingParents',
         customClass: '',
-        sanitize: true,
+        sanitize: false,
         sanitizeFn: null,
         allowList: DefaultAllowlist,
         popperConfig: null
@@ -115,6 +115,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
      * ------------------------------------------------------------------------
      */
 
+    /** @class kitTooltip */
     class Tooltip extends BaseComponent {
         constructor(element, config) {
             if (typeof Popper === 'undefined') {
@@ -405,7 +406,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
         }
 
         getTitle() {
-            let title = this._element.getAttribute('data-kit-original-title')
+            let title = this._element.getAttribute('data-bs-original-title')
 
             if (!title) {
                 title = typeof this._config.title === 'function' ?
@@ -552,10 +553,10 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
 
         _fixTitle() {
             const title = this._element.getAttribute('title')
-            const originalTitleType = typeof this._element.getAttribute('data-kit-original-title')
+            const originalTitleType = typeof this._element.getAttribute('data-bs-original-title')
 
             if (title || originalTitleType !== 'string') {
-                this._element.setAttribute('data-kit-original-title', title || '')
+                this._element.setAttribute('data-bs-original-title', title || '')
                 if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
                     this._element.setAttribute('aria-label', title)
                 }

assets/tooltip/tooltipJq.css

@@ -1,171 +0,0 @@
-:root {
-    --kit-tooltip-font-size: 0.8em;
-    --kit-tooltip-color: #ffffff;
-    --kit-tooltip-content-color: #212121fa;
-    --kit-tooltip-border-color: #212121fa;
-    --kit-tooltip-border-width: 0px;
-    --kit-tooltip-arrow-width: 0.8em;
-    --math-sqrt-2: 1.414213562373095;
-}
-.tooltip {
-    position: absolute;
-    z-index: 1070;
-    display: block;
-    margin: 0;
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.5;
-    text-align: left;
-    text-align: start;
-    text-decoration: none;
-    text-shadow: none;
-    text-transform: none;
-    letter-spacing: normal;
-    word-break: normal;
-    word-spacing: normal;
-    white-space: normal;
-    line-break: auto;
-    font-size: var(--kit-tooltip-font-size);
-    word-wrap: break-word;
-    opacity: 0;
-}
-
-.tooltip.show {
-    opacity: 0.9;
-}
-
-.tooltip .arrow {
-    position: absolute;
-    display: block;
-    width: 0.8rem;
-    height: 0.4rem;
-    overflow: hidden;
-}
-
-.tooltip .arrow::before {
-    border-width: var(--kit-tooltip-border-width) var(--kit-tooltip-border-width) 0px 0px;
-    position: absolute;
-    content: "";
-    border-color: transparent;
-    border-style: solid;
-    width: var(--kit-tooltip-arrow-width);
-    height: var(--kit-tooltip-arrow-width);
-    background-color: var(--kit-tooltip-content-color);
-    box-shadow: 0px 0px 4px -2px var(--kit-tooltip-content-color);
-}
-
-.kit-tooltip-top, .kit-tooltip-auto[x-placement^="top"] {
-    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
-}
-
-.kit-tooltip-top .arrow, .kit-tooltip-auto[x-placement^="top"] .arrow {
-    bottom: 0;
-    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    /* left: 50% !important; */
-    /* transform: translate(-50%, 0); */
-}
-
-.kit-tooltip-top .arrow::before, .kit-tooltip-auto[x-placement^="top"] .arrow::before {
-    bottom: 0;
-    left: 50%;
-    transform: rotate(
-            225deg
-    ) translate(0, 100%);
-    transform-origin: 0 100%;
-    border-left-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
-}
-
-.kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"] {
-    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
-}
-
-.kit-tooltip-right .arrow, .kit-tooltip-auto[x-placement^="right"] .arrow {
-    left: 0;
-    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    top: 50% !important;
-    transform: translate(0px, -50%);
-}
-
-.kit-tooltip-right .arrow::before, .kit-tooltip-auto[x-placement^="right"] .arrow::before {
-    left: 0px;
-    top: 50%;
-    transform: rotate(
-            225deg
-    ) translate(25%, -50%);
-    transform-origin: 75% 0;
-    border-right-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-}
-
-.kit-tooltip-bottom, .kit-tooltip-auto[x-placement^="bottom"] {
-    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
-}
-
-.kit-tooltip-bottom .arrow, .kit-tooltip-auto[x-placement^="bottom"] .arrow {
-    top: 0;
-    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    /*left: 50% !important;*/
-    /*transform: translate(-50%, 0);*/
-}
-
-.kit-tooltip-bottom .arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .arrow::before {
-    top: 0;
-    left: 50%;
-    transform: rotate(
-            45deg
-    ) translate(0, 0);
-    transform-origin: 0 0;
-    border-left-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
-}
-
-::before {}
-
-.kit-tooltip-left, .kit-tooltip-auto[x-placement^="left"] {
-    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
-}
-
-.kit-tooltip-left .arrow, .kit-tooltip-auto[x-placement^="left"] .arrow {
-    right: 0;
-    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
-    top: 50% !important;
-    transform: translate(0px, -50%);
-}
-
-.kit-tooltip-left .arrow::before, .kit-tooltip-auto[x-placement^="left"] .arrow::before {
-    right: 0;
-    top: 50%;
-    transform: rotate(
-            45deg
-    ) translate(-25%, -50%);
-    transform-origin: 25% 0;
-    border-right-color: var(
-            --kit-tooltip-border-color);
-    border-top-color: var(
-            --kit-tooltip-border-color);
-}
-
-.tooltip-inner {
-    max-width: 200px;
-    padding: 0.25rem 0.5rem;
-    color: var(--kit-tooltip-color);
-    text-align: center;
-    background-color: var(--kit-tooltip-content-color);
-    border-radius: 0.25rem;
-    border: var(--kit-tooltip-border-width) solid var(--kit-tooltip-border-color);
-    box-shadow: 0px 0px 5px -1px var(--kit-tooltip-content-color);
-}

templates/card/block.php

@@ -8,7 +8,7 @@
         <div class="flex-card__content">
             <div class="flex-card__body-shell aspect-ratio">
                 <div class="flex-card__body">
-                    <div class="flex-card__picture"><?=$arParams['picture']?></div>
+                    <div class="flex-card__picture kit-picture"><?=$arParams['picture']?></div>
                     <div class="flex-card__title">
                         <div class="kit-line-clamp">
                             <?=$arParams['name']?>
@@ -20,6 +20,17 @@
             <div class="flex-card__header"><?=$arParams['header']?></div>
             <div class="flex-card__footer"><?=$arParams['footer']?></div>
             <div class="flex-card__hover"><?=$arParams['hover']?></div>
+            <div class="flex-list flex-list--ticket"><?
+                foreach ($item['tickets'] as $ticket) {
+                    ?>
+                    <div class="flex-list-item">
+                        <div class="ticket-item <?=$ticket['code']?>">
+                            <div class="kit-line-clamp"><?=$ticket['name']?></div>
+                        </div>
+                    </div>
+                    <?
+                }
+            ?></div>
         </div>
     </div>
 </div>

templates/field/hint.php

@@ -1,3 +1,3 @@
-<div class="kit-field__hint kit-icon" data-toggle="tooltip" title="<?=\Bx\Kit\Node\Lib::safeHtmlAttr($arParams['TITLE'])?>">
+<div class="kit-field__hint kit-icon" data-bs-toggle="tooltip" title="<?=\Bx\Kit\Node\Lib::safeHtmlAttr($arParams['TITLE'])?>">
     <?app()->service()->templater()->render('kit:svg/hint')?>
 </div>

templates/input.php

@@ -12,7 +12,7 @@ $arParams['TYPE'] = $arParams['TYPE']?:'hidden';
 $isReadonly = Tools::isTrue($arParams['READONLY']);
 $isRequired = Tools::isTrue($arParams['REQUIRED']);
 $isChecked = Tools::isTrue($arParams['CHECKED']);
-$isHint = boolval(strlen($arParams['HINT']));
+$isHint = (string)($arParams['HINT']) !== '';
 $isDatepicker = Tools::isTrue($arParams['DATEPICKER']) || is_array($arParams['DATEPICKER']);
 
 $label = $arParams['LABEL'];
@@ -62,9 +62,9 @@ if($isHint) {
         ?>
         autocomplete="off"
     ><?
-    if($isHint){?><div class="kit-field__hint kit-icon" data-toggle="tooltip" data-kit-html="true" title="<?=Str::safeHtmlAttr($arParams['HINT'])?>" data-placement="top">
+    if($isHint){
-    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="14px" height="14px" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd;" viewBox="0 0 5.36 5.36"><g id="Слой_x0020_1"><path class="fil0" d="M2.68 0c1.48,0 2.68,1.2 2.68,2.68 0,1.48 -1.2,2.68 -2.68,2.68 -1.48,0 -2.68,-1.2 -2.68,-2.68 0,-1.48 1.2,-2.68 2.68,-2.68zm-0.48 2.98c0.21,-0.16 0.37,-0.34 0.5,-0.55 0.13,-0.2 0.19,-0.41 0.19,-0.62 0,-0.2 -0.08,-0.3 -0.23,-0.3 -0.07,0 -0.12,0.02 -0.16,0.06 -0.04,0.04 -0.06,0.1 -0.06,0.17 0,0.07 0.02,0.15 0.05,0.24l-0.64 0.15c-0.05,-0.14 -0.07,-0.28 -0.07,-0.41 0,-0.25 0.08,-0.45 0.23,-0.6 0.16,-0.14 0.38,-0.21 0.66,-0.21 0.29,0 0.51,0.08 0.67,0.23 0.16,0.15 0.24,0.37 0.24,0.65 0,0.26 -0.06,0.5 -0.19,0.72 -0.13,0.22 -0.31,0.42 -0.55,0.61l0 0.42 -0.64 0 0 -0.56zm-0.02 0.81l0.69 0 0 0.67 -0.69 0 0 -0.67z"/></g></svg>
+        app()->service()->templater()->render('kit:field/hint', ['TITLE' => $arParams['HINT']]);
-    </div><?}
+    }
     ?>
     <div class="kit-field__label"><div class="kit-field__label-content kit-line-clamp"><?=$label;?></div><?
         if(in_array($arParams['TYPE'], ['radio', 'checkbox'])) {?>

tests/card/block.php

@@ -0,0 +1,72 @@
+<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
+<?
+if(\Bitrix\Main\Loader::includeModule('wt.core')) {
+    app()->service()->assets()->setPlugins([
+        'kit:config',
+        'kit:flex-kit',
+        'kit:core',
+        'kit:bsCore',
+        'kit:collapse',
+        'kit:site',
+        'kit:toolkit',
+        'kit:theme',
+    ])->render();
+}
+$APPLICATION->ShowHead();
+
+?>
+<style  type="text/css">
+    .section-product-list {
+        --col-count: 5;
+
+    }
+    .section-product-list .flex-card {
+        --kit-color-content: #FFF;
+        --aspect-ratio: calc(200 / 250);
+    }
+    .section-product-list .flex-card__picture {
+        flex-grow: 1;
+    }
+    .flex-card__hover {
+        text-align: center;
+        color: grey;
+        font-size: 0.8em;
+    }
+</style>
+<?
+
+$items = array_fill(0, 40, [
+    'id' => 1,
+    'name' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit  Ab accusamus aliquid, consequuntur corporis ducimus',
+    'hover' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit  Ab accusamus aliquid, consequuntur corporis ducimus',
+    'picture' => app()->service()->templater()->get('kit:svg/shop/cardPictureEmpty'),
+    'text_preview' => 'asdas asdas dasdasd',
+    'tickets' => [
+        [
+            'code' => 'news',
+            'name' => 'Новинка'
+        ],
+        [
+            'code' => 'discount',
+            'name' => 'Скидка'
+        ]
+    ]
+]);
+
+?>
+<div class="kit-wrapper">
+    <section class="section-product-list">
+        <div>
+            <h1>Каталог</h1>
+        </div>
+        <div class="flex-list flex-card-list--list-">
+            <?foreach($items as $item) {?>
+                <div class="flex-list-item">
+                    <?
+                    echo app()->service()->templater()->get('kit:card/block', $item);
+                    ?>
+                </div>
+            <?}?>
+        </div>
+    </section>
+</div>

tests/cheatsheet.php

@@ -15,7 +15,11 @@ if(\Bitrix\Main\Loader::includeModule('wt.core')) {
 $APPLICATION->ShowHead();
 
 ?>
+<script>
+    kit.ready(['popover', 'datepicker'], function () {
 
+    });
+</script>
 <div class="kit-wrapper">
 
     <h1 style="text-align: center;">BX.KIT FRONT-END FRAMEWORK</h1>
@@ -27,6 +31,8 @@ $APPLICATION->ShowHead();
     <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eos esse excepturi explicabo fugit labore laborum quaerat quasi voluptatibus? A ab earum explicabo labore nobis nostrum optio perspiciatis provident, quam.</p>
 
+
+    <h2>Tooltip</h2>
     <div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
         <div class="flex-list-item">
             <?
@@ -34,7 +40,7 @@ $APPLICATION->ShowHead();
                 'LABEL' => 'Tooltip on top',
                 'CLASS' => '',
                 'ATTR' => [
-                    'data-toggle' => 'tooltip',
+                    'data-bs-toggle' => 'tooltip',
                     'data-bs-placement' => 'top',
                     'title' => 'Tooltip on top'
                 ]
@@ -47,7 +53,7 @@ $APPLICATION->ShowHead();
                 'LABEL' => 'Tooltip on end',
                 'CLASS' => '',
                 'ATTR' => [
-                    'data-toggle' => 'tooltip',
+                    'data-bs-toggle' => 'tooltip',
                     'data-bs-placement' => 'right',
                     'title' => 'Tooltip on end'
                 ]
@@ -60,7 +66,7 @@ $APPLICATION->ShowHead();
                 'LABEL' => 'Tooltip on bottom',
                 'CLASS' => '',
                 'ATTR' => [
-                    'data-toggle' => 'tooltip',
+                    'data-bs-toggle' => 'tooltip',
                     'data-bs-placement' => 'bottom',
                     'title' => 'Tooltip on bottom'
                 ]
@@ -73,7 +79,7 @@ $APPLICATION->ShowHead();
                 'LABEL' => 'Tooltip on start',
                 'CLASS' => '',
                 'ATTR' => [
-                    'data-toggle' => 'tooltip',
+                    'data-bs-toggle' => 'tooltip',
                     'data-bs-placement' => 'left',
                     'title' => 'Tooltip on start'
                 ]
@@ -86,7 +92,7 @@ $APPLICATION->ShowHead();
                 'LABEL' => 'Tooltip with HTML',
                 'CLASS' => '',
                 'ATTR' => [
-                    'data-toggle' => 'tooltip',
+                    'data-bs-toggle' => 'tooltip',
                     'data-bs-html' => 'true',
                     'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
                 ]
@@ -95,6 +101,98 @@ $APPLICATION->ShowHead();
         </div>
     </div>
 
+    <h2>Popover</h2>
+
+    <div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Popover on top',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-bs-toggle' => 'popover',
+                    'data-bs-placement' => 'top',
+                    'data-bs-content' => 'Top popover',
+                    'data-bs-container' => 'body',
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Popover on right',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-bs-toggle' => 'popover',
+                    'data-bs-placement' => 'right',
+                    'data-bs-content' => 'Right popover',
+                    'data-bs-container' => 'body',
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Popover on bottom',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-bs-toggle' => 'popover',
+                    'data-bs-placement' => 'bottom',
+                    'data-bs-content' => 'Bottom popover',
+                    'data-bs-container' => 'body',
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Popover on left',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-bs-toggle' => 'popover',
+                    'data-bs-placement' => 'left',
+                    'data-bs-content' => 'Left popover',
+                    'data-bs-container' => 'body',
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => htmlspecialchars('<HTML> & header'),
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-bs-toggle' => 'popover',
+                    'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
+                    'data-bs-container' => 'body',
+                    'data-bs-html' => 'true',
+                    'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'trigger focus',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-bs-toggle' => 'popover',
+                    'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
+                    'data-bs-container' => 'body',
+                    'data-bs-html' => 'true',
+                    'data-bs-trigger' => 'focus',
+                    'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
+                ]
+            ]);
+            ?>
+        </div>
+    </div>
+
 
     <div class="d-flex justify-content-between flex-wrap">
         <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">

tests/flex-card/product-list-item.php

@@ -1,49 +0,0 @@
-<?php
-
-
-?>
-
-<div class="flex-card aspect-ratio flex-list-item">
-    <div class="flex-card__section">
-        <div class="flex-card__content">
-            <div class="flex-card__body-shell aspect-ratio">
-                <div class="flex-card__body">
-                    <div class="flex-card__picture">
-                        <div class="kit-picture" style="background-image: url(<?=$item['image_preview']?>)">
-
-                        </div>
-                    </div>
-                    <div class="flex-card__title">
-                        <div class="kit-line-clamp">
-                            <?=$item['name']?>
-                        </div>
-                    </div>
-                    <div class="flex-card__props"></div>
-                </div>
-
-            </div>
-            <div class="flex-card__header">
-                <div class="flex-list flex-list--ticket">
-                    <?
-                    foreach ($item['tickets'] as $ticket) {
-                        ?>
-                        <div class="flex-list-item">
-                            <div class="ticket-item <?=$ticket['code']?>">
-                                <div class="kit-line-clamp"><?=$ticket['name']?></div>
-                            </div>
-                        </div>
-                        <?
-                    }
-                    ?>
-                </div>
-            </div>
-            <div class="flex-card__footer"></div>
-            <div class="flex-card__hover">
-                <div class="flex-card__hover-content">
-                    <?=$item['hover']?>
-                </div>
-            </div>
-            <div class="flex-card__border"></div>
-        </div>
-    </div>
-</div>

tests/flex-card/product-list.php

@@ -1,65 +0,0 @@
-
-
-<head>
-    <script src="chat.js"></script>
-    <link href="./../../assets/flex-kit/flex-kit.css" rel="stylesheet">
-    <style  type="text/css">
-        .section-product-list {
-            --col-count: 4;
-
-        }
-        .section-product-list .flex-card {
-            --kit-color-content: #FFF;
-            --aspect-ratio: calc(200 / 250);
-        }
-        .section-product-list .flex-card__picture {
-            flex-grow: 1;
-        }
-        .flex-card__hover {
-            text-align: center;
-            color: grey;
-            font-size: 0.8em;
-        }
-    </style>
-
-</head>
-<?
-
-$items = array_fill(0, 40, [
-    'id' => 1,
-    'name' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit  Ab accusamus aliquid, consequuntur corporis ducimus',
-    'hover' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit  Ab accusamus aliquid, consequuntur corporis ducimus',
-    'image_preview' => './product.svg',
-    'image_detail' => '',
-    'text_preview' => 'asdas asdas dasdasd',
-    'tickets' => [
-        [
-            'code' => 'news',
-            'name' => 'Новинка'
-        ],
-        [
-            'code' => 'discount',
-            'name' => 'Скидка'
-        ]
-    ]
-]);
-
-?>
-<body>
-    <div class="kit-wrapper">
-        <section class="section-product-list">
-
-            <div>
-                <h1>Каталог</h1>
-            </div>
-
-            <div class="flex-list flex-card-list--list-">
-                <?foreach($items as $item) {?>
-                        <?
-                        include "product-list-item.php";
-                        ?>
-                <?}?>
-            </div>
-        </section>
-    </div>
-</body>