UNPKG

@progress/kendo-ui

Version:

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

134 lines (109 loc) 4.57 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); require('./kendo.html.base.js'); require('./kendo.icons.js'); require('./kendo.core.js'); require('./kendo.html.icon.js'); require('@progress/kendo-svg-icons'); const __meta__ = { id: "html.chip", name: "Html.Chip", category: "web", description: "HTML rendering utility for Kendo UI for jQuery.", depends: [ "html.base", "icons" ], features: [] }; (function($, undefined$1) { var kendo = window.kendo, HTMLBase = kendo.html.HTMLBase; var renderChip = function(element, options) { if (!element || $.isPlainObject(element)) { options = element; element = $("<span></span>"); } return (new HTMLChip(element, options)).html(); }; var HTMLChip = HTMLBase.extend({ init: function(element, options) { var that = this; HTMLBase.fn.init.call(that, element, options); that._wrapper(); }, options: { name: "HTMLChip", size: "medium", rounded: "medium", fillMode: "solid", themeColor: "base", attr: {}, icon: "", iconClass: "", iconAttr: {}, removable: false, removableAttr: {}, removeIcon: "x-circle", removeIconClass: "", content: "", text: "", actions: [], stylingOptions: [ "size", "rounded", "fillMode", "themeColor" ] }, _wrapper: function() { var that = this, options = that.options; options.text = options.text || options.label; that.wrapper = that.element.wrap("<div class='k-chip'></div>").parent().attr(options.attr); that._addClasses(); if (options.icon) { that.wrapper.prepend($(kendo.ui.icon({ icon: options.icon, size: "small", iconClass: `k-chip-icon${options.iconClass ? ` ${options.iconClass}` : '' }` })).attr(options.iconAttr)); } else if (options.iconClass) { that.wrapper.prepend($("<span class='" + options.iconClass + "'></span>").attr(options.iconAttr)); } else if (options.avatarClass) { that.wrapper.prepend($("<span class='k-chip-avatar k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full " + options.avatarClass + "'></span>").attr(options.iconAttr)); } that.element.addClass("k-chip-content"); if (options.text) { that.element.html('<span class="k-chip-label">' + options.text + '</span>'); } if (options.visible === false) { that.wrapper.addClass("k-hidden"); } if (options.selected === true) { that.wrapper.addClass("k-selected"); } if (options.enabled === false) { that.wrapper.addClass("k-disabled"); } if ((options.actions && options.actions.length > 0) || options.removable) { that._actions(); } }, _actions: function() { var that = this, options = that.options; that.actionsWrapper = $("<span class='k-chip-actions'></span>"); that.actionsWrapper.appendTo(that.wrapper); if (options.actions && options.actions.length > 0) { for (var i = 0; i < options.actions.length; i++) { var action = options.actions[i]; that.actionsWrapper.append($(`<span class='k-chip-action ${action.iconClass ? action.iconClass : ''}'>${kendo.ui.icon({ icon: action.icon, size: "small" })}</span>`).attr(action.attr ? action.attr : {})); } } if (options.removable) { that.actionsWrapper.append($(`<span class='k-chip-action k-chip-remove-action'>${kendo.ui.icon({ icon: options.removeIcon, size: "small" })}</span>`).attr(options.removableAttr)); } } }); $.extend(kendo.html, { renderChip: renderChip, HTMLChip: HTMLChip }); kendo.cssProperties.registerPrefix("HTMLChip", "k-chip-"); kendo.cssProperties.registerValues("HTMLChip", [{ prop: "rounded", values: kendo.cssProperties.roundedValues.concat([['full', 'full']]) }]); })(window.kendo.jQuery); var kendo$1 = kendo; exports.__meta__ = __meta__; exports.default = kendo$1;