@king-design/react 2.1.1 → 3.0.0-beta.1

package/components/tag/styles.js

@@ -5,8 +5,8 @@ import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 var types = ['primary', 'warning', 'danger', 'success', 'disabled'];
 var defaults = deepDefaults({
-  get borderColor() {
-    return theme.color.border;
+  get border() {
+    return "1px solid " + theme.color.border;
   },
 
   get borderRadius() {
@@ -19,9 +19,20 @@ var defaults = deepDefaults({
 
   padding: "0 8px",
   height: '20px',
+
+  get bgColor() {
+    return theme.color.bg;
+  },
+
   close: {
     fontSize: '20px',
-    gap: '8px'
+    gap: '8px',
+
+    /**
+     * fix the width to calculate the width for nowrap tags,
+     * otherwise the width will be decided by font font-icons loaded
+     */
+    width: '7px'
   },
   disabled: {
     get color() {
@@ -38,24 +49,36 @@ var defaults = deepDefaults({
 
   },
   large: {
-    padding: "0px 16px",
-    height: '32px',
+    padding: "0px 8px",
+    height: '24px',
+
+    get fontSize() {
+      return theme.large.fontSize;
+    },
+
     close: {
-      fontSize: '24px',
-      gap: '12px'
+      fontSize: '22px',
+      gap: '6px'
     }
   },
   small: {
     padding: "0 4px",
-    height: '18px',
+    height: '16px',
+
+    get fontSize() {
+      return theme.small.fontSize;
+    },
+
     close: {
       fontSize: '18px',
       gap: '4px'
     }
   },
   mini: {
-    padding: "0 1px",
+    padding: "0 2px",
     height: '14px',
+    // get fontSize() { return theme.mini.fontSize },
+    fontSize: '11px',
     close: {
       fontSize: '16px',
       gap: '2px'
@@ -66,6 +89,9 @@ var defaults = deepDefaults({
       return theme.color.bg;
     }
 
+  },
+  tags: {
+    gap: '8px'
   }
 }, types.reduce(function (memo, type) {
   if (type === 'disabled') return memo;
@@ -87,13 +113,17 @@ setDefault(function () {
     tag: defaults
   }).tag;
 });
+export { tag };
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:1px solid ", tag.borderColor, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.k-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";}&.k-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(types).call(types, function (t) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:", tag.border, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.k-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";width:", tag.close.width, ";}&.k-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(types).call(types, function (t) {
     var styles = tag[t];
     return /*#__PURE__*/css("&.k-", t, "{color:", styles.color, ";border-color:", styles.color, ";background:", styles.bgColor, ";}");
   }), " ", _mapInstanceProperty(sizes).call(sizes, function (s) {
     if (s === 'default') return;
     var styles = tag[s];
-    return /*#__PURE__*/css("&.k-", s, "{padding:", styles.padding, ";height:", styles.height, ";.k-tag-close{font-size:", styles.close.fontSize, ";margin-left:", styles.close.gap, ";}}");
-  }), "&.k-dashed{border-style:dashed;}");
+    return /*#__PURE__*/css("&.k-", s, "{padding:", styles.padding, ";height:", styles.height, ";font-size:", styles.fontSize, ";.k-tag-close{font-size:", styles.close.fontSize, ";margin-left:", styles.close.gap, ";}}");
+  }), "&.k-dashed{border-style:dashed;}&.k-dragging{opacity:0;}");
+}
+export function makeTagsStyles() {
+  return /*#__PURE__*/css("display:flex;flex-wrap:wrap;gap:", defaults.tags.gap, ";position:relative;overflow:hidden;&.k-nowrap{flex-wrap:nowrap;}.k-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;}.k-tags-more{cursor:default;font-family:monospace;}.k-tag.k-draggable{cursor:move;}");
 }

package/components/tag/tags.d.ts

@@ -0,0 +1,27 @@
+import { Component, TypeDefs, Key } from 'intact-react';
+import { TagProps } from './base';
+import type { Events } from '../types';
+export interface TagsProps extends Pick<TagProps, 'size' | 'border'> {
+    nowrap?: boolean;
+    draggable?: boolean;
+}
+export declare type TagsDragStartParam = {
+    key: Key;
+    from: number;
+};
+export declare type TagsDragEndParam = TagsDragStartParam & {
+    to: number;
+};
+export interface TagsEvents {
+    dragstart: [TagsDragStartParam];
+    dragend: [TagsDragEndParam];
+}
+export declare class Tags extends Component<TagsProps, TagsEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<TagsProps>>;
+    static defaults: () => Partial<TagsProps>;
+    static events: Events<TagsEvents>;
+    private children;
+    private draggable;
+    private nowrap;
+}

package/components/tag/tags.js

@@ -0,0 +1,51 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-react';
+import template from './tags.vdt';
+import { useNowrap } from './useNowrap';
+import { typeDefs as tagTypeDefs } from './base';
+import { useChildren } from './useChildren';
+import { useDraggable } from './useDraggable';
+var typeDefs = {
+  nowrap: Boolean,
+  draggable: Boolean,
+  size: tagTypeDefs.size,
+  border: tagTypeDefs.border
+};
+
+var defaults = function defaults() {
+  return {
+    size: 'default',
+    border: 'none'
+  };
+};
+
+var events = {
+  dragstart: true,
+  dragend: true
+};
+export var Tags = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Tags, _Component);
+
+  function Tags() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.children = useChildren();
+    _this.draggable = useDraggable(_this.children);
+    _this.nowrap = useNowrap(_this.draggable);
+    return _this;
+  }
+
+  return Tags;
+}(Component);
+Tags.template = template;
+Tags.typeDefs = typeDefs;
+Tags.defaults = defaults;
+Tags.events = events;

