web-mojo 2.2.57 → 2.2.59

package/dist/timeline.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.es.js","sources":["../src/extensions/timeline/TimelineViewItem.js","../src/extensions/timeline/TimelineView.js"],"sourcesContent":["/**\n * TimelineViewItem - Individual timeline item view\n * \n * Extends ListViewItem to provide timeline-specific rendering.\n * Each item is its own View with its own model, allowing for\n * independent re-rendering when the model changes.\n * \n * Expected model attributes:\n *   - date: Date string or Date object\n *   - title: Main heading (optional)\n *   - description: Body text (optional)\n *   - icon: Bootstrap icon class (optional)\n *   - color: Bootstrap color variant (optional)\n *   - meta: Additional metadata (optional)\n * \n * @example\n * const item = new TimelineViewItem({\n *   model: eventModel,\n *   dateFormat: 'relative',\n *   dotStyle: 'icon'\n * });\n */\n\nimport ListViewItem from '@core/views/list/ListViewItem.js';\nimport dataFormatter from '@core/utils/DataFormatter.js';\n\nclass TimelineViewItem extends ListViewItem {\n    constructor(options = {}) {\n        super({\n            className: 'timeline-item',\n            ...options\n        });\n\n        // Timeline-specific options\n        this.dateFormat = options.dateFormat || 'date';\n        this.dotStyle = options.dotStyle || 'solid';\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n\n        // Default timeline item template\n        if (!this.template) {\n            this.template = `\n                <div class=\"timeline-marker timeline-marker-{{markerType}}\">\n                    {{#hasIcon}}\n                    <i class=\"bi {{model.icon}} text-{{displayColor}}\"></i>\n                    {{/hasIcon}}\n                    {{^hasIcon}}\n                    <div class=\"timeline-dot bg-{{displayColor}}\"></div>\n                    {{/hasIcon}}\n                </div>\n                \n                <div class=\"timeline-content\">\n                    {{#showDate}}\n                    <div class=\"timeline-date text-muted small\">\n                        {{formattedDate}}\n                    </div>\n                    {{/showDate}}\n                    \n                    <div class=\"timeline-card\">\n                        {{#model.title}}\n                        <h6 class=\"timeline-title mb-1\">{{model.title}}</h6>\n                        {{/model.title}}\n                        \n                        {{#model.description}}\n                        <p class=\"timeline-description mb-0\">{{model.description}}</p>\n                        {{/model.description}}\n                        \n                        {{#model.meta}}\n                        <div class=\"timeline-meta mt-2 text-muted small\">\n                            {{model.meta}}\n                        </div>\n                        {{/model.meta}}\n                    </div>\n                </div>\n            `;\n        }\n    }\n\n    async onInit() {\n        await super.onInit();\n        this.processItemData();\n    }\n\n    processItemData() {\n        // Get color from model or use theme default\n        this.displayColor = this.model?.get?.('color') || this.model?.color || this.theme;\n        \n        // Determine marker type\n        const hasIcon = !!(this.model?.get?.('icon') || this.model?.icon) && this.dotStyle === 'icon';\n        this.hasIcon = hasIcon;\n        this.markerType = hasIcon ? 'icon' : this.dotStyle;\n        \n        // Format date\n        const dateValue = this.model?.get?.('date') || this.model?.date;\n        this.formattedDate = this.formatDate(dateValue);\n    }\n\n    formatDate(date) {\n        if (!date) return '';\n        \n        switch (this.dateFormat) {\n            case 'datetime':\n                return dataFormatter.pipe(date, 'datetime');\n            case 'relative':\n                return dataFormatter.pipe(date, 'timeago');\n            default:\n                return dataFormatter.pipe(date, 'date');\n        }\n    }\n\n    // Override to disable selection behavior in timeline\n    async onActionSelect(event, _element) {\n        event.stopPropagation();\n        \n        // Emit click event instead of selection\n        this.emit('item:click', {\n            item: this,\n            model: this.model,\n            index: this.index,\n            data: this.model?.toJSON ? this.model.toJSON() : this.model\n        });\n\n        if (this.listView) {\n            this.listView.emit('item:click', {\n                item: this,\n                model: this.model,\n                index: this.index,\n                data: this.model?.toJSON ? this.model.toJSON() : this.model\n            });\n        }\n    }\n}\n\nexport default TimelineViewItem;\n","/**\n * TimelineView - Timeline component extending ListView\n * \n * Displays chronological events from a Collection with clean, modern styling.\n * Each timeline item is managed as a separate view that updates independently\n * when its model changes.\n * \n * Features:\n * - Collection-based data management\n * - Left-aligned or center-aligned layout\n * - Customizable markers (dots, icons)\n * - Date formatting and grouping\n * - Individual item re-rendering\n * - Responsive Bootstrap 5 styling\n * \n * @example\n * const timeline = new TimelineView({\n *   collection: eventCollection,\n *   position: 'left',\n *   dotStyle: 'icon',\n *   dateFormat: 'relative'\n * });\n * \n * @example\n * // Custom item template\n * const timeline = new TimelineView({\n *   collection: historyCollection,\n *   itemTemplate: `\n *     <div class=\"custom-timeline-item\">\n *       <strong>{{model.title}}</strong>\n *       <p>{{model.description}}</p>\n *     </div>\n *   `\n * });\n */\n\nimport ListView from '@core/views/list/ListView.js';\nimport TimelineViewItem from './TimelineViewItem.js';\n\nclass TimelineView extends ListView {\n    constructor(options = {}) {\n        // Override ListView defaults with timeline-specific settings\n        super({\n            className: 'timeline-view',\n            itemClass: options.itemClass || TimelineViewItem,\n            selectionMode: 'none', // Timelines typically don't use selection\n            emptyMessage: options.emptyMessage || 'No timeline events to display',\n            template: `\n                <div class=\"timeline-container timeline-{{position}}\">\n                    {{#loading}}\n                        <div class=\"timeline-loading text-center py-4\">\n                            <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                                <span class=\"visually-hidden\">Loading...</span>\n                            </div>\n                            <span class=\"ms-2 text-muted\">Loading timeline...</span>\n                        </div>\n                    {{/loading}}\n                    {{^loading}}\n                        {{#isEmpty}}\n                            <div class=\"timeline-empty text-center text-muted py-4\">\n                                <i class=\"bi bi-clock-history fs-1 d-block mb-2\"></i>\n                                <p>{{emptyMessage}}</p>\n                            </div>\n                        {{/isEmpty}}\n                        {{^isEmpty}}\n                            <div class=\"timeline\" data-container=\"items\"></div>\n                        {{/isEmpty}}\n                    {{/loading}}\n                </div>\n            `,\n            ...options\n        });\n\n        // Timeline-specific options\n        this.position = options.position || 'left'; // 'left' or 'center'\n        this.dateFormat = options.dateFormat || 'date'; // 'date', 'datetime', 'relative'\n        this.dotStyle = options.dotStyle || 'solid'; // 'solid', 'hollow', 'icon'\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n        this.groupBy = options.groupBy || 'none'; // Future: 'none', 'day', 'month', 'year'\n    }\n\n    /**\n     * Override _createItemView to pass timeline-specific options\n     */\n    _createItemView(model, index) {\n        // Don't create duplicate views\n        if (this.itemViews.has(model.id)) return;\n\n        const itemView = new this.itemClass({\n            model: model,\n            index: index,\n            listView: this,\n            template: this.itemTemplate,\n            // Pass timeline-specific options to items\n            dateFormat: this.dateFormat,\n            dotStyle: this.dotStyle,\n            showDate: this.showDate,\n            theme: this.theme\n        });\n\n        // Store the item view\n        this.itemViews.set(model.id, itemView);\n\n        // Set up item event listeners\n        itemView.on('item:click', this._onItemClick.bind(this));\n\n        return itemView;\n    }\n\n    /**\n     * Handle item clicks (replaces selection behavior)\n     */\n    _onItemClick(event) {\n        this.emit('item:click', event);\n    }\n\n    /**\n     * Update timeline position\n     */\n    setPosition(position) {\n        if (position !== 'left' && position !== 'center') {\n            console.warn('Invalid position. Use \"left\" or \"center\"');\n            return this;\n        }\n        \n        this.position = position;\n        if (this.isMounted()) {\n            this.render();\n        }\n        return this;\n    }\n\n    /**\n     * Update date format for all items\n     */\n    setDateFormat(format) {\n        this.dateFormat = format;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dateFormat = format;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Update dot style for all items\n     */\n    setDotStyle(style) {\n        this.dotStyle = style;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dotStyle = style;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Toggle date display\n     */\n    toggleDates(show = null) {\n        this.showDate = show !== null ? show : !this.showDate;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.showDate = this.showDate;\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n}\n\nexport default TimelineView;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"timeline.es.js","sources":["../src/extensions/timeline/TimelineViewItem.js","../src/extensions/timeline/TimelineView.js"],"sourcesContent":["/**\n * TimelineViewItem - Individual timeline item view\n * \n * Extends ListViewItem to provide timeline-specific rendering.\n * Each item is its own View with its own model, allowing for\n * independent re-rendering when the model changes.\n * \n * Expected model attributes:\n *   - date: Date string or Date object\n *   - title: Main heading (optional)\n *   - description: Body text (optional)\n *   - icon: Bootstrap icon class (optional)\n *   - color: Bootstrap color variant (optional)\n *   - meta: Additional metadata (optional)\n * \n * @example\n * const item = new TimelineViewItem({\n *   model: eventModel,\n *   dateFormat: 'relative',\n *   dotStyle: 'icon'\n * });\n */\n\nimport ListViewItem from '@core/views/list/ListViewItem.js';\nimport dataFormatter from '@core/utils/DataFormatter.js';\n\nclass TimelineViewItem extends ListViewItem {\n    constructor(options = {}) {\n        super({\n            className: 'timeline-item',\n            ...options\n        });\n\n        // Timeline-specific options\n        this.dateFormat = options.dateFormat || 'date';\n        this.dotStyle = options.dotStyle || 'solid';\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n\n        // Default timeline item template\n        if (!this.template) {\n            this.template = `\n                <div class=\"timeline-marker timeline-marker-{{markerType}}\">\n                    {{#hasIcon}}\n                    <i class=\"bi {{model.icon}} text-{{displayColor}}\"></i>\n                    {{/hasIcon}}\n                    {{^hasIcon}}\n                    <div class=\"timeline-dot bg-{{displayColor}}\"></div>\n                    {{/hasIcon}}\n                </div>\n                \n                <div class=\"timeline-content\">\n                    {{#showDate}}\n                    <div class=\"timeline-date text-muted small\">\n                        {{formattedDate}}\n                    </div>\n                    {{/showDate}}\n                    \n                    <div class=\"timeline-card\">\n                        {{#model.title}}\n                        <h6 class=\"timeline-title mb-1\">{{model.title}}</h6>\n                        {{/model.title}}\n                        \n                        {{#model.description}}\n                        <p class=\"timeline-description mb-0\">{{model.description}}</p>\n                        {{/model.description}}\n                        \n                        {{#model.meta}}\n                        <div class=\"timeline-meta mt-2 text-muted small\">\n                            {{model.meta}}\n                        </div>\n                        {{/model.meta}}\n                    </div>\n                </div>\n            `;\n        }\n    }\n\n    async onInit() {\n        await super.onInit();\n        this.processItemData();\n    }\n\n    processItemData() {\n        // Get color from model or use theme default\n        this.displayColor = this.model?.get?.('color') || this.model?.color || this.theme;\n        \n        // Determine marker type\n        const hasIcon = !!(this.model?.get?.('icon') || this.model?.icon) && this.dotStyle === 'icon';\n        this.hasIcon = hasIcon;\n        this.markerType = hasIcon ? 'icon' : this.dotStyle;\n        \n        // Format date\n        const dateValue = this.model?.get?.('date') || this.model?.date;\n        this.formattedDate = this.formatDate(dateValue);\n    }\n\n    formatDate(date) {\n        if (!date) return '';\n        \n        switch (this.dateFormat) {\n            case 'datetime':\n                return dataFormatter.pipe(date, 'datetime');\n            case 'relative':\n                return dataFormatter.pipe(date, 'timeago');\n            default:\n                return dataFormatter.pipe(date, 'date');\n        }\n    }\n\n    // Override to disable selection behavior in timeline\n    async onActionSelect(event, _element) {\n        event.stopPropagation();\n        \n        // Emit click event instead of selection\n        this.emit('item:click', {\n            item: this,\n            model: this.model,\n            index: this.index,\n            data: this.model?.toJSON ? this.model.toJSON() : this.model\n        });\n\n        if (this.listView) {\n            this.listView.emit('item:click', {\n                item: this,\n                model: this.model,\n                index: this.index,\n                data: this.model?.toJSON ? this.model.toJSON() : this.model\n            });\n        }\n    }\n}\n\nexport default TimelineViewItem;\n","/**\n * TimelineView - Timeline component extending ListView\n * \n * Displays chronological events from a Collection with clean, modern styling.\n * Each timeline item is managed as a separate view that updates independently\n * when its model changes.\n * \n * Features:\n * - Collection-based data management\n * - Left-aligned or center-aligned layout\n * - Customizable markers (dots, icons)\n * - Date formatting and grouping\n * - Individual item re-rendering\n * - Responsive Bootstrap 5 styling\n * \n * @example\n * const timeline = new TimelineView({\n *   collection: eventCollection,\n *   position: 'left',\n *   dotStyle: 'icon',\n *   dateFormat: 'relative'\n * });\n * \n * @example\n * // Custom item template\n * const timeline = new TimelineView({\n *   collection: historyCollection,\n *   itemTemplate: `\n *     <div class=\"custom-timeline-item\">\n *       <strong>{{model.title}}</strong>\n *       <p>{{model.description}}</p>\n *     </div>\n *   `\n * });\n */\n\nimport ListView from '@core/views/list/ListView.js';\nimport TimelineViewItem from './TimelineViewItem.js';\n\nclass TimelineView extends ListView {\n    constructor(options = {}) {\n        // Override ListView defaults with timeline-specific settings\n        super({\n            className: 'timeline-view',\n            itemClass: options.itemClass || TimelineViewItem,\n            selectionMode: 'none', // Timelines typically don't use selection\n            emptyMessage: options.emptyMessage || 'No timeline events to display',\n            template: `\n                <div class=\"timeline-container timeline-{{position}}\">\n                    {{#loading}}\n                        <div class=\"timeline-loading text-center py-4\">\n                            <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                                <span class=\"visually-hidden\">Loading...</span>\n                            </div>\n                            <span class=\"ms-2 text-muted\">Loading timeline...</span>\n                        </div>\n                    {{/loading}}\n                    {{^loading}}\n                        {{#isEmpty}}\n                            <div class=\"timeline-empty text-center text-muted py-4\">\n                                <i class=\"bi bi-clock-history fs-1 d-block mb-2\"></i>\n                                <p>{{emptyMessage}}</p>\n                            </div>\n                        {{/isEmpty}}\n                        {{^isEmpty}}\n                            <div class=\"timeline\" data-container=\"items\"></div>\n                        {{/isEmpty}}\n                    {{/loading}}\n                </div>\n            `,\n            ...options\n        });\n\n        // Timeline-specific options\n        this.position = options.position || 'left'; // 'left' or 'center'\n        this.dateFormat = options.dateFormat || 'date'; // 'date', 'datetime', 'relative'\n        this.dotStyle = options.dotStyle || 'solid'; // 'solid', 'hollow', 'icon'\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n        this.groupBy = options.groupBy || 'none'; // Future: 'none', 'day', 'month', 'year'\n    }\n\n    /**\n     * Override _createItemView to pass timeline-specific options\n     */\n    _createItemView(model, index) {\n        // Don't create duplicate views\n        if (this.itemViews.has(model.id)) return;\n\n        const itemView = new this.itemClass({\n            model: model,\n            index: index,\n            listView: this,\n            template: this.itemTemplate,\n            // Pass timeline-specific options to items\n            dateFormat: this.dateFormat,\n            dotStyle: this.dotStyle,\n            showDate: this.showDate,\n            theme: this.theme\n        });\n\n        // Store the item view\n        this.itemViews.set(model.id, itemView);\n\n        // Set up item event listeners\n        itemView.on('item:click', this._onItemClick.bind(this));\n\n        return itemView;\n    }\n\n    /**\n     * Handle item clicks (replaces selection behavior)\n     */\n    _onItemClick(event) {\n        this.emit('item:click', event);\n    }\n\n    /**\n     * Update timeline position\n     */\n    setPosition(position) {\n        if (position !== 'left' && position !== 'center') {\n            console.warn('Invalid position. Use \"left\" or \"center\"');\n            return this;\n        }\n        \n        this.position = position;\n        if (this.isMounted()) {\n            this.render();\n        }\n        return this;\n    }\n\n    /**\n     * Update date format for all items\n     */\n    setDateFormat(format) {\n        this.dateFormat = format;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dateFormat = format;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Update dot style for all items\n     */\n    setDotStyle(style) {\n        this.dotStyle = style;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dotStyle = style;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Toggle date display\n     */\n    toggleDates(show = null) {\n        this.showDate = show !== null ? show : !this.showDate;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.showDate = this.showDate;\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n}\n\nexport default TimelineView;\n"],"names":["TimelineViewItem","ListViewItem","constructor","options","super","className","this","dateFormat","dotStyle","showDate","theme","template","onInit","processItemData","displayColor","model","get","color","hasIcon","icon","markerType","dateValue","date","formattedDate","formatDate","dataFormatter","pipe","onActionSelect","event","_element","stopPropagation","emit","item","index","data","toJSON","listView","TimelineView","ListView","itemClass","selectionMode","emptyMessage","position","groupBy","_createItemView","itemViews","has","id","itemView","itemTemplate","set","on","_onItemClick","bind","setPosition","console","warn","isMounted","render","setDateFormat","format","forEachItem","setDotStyle","style","toggleDates","show"],"mappings":"gNA0BA,MAAMA,yBAAyBC,EAC3B,WAAAC,CAAYC,EAAU,IAClBC,MAAM,CACFC,UAAW,mBACRF,IAIPG,KAAKC,WAAaJ,EAAQI,YAAc,OACxCD,KAAKE,SAAWL,EAAQK,UAAY,QACpCF,KAAKG,UAAgC,IAArBN,EAAQM,SACxBH,KAAKI,MAAQP,EAAQO,OAAS,UAGzBJ,KAAKK,WACNL,KAAKK,SAAW,y5CAmCxB,CAEA,YAAMC,SACIR,MAAMQ,SACZN,KAAKO,iBACT,CAEA,eAAAA,GAEIP,KAAKQ,aAAeR,KAAKS,OAAOC,MAAM,UAAYV,KAAKS,OAAOE,OAASX,KAAKI,MAG5E,MAAMQ,KAAaZ,KAAKS,OAAOC,MAAM,UAAWV,KAAKS,OAAOI,OAA2B,SAAlBb,KAAKE,SAC1EF,KAAKY,QAAUA,EACfZ,KAAKc,WAAaF,EAAU,OAASZ,KAAKE,SAG1C,MAAMa,EAAYf,KAAKS,OAAOC,MAAM,SAAWV,KAAKS,OAAOO,KAC3DhB,KAAKiB,cAAgBjB,KAAKkB,WAAWH,EACzC,CAEA,UAAAG,CAAWF,GACP,IAAKA,EAAM,MAAO,GAElB,OAAQhB,KAAKC,YACT,IAAK,WACD,OAAOkB,EAAcC,KAAKJ,EAAM,YACpC,IAAK,WACD,OAAOG,EAAcC,KAAKJ,EAAM,WACpC,QACI,OAAOG,EAAcC,KAAKJ,EAAM,QAE5C,CAGA,oBAAMK,CAAeC,EAAOC,GACxBD,EAAME,kBAGNxB,KAAKyB,KAAK,aAAc,CACpBC,KAAM1B,KACNS,MAAOT,KAAKS,MACZkB,MAAO3B,KAAK2B,MACZC,KAAM5B,KAAKS,OAAOoB,OAAS7B,KAAKS,MAAMoB,SAAW7B,KAAKS,QAGtDT,KAAK8B,UACL9B,KAAK8B,SAASL,KAAK,aAAc,CAC7BC,KAAM1B,KACNS,MAAOT,KAAKS,MACZkB,MAAO3B,KAAK2B,MACZC,KAAM5B,KAAKS,OAAOoB,OAAS7B,KAAKS,MAAMoB,SAAW7B,KAAKS,OAGlE,EC3FJ,MAAMsB,qBAAqBC,EACvB,WAAApC,CAAYC,EAAU,IAElBC,MAAM,CACFC,UAAW,gBACXkC,UAAWpC,EAAQoC,WAAavC,iBAChCwC,cAAe,OACfC,aAActC,EAAQsC,cAAgB,gCACtC9B,SAAU,6nCAuBPR,IAIPG,KAAKoC,SAAWvC,EAAQuC,UAAY,OACpCpC,KAAKC,WAAaJ,EAAQI,YAAc,OACxCD,KAAKE,SAAWL,EAAQK,UAAY,QACpCF,KAAKG,UAAgC,IAArBN,EAAQM,SACxBH,KAAKI,MAAQP,EAAQO,OAAS,UAC9BJ,KAAKqC,QAAUxC,EAAQwC,SAAW,MACtC,CAKA,eAAAC,CAAgB7B,EAAOkB,GAEnB,GAAI3B,KAAKuC,UAAUC,IAAI/B,EAAMgC,IAAK,OAElC,MAAMC,EAAW,IAAI1C,KAAKiC,UAAU,CAChCxB,QACAkB,QACAG,SAAU9B,KACVK,SAAUL,KAAK2C,aAEf1C,WAAYD,KAAKC,WACjBC,SAAUF,KAAKE,SACfC,SAAUH,KAAKG,SACfC,MAAOJ,KAAKI,QAShB,OALAJ,KAAKuC,UAAUK,IAAInC,EAAMgC,GAAIC,GAG7BA,EAASG,GAAG,aAAc7C,KAAK8C,aAAaC,KAAK/C,OAE1C0C,CACX,CAKA,YAAAI,CAAaxB,GACTtB,KAAKyB,KAAK,aAAcH,EAC5B,CAKA,WAAA0B,CAAYZ,GACR,MAAiB,SAAbA,GAAoC,WAAbA,GACvBa,QAAQC,KAAK,4CACNlD,OAGXA,KAAKoC,SAAWA,EACZpC,KAAKmD,aACLnD,KAAKoD,SAEFpD,KACX,CAKA,aAAAqD,CAAcC,GAYV,OAXAtD,KAAKC,WAAaqD,EAGlBtD,KAAKuD,YAAYb,IACbA,EAASzC,WAAaqD,EACtBZ,EAASnC,kBACLmC,EAASS,aACTT,EAASU,WAIVpD,IACX,CAKA,WAAAwD,CAAYC,GAYR,OAXAzD,KAAKE,SAAWuD,EAGhBzD,KAAKuD,YAAYb,IACbA,EAASxC,SAAWuD,EACpBf,EAASnC,kBACLmC,EAASS,aACTT,EAASU,WAIVpD,IACX,CAKA,WAAA0D,CAAYC,EAAO,MAWf,OAVA3D,KAAKG,SAAoB,OAATwD,EAAgBA,GAAQ3D,KAAKG,SAG7CH,KAAKuD,YAAYb,IACbA,EAASvC,SAAWH,KAAKG,SACrBuC,EAASS,aACTT,EAASU,WAIVpD,IACX"}

package/dist/web-mojo.lite.iife.js

@@ -1,4 +1,4 @@
-var MOJO = function(exports) {
+var MOJO = (function(exports) {
   "use strict";
   class Router {
     constructor(options = {}) {
@@ -3178,7 +3178,10 @@ var MOJO = function(exports) {
     /**
      * Format as badge
      * @param {*} value - Badge text
-     * @param {string} type - Badge type
+     * @param {string} type - Badge type or value=type mapping string
+     *   Single type:   badge:danger
+     *   Auto-detect:   badge  (or badge:auto)
+     *   Value mapping:  badge:lock_engaged=danger,lock_released=success
      * @returns {string} Badge HTML
      */
     badge(value, type = "auto") {
@@ -3186,6 +3189,14 @@ var MOJO = function(exports) {
         return value.map((item) => this.badge(item, type)).join(" ");
       }
       const text = String(value);
+      if (typeof type === "string" && type.includes("=")) {
+        const mapping = Object.fromEntries(
+          type.split(",").map((pair) => pair.split("=").map((s) => s.trim()))
+        );
+        const badgeType2 = mapping[text] || mapping[text.toLowerCase()] || this.inferBadgeType(text);
+        const className2 = badgeType2 ? `bg-${badgeType2}` : "bg-secondary";
+        return `<span class="badge ${className2}">${text}</span>`;
+      }
       const badgeType = type === "auto" ? this.inferBadgeType(text) : type;
       const className = badgeType ? `bg-${badgeType}` : "bg-secondary";
       return `<span class="badge ${className}">${text}</span>`;
@@ -21814,5 +21825,5 @@ var MOJO = function(exports) {
   exports.default = MOJO2;
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
   return exports;
-}({});
+})({});
 //# sourceMappingURL=web-mojo.lite.iife.js.map