package/components/tag/tags.vdt.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createTextVNode as _$ct, extend as _$ex, EMPTY_OBJ as _$em, createElementVNode as _$ce } from 'intact-react';
+import { TransitionGroup } from 'intact';
+import { getRestProps } from '../utils';
+import { makeTagsStyles } from './styles';
+import { Tag } from './';
+import { Tooltip } from '../tooltip';
+import { Tags } from './tags';
+import { Virtual } from '../virtual';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      nowrap = _this$get.nowrap,
+      size = _this$get.size,
+      border = _this$get.border,
+      draggable = _this$get.draggable;
+
+  var classNameObj = (_classNameObj = {
+    'k-tags': true,
+    'k-nowrap': nowrap,
+    'k-draggable': draggable
+  }, _classNameObj[makeTagsStyles()] = true, _classNameObj[className] = className, _classNameObj);
+  var _this$nowrap = this.nowrap,
+      containerRef = _this$nowrap.containerRef,
+      children = _this$nowrap.children,
+      hiddenChildren = _this$nowrap.hiddenChildren;
+  var vNodes = children.value;
+  /**
+  * We should always render Tooltip in nowrap mode, otherwise it will be removed while we close one tag.
+  * Because we will render all tags to calculate the width
+  */
+
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'ref': containerRef
+  }), [!nowrap ? _$cc(TransitionGroup, {
+    'name': 'k-fade',
+    'children': vNodes
+  }) : vNodes, nowrap ? _$cc(Tooltip, {
+    'key': '$tooltip',
+    'hoverable': true,
+    'theme': 'light',
+    'className': 'k-tags-tooltip',
+    'children': _$cc(Tag, {
+      'key': '$more',
+      'className': _$cn({
+        "k-tags-more": true,
+        'c-hidden': !hiddenChildren.value.length
+      }),
+      'size': size,
+      'border': border,
+      'children': [_$ct('\n            +'), hiddenChildren.value.length]
+    }, '$more'),
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+          __$blocks = _$ex({}, $blocks);
+
+      return (_$blocks['content'] = function ($super) {
+        return _$ce(2, 'div', hiddenChildren.value, 0, _$cn(classNameObj));
+      }, __$blocks['content'] = function ($super, data) {
+        var block = $blocks['content'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['content'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), __$blocks;
+    }.call($this, _$em)
+  }, '$tooltip') : undefined]);
+}
+;

package/components/tag/useChildren.d.ts

@@ -0,0 +1,2 @@
+import { VNode } from 'intact-react';
+export declare function useChildren(): import("../../hooks/useState").State<VNode<import("intact").VNodeTag>[]>;

package/components/tag/useChildren.js

@@ -0,0 +1,39 @@
+import { useInstance } from 'intact-react';
+import { eachChildren, findChildren, isComponentVNode } from '../utils';
+import { isStringOrNumber } from 'intact-shared';
+import { useState } from '../../hooks/useState';
+import { Tag } from './';
+import { Dropdown } from '../dropdown';
+import { Tooltip } from '../tooltip';
+export function useChildren() {
+  var instance = useInstance();
+  var children = useState([]);
+  instance.watch('children', function (v) {
+    var vNodes = [];
+    eachChildren(v, function (vNode) {
+      if (isTagOrContainsTag(vNode)) {
+        vNodes.push(vNode);
+      }
+    });
+    children.set(vNodes);
+  });
+  return children;
+}
+
+function isTagOrContainsTag(vNode) {
+  if (isStringOrNumber(vNode)) return false;
+
+  if (isComponentVNode(vNode, Tag)) {
+    return true;
+  }
+
+  if (isComponentVNode(vNode, Dropdown) || isComponentVNode(vNode, Tooltip)) {
+    var _vNode$props;
+
+    return !!findChildren((_vNode$props = vNode.props) == null ? void 0 : _vNode$props.children, function (vNode) {
+      return isTagOrContainsTag(vNode);
+    });
+  }
+
+  return false;
+}

package/components/tag/useDraggable.d.ts

@@ -0,0 +1,3 @@
+import { VNode } from 'intact-react';
+import { State } from '../../hooks/useState';
+export declare function useDraggable(originVNodes: State<VNode[]>): State<VNode<import("intact").VNodeTag>[]>;

package/components/tag/useDraggable.js

@@ -0,0 +1,89 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { useInstance, findDomFromVNode, createVNode as h } from 'intact-react';
+import { nextFrame, swap } from '../utils';
+import { useState, watchState } from '../../hooks/useState';
+import { Virtual } from '../virtual';
+import { cx } from '@emotion/css';
+export function useDraggable(originVNodes) {
+  var instance = useInstance();
+  var children = useState([]);
+  var draggingKey = useState(null);
+  var draggingIndex = -1;
+  var originIndex = -1;
+  var lastOverIndex = -1;
+  /* let the dragover event only trigger once when tags changed order */
+
+  watchState(originVNodes, render);
+  watchState(draggingKey, render);
+
+  function render() {
+    var _context;
+
+    var _instance$get = instance.get(),
+        draggable = _instance$get.draggable;
+
+    children.set(!draggable ? originVNodes.value : _mapInstanceProperty(_context = originVNodes.value).call(_context, function (vNode, index) {
+      var key = vNode.key;
+      return h(Virtual, {
+        'ev-dragstart': function evDragstart() {
+          return onStart(key, index);
+        },
+        'ev-dragover': function evDragover(e) {
+          return onOver(e, key, index);
+        },
+        'ev-dragend': function evDragend(e) {
+          return onEnd(e);
+        },
+        key: key,
+        draggable: draggable,
+        className: cx({
+          'k-dragging': key === draggingKey.value,
+          'k-draggable': draggable
+        })
+      }, vNode);
+    }));
+  }
+
+  function onStart(key, index) {
+    draggingIndex = originIndex = index;
+    nextFrame(function () {
+      draggingKey.set(key);
+    });
+    instance.trigger('dragstart', {
+      key: key,
+      from: index
+    });
+  }
+
+  function onOver(e, key, index) {
+    e.preventDefault();
+    e.stopPropagation(); // Dragging the tag of another tags drag to this tags should be ignored
+
+    if (draggingIndex === -1) return;
+    if (lastOverIndex === index) return;
+    lastOverIndex = index;
+    if (index === draggingIndex) return; // if the tag has move transition, you cannot drag over it before transition ended.
+
+    var dom = findDomFromVNode(children.value[index], true);
+    if (dom.classList.contains('k-fade-move')) return;
+    var vNodes = swap(originVNodes.value, draggingIndex, index);
+    lastOverIndex = draggingIndex;
+    draggingIndex = index;
+    originVNodes.set(vNodes);
+  }
+
+  function onEnd(e) {
+    e.preventDefault();
+    instance.trigger('dragend', {
+      key: draggingKey.value,
+      from: originIndex,
+      to: draggingIndex
+    });
+    draggingKey.set(null);
+    lastOverIndex = -1;
+    draggingIndex = -1;
+    originIndex = -1;
+  }
+
+  return children;
+}

package/components/tag/useNowrap.d.ts

@@ -0,0 +1,7 @@
+import { VNode } from 'intact-react';
+import { State } from '../../hooks/useState';
+export declare function useNowrap(originVNodes: State<VNode[]>): {
+    containerRef: import("intact").RefObject<HTMLDivElement>;
+    children: State<VNode<import("intact").VNodeTag>[]>;
+    hiddenChildren: State<VNode<import("intact").VNodeTag>[]>;
+};

package/components/tag/useNowrap.js

@@ -0,0 +1,115 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Map from "@babel/runtime-corejs3/core-js/map";
+import { useInstance, createRef, findDomFromVNode, onBeforeMount, nextTick } from 'intact-react';
+import { useState, watchState } from '../../hooks/useState';
+import { tag as tagStyles } from './styles';
+import { getLeft, getRight } from '../../styles/utils';
+import { useReceive } from '../../hooks/useReceive';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+export function useNowrap(originVNodes) {
+  var instance = useInstance();
+  var containerRef = createRef();
+  var children = useState([]);
+  var hiddenChildren = useState([]);
+  var estimateMoreElementWidth = useEstimateMoreElementWidth();
+  var offsetMap = useChildrenOffset(originVNodes);
+  watchState(originVNodes, function (v) {
+    children.set(v);
+    nextTick(refresh);
+  }); // instance.watch('children', refresh, { presented: true })
+
+  useResizeObserver(containerRef, refresh);
+
+  function refresh() {
+    if (!instance.get('nowrap')) return;
+    var container = containerRef.value;
+    var containerWidth = container.offsetWidth;
+    var vNodes = [];
+    var _originVNodes = originVNodes.value;
+    var length = _originVNodes.length;
+
+    if (_originVNodes.length > 1) {
+      _originVNodes.forEach(function (vNode, index) {
+        var offset = offsetMap.get(vNode); // estimate the "more" element's with for performance
+
+        var width = estimateMoreElementWidth(length - index - 1);
+
+        if (offset + width <= containerWidth) {
+          vNodes.push(vNode);
+        }
+      });
+    } else {
+      vNodes.push.apply(vNodes, _originVNodes);
+    }
+    /**
+     * refresh function will be called in ResizeObserver,
+     * state changed will cause container's width to change,
+     * and a error will throw (ResizeObserver loop completed with undelivered notifications)
+     * so we call setState in requestAnimationFrame
+     */
+
+
+    requestAnimationFrame(function () {
+      hiddenChildren.set(_sliceInstanceProperty(_originVNodes).call(_originVNodes, vNodes.length));
+      children.set(vNodes);
+    });
+  }
+
+  return {
+    containerRef: containerRef,
+    children: children,
+    hiddenChildren: hiddenChildren
+  };
+}
+
+function useChildrenOffset(vNodes) {
+  var instance = useInstance();
+  var map = new _Map(); // instance.watch('children', updateMap, { presented: true })
+
+  watchState(vNodes, function () {
+    return nextTick(updateMap);
+  });
+
+  function updateMap() {
+    map.clear();
+    if (!instance.get('nowrap')) return;
+    vNodes.value.forEach(function (vNode) {
+      var dom = findDomFromVNode(vNode, true);
+      if (!dom || dom.nodeType !== 1) return;
+      var offsetLeft = dom.offsetLeft,
+          offsetWidth = dom.offsetWidth;
+      map.set(vNode, offsetLeft + offsetWidth);
+    });
+  }
+
+  return map;
+}
+
+function useEstimateMoreElementWidth() {
+  var instance = useInstance();
+  var widthPerChar = 7.2;
+  var cacheWidth = 0;
+  onBeforeMount(cache);
+  useReceive(['size', 'border'], cache, true);
+
+  function cache() {
+    var _instance$get = instance.get(),
+        size = _instance$get.size,
+        border = _instance$get.border;
+
+    cacheWidth = parseInt(tagStyles.tags.gap) + widthPerChar
+    /* the "+" mark */
+    ;
+
+    if (border !== 'none') {
+      cacheWidth += 2;
+    }
+
+    var padding = size === 'default' ? tagStyles.padding : tagStyles[size].padding;
+    cacheWidth += parseInt(getLeft(padding)) + parseInt(getRight(padding));
+  }
+
+  return function (count) {
+    return Math.round(count.toString().length * widthPerChar + cacheWidth);
+  };
+}

package/components/timepicker/index.spec.js

@@ -100,7 +100,7 @@ describe('Timepicker', function () {
           case 45:
             expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']); // remove one value
 
-            _picker2$querySelecto = picker2.querySelectorAll('.k-select-close'), close = _picker2$querySelecto[1];
+            _picker2$querySelecto = picker2.querySelectorAll('.k-tag-close'), close = _picker2$querySelecto[1];
             close.click();
             _context2.next = 50;
             return wait();

package/components/tip/index.vdt.js

@@ -55,9 +55,7 @@ export default function ($props, $blocks, $__proto__) {
         'className': 'k-tip-close',
         'children': (_$blocks['close'] = function ($super) {
           return _$cc(Icon, {
-            'className': 'ion-ios-close-empty',
-            'size': 'large',
-            'color': type,
+            'className': 'k-icon-close',
             'hoverable': !disabled
           });
         }, __$blocks['close'] = function ($super, data) {

package/components/tip/styles.js

@@ -5,11 +5,12 @@ import { deepDefaults } from '../../styles/utils';
 var defaults = {
   title: {
     fontSize: '14px',
-    gap: '8px'
+    gap: '8px',
+    fontWeight: '500'
   },
 
   get color() {
-    return theme.color.text;
+    return theme.color.title;
   },
 
   get padding() {
@@ -24,5 +25,5 @@ setDefault(function () {
   }).tip;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("&.k-tip{display:flex;height:auto;padding:0;color:", tip.color, "!important;align-items:flex-start;}.k-tip-wrapper{flex:1;padding:", tip.padding, ";}.k-tip-title{font-size:", tip.title.fontSize, ";margin-bottom:", tip.title.gap, ";}&.k-fade-leave-active{position:relative;}");
+  return /*#__PURE__*/css("&.k-tip{display:flex;height:auto;padding:0;color:", tip.color, "!important;align-items:flex-start;}.k-tip-wrapper{flex:1;padding:", tip.padding, ";}.k-tip-title{font-size:", tip.title.fontSize, ";margin-bottom:", tip.title.gap, ";font-weight:", tip.title.fontWeight, ";}&.k-fade-leave-active{position:relative;}.k-tip-close:hover{background:none;}");
 }

package/components/tooltip/content.d.ts

@@ -6,9 +6,9 @@ export interface TooltipContentEvents extends DropdownMenuEvents {
 export interface TooltipContentBlocks extends DropdownMenuBlocks {
     buttons: null;
 }
-export declare class TooltipContent extends DropdownMenu<TooltipContentProps, TooltipContentEvents, TooltipContentBlocks> {
+export declare class TooltipContent<T extends TooltipContentProps = TooltipContentProps, E extends TooltipContentEvents = TooltipContentEvents, B extends TooltipContentBlocks = TooltipContentBlocks> extends DropdownMenu<T, E, B> {
     static template: string | import('intact-react').Template<any>;
-    private isEmptyChildren;
+    protected isEmptyChildren: boolean;
     private arrow;
     init(): void;
     private onEnter;

package/components/tooltip/content.vdt.js

@@ -1,4 +1,4 @@
-import { superCall as _$su, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, noop as _$no } from 'intact-react';
+import { superCall as _$su, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, noop as _$no, createElementVNode as _$ce, createUnknownComponentVNode as _$cc } from 'intact-react';
 import { Button } from '../button';
 import makeStyles from './styles';
 export default function ($props, $blocks, $__proto__) {
@@ -33,7 +33,7 @@ export default function ($props, $blocks, $__proto__) {
     'k-tooltip-content': true,
     'k-hoverable': hoverable || trigger === 'click',
     'k-always': always
-  }, _classNameObj["k-" + theme] = true, _classNameObj["k-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  }, _classNameObj["k-" + theme] = true, _classNameObj["k-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj[$props.className] = $props.className, _classNameObj);
   return _$su.call($this, {
     'value': !!value && !this.isEmptyChildren,
     'transition': {
@@ -50,28 +50,38 @@ export default function ($props, $blocks, $__proto__) {
     return (_$blocks['children'] = function ($super) {
       var _$cn2;
 
-      return [children, showArrow ? _$ce(2, 'i', null, 1, _$cn((_$cn2 = {
-        "k-tooltip-arrow": true
-      }, _$cn2["k-" + arrowType.value] = arrowType.value, _$cn2)), null, 'tooltip-arrow', arrowRef) : undefined, confirm ? _$ce(2, 'div', (_$blocks['buttons'] = function ($super) {
+      return [(_$blocks['body'] = function ($super) {
+        return children;
+      }, __$blocks['body'] = function ($super, data) {
+        var block = $blocks['body'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['body'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['body'](_$no)), confirm ? _$ce(2, 'div', (_$blocks['footer'] = function ($super) {
         return [_$cc(Button, {
+          'ev-click': this.cancel,
+          'size': 'small',
+          'children': cancelText
+        }), _$cc(Button, {
           'type': 'primary',
           'ev-click': this.ok,
           'size': 'small',
           'children': okText
-        }), _$cc(Button, {
-          'ev-click': this.cancel,
-          'size': 'small',
-          'children': cancelText
         })];
-      }, __$blocks['buttons'] = function ($super, data) {
-        var block = $blocks['buttons'];
+      }, __$blocks['footer'] = function ($super, data) {
+        var block = $blocks['footer'];
 
         var callBlock = function callBlock() {
-          return _$blocks['buttons'].call($this, $super, data);
+          return _$blocks['footer'].call($this, $super, data);
         };
 
         return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['buttons'](_$no)), 0, 'k-tooltip-buttons', null, 'tooltip-buttons') : undefined];
+      }, __$blocks['footer'](_$no)), 0, 'k-tooltip-footer', null, 'tooltip-footer') : undefined, showArrow ? _$ce(2, 'i', null, 1, _$cn((_$cn2 = {
+        "k-tooltip-arrow": true
+      }, _$cn2["k-" + arrowType.value] = arrowType.value, _$cn2)), null, 'tooltip-arrow', arrowRef) : undefined];
     }, __$blocks['children'] = function ($super, data) {
       var block = $blocks['children'];