Base UI
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled
This commit is contained in:
+22
@@ -0,0 +1,22 @@
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2025 creativeLabs Lukasz Holeczek
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
## [CoreUI](https:/coreui.io) Chart.js utities
|
||||
|
||||
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* CoreUI Plugins - Chart.js for CoreUI 5.x
|
||||
* @version v4.2.0
|
||||
* @link https://coreui.io
|
||||
* Copyright (c) 2025 creativeLabs Łukasz Holeczek
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
.chartjs-tooltip {
|
||||
--cui-chartjs-tooltip-zindex: 1080;
|
||||
--cui-chartjs-tooltip-padding-x: 0.5rem;
|
||||
--cui-chartjs-tooltip-padding-y: 0.25rem;
|
||||
--cui-chartjs-tooltip-color: var(--cui-body-bg);
|
||||
--cui-chartjs-tooltip-bg: rgba(var(--cui-emphasis-color-rgb), 0.8);
|
||||
--cui-chartjs-tooltip-border-radius: var(--cui-border-radius);
|
||||
--cui-chartjs-tooltip-transition: all 0.15s ease;
|
||||
--cui-chartjs-tooltip-header-margin: 0.5rem;
|
||||
--cui-chartjs-tooltip-header-font-size: 0.875rem;
|
||||
--cui-chartjs-tooltip-header-font-weight: 700;
|
||||
--cui-chartjs-tooltip-body-font-size: 0.875rem;
|
||||
--cui-chartjs-tooltip-body-font-weight: 400;
|
||||
position: absolute;
|
||||
z-index: var(--cui-chartjs-tooltip-zindex);
|
||||
padding: var(--cui-chartjs-tooltip-padding-y) var(--cui-chartjs-tooltip-padding-x);
|
||||
color: var(--cui-chartjs-tooltip-color);
|
||||
pointer-events: none;
|
||||
background: var(--cui-chartjs-tooltip-bg);
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0);
|
||||
border-radius: var(--cui-chartjs-tooltip-border-radius);
|
||||
transition: var(--cui-chartjs-tooltip-transition);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.chartjs-tooltip {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chartjs-tooltip-header {
|
||||
margin-bottom: var(--cui-chartjs-tooltip-header-margin);
|
||||
}
|
||||
|
||||
.chartjs-tooltip-header-item {
|
||||
font-size: var(--cui-chartjs-tooltip-header-font-size);
|
||||
font-weight: var(--cui-chartjs-tooltip-header-font-weight);
|
||||
}
|
||||
|
||||
.chartjs-tooltip-body-item {
|
||||
align-items: center;
|
||||
font-size: var(--cui-chartjs-tooltip-body-font-size);
|
||||
font-weight: var(--cui-chartjs-tooltip-body-font-weight);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=coreui-chartjs.css.map */
|
||||
+1
File diff suppressed because one or more lines are too long
+8
@@ -0,0 +1,8 @@
|
||||
@charset "UTF-8";/*!
|
||||
* CoreUI Plugins - Chart.js for CoreUI 5.x
|
||||
* @version v4.2.0
|
||||
* @link https://coreui.io
|
||||
* Copyright (c) 2025 creativeLabs Łukasz Holeczek
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/.chartjs-tooltip{--cui-chartjs-tooltip-zindex:1080;--cui-chartjs-tooltip-padding-x:0.5rem;--cui-chartjs-tooltip-padding-y:0.25rem;--cui-chartjs-tooltip-color:var(--cui-body-bg);--cui-chartjs-tooltip-bg:rgba(var(--cui-emphasis-color-rgb), 0.8);--cui-chartjs-tooltip-border-radius:var(--cui-border-radius);--cui-chartjs-tooltip-transition:all 0.15s ease;--cui-chartjs-tooltip-header-margin:0.5rem;--cui-chartjs-tooltip-header-font-size:0.875rem;--cui-chartjs-tooltip-header-font-weight:700;--cui-chartjs-tooltip-body-font-size:0.875rem;--cui-chartjs-tooltip-body-font-weight:400;position:absolute;z-index:var(--cui-chartjs-tooltip-zindex);padding:var(--cui-chartjs-tooltip-padding-y) var(--cui-chartjs-tooltip-padding-x);color:var(--cui-chartjs-tooltip-color);pointer-events:none;background:var(--cui-chartjs-tooltip-bg);opacity:0;transform:translate(-50%,0);border-radius:var(--cui-chartjs-tooltip-border-radius);transition:var(--cui-chartjs-tooltip-transition)}@media (prefers-reduced-motion:reduce){.chartjs-tooltip{transition:none}}.chartjs-tooltip-header{margin-bottom:var(--cui-chartjs-tooltip-header-margin)}.chartjs-tooltip-header-item{font-size:var(--cui-chartjs-tooltip-header-font-size);font-weight:var(--cui-chartjs-tooltip-header-font-weight)}.chartjs-tooltip-body-item{align-items:center;font-size:var(--cui-chartjs-tooltip-body-font-size);font-weight:var(--cui-chartjs-tooltip-body-font-weight);white-space:nowrap}
|
||||
/*# sourceMappingURL=coreui-chartjs.min.css.map */
|
||||
+1
File diff suppressed because one or more lines are too long
+110
@@ -0,0 +1,110 @@
|
||||
/*!
|
||||
* CoreUI v4.2.0 (https://coreui.io)
|
||||
* Copyright 2025 [object Object]
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.2.0): custom-tooltips.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const ClassName = {
|
||||
TOOLTIP: 'chartjs-tooltip',
|
||||
TOOLTIP_BODY: 'chartjs-tooltip-body',
|
||||
TOOLTIP_BODY_ITEM: 'chartjs-tooltip-body-item',
|
||||
TOOLTIP_HEADER: 'chartjs-tooltip-header',
|
||||
TOOLTIP_HEADER_ITEM: 'chartjs-tooltip-header-item'
|
||||
};
|
||||
const getOrCreateTooltip = chart => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector('div');
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div');
|
||||
tooltipEl.classList.add(ClassName.TOOLTIP);
|
||||
const table = document.createElement('table');
|
||||
table.style.margin = '0px';
|
||||
tooltipEl.append(table);
|
||||
chart.canvas.parentNode.append(tooltipEl);
|
||||
}
|
||||
return tooltipEl;
|
||||
};
|
||||
const customTooltips = context => {
|
||||
// Tooltip Element
|
||||
const {
|
||||
chart,
|
||||
tooltip
|
||||
} = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || [];
|
||||
const bodyLines = tooltip.body.map(b => b.lines);
|
||||
const tableHead = document.createElement('thead');
|
||||
tableHead.classList.add(ClassName.TOOLTIP_HEADER);
|
||||
for (const title of titleLines) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.borderWidth = 0;
|
||||
tr.classList.add(ClassName.TOOLTIP_HEADER_ITEM);
|
||||
const th = document.createElement('th');
|
||||
th.style.borderWidth = 0;
|
||||
const text = document.createTextNode(title);
|
||||
th.append(text);
|
||||
tr.append(th);
|
||||
tableHead.append(tr);
|
||||
}
|
||||
const tableBody = document.createElement('tbody');
|
||||
tableBody.classList.add(ClassName.TOOLTIP_BODY);
|
||||
for (const [i, body] of bodyLines.entries()) {
|
||||
const colors = tooltip.labelColors[i];
|
||||
const span = document.createElement('span');
|
||||
span.style.background = colors.backgroundColor;
|
||||
span.style.borderColor = colors.borderColor;
|
||||
span.style.borderWidth = '2px';
|
||||
span.style.marginRight = '10px';
|
||||
span.style.height = '10px';
|
||||
span.style.width = '10px';
|
||||
span.style.display = 'inline-block';
|
||||
const tr = document.createElement('tr');
|
||||
tr.classList.add(ClassName.TOOLTIP_BODY_ITEM);
|
||||
const td = document.createElement('td');
|
||||
td.style.borderWidth = 0;
|
||||
const text = document.createTextNode(body);
|
||||
td.append(span);
|
||||
td.append(text);
|
||||
tr.append(td);
|
||||
tableBody.append(tr);
|
||||
}
|
||||
const tableRoot = tooltipEl.querySelector('table');
|
||||
|
||||
// Remove old children
|
||||
while (tableRoot.firstChild) {
|
||||
tableRoot.firstChild.remove();
|
||||
}
|
||||
|
||||
// Add new children
|
||||
tableRoot.append(tableHead);
|
||||
tableRoot.append(tableBody);
|
||||
}
|
||||
const {
|
||||
offsetLeft: positionX,
|
||||
offsetTop: positionY
|
||||
} = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = `${positionX + tooltip.caretX}px`;
|
||||
tooltipEl.style.top = `${positionY + tooltip.caretY}px`;
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding = `${tooltip.padding}px ${tooltip.padding}px`;
|
||||
};
|
||||
|
||||
export { customTooltips };
|
||||
//# sourceMappingURL=coreui-chartjs.esm.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* CoreUI v4.2.0 (https://coreui.io)
|
||||
* Copyright 2025 [object Object]
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
const ClassName={TOOLTIP:"chartjs-tooltip",TOOLTIP_BODY:"chartjs-tooltip-body",TOOLTIP_BODY_ITEM:"chartjs-tooltip-body-item",TOOLTIP_HEADER:"chartjs-tooltip-header",TOOLTIP_HEADER_ITEM:"chartjs-tooltip-header-item"},getOrCreateTooltip=t=>{let e=t.canvas.parentNode.querySelector("div");if(!e){e=document.createElement("div"),e.classList.add(ClassName.TOOLTIP);const o=document.createElement("table");o.style.margin="0px",e.append(o),t.canvas.parentNode.append(e)}return e},customTooltips=t=>{const{chart:e,tooltip:o}=t,s=getOrCreateTooltip(e);if(0===o.opacity)return void(s.style.opacity=0);if(o.body){const t=o.title||[],e=o.body.map(t=>t.lines),a=document.createElement("thead");a.classList.add(ClassName.TOOLTIP_HEADER);for(const e of t){const t=document.createElement("tr");t.style.borderWidth=0,t.classList.add(ClassName.TOOLTIP_HEADER_ITEM);const o=document.createElement("th");o.style.borderWidth=0;const s=document.createTextNode(e);o.append(s),t.append(o),a.append(t)}const d=document.createElement("tbody");d.classList.add(ClassName.TOOLTIP_BODY);for(const[t,s]of e.entries()){const e=o.labelColors[t],a=document.createElement("span");a.style.background=e.backgroundColor,a.style.borderColor=e.borderColor,a.style.borderWidth="2px",a.style.marginRight="10px",a.style.height="10px",a.style.width="10px",a.style.display="inline-block";const n=document.createElement("tr");n.classList.add(ClassName.TOOLTIP_BODY_ITEM);const l=document.createElement("td");l.style.borderWidth=0;const r=document.createTextNode(s);l.append(a),l.append(r),n.append(l),d.append(n)}const n=s.querySelector("table");for(;n.firstChild;)n.firstChild.remove();n.append(a),n.append(d)}const{offsetLeft:a,offsetTop:d}=e.canvas;s.style.opacity=1,s.style.left=`${a+o.caretX}px`,s.style.top=`${d+o.caretY}px`,s.style.font=o.options.bodyFont.string,s.style.padding=`${o.padding}px ${o.padding}px`};export{customTooltips};
|
||||
//# sourceMappingURL=coreui-chartjs.esm.min.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+129
@@ -0,0 +1,129 @@
|
||||
/*!
|
||||
* CoreUI v4.2.0 (https://coreui.io)
|
||||
* Copyright 2025 [object Object]
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.coreui = global.coreui || {}, global.coreui.ChartJS = factory()));
|
||||
})(this, (function () { 'use strict';
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.2.0): custom-tooltips.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const ClassName = {
|
||||
TOOLTIP: 'chartjs-tooltip',
|
||||
TOOLTIP_BODY: 'chartjs-tooltip-body',
|
||||
TOOLTIP_BODY_ITEM: 'chartjs-tooltip-body-item',
|
||||
TOOLTIP_HEADER: 'chartjs-tooltip-header',
|
||||
TOOLTIP_HEADER_ITEM: 'chartjs-tooltip-header-item'
|
||||
};
|
||||
const getOrCreateTooltip = chart => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector('div');
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div');
|
||||
tooltipEl.classList.add(ClassName.TOOLTIP);
|
||||
const table = document.createElement('table');
|
||||
table.style.margin = '0px';
|
||||
tooltipEl.append(table);
|
||||
chart.canvas.parentNode.append(tooltipEl);
|
||||
}
|
||||
return tooltipEl;
|
||||
};
|
||||
const customTooltips = context => {
|
||||
// Tooltip Element
|
||||
const {
|
||||
chart,
|
||||
tooltip
|
||||
} = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || [];
|
||||
const bodyLines = tooltip.body.map(b => b.lines);
|
||||
const tableHead = document.createElement('thead');
|
||||
tableHead.classList.add(ClassName.TOOLTIP_HEADER);
|
||||
for (const title of titleLines) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.borderWidth = 0;
|
||||
tr.classList.add(ClassName.TOOLTIP_HEADER_ITEM);
|
||||
const th = document.createElement('th');
|
||||
th.style.borderWidth = 0;
|
||||
const text = document.createTextNode(title);
|
||||
th.append(text);
|
||||
tr.append(th);
|
||||
tableHead.append(tr);
|
||||
}
|
||||
const tableBody = document.createElement('tbody');
|
||||
tableBody.classList.add(ClassName.TOOLTIP_BODY);
|
||||
for (const [i, body] of bodyLines.entries()) {
|
||||
const colors = tooltip.labelColors[i];
|
||||
const span = document.createElement('span');
|
||||
span.style.background = colors.backgroundColor;
|
||||
span.style.borderColor = colors.borderColor;
|
||||
span.style.borderWidth = '2px';
|
||||
span.style.marginRight = '10px';
|
||||
span.style.height = '10px';
|
||||
span.style.width = '10px';
|
||||
span.style.display = 'inline-block';
|
||||
const tr = document.createElement('tr');
|
||||
tr.classList.add(ClassName.TOOLTIP_BODY_ITEM);
|
||||
const td = document.createElement('td');
|
||||
td.style.borderWidth = 0;
|
||||
const text = document.createTextNode(body);
|
||||
td.append(span);
|
||||
td.append(text);
|
||||
tr.append(td);
|
||||
tableBody.append(tr);
|
||||
}
|
||||
const tableRoot = tooltipEl.querySelector('table');
|
||||
|
||||
// Remove old children
|
||||
while (tableRoot.firstChild) {
|
||||
tableRoot.firstChild.remove();
|
||||
}
|
||||
|
||||
// Add new children
|
||||
tableRoot.append(tableHead);
|
||||
tableRoot.append(tableBody);
|
||||
}
|
||||
const {
|
||||
offsetLeft: positionX,
|
||||
offsetTop: positionY
|
||||
} = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = `${positionX + tooltip.caretX}px`;
|
||||
tooltipEl.style.top = `${positionY + tooltip.caretY}px`;
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding = `${tooltip.padding}px ${tooltip.padding}px`;
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.1.0): index.umd.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const index_umd = {
|
||||
customTooltips
|
||||
};
|
||||
|
||||
return index_umd;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=coreui-chartjs.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* CoreUI v4.2.0 (https://coreui.io)
|
||||
* Copyright 2025 [object Object]
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).coreui=e.coreui||{},e.coreui.ChartJS=t())}(this,function(){"use strict";const e="chartjs-tooltip",t="chartjs-tooltip-body",o="chartjs-tooltip-body-item",n="chartjs-tooltip-header",d="chartjs-tooltip-header-item";return{customTooltips:s=>{const{chart:a,tooltip:c}=s,r=(t=>{let o=t.canvas.parentNode.querySelector("div");if(!o){o=document.createElement("div"),o.classList.add(e);const n=document.createElement("table");n.style.margin="0px",o.append(n),t.canvas.parentNode.append(o)}return o})(a);if(0===c.opacity)return void(r.style.opacity=0);if(c.body){const e=c.title||[],s=c.body.map(e=>e.lines),a=document.createElement("thead");a.classList.add(n);for(const t of e){const e=document.createElement("tr");e.style.borderWidth=0,e.classList.add(d);const o=document.createElement("th");o.style.borderWidth=0;const n=document.createTextNode(t);o.append(n),e.append(o),a.append(e)}const l=document.createElement("tbody");l.classList.add(t);for(const[e,t]of s.entries()){const n=c.labelColors[e],d=document.createElement("span");d.style.background=n.backgroundColor,d.style.borderColor=n.borderColor,d.style.borderWidth="2px",d.style.marginRight="10px",d.style.height="10px",d.style.width="10px",d.style.display="inline-block";const s=document.createElement("tr");s.classList.add(o);const a=document.createElement("td");a.style.borderWidth=0;const r=document.createTextNode(t);a.append(d),a.append(r),s.append(a),l.append(s)}const i=r.querySelector("table");for(;i.firstChild;)i.firstChild.remove();i.append(a),i.append(l)}const{offsetLeft:l,offsetTop:i}=a.canvas;r.style.opacity=1,r.style.left=`${l+c.caretX}px`,r.style.top=`${i+c.caretY}px`,r.style.font=c.options.bodyFont.string,r.style.padding=`${c.padding}px ${c.padding}px`}}});
|
||||
//# sourceMappingURL=coreui-chartjs.min.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+2
@@ -0,0 +1,2 @@
|
||||
|
||||
export declare const customTooltips: (context: any) => void
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.1.0): index.esm.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
export { default as customTooltips } from './src/custom-tooltips.js'
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.1.0): index.umd.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import customTooltips from './src/custom-tooltips.js'
|
||||
|
||||
export default {
|
||||
customTooltips
|
||||
}
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.2.0): custom-tooltips.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const ClassName = {
|
||||
TOOLTIP: 'chartjs-tooltip',
|
||||
TOOLTIP_BODY: 'chartjs-tooltip-body',
|
||||
TOOLTIP_BODY_ITEM: 'chartjs-tooltip-body-item',
|
||||
TOOLTIP_HEADER: 'chartjs-tooltip-header',
|
||||
TOOLTIP_HEADER_ITEM: 'chartjs-tooltip-header-item'
|
||||
}
|
||||
|
||||
const getOrCreateTooltip = chart => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector('div')
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div')
|
||||
tooltipEl.classList.add(ClassName.TOOLTIP)
|
||||
|
||||
const table = document.createElement('table')
|
||||
table.style.margin = '0px'
|
||||
|
||||
tooltipEl.append(table)
|
||||
chart.canvas.parentNode.append(tooltipEl)
|
||||
}
|
||||
|
||||
return tooltipEl
|
||||
}
|
||||
|
||||
const customTooltips = context => {
|
||||
// Tooltip Element
|
||||
const { chart, tooltip } = context
|
||||
const tooltipEl = getOrCreateTooltip(chart)
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0
|
||||
return
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || []
|
||||
const bodyLines = tooltip.body.map(b => b.lines)
|
||||
|
||||
const tableHead = document.createElement('thead')
|
||||
tableHead.classList.add(ClassName.TOOLTIP_HEADER)
|
||||
|
||||
for (const title of titleLines) {
|
||||
const tr = document.createElement('tr')
|
||||
tr.style.borderWidth = 0
|
||||
tr.classList.add(ClassName.TOOLTIP_HEADER_ITEM)
|
||||
|
||||
const th = document.createElement('th')
|
||||
th.style.borderWidth = 0
|
||||
const text = document.createTextNode(title)
|
||||
|
||||
th.append(text)
|
||||
tr.append(th)
|
||||
tableHead.append(tr)
|
||||
}
|
||||
|
||||
const tableBody = document.createElement('tbody')
|
||||
tableBody.classList.add(ClassName.TOOLTIP_BODY)
|
||||
|
||||
for (const [i, body] of bodyLines.entries()) {
|
||||
const colors = tooltip.labelColors[i]
|
||||
|
||||
const span = document.createElement('span')
|
||||
span.style.background = colors.backgroundColor
|
||||
span.style.borderColor = colors.borderColor
|
||||
span.style.borderWidth = '2px'
|
||||
span.style.marginRight = '10px'
|
||||
span.style.height = '10px'
|
||||
span.style.width = '10px'
|
||||
span.style.display = 'inline-block'
|
||||
|
||||
const tr = document.createElement('tr')
|
||||
tr.classList.add(ClassName.TOOLTIP_BODY_ITEM)
|
||||
|
||||
const td = document.createElement('td')
|
||||
td.style.borderWidth = 0
|
||||
|
||||
const text = document.createTextNode(body)
|
||||
|
||||
td.append(span)
|
||||
td.append(text)
|
||||
tr.append(td)
|
||||
tableBody.append(tr)
|
||||
}
|
||||
|
||||
const tableRoot = tooltipEl.querySelector('table')
|
||||
|
||||
// Remove old children
|
||||
while (tableRoot.firstChild) {
|
||||
tableRoot.firstChild.remove()
|
||||
}
|
||||
|
||||
// Add new children
|
||||
tableRoot.append(tableHead)
|
||||
tableRoot.append(tableBody)
|
||||
}
|
||||
|
||||
const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1
|
||||
tooltipEl.style.left = `${positionX + tooltip.caretX}px`
|
||||
tooltipEl.style.top = `${positionY + tooltip.caretY}px`
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string
|
||||
tooltipEl.style.padding = `${tooltip.padding}px ${tooltip.padding}px`
|
||||
}
|
||||
|
||||
export default customTooltips
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"name": "@coreui/chartjs",
|
||||
"version": "4.2.0",
|
||||
"description": "Chart.js for CoreUI",
|
||||
"keywords": [
|
||||
"chart",
|
||||
"chart.js",
|
||||
"coreui",
|
||||
"tooltips"
|
||||
],
|
||||
"homepage": "https://coreui.io",
|
||||
"bugs": {
|
||||
"url": "https://github.com/coreui/coreui-chartjs/issues",
|
||||
"email": "support@coreui.io"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "creativeLabs Łukasz Holeczek",
|
||||
"url": "https://coreui.io",
|
||||
"github": "https://github.com/coreui",
|
||||
"twitter": "https://twitter.com/core_ui"
|
||||
},
|
||||
"contributors": [
|
||||
{
|
||||
"name": "CoreUI Core Team",
|
||||
"url": "https://github.com/orgs/coreui/people"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
"dist/",
|
||||
"js/",
|
||||
"scss/"
|
||||
],
|
||||
"style": "dist/css/coreui-chartjs.css",
|
||||
"sass": "scss/coreui-chartjs.scss",
|
||||
"main": "dist/js/coreui-chartjs.js",
|
||||
"module": "dist/js/coreui-chartjs.esm.js",
|
||||
"types": "js/index.d.ts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/coreui/coreui-chartjs.git"
|
||||
},
|
||||
"scripts": {
|
||||
"css": "npm-run-all css-compile css-prefix css-minify",
|
||||
"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css --load-path=node_modules/ scss/:dist/css/",
|
||||
"css-lint": "npm-run-all --continue-on-error --parallel css-lint-*",
|
||||
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
|
||||
"css-lint-vars": "fusv scss/ docs/assets/scss/",
|
||||
"css-minify": "npm-run-all --parallel css-minify-*",
|
||||
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"",
|
||||
"css-prefix": "npm-run-all --parallel css-prefix-*",
|
||||
"css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
|
||||
"js": "npm-run-all js-compile js-minify",
|
||||
"js-compile": "npm-run-all --parallel js-compile-*",
|
||||
"js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.mjs --sourcemap",
|
||||
"js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
|
||||
"js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives",
|
||||
"js-minify": "npm-run-all --parallel js-minify-*",
|
||||
"js-minify-standalone": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui-chartjs.js.map,includeSources,url=coreui-chartjs.min.js.map\" --output dist/js/coreui-chartjs.min.js dist/js/coreui-chartjs.js",
|
||||
"js-minify-standalone-esm": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui-chartjs.esm.js.map,includeSources,url=coreui-chartjs.esm.min.js.map\" --output dist/js/coreui-chartjs.esm.min.js dist/js/coreui-chartjs.esm.js",
|
||||
"dist": "npm-run-all --parallel css js",
|
||||
"release": "npm-run-all dist release-zip*",
|
||||
"release-version": "node build/change-version.mjs",
|
||||
"release-zip": "cross-env-shell \"rm -rf coreui-$npm_package_version-dist && cp -r dist/ coreui-$npm_package_version-dist && zip -r9 coreui-$npm_package_version-dist.zip coreui-$npm_package_version-dist && rm -rf coreui-$npm_package_version-dist\"",
|
||||
"watch-js": "nodemon --ignore dist/ -e js -x npm run js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@coreui/coreui": "^5.5.0",
|
||||
"chart.js": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.28.3",
|
||||
"@babel/core": "^7.28.5",
|
||||
"@babel/preset-env": "^7.28.5",
|
||||
"@rollup/plugin-babel": "^6.1.0",
|
||||
"@rollup/plugin-commonjs": "^29.0.0",
|
||||
"@rollup/plugin-node-resolve": "^16.0.3",
|
||||
"@rollup/plugin-replace": "^6.0.3",
|
||||
"autoprefixer": "^10.4.23",
|
||||
"clean-css-cli": "^5.6.3",
|
||||
"cross-env": "^10.1.0",
|
||||
"eslint": "^9.39.2",
|
||||
"eslint-config-xo": "^0.49.0",
|
||||
"eslint-plugin-import": "^2.32.0",
|
||||
"eslint-plugin-unicorn": "^62.0.0",
|
||||
"find-unused-sass-variables": "^6.1.1",
|
||||
"globals": "^16.5.0",
|
||||
"globby": "^16.0.0",
|
||||
"lockfile-lint": "^4.14.1",
|
||||
"nodemon": "^3.1.11",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-cli": "^11.0.1",
|
||||
"rollup": "^4.54.0",
|
||||
"rollup-plugin-istanbul": "^5.0.0",
|
||||
"sass": "^1.97.1",
|
||||
"shelljs": "^0.10.0",
|
||||
"stylelint": "^16.26.1",
|
||||
"stylelint-config-twbs-bootstrap": "^16.1.0",
|
||||
"terser": "5.44.1"
|
||||
}
|
||||
}
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
@use "@coreui/coreui/scss/mixins/border-radius" as *;
|
||||
@use "@coreui/coreui/scss/mixins/transition" as *;
|
||||
@use "@coreui/coreui/scss/variables" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
//
|
||||
// Chart.js custom tooltips
|
||||
//
|
||||
|
||||
.chartjs-tooltip {
|
||||
// scss-docs-start chartjs-tooltip-css-vars
|
||||
--#{$prefix}chartjs-tooltip-zindex: #{$chartjs-tooltip-zindex};
|
||||
--#{$prefix}chartjs-tooltip-padding-x: #{$chartjs-tooltip-padding-x};
|
||||
--#{$prefix}chartjs-tooltip-padding-y: #{$chartjs-tooltip-padding-y};
|
||||
--#{$prefix}chartjs-tooltip-color: #{$chartjs-tooltip-color};
|
||||
--#{$prefix}chartjs-tooltip-bg: #{$chartjs-tooltip-bg};
|
||||
--#{$prefix}chartjs-tooltip-border-radius: #{$chartjs-tooltip-border-radius};
|
||||
--#{$prefix}chartjs-tooltip-transition: #{$chartjs-tooltip-transition};
|
||||
--#{$prefix}chartjs-tooltip-header-margin: #{$chartjs-tooltip-header-margin};
|
||||
--#{$prefix}chartjs-tooltip-header-font-size: #{$chartjs-tooltip-header-font-size};
|
||||
--#{$prefix}chartjs-tooltip-header-font-weight: #{$chartjs-tooltip-header-font-weight};
|
||||
--#{$prefix}chartjs-tooltip-body-font-size: #{$chartjs-tooltip-body-font-size};
|
||||
--#{$prefix}chartjs-tooltip-body-font-weight: #{$chartjs-tooltip-body-font-weight};
|
||||
// scss-docs-end chartjs-tooltip-css-vars
|
||||
|
||||
position: absolute;
|
||||
z-index: var(--#{$prefix}chartjs-tooltip-zindex);
|
||||
padding: var(--#{$prefix}chartjs-tooltip-padding-y) var(--#{$prefix}chartjs-tooltip-padding-x);
|
||||
color: var(--#{$prefix}chartjs-tooltip-color);
|
||||
pointer-events: none;
|
||||
background: var(--#{$prefix}chartjs-tooltip-bg);
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0);
|
||||
@include border-radius(var(--#{$prefix}chartjs-tooltip-border-radius));
|
||||
@include transition(var(--#{$prefix}chartjs-tooltip-transition));
|
||||
}
|
||||
|
||||
.chartjs-tooltip-header {
|
||||
margin-bottom: var(--#{$prefix}chartjs-tooltip-header-margin);
|
||||
}
|
||||
|
||||
.chartjs-tooltip-header-item {
|
||||
font-size: var(--#{$prefix}chartjs-tooltip-header-font-size);
|
||||
font-weight: var(--#{$prefix}chartjs-tooltip-header-font-weight);
|
||||
}
|
||||
|
||||
.chartjs-tooltip-body-item {
|
||||
align-items: center;
|
||||
font-size: var(--#{$prefix}chartjs-tooltip-body-font-size);
|
||||
font-weight: var(--#{$prefix}chartjs-tooltip-body-font-weight);
|
||||
white-space: nowrap;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@use "@coreui/coreui/scss/variables" as *;
|
||||
|
||||
$chartjs-tooltip-zindex: $zindex-tooltip !default;
|
||||
$chartjs-tooltip-color: var(--#{$prefix}body-bg) !default;
|
||||
$chartjs-tooltip-bg: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
|
||||
$chartjs-tooltip-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$chartjs-tooltip-padding-y: $spacer * .25 !default;
|
||||
$chartjs-tooltip-padding-x: $spacer * .5 !default;
|
||||
$chartjs-tooltip-transition: all .15s ease !default;
|
||||
$chartjs-tooltip-header-margin: $spacer * .5 !default;
|
||||
$chartjs-tooltip-header-font-size: $font-size-sm !default;
|
||||
$chartjs-tooltip-header-font-weight: $font-weight-bold !default;
|
||||
$chartjs-tooltip-body-font-size: $font-size-sm !default;
|
||||
$chartjs-tooltip-body-font-weight: $font-weight-normal !default;
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* CoreUI Plugins - Chart.js for CoreUI 5.x
|
||||
* @version v4.2.0
|
||||
* @link https://coreui.io
|
||||
* Copyright (c) 2025 creativeLabs Łukasz Holeczek
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
@forward "tooltips";
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2026 creativeLabs Łukasz Holeczek
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+282
@@ -0,0 +1,282 @@
|
||||
<p align="center">
|
||||
<a href="https://coreui.io/">
|
||||
<img src="https://coreui.io/images/brand/coreui-signet.svg" alt="CoreUI logo" width="200">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h3 align="center">CoreUI</h3>
|
||||
|
||||
<p align="center">
|
||||
An advanced UI library based on Bootstrap 5 – CoreUI extends Bootstrap with PRO components, and ready-to-use admin templates for React, Angular, Vue, and more.
|
||||
<br>
|
||||
<a href="https://coreui.io/bootstrap/docs/"><strong>Explore CoreUI docs »</strong></a>
|
||||
<br>
|
||||
<br>
|
||||
<a href="https://github.com/coreui/coreui/issues/new?template=bug_report.md">Report bug</a>
|
||||
·
|
||||
<a href="https://github.com/coreui/coreui/issues/new?template=feature_request.md">Request feature</a>
|
||||
·
|
||||
<a href="https://coreui.io/blog/">Blog</a>
|
||||
</p>
|
||||
|
||||
## CoreUI vs Bootstrap
|
||||
|
||||
CoreUI is fully compatible with Bootstrap, but it’s more than just a theme or UI extension — it’s a professionally developed and maintained system that addresses many of the limitations developers face with Bootstrap alone.
|
||||
|
||||
**Key differences between CoreUI and Bootstrap:**
|
||||
|
||||
* ✅ **Framework-native versions** – CoreUI offers official libraries for [React.js](https://coreui.io/react/), [Vue.js](https://coreui.io/vue/), and [Angular](https://coreui.io/angular/), while Bootstrap depends on third-party community plugins for framework integration.
|
||||
* 👨💻 **Full-time maintained project** – CoreUI is not a community-only initiative. It’s developed by a dedicated, full-time team focused on long-term evolution and support.
|
||||
* 📦 **More built-in components** – CoreUI includes many components not present in Bootstrap by default, such as range sliders, multi-selects, and step-based form wizards.
|
||||
* 🛠️ **Sass Modules support today** – CoreUI already supports Sass Modules out of the box, a feature that Bootstrap plans to introduce in version 6.
|
||||
* 🌍 **Modern RTL/LTR support** – CoreUI uses CSS logical properties to provide seamless RTL and LTR layout support for multilingual and internationalized apps.
|
||||
* 🔒 **Long-Term Support (LTS)** – While Bootstrap 3 & 4 LTS is now a paid service via [HeroDevs](https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol), CoreUI continues to offer long-term support without additional cost.
|
||||
|
||||
Whether you're starting a new project or migrating from Bootstrap, CoreUI gives you a powerful upgrade path with more features, framework bindings, and peace of mind for long-term maintainability.
|
||||
|
||||
## Table of contents
|
||||
|
||||
- [Table of contents](#table-of-contents)
|
||||
- [Quick start](#quick-start)
|
||||
- [Components](#components)
|
||||
- [Status](#status)
|
||||
- [What's included](#whats-included)
|
||||
- [Bugs and feature requests](#bugs-and-feature-requests)
|
||||
- [Documentation](#documentation)
|
||||
- [Frameworks](#frameworks)
|
||||
- [Templates](#templates)
|
||||
- [Templates](#boilerplates)
|
||||
- [Contributing](#contributing)
|
||||
- [Community](#community)
|
||||
- [Versioning](#versioning)
|
||||
- [Creators](#creators)
|
||||
- [Thanks](#thanks)
|
||||
- [Support CoreUI Development](#support-coreui-development)
|
||||
- [Copyright and license](#copyright-and-license)
|
||||
|
||||
## Quick start
|
||||
|
||||
Several quick start options are available:
|
||||
|
||||
- [Download the latest release](https://github.com/coreui/coreui/archive/v5.8.0.zip)
|
||||
- Clone the repo: `git clone https://github.com/coreui/coreui.git`
|
||||
- Install with [npm](https://www.npmjs.com/): `npm install @coreui/coreui`
|
||||
- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/coreui`
|
||||
- Install with [Composer](https://getcomposer.org/): `composer require coreui/coreui:5.8.0`
|
||||
|
||||
Read the [Getting started page](https://coreui.io/docs/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
|
||||
|
||||
## Components
|
||||
|
||||
- [Bootstrap Accordion](https://coreui.io/bootstrap/docs/components/accordion/)
|
||||
- [Bootstrap Alert](https://coreui.io/bootstrap/docs/components/alert/)
|
||||
- [Bootstrap Autocomplete](https://coreui.io/bootstrap/docs/forms/autocomplete/) **PRO**
|
||||
- [Bootstrap Avatar](https://coreui.io/bootstrap/docs/components/avatar/)
|
||||
- [Bootstrap Badge](https://coreui.io/bootstrap/docs/components/badge/)
|
||||
- [Bootstrap Breadcrumb](https://coreui.io/bootstrap/docs/components/breadcrumb/)
|
||||
- [Bootstrap Button](https://coreui.io/bootstrap/docs/components/button/)
|
||||
- [Bootstrap Button Group](https://coreui.io/bootstrap/docs/components/button-group/)
|
||||
- [Bootstrap Callout](https://coreui.io/bootstrap/docs/components/callout/)
|
||||
- [Bootstrap Card](https://coreui.io/bootstrap/docs/components/card/)
|
||||
- [Bootstrap Carousel](https://coreui.io/bootstrap/docs/components/carousel/)
|
||||
- [Bootstrap Chip](https://coreui.io/bootstrap/docs/components/chip/)
|
||||
- [Bootstrap Chip Input](https://coreui.io/bootstrap/docs/forms/chip-input/)
|
||||
- [Bootstrap Chip Set](https://coreui.io/bootstrap/docs/components/chip-set/)
|
||||
- [Bootstrap Checkbox](https://coreui.io/bootstrap/docs/forms/checkbox/)
|
||||
- [Bootstrap Close Button](https://coreui.io/bootstrap/docs/components/close-button/)
|
||||
- [Bootstrap Calendar](https://coreui.io/bootstrap/docs/components/calendar/) **PRO**
|
||||
- [Bootstrap Collapse](https://coreui.io/bootstrap/docs/components/collapse/)
|
||||
- [Bootstrap Date Picker](https://coreui.io/bootstrap/docs/forms/date-picker/) **PRO**
|
||||
- [Bootstrap Date Range Picker](https://coreui.io/bootstrap/docs/forms/date-range-picker/) **PRO**
|
||||
- [Bootstrap Dropdown](https://coreui.io/bootstrap/docs/components/dropdown/)
|
||||
- [Bootstrap Floating Labels](https://coreui.io/bootstrap/docs/forms/floating-labels/)
|
||||
- [Bootstrap Footer](https://coreui.io/bootstrap/docs/components/footer/)
|
||||
- [Bootstrap Header](https://coreui.io/bootstrap/docs/components/header/)
|
||||
- [Bootstrap Image](https://coreui.io/bootstrap/docs/components/image/)
|
||||
- [Bootstrap Input](https://coreui.io/bootstrap/docs/forms/input/)
|
||||
- [Bootstrap Input Group](https://coreui.io/bootstrap/docs/forms/input-group/)
|
||||
- [Bootstrap List Group](https://coreui.io/bootstrap/docs/components/list-group/)
|
||||
- [Bootstrap Loading Button](https://coreui.io/bootstrap/docs/components/loading-button/) **PRO**
|
||||
- [Bootstrap Modal](https://coreui.io/bootstrap/docs/components/modal/)
|
||||
- [Bootstrap Multi Select](https://coreui.io/bootstrap/docs/forms/multi-select/) **PRO**
|
||||
- [Bootstrap Navs & Tabs](https://coreui.io/bootstrap/docs/components/navs-tabs/)
|
||||
- [Bootstrap Navbar](https://coreui.io/bootstrap/docs/components/navbar/)
|
||||
- [Bootstrap Offcanvas](https://coreui.io/bootstrap/docs/components/offcanvas/)
|
||||
- [Bootstrap Pagination](https://coreui.io/bootstrap/docs/components/pagination/)
|
||||
- [Bootstrap Password Input](https://coreui.io/bootstrap/docs/forms/password-input/) **PRO**
|
||||
- [Bootstrap Placeholder](https://coreui.io/bootstrap/docs/components/placeholder/)
|
||||
- [Bootstrap Popover](https://coreui.io/bootstrap/docs/components/popover/)
|
||||
- [Bootstrap Progress](https://coreui.io/bootstrap/docs/components/progress/)
|
||||
- [Bootstrap Radio](https://coreui.io/bootstrap/docs/forms/radio/)
|
||||
- [Bootstrap Range](https://coreui.io/bootstrap/docs/forms/range/)
|
||||
- [Bootstrap Range Slider](https://coreui.io/bootstrap/docs/forms/range-slider/) **PRO**
|
||||
- [Bootstrap Rating](https://coreui.io/bootstrap/docs/forms/rating/) **PRO**
|
||||
- [Bootstrap Select](https://coreui.io/bootstrap/docs/forms/select/)
|
||||
- [Bootstrap Sidebar](https://coreui.io/bootstrap/docs/components/sidebar/)
|
||||
- [Bootstrap Search Button](https://coreui.io/bootstrap/docs/components/search-button/)
|
||||
- [Bootstrap Spinner](https://coreui.io/bootstrap/docs/components/spinner/)
|
||||
- [Bootstrap Stepper](https://coreui.io/bootstrap/docs/forms/stepper/) **PRO**
|
||||
- [Bootstrap Switch](https://coreui.io/bootstrap/docs/forms/switch/)
|
||||
- [Bootstrap Table](https://coreui.io/bootstrap/docs/content/tables/)
|
||||
- [Bootstrap Textarea](https://coreui.io/bootstrap/docs/forms/textarea/)
|
||||
- [Bootstrap Time Picker](https://coreui.io/bootstrap/docs/forms/time-picker/) **PRO**
|
||||
- [Bootstrap Toast](https://coreui.io/bootstrap/docs/components/toast/)
|
||||
- [Bootstrap Tooltip](https://coreui.io/bootstrap/docs/components/tooltip/)
|
||||
|
||||
## Status
|
||||
|
||||
[](https://github.com/coreui/coreui/actions?query=workflow%3AJS+Tests+branch%3Amain)
|
||||
[](https://www.npmjs.com/package/@coreui/coreui)
|
||||
[](https://packagist.org/packages/coreui/coreui)
|
||||
[](https://coveralls.io/github/coreui/coreui?branch=main)
|
||||
[](https://github.com/coreui/coreui/blob/main/dist/css/coreui.min.css)
|
||||
[](https://github.com/coreui/coreui/blob/main/dist/css/coreui.min.css)
|
||||
[](https://github.com/coreui/coreui/blob/main/dist/js/coreui.min.js)
|
||||
[](https://github.com/coreui/coreui/blob/main/dist/js/coreui.min.js)
|
||||
|
||||
|
||||
## What's included
|
||||
|
||||
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
|
||||
|
||||
```text
|
||||
coreui/
|
||||
├── css/
|
||||
│ ├── coreui-grid.css
|
||||
│ ├── coreui-grid.css.map
|
||||
│ ├── coreui-grid.min.css
|
||||
│ ├── coreui-grid.min.css.map
|
||||
│ ├── coreui-grid.rtl.css
|
||||
│ ├── coreui-grid.rtl.css.map
|
||||
│ ├── coreui-grid.rtl.min.css
|
||||
│ ├── coreui-grid.rtl.min.css.map
|
||||
│ ├── coreui-reboot.css
|
||||
│ ├── coreui-reboot.css.map
|
||||
│ ├── coreui-reboot.min.css
|
||||
│ ├── coreui-reboot.min.css.map
|
||||
│ ├── coreui-reboot.rtl.css
|
||||
│ ├── coreui-reboot.rtl.css.map
|
||||
│ ├── coreui-reboot.rtl.min.css
|
||||
│ ├── coreui-reboot.rtl.min.css.map
|
||||
│ ├── coreui-utilities.css
|
||||
│ ├── coreui-utilities.css.map
|
||||
│ ├── coreui-utilities.min.css
|
||||
│ ├── coreui-utilities.min.css.map
|
||||
│ ├── coreui-utilities.rtl.css
|
||||
│ ├── coreui-utilities.rtl.css.map
|
||||
│ ├── coreui-utilities.rtl.min.css
|
||||
│ ├── coreui-utilities.rtl.min.css.map
|
||||
│ ├── coreui.css
|
||||
│ ├── coreui.css.map
|
||||
│ ├── coreui.min.css
|
||||
│ ├── coreui.min.css.map
|
||||
│ ├── coreui.rtl.css
|
||||
│ ├── coreui.rtl.css.map
|
||||
│ ├── coreui.rtl.min.css
|
||||
│ └── coreui.rtl.min.css.map
|
||||
└── js/
|
||||
├── coreui.bundle.js
|
||||
├── coreui.bundle.js.map
|
||||
├── coreui.bundle.min.js
|
||||
├── coreui.bundle.min.js.map
|
||||
├── coreui.esm.js
|
||||
├── coreui.esm.js.map
|
||||
├── coreui.esm.min.js
|
||||
├── coreui.esm.min.js.map
|
||||
├── coreui.js
|
||||
├── coreui.js.map
|
||||
├── coreui.min.js
|
||||
└── coreui.min.js.map
|
||||
```
|
||||
|
||||
We provide compiled CSS and JS (`coreui.*`), as well as compiled and minified CSS and JS (`coreui.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`coreui.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`coreui.bundle.js` and minified `coreui.bundle.min.js`) include [Popper](https://popper.js.org/).
|
||||
|
||||
|
||||
## Bugs and feature requests
|
||||
|
||||
Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/coreui/coreui/blob/main/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/coreui/coreui/issues/new).
|
||||
|
||||
## Documentation
|
||||
|
||||
The documentation for the CoreUI & CoreUI PRO is hosted at our website [CoreUI](https://coreui.io/bootstrap/docs/getting-started/introduction/)
|
||||
|
||||
### Running documentation locally
|
||||
|
||||
1. Run `npm install` to install the Node.js dependencies, including Hugo (the site builder).
|
||||
2. Run `npm run test` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
|
||||
3. From the root `/coreui` directory, run `npm run docs-serve` in the command line.
|
||||
4. Open `http://localhost:9001/` in your browser, and voilà.
|
||||
|
||||
Learn more about using Hugo by reading its [documentation](https://gohugo.io/documentation/).
|
||||
|
||||
## Frameworks
|
||||
|
||||
CoreUI supports most popular frameworks.
|
||||
|
||||
- [CoreUI for Angular](https://github.com/coreui/coreui-angular)
|
||||
- [CoreUI for Bootstrap (Vanilla JS)](https://github.com/coreui/coreui)
|
||||
- [CoreUI for React](https://github.com/coreui/coreui-react)
|
||||
- [CoreUI for Vue](https://github.com/coreui/coreui-vue)
|
||||
|
||||
## Templates
|
||||
|
||||
Fully featured, out-of-the-box, templates for your application based on CoreUI.
|
||||
|
||||
- [Angular Admin Templates](https://coreui.io/themes-templates/admin-dashboard/angular/)
|
||||
- [Bootstrap Admin Templates](https://coreui.io/themes-templates/admin-dashboard/bootstrap/)
|
||||
- [Next.js Admin Templates](https://coreui.io/themes-templates/admin-dashboard/next-js/)
|
||||
- [React Admin Templates](https://coreui.io/themes-templates/admin-dashboard/react/)
|
||||
- [Vue Admin Templates](https://coreui.io/themes-templates/admin-dashboard/vue/)
|
||||
|
||||
## Boilerplates
|
||||
|
||||
- [AI-Native Next.js Boilerplate for Internal Tools](https://coreui.io/product/next-js-boilerplate/)
|
||||
|
||||
## Contributing
|
||||
|
||||
Please read through our [contributing guidelines](https://github.com/coreui/coreui/blob/main/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
|
||||
|
||||
Editor preferences are available in the [editor config](https://github.com/coreui/coreui/blob/main/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
|
||||
|
||||
## Community
|
||||
|
||||
Stay up to date on the development of CoreUI and reach out to the community with these helpful resources.
|
||||
|
||||
- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog).
|
||||
- Follow [@core_ui on Twitter](https://x.com/core_ui).
|
||||
- Discuss, ask questions, and more on [the community Discord](https://discord.gg/pQRWe5XdGm).
|
||||
|
||||
## Versioning
|
||||
|
||||
For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI is maintained under [the Semantic Versioning guidelines](http://semver.org/).
|
||||
|
||||
See [the Releases section of our project](https://github.com/coreui/coreui/releases) for changelogs for each release version.
|
||||
|
||||
|
||||
## Creators
|
||||
|
||||
**Łukasz Holeczek**
|
||||
|
||||
* <https://twitter.com/lukaszholeczek>
|
||||
* <https://github.com/mrholek>
|
||||
|
||||
**Andrzej Kopański**
|
||||
|
||||
* <https://github.com/xidedix>
|
||||
|
||||
**CoreUI Team**
|
||||
|
||||
* <https://twitter.com/core_ui>
|
||||
* <https://github.com/coreui>
|
||||
* <https://github.com/orgs/coreui/people>
|
||||
|
||||
## Thanks
|
||||
CoreUI is designed as the extension of [Bootstrap](https://getbootstrap.com). Special thanks for [Bootstrap team](https://getbootstrap.com/docs/5.0/about/team/) and [Bootstrap's contributors](https://github.com/twbs/bootstrap/graphs/contributors).
|
||||
|
||||
## Support CoreUI Development
|
||||
|
||||
CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=bootstrap&src=github-coreui) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
|
||||
|
||||
## Copyright and license
|
||||
|
||||
Copyright 2026 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
|
||||
+4314
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+4087
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+663
@@ -0,0 +1,663 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* CoreUI Reboot v5.8.0 (https://coreui.io)
|
||||
* Copyright (c) 2026 creativeLabs Łukasz Holeczek
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*/
|
||||
:root,
|
||||
[data-coreui-theme=light] {
|
||||
--cui-blue: #0d6efd;
|
||||
--cui-indigo: #6610f2;
|
||||
--cui-purple: #6f42c1;
|
||||
--cui-pink: #d63384;
|
||||
--cui-red: #dc3545;
|
||||
--cui-orange: #fd7e14;
|
||||
--cui-yellow: #ffc107;
|
||||
--cui-green: #198754;
|
||||
--cui-teal: #20c997;
|
||||
--cui-cyan: #0dcaf0;
|
||||
--cui-black: #080a0c;
|
||||
--cui-white: #fff;
|
||||
--cui-gray: #6d7d9c;
|
||||
--cui-gray-dark: #323a49;
|
||||
--cui-gray-100: #f3f4f7;
|
||||
--cui-gray-200: #e7eaee;
|
||||
--cui-gray-300: #dbdfe6;
|
||||
--cui-gray-400: #cfd4de;
|
||||
--cui-gray-500: #aab3c5;
|
||||
--cui-gray-600: #6d7d9c;
|
||||
--cui-gray-700: #4a566d;
|
||||
--cui-gray-800: #323a49;
|
||||
--cui-gray-900: #212631;
|
||||
--cui-primary: #5856d6;
|
||||
--cui-secondary: #6b7785;
|
||||
--cui-success: #1b9e3e;
|
||||
--cui-info: #39f;
|
||||
--cui-warning: #f9b115;
|
||||
--cui-danger: #e55353;
|
||||
--cui-light: #f3f4f7;
|
||||
--cui-dark: #212631;
|
||||
--cui-primary-rgb: 88, 86, 214;
|
||||
--cui-secondary-rgb: 107, 119, 133;
|
||||
--cui-success-rgb: 27, 158, 62;
|
||||
--cui-info-rgb: 51, 153, 255;
|
||||
--cui-warning-rgb: 249, 177, 21;
|
||||
--cui-danger-rgb: 229, 83, 83;
|
||||
--cui-light-rgb: 243, 244, 247;
|
||||
--cui-dark-rgb: 33, 38, 49;
|
||||
--cui-primary-text-emphasis: #3634a3;
|
||||
--cui-secondary-text-emphasis: #212233;
|
||||
--cui-success-text-emphasis: #0f5722;
|
||||
--cui-info-text-emphasis: #184c77;
|
||||
--cui-warning-text-emphasis: #764705;
|
||||
--cui-danger-text-emphasis: #671414;
|
||||
--cui-light-text-emphasis: #4a566d;
|
||||
--cui-dark-text-emphasis: #323a49;
|
||||
--cui-primary-bg-subtle: #cfc7f3;
|
||||
--cui-secondary-bg-subtle: #ced2d8;
|
||||
--cui-success-bg-subtle: #cbedd6;
|
||||
--cui-info-bg-subtle: #c0e6ff;
|
||||
--cui-warning-bg-subtle: #feecc5;
|
||||
--cui-danger-bg-subtle: #f9d4d4;
|
||||
--cui-light-bg-subtle: rgb(249, 249.5, 251);
|
||||
--cui-dark-bg-subtle: #cfd4de;
|
||||
--cui-primary-border-subtle: #9d92e6;
|
||||
--cui-secondary-border-subtle: #9da5b1;
|
||||
--cui-success-border-subtle: #96dbad;
|
||||
--cui-info-border-subtle: #80c6ff;
|
||||
--cui-warning-border-subtle: #fcd88a;
|
||||
--cui-danger-border-subtle: #f2a9a9;
|
||||
--cui-light-border-subtle: #e7eaee;
|
||||
--cui-dark-border-subtle: #aab3c5;
|
||||
--cui-primary-contrast: #fff;
|
||||
--cui-secondary-contrast: #fff;
|
||||
--cui-success-contrast: #080a0c;
|
||||
--cui-info-contrast: #080a0c;
|
||||
--cui-warning-contrast: #080a0c;
|
||||
--cui-danger-contrast: #080a0c;
|
||||
--cui-light-contrast: #080a0c;
|
||||
--cui-dark-contrast: #fff;
|
||||
--cui-white-rgb: 255, 255, 255;
|
||||
--cui-black-rgb: 8, 10, 12;
|
||||
--cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--cui-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--cui-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--cui-body-font-family: var(--cui-font-sans-serif);
|
||||
--cui-body-font-size: 1rem;
|
||||
--cui-body-font-weight: 400;
|
||||
--cui-body-line-height: 1.5;
|
||||
--cui-body-color: rgba(37, 42.92, 54.02, 0.95);
|
||||
--cui-body-color-rgb: 37, 42.92, 54.02;
|
||||
--cui-body-bg: #fff;
|
||||
--cui-body-bg-rgb: 255, 255, 255;
|
||||
--cui-emphasis-color: #080a0c;
|
||||
--cui-emphasis-color-rgb: 8, 10, 12;
|
||||
--cui-secondary-color: rgba(37, 42.92, 54.02, 0.681);
|
||||
--cui-secondary-color-rgb: 37, 42.92, 54.02;
|
||||
--cui-secondary-bg: #e7eaee;
|
||||
--cui-secondary-bg-rgb: 231, 234, 238;
|
||||
--cui-tertiary-color: rgba(37, 42.92, 54.02, 0.38);
|
||||
--cui-tertiary-color-rgb: 37, 42.92, 54.02;
|
||||
--cui-tertiary-bg: #f3f4f7;
|
||||
--cui-tertiary-bg-rgb: 243, 244, 247;
|
||||
--cui-tertiary-bg-translucent: rgba(135, 145, 175, 0.1);
|
||||
--cui-body-color-dark: rgba(255, 255, 255, 0.87);
|
||||
--cui-body-color-rgb-dark: 255, 255, 255;
|
||||
--cui-body-bg-dark: #212631;
|
||||
--cui-body-bg-rgb-dark: 33, 38, 49;
|
||||
--cui-emphasis-color-dark: #fff;
|
||||
--cui-emphasis-color-rgb-dark: 255, 255, 255;
|
||||
--cui-secondary-color-dark: rgba(255, 255, 255, 0.6);
|
||||
--cui-secondary-color-rgb-dark: 255, 255, 255;
|
||||
--cui-secondary-bg-dark: #323a49;
|
||||
--cui-secondary-bg-rgb-dark: 50, 58, 73;
|
||||
--cui-tertiary-color-dark: rgba(255, 255, 255, 0.38);
|
||||
--cui-tertiary-color-rgb-dark: 255, 255, 255;
|
||||
--cui-tertiary-bg-dark: rgb(41.5, 48, 61);
|
||||
--cui-tertiary-bg-rgb-dark: 41.5, 48, 61;
|
||||
--cui-high-emphasis: rgba(37, 42.92, 54.02, 0.95);
|
||||
--cui-medium-emphasis: rgba(37, 42.92, 54.02, 0.681);
|
||||
--cui-disabled: rgba(37, 42.92, 54.02, 0.38);
|
||||
--cui-high-emphasis-inverse: rgba(255, 255, 255, 0.87);
|
||||
--cui-medium-emphasis-inverse: rgba(255, 255, 255, 0.6);
|
||||
--cui-disabled-inverse: rgba(255, 255, 255, 0.38);
|
||||
--cui-heading-color: inherit;
|
||||
--cui-link-color: #5856d6;
|
||||
--cui-link-color-rgb: 88, 86, 214;
|
||||
--cui-link-decoration: underline;
|
||||
--cui-link-hover-color: rgb(70.4, 68.8, 171.2);
|
||||
--cui-link-hover-color-rgb: 70.4, 68.8, 171.2;
|
||||
--cui-code-color: #d63384;
|
||||
--cui-highlight-color: rgba(37, 42.92, 54.02, 0.95);
|
||||
--cui-highlight-bg: rgb(255, 242.6, 205.4);
|
||||
--cui-border-width: 1px;
|
||||
--cui-border-style: solid;
|
||||
--cui-border-color: #dbdfe6;
|
||||
--cui-border-color-translucent: rgba(49, 72, 112, 0.175);
|
||||
--cui-border-radius: 0.375rem;
|
||||
--cui-border-radius-sm: 0.25rem;
|
||||
--cui-border-radius-lg: 0.5rem;
|
||||
--cui-border-radius-xl: 1rem;
|
||||
--cui-border-radius-xxl: 2rem;
|
||||
--cui-border-radius-2xl: var(--cui-border-radius-xxl);
|
||||
--cui-border-radius-pill: 50rem;
|
||||
--cui-box-shadow: 0 0.5rem 1rem rgba(8, 10, 12, 0.15);
|
||||
--cui-box-shadow-sm: 0 0.125rem 0.25rem rgba(8, 10, 12, 0.075);
|
||||
--cui-box-shadow-lg: 0 1rem 3rem rgba(8, 10, 12, 0.175);
|
||||
--cui-box-shadow-inset: inset 0 1px 2px rgba(8, 10, 12, 0.075);
|
||||
--cui-focus-ring-width: 0.25rem;
|
||||
--cui-focus-ring-opacity: 0.25;
|
||||
--cui-focus-ring-color: rgba(88, 86, 214, 0.25);
|
||||
--cui-focus-ring-blur: 0;
|
||||
--cui-form-valid-color: #1b9e3e;
|
||||
--cui-form-valid-border-color: #1b9e3e;
|
||||
--cui-form-invalid-color: #e55353;
|
||||
--cui-form-invalid-border-color: #e55353;
|
||||
}
|
||||
|
||||
[data-coreui-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--cui-body-color: rgba(255, 255, 255, 0.87);
|
||||
--cui-body-color-rgb: 255, 255, 255;
|
||||
--cui-body-bg: #212631;
|
||||
--cui-body-bg-rgb: 33, 38, 49;
|
||||
--cui-emphasis-color: #fff;
|
||||
--cui-emphasis-color-rgb: 255, 255, 255;
|
||||
--cui-secondary-color: rgba(255, 255, 255, 0.6);
|
||||
--cui-secondary-color-rgb: 255, 255, 255;
|
||||
--cui-secondary-bg: #323a49;
|
||||
--cui-secondary-bg-rgb: 50, 58, 73;
|
||||
--cui-tertiary-color: rgba(255, 255, 255, 0.38);
|
||||
--cui-tertiary-color-rgb: 255, 255, 255;
|
||||
--cui-tertiary-bg: rgb(41.5, 48, 61);
|
||||
--cui-tertiary-bg-rgb: 41.5, 48, 61;
|
||||
--cui-tertiary-bg-translucent: rgba(118, 138, 169, 0.1);
|
||||
--cui-high-emphasis: rgba(255, 255, 255, 0.87);
|
||||
--cui-medium-emphasis: rgba(255, 255, 255, 0.6);
|
||||
--cui-disabled: rgba(255, 255, 255, 0.38);
|
||||
--cui-primary: rgb(94.2, 92.4, 207.6);
|
||||
--cui-secondary: #6b7785;
|
||||
--cui-success: rgb(33.55, 151.45, 65.05);
|
||||
--cui-info: rgb(61.2, 153, 244.8);
|
||||
--cui-warning: rgb(237.6, 172.8, 32.4);
|
||||
--cui-danger: rgb(221.7, 90.3, 90.3);
|
||||
--cui-light: #f3f4f7;
|
||||
--cui-dark: #212631;
|
||||
--cui-gray-100: #f3f4f7;
|
||||
--cui-gray-200: #e7eaee;
|
||||
--cui-gray-300: #dbdfe6;
|
||||
--cui-gray-400: #cfd4de;
|
||||
--cui-gray-500: #aab3c5;
|
||||
--cui-gray-600: #6d7d9c;
|
||||
--cui-gray-700: #4a566d;
|
||||
--cui-gray-800: #323a49;
|
||||
--cui-gray-900: #212631;
|
||||
--cui-primary-rgb: 94.2, 92.4, 207.6;
|
||||
--cui-secondary-rgb: 107, 119, 133;
|
||||
--cui-success-rgb: 33.55, 151.45, 65.05;
|
||||
--cui-info-rgb: 61.2, 153, 244.8;
|
||||
--cui-warning-rgb: 237.6, 172.8, 32.4;
|
||||
--cui-danger-rgb: 221.7, 90.3, 90.3;
|
||||
--cui-light-rgb: 243, 244, 247;
|
||||
--cui-dark-rgb: 33, 38, 49;
|
||||
--cui-primary-text-emphasis: rgb(59.35, 57.55, 157.45);
|
||||
--cui-secondary-text-emphasis: #212233;
|
||||
--cui-success-text-emphasis: rgb(18.6, 83.4, 35.7);
|
||||
--cui-info-text-emphasis: rgb(28.75, 75.55, 114.25);
|
||||
--cui-warning-text-emphasis: rgb(112.35, 70.05, 10.65);
|
||||
--cui-danger-text-emphasis: rgb(98.85, 24.15, 24.15);
|
||||
--cui-light-text-emphasis: #f3f4f7;
|
||||
--cui-dark-text-emphasis: #dbdfe6;
|
||||
--cui-primary-bg-subtle: #cfc7f3;
|
||||
--cui-secondary-bg-subtle: #ced2d8;
|
||||
--cui-success-bg-subtle: #cbedd6;
|
||||
--cui-info-bg-subtle: #c0e6ff;
|
||||
--cui-warning-bg-subtle: #feecc5;
|
||||
--cui-danger-bg-subtle: #f9d4d4;
|
||||
--cui-light-bg-subtle: #323a49;
|
||||
--cui-dark-bg-subtle: rgb(29, 34, 42.5);
|
||||
--cui-primary-border-subtle: #9d92e6;
|
||||
--cui-secondary-border-subtle: #9da5b1;
|
||||
--cui-success-border-subtle: #96dbad;
|
||||
--cui-info-border-subtle: #80c6ff;
|
||||
--cui-warning-border-subtle: #fcd88a;
|
||||
--cui-danger-border-subtle: #f2a9a9;
|
||||
--cui-light-border-subtle: #4a566d;
|
||||
--cui-dark-border-subtle: #323a49;
|
||||
--cui-heading-color: inherit;
|
||||
--cui-link-color: rgb(94.2, 92.4, 207.6);
|
||||
--cui-link-hover-color: rgb(126.36, 124.92, 217.08);
|
||||
--cui-link-color-rgb: 94.2, 92.4, 207.6;
|
||||
--cui-link-hover-color-rgb: 126.36, 124.92, 217.08;
|
||||
--cui-code-color: rgb(230.4, 132.6, 181.2);
|
||||
--cui-highlight-color: rgba(255, 255, 255, 0.87);
|
||||
--cui-highlight-bg: rgb(102, 77.2, 2.8);
|
||||
--cui-border-color: #323a49;
|
||||
--cui-border-color-translucent: rgba(130, 152, 186, 0.175);
|
||||
--cui-form-valid-color: rgb(117, 183, 152.4);
|
||||
--cui-form-valid-border-color: rgb(117, 183, 152.4);
|
||||
--cui-form-invalid-color: rgb(234, 133.8, 143.4);
|
||||
--cui-form-invalid-border-color: rgb(234, 133.8, 143.4);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--cui-body-font-family);
|
||||
font-size: var(--cui-body-font-size);
|
||||
font-weight: var(--cui-body-font-weight);
|
||||
line-height: var(--cui-body-line-height);
|
||||
color: var(--cui-body-color);
|
||||
text-align: var(--cui-body-text-align);
|
||||
background-color: var(--cui-body-bg);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(8, 10, 12, 0);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-top: var(--cui-border-width) solid;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
h6, h5, h4, h3, h2, h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--cui-heading-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1.375rem + 1.5vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.325rem + 0.9vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(1.3rem + 0.6vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
-webkit-text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
-webkit-padding-start: 2rem;
|
||||
padding-inline-start: 2rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
-webkit-margin-start: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1875em;
|
||||
color: var(--cui-highlight-color);
|
||||
background-color: var(--cui-highlight-bg);
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(var(--cui-link-color-rgb), var(--cui-link-opacity, 1));
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
--cui-link-color-rgb: var(--cui-link-hover-color-rgb);
|
||||
}
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--cui-font-monospace);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 0.875em;
|
||||
color: var(--cui-pre-color, );
|
||||
}
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.875em;
|
||||
color: var(--cui-code-color);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
a > code {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1875rem 0.375rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--cui-kbd-color, var(--cui-body-bg));
|
||||
background-color: var(--cui-kbd-bg, var(--cui-body-color));
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
kbd kbd {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: var(--cui-table-caption-color, var(--cui-secondary-color));
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
text-align: -webkit-match-parent;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[role=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
button,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
button:not(:disabled),
|
||||
[type=button]:not(:disabled),
|
||||
[type=reset]:not(:disabled),
|
||||
[type=submit]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
float: inline-start;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: inherit;
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
legend {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
legend + * {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-minute,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
[type=search]::-webkit-search-cancel-button {
|
||||
cursor: pointer;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
*[dir=rtl] [type=tel],
|
||||
*[dir=rtl] [type=url],
|
||||
*[dir=rtl] [type=email],
|
||||
*[dir=rtl] [type=number] {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
::file-selector-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=coreui-reboot.css.map */
|
||||
+1
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+654
@@ -0,0 +1,654 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* CoreUI Reboot v5.8.0 (https://coreui.io)
|
||||
* Copyright (c) 2026 creativeLabs Łukasz Holeczek
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*/
|
||||
:root,
|
||||
[data-coreui-theme=light] {
|
||||
--cui-blue: #0d6efd;
|
||||
--cui-indigo: #6610f2;
|
||||
--cui-purple: #6f42c1;
|
||||
--cui-pink: #d63384;
|
||||
--cui-red: #dc3545;
|
||||
--cui-orange: #fd7e14;
|
||||
--cui-yellow: #ffc107;
|
||||
--cui-green: #198754;
|
||||
--cui-teal: #20c997;
|
||||
--cui-cyan: #0dcaf0;
|
||||
--cui-black: #080a0c;
|
||||
--cui-white: #fff;
|
||||
--cui-gray: #6d7d9c;
|
||||
--cui-gray-dark: #323a49;
|
||||
--cui-gray-100: #f3f4f7;
|
||||
--cui-gray-200: #e7eaee;
|
||||
--cui-gray-300: #dbdfe6;
|
||||
--cui-gray-400: #cfd4de;
|
||||
--cui-gray-500: #aab3c5;
|
||||
--cui-gray-600: #6d7d9c;
|
||||
--cui-gray-700: #4a566d;
|
||||
--cui-gray-800: #323a49;
|
||||
--cui-gray-900: #212631;
|
||||
--cui-primary: #5856d6;
|
||||
--cui-secondary: #6b7785;
|
||||
--cui-success: #1b9e3e;
|
||||
--cui-info: #39f;
|
||||
--cui-warning: #f9b115;
|
||||
--cui-danger: #e55353;
|
||||
--cui-light: #f3f4f7;
|
||||
--cui-dark: #212631;
|
||||
--cui-primary-rgb: 88, 86, 214;
|
||||
--cui-secondary-rgb: 107, 119, 133;
|
||||
--cui-success-rgb: 27, 158, 62;
|
||||
--cui-info-rgb: 51, 153, 255;
|
||||
--cui-warning-rgb: 249, 177, 21;
|
||||
--cui-danger-rgb: 229, 83, 83;
|
||||
--cui-light-rgb: 243, 244, 247;
|
||||
--cui-dark-rgb: 33, 38, 49;
|
||||
--cui-primary-text-emphasis: #3634a3;
|
||||
--cui-secondary-text-emphasis: #212233;
|
||||
--cui-success-text-emphasis: #0f5722;
|
||||
--cui-info-text-emphasis: #184c77;
|
||||
--cui-warning-text-emphasis: #764705;
|
||||
--cui-danger-text-emphasis: #671414;
|
||||
--cui-light-text-emphasis: #4a566d;
|
||||
--cui-dark-text-emphasis: #323a49;
|
||||
--cui-primary-bg-subtle: #cfc7f3;
|
||||
--cui-secondary-bg-subtle: #ced2d8;
|
||||
--cui-success-bg-subtle: #cbedd6;
|
||||
--cui-info-bg-subtle: #c0e6ff;
|
||||
--cui-warning-bg-subtle: #feecc5;
|
||||
--cui-danger-bg-subtle: #f9d4d4;
|
||||
--cui-light-bg-subtle: rgb(249, 249.5, 251);
|
||||
--cui-dark-bg-subtle: #cfd4de;
|
||||
--cui-primary-border-subtle: #9d92e6;
|
||||
--cui-secondary-border-subtle: #9da5b1;
|
||||
--cui-success-border-subtle: #96dbad;
|
||||
--cui-info-border-subtle: #80c6ff;
|
||||
--cui-warning-border-subtle: #fcd88a;
|
||||
--cui-danger-border-subtle: #f2a9a9;
|
||||
--cui-light-border-subtle: #e7eaee;
|
||||
--cui-dark-border-subtle: #aab3c5;
|
||||
--cui-primary-contrast: #fff;
|
||||
--cui-secondary-contrast: #fff;
|
||||
--cui-success-contrast: #080a0c;
|
||||
--cui-info-contrast: #080a0c;
|
||||
--cui-warning-contrast: #080a0c;
|
||||
--cui-danger-contrast: #080a0c;
|
||||
--cui-light-contrast: #080a0c;
|
||||
--cui-dark-contrast: #fff;
|
||||
--cui-white-rgb: 255, 255, 255;
|
||||
--cui-black-rgb: 8, 10, 12;
|
||||
--cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--cui-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--cui-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--cui-body-font-family: var(--cui-font-sans-serif);
|
||||
--cui-body-font-size: 1rem;
|
||||
--cui-body-font-weight: 400;
|
||||
--cui-body-line-height: 1.5;
|
||||
--cui-body-color: rgba(37, 42.92, 54.02, 0.95);
|
||||
--cui-body-color-rgb: 37, 42.92, 54.02;
|
||||
--cui-body-bg: #fff;
|
||||
--cui-body-bg-rgb: 255, 255, 255;
|
||||
--cui-emphasis-color: #080a0c;
|
||||
--cui-emphasis-color-rgb: 8, 10, 12;
|
||||
--cui-secondary-color: rgba(37, 42.92, 54.02, 0.681);
|
||||
--cui-secondary-color-rgb: 37, 42.92, 54.02;
|
||||
--cui-secondary-bg: #e7eaee;
|
||||
--cui-secondary-bg-rgb: 231, 234, 238;
|
||||
--cui-tertiary-color: rgba(37, 42.92, 54.02, 0.38);
|
||||
--cui-tertiary-color-rgb: 37, 42.92, 54.02;
|
||||
--cui-tertiary-bg: #f3f4f7;
|
||||
--cui-tertiary-bg-rgb: 243, 244, 247;
|
||||
--cui-tertiary-bg-translucent: rgba(135, 145, 175, 0.1);
|
||||
--cui-body-color-dark: rgba(255, 255, 255, 0.87);
|
||||
--cui-body-color-rgb-dark: 255, 255, 255;
|
||||
--cui-body-bg-dark: #212631;
|
||||
--cui-body-bg-rgb-dark: 33, 38, 49;
|
||||
--cui-emphasis-color-dark: #fff;
|
||||
--cui-emphasis-color-rgb-dark: 255, 255, 255;
|
||||
--cui-secondary-color-dark: rgba(255, 255, 255, 0.6);
|
||||
--cui-secondary-color-rgb-dark: 255, 255, 255;
|
||||
--cui-secondary-bg-dark: #323a49;
|
||||
--cui-secondary-bg-rgb-dark: 50, 58, 73;
|
||||
--cui-tertiary-color-dark: rgba(255, 255, 255, 0.38);
|
||||
--cui-tertiary-color-rgb-dark: 255, 255, 255;
|
||||
--cui-tertiary-bg-dark: rgb(41.5, 48, 61);
|
||||
--cui-tertiary-bg-rgb-dark: 41.5, 48, 61;
|
||||
--cui-high-emphasis: rgba(37, 42.92, 54.02, 0.95);
|
||||
--cui-medium-emphasis: rgba(37, 42.92, 54.02, 0.681);
|
||||
--cui-disabled: rgba(37, 42.92, 54.02, 0.38);
|
||||
--cui-high-emphasis-inverse: rgba(255, 255, 255, 0.87);
|
||||
--cui-medium-emphasis-inverse: rgba(255, 255, 255, 0.6);
|
||||
--cui-disabled-inverse: rgba(255, 255, 255, 0.38);
|
||||
--cui-heading-color: inherit;
|
||||
--cui-link-color: #5856d6;
|
||||
--cui-link-color-rgb: 88, 86, 214;
|
||||
--cui-link-decoration: underline;
|
||||
--cui-link-hover-color: rgb(70.4, 68.8, 171.2);
|
||||
--cui-link-hover-color-rgb: 70.4, 68.8, 171.2;
|
||||
--cui-code-color: #d63384;
|
||||
--cui-highlight-color: rgba(37, 42.92, 54.02, 0.95);
|
||||
--cui-highlight-bg: rgb(255, 242.6, 205.4);
|
||||
--cui-border-width: 1px;
|
||||
--cui-border-style: solid;
|
||||
--cui-border-color: #dbdfe6;
|
||||
--cui-border-color-translucent: rgba(49, 72, 112, 0.175);
|
||||
--cui-border-radius: 0.375rem;
|
||||
--cui-border-radius-sm: 0.25rem;
|
||||
--cui-border-radius-lg: 0.5rem;
|
||||
--cui-border-radius-xl: 1rem;
|
||||
--cui-border-radius-xxl: 2rem;
|
||||
--cui-border-radius-2xl: var(--cui-border-radius-xxl);
|
||||
--cui-border-radius-pill: 50rem;
|
||||
--cui-box-shadow: 0 0.5rem 1rem rgba(8, 10, 12, 0.15);
|
||||
--cui-box-shadow-sm: 0 0.125rem 0.25rem rgba(8, 10, 12, 0.075);
|
||||
--cui-box-shadow-lg: 0 1rem 3rem rgba(8, 10, 12, 0.175);
|
||||
--cui-box-shadow-inset: inset 0 1px 2px rgba(8, 10, 12, 0.075);
|
||||
--cui-focus-ring-width: 0.25rem;
|
||||
--cui-focus-ring-opacity: 0.25;
|
||||
--cui-focus-ring-color: rgba(88, 86, 214, 0.25);
|
||||
--cui-focus-ring-blur: 0;
|
||||
--cui-form-valid-color: #1b9e3e;
|
||||
--cui-form-valid-border-color: #1b9e3e;
|
||||
--cui-form-invalid-color: #e55353;
|
||||
--cui-form-invalid-border-color: #e55353;
|
||||
}
|
||||
|
||||
[data-coreui-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--cui-body-color: rgba(255, 255, 255, 0.87);
|
||||
--cui-body-color-rgb: 255, 255, 255;
|
||||
--cui-body-bg: #212631;
|
||||
--cui-body-bg-rgb: 33, 38, 49;
|
||||
--cui-emphasis-color: #fff;
|
||||
--cui-emphasis-color-rgb: 255, 255, 255;
|
||||
--cui-secondary-color: rgba(255, 255, 255, 0.6);
|
||||
--cui-secondary-color-rgb: 255, 255, 255;
|
||||
--cui-secondary-bg: #323a49;
|
||||
--cui-secondary-bg-rgb: 50, 58, 73;
|
||||
--cui-tertiary-color: rgba(255, 255, 255, 0.38);
|
||||
--cui-tertiary-color-rgb: 255, 255, 255;
|
||||
--cui-tertiary-bg: rgb(41.5, 48, 61);
|
||||
--cui-tertiary-bg-rgb: 41.5, 48, 61;
|
||||
--cui-tertiary-bg-translucent: rgba(118, 138, 169, 0.1);
|
||||
--cui-high-emphasis: rgba(255, 255, 255, 0.87);
|
||||
--cui-medium-emphasis: rgba(255, 255, 255, 0.6);
|
||||
--cui-disabled: rgba(255, 255, 255, 0.38);
|
||||
--cui-primary: rgb(94.2, 92.4, 207.6);
|
||||
--cui-secondary: #6b7785;
|
||||
--cui-success: rgb(33.55, 151.45, 65.05);
|
||||
--cui-info: rgb(61.2, 153, 244.8);
|
||||
--cui-warning: rgb(237.6, 172.8, 32.4);
|
||||
--cui-danger: rgb(221.7, 90.3, 90.3);
|
||||
--cui-light: #f3f4f7;
|
||||
--cui-dark: #212631;
|
||||
--cui-gray-100: #f3f4f7;
|
||||
--cui-gray-200: #e7eaee;
|
||||
--cui-gray-300: #dbdfe6;
|
||||
--cui-gray-400: #cfd4de;
|
||||
--cui-gray-500: #aab3c5;
|
||||
--cui-gray-600: #6d7d9c;
|
||||
--cui-gray-700: #4a566d;
|
||||
--cui-gray-800: #323a49;
|
||||
--cui-gray-900: #212631;
|
||||
--cui-primary-rgb: 94.2, 92.4, 207.6;
|
||||
--cui-secondary-rgb: 107, 119, 133;
|
||||
--cui-success-rgb: 33.55, 151.45, 65.05;
|
||||
--cui-info-rgb: 61.2, 153, 244.8;
|
||||
--cui-warning-rgb: 237.6, 172.8, 32.4;
|
||||
--cui-danger-rgb: 221.7, 90.3, 90.3;
|
||||
--cui-light-rgb: 243, 244, 247;
|
||||
--cui-dark-rgb: 33, 38, 49;
|
||||
--cui-primary-text-emphasis: rgb(59.35, 57.55, 157.45);
|
||||
--cui-secondary-text-emphasis: #212233;
|
||||
--cui-success-text-emphasis: rgb(18.6, 83.4, 35.7);
|
||||
--cui-info-text-emphasis: rgb(28.75, 75.55, 114.25);
|
||||
--cui-warning-text-emphasis: rgb(112.35, 70.05, 10.65);
|
||||
--cui-danger-text-emphasis: rgb(98.85, 24.15, 24.15);
|
||||
--cui-light-text-emphasis: #f3f4f7;
|
||||
--cui-dark-text-emphasis: #dbdfe6;
|
||||
--cui-primary-bg-subtle: #cfc7f3;
|
||||
--cui-secondary-bg-subtle: #ced2d8;
|
||||
--cui-success-bg-subtle: #cbedd6;
|
||||
--cui-info-bg-subtle: #c0e6ff;
|
||||
--cui-warning-bg-subtle: #feecc5;
|
||||
--cui-danger-bg-subtle: #f9d4d4;
|
||||
--cui-light-bg-subtle: #323a49;
|
||||
--cui-dark-bg-subtle: rgb(29, 34, 42.5);
|
||||
--cui-primary-border-subtle: #9d92e6;
|
||||
--cui-secondary-border-subtle: #9da5b1;
|
||||
--cui-success-border-subtle: #96dbad;
|
||||
--cui-info-border-subtle: #80c6ff;
|
||||
--cui-warning-border-subtle: #fcd88a;
|
||||
--cui-danger-border-subtle: #f2a9a9;
|
||||
--cui-light-border-subtle: #4a566d;
|
||||
--cui-dark-border-subtle: #323a49;
|
||||
--cui-heading-color: inherit;
|
||||
--cui-link-color: rgb(94.2, 92.4, 207.6);
|
||||
--cui-link-hover-color: rgb(126.36, 124.92, 217.08);
|
||||
--cui-link-color-rgb: 94.2, 92.4, 207.6;
|
||||
--cui-link-hover-color-rgb: 126.36, 124.92, 217.08;
|
||||
--cui-code-color: rgb(230.4, 132.6, 181.2);
|
||||
--cui-highlight-color: rgba(255, 255, 255, 0.87);
|
||||
--cui-highlight-bg: rgb(102, 77.2, 2.8);
|
||||
--cui-border-color: #323a49;
|
||||
--cui-border-color-translucent: rgba(130, 152, 186, 0.175);
|
||||
--cui-form-valid-color: rgb(117, 183, 152.4);
|
||||
--cui-form-valid-border-color: rgb(117, 183, 152.4);
|
||||
--cui-form-invalid-color: rgb(234, 133.8, 143.4);
|
||||
--cui-form-invalid-border-color: rgb(234, 133.8, 143.4);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--cui-body-font-family);
|
||||
font-size: var(--cui-body-font-size);
|
||||
font-weight: var(--cui-body-font-weight);
|
||||
line-height: var(--cui-body-line-height);
|
||||
color: var(--cui-body-color);
|
||||
text-align: var(--cui-body-text-align);
|
||||
background-color: var(--cui-body-bg);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(8, 10, 12, 0);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-top: var(--cui-border-width) solid;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
h6, h5, h4, h3, h2, h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--cui-heading-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1.375rem + 1.5vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.325rem + 0.9vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(1.3rem + 0.6vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-inline-start: 2rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-inline-start: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1875em;
|
||||
color: var(--cui-highlight-color);
|
||||
background-color: var(--cui-highlight-bg);
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(var(--cui-link-color-rgb), var(--cui-link-opacity, 1));
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
--cui-link-color-rgb: var(--cui-link-hover-color-rgb);
|
||||
}
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--cui-font-monospace);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 0.875em;
|
||||
color: var(--cui-pre-color, );
|
||||
}
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.875em;
|
||||
color: var(--cui-code-color);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
a > code {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1875rem 0.375rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--cui-kbd-color, var(--cui-body-bg));
|
||||
background-color: var(--cui-kbd-bg, var(--cui-body-color));
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
kbd kbd {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: var(--cui-table-caption-color, var(--cui-secondary-color));
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
text-align: -webkit-match-parent;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[role=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
button,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
button:not(:disabled),
|
||||
[type=button]:not(:disabled),
|
||||
[type=reset]:not(:disabled),
|
||||
[type=submit]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
float: inline-start;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: inherit;
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
legend {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
legend + * {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-minute,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
[type=search]::-webkit-search-cancel-button {
|
||||
cursor: pointer;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
*[dir=rtl] [type=tel],
|
||||
*[dir=rtl] [type=url],
|
||||
*[dir=rtl] [type=email],
|
||||
*[dir=rtl] [type=number] {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::file-selector-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=coreui-reboot.rtl.css.map */
|
||||
+1
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+5960
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+5686
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+14820
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+14313
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+14401
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+13894
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+8315
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+6452
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+6505
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+8315
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+6452
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+6505
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+93
@@ -0,0 +1,93 @@
|
||||
/*!
|
||||
* CoreUI alert.js v5.8.0 (https://coreui.io)
|
||||
* Copyright 2026 The CoreUI Team (https://github.com/orgs/coreui/people)
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./base-component.js'), require('./dom/event-handler.js'), require('./util/component-functions.js'), require('./util/index.js')) :
|
||||
typeof define === 'function' && define.amd ? define(['./base-component', './dom/event-handler', './util/component-functions', './util/index'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Alert = factory(global.BaseComponent, global.EventHandler, global.ComponentFunctions, global.Index));
|
||||
})(this, (function (BaseComponent, EventHandler, componentFunctions_js, index_js) { 'use strict';
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* CoreUI alert.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*
|
||||
* This component is a modified version of the Bootstrap's alert.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Constants
|
||||
*/
|
||||
|
||||
const NAME = 'alert';
|
||||
const DATA_KEY = 'coreui.alert';
|
||||
const EVENT_KEY = `.${DATA_KEY}`;
|
||||
const EVENT_CLOSE = `close${EVENT_KEY}`;
|
||||
const EVENT_CLOSED = `closed${EVENT_KEY}`;
|
||||
const CLASS_NAME_FADE = 'fade';
|
||||
const CLASS_NAME_SHOW = 'show';
|
||||
|
||||
/**
|
||||
* Class definition
|
||||
*/
|
||||
|
||||
class Alert extends BaseComponent {
|
||||
// Getters
|
||||
static get NAME() {
|
||||
return NAME;
|
||||
}
|
||||
|
||||
// Public
|
||||
close() {
|
||||
const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE);
|
||||
if (closeEvent.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
this._element.classList.remove(CLASS_NAME_SHOW);
|
||||
const isAnimated = this._element.classList.contains(CLASS_NAME_FADE);
|
||||
this._queueCallback(() => this._destroyElement(), this._element, isAnimated);
|
||||
}
|
||||
|
||||
// Private
|
||||
_destroyElement() {
|
||||
this._element.remove();
|
||||
EventHandler.trigger(this._element, EVENT_CLOSED);
|
||||
this.dispose();
|
||||
}
|
||||
|
||||
// Static
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = Alert.getOrCreateInstance(this);
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
}
|
||||
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
data[config](this);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data API implementation
|
||||
*/
|
||||
|
||||
componentFunctions_js.enableDismissTrigger(Alert, 'close');
|
||||
|
||||
/**
|
||||
* jQuery
|
||||
*/
|
||||
|
||||
index_js.defineJQueryPlugin(Alert);
|
||||
|
||||
return Alert;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=alert.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"alert.js","sources":["../src/alert.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * CoreUI alert.js\n * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)\n *\n * This component is a modified version of the Bootstrap's alert.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport BaseComponent from './base-component.js'\nimport EventHandler from './dom/event-handler.js'\nimport { enableDismissTrigger } from './util/component-functions.js'\nimport { defineJQueryPlugin } from './util/index.js'\n\n/**\n * Constants\n */\n\nconst NAME = 'alert'\nconst DATA_KEY = 'coreui.alert'\nconst EVENT_KEY = `.${DATA_KEY}`\n\nconst EVENT_CLOSE = `close${EVENT_KEY}`\nconst EVENT_CLOSED = `closed${EVENT_KEY}`\nconst CLASS_NAME_FADE = 'fade'\nconst CLASS_NAME_SHOW = 'show'\n\n/**\n * Class definition\n */\n\nclass Alert extends BaseComponent {\n // Getters\n static get NAME() {\n return NAME\n }\n\n // Public\n close() {\n const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE)\n\n if (closeEvent.defaultPrevented) {\n return\n }\n\n this._element.classList.remove(CLASS_NAME_SHOW)\n\n const isAnimated = this._element.classList.contains(CLASS_NAME_FADE)\n this._queueCallback(() => this._destroyElement(), this._element, isAnimated)\n }\n\n // Private\n _destroyElement() {\n this._element.remove()\n EventHandler.trigger(this._element, EVENT_CLOSED)\n this.dispose()\n }\n\n // Static\n static jQueryInterface(config) {\n return this.each(function () {\n const data = Alert.getOrCreateInstance(this)\n\n if (typeof config !== 'string') {\n return\n }\n\n if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {\n throw new TypeError(`No method named \"${config}\"`)\n }\n\n data[config](this)\n })\n }\n}\n\n/**\n * Data API implementation\n */\n\nenableDismissTrigger(Alert, 'close')\n\n/**\n * jQuery\n */\n\ndefineJQueryPlugin(Alert)\n\nexport default Alert\n"],"names":["NAME","DATA_KEY","EVENT_KEY","EVENT_CLOSE","EVENT_CLOSED","CLASS_NAME_FADE","CLASS_NAME_SHOW","Alert","BaseComponent","close","closeEvent","EventHandler","trigger","_element","defaultPrevented","classList","remove","isAnimated","contains","_queueCallback","_destroyElement","dispose","jQueryInterface","config","each","data","getOrCreateInstance","undefined","startsWith","TypeError","enableDismissTrigger","defineJQueryPlugin"],"mappings":";;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;EAOA;EACA;EACA;;EAEA,MAAMA,IAAI,GAAG,OAAO;EACpB,MAAMC,QAAQ,GAAG,cAAc;EAC/B,MAAMC,SAAS,GAAG,CAAA,CAAA,EAAID,QAAQ,CAAA,CAAE;EAEhC,MAAME,WAAW,GAAG,CAAA,KAAA,EAAQD,SAAS,CAAA,CAAE;EACvC,MAAME,YAAY,GAAG,CAAA,MAAA,EAASF,SAAS,CAAA,CAAE;EACzC,MAAMG,eAAe,GAAG,MAAM;EAC9B,MAAMC,eAAe,GAAG,MAAM;;EAE9B;EACA;EACA;;EAEA,MAAMC,KAAK,SAASC,aAAa,CAAC;EAChC;IACA,WAAWR,IAAIA,GAAG;EAChB,IAAA,OAAOA,IAAI;EACb,EAAA;;EAEA;EACAS,EAAAA,KAAKA,GAAG;MACN,MAAMC,UAAU,GAAGC,YAAY,CAACC,OAAO,CAAC,IAAI,CAACC,QAAQ,EAAEV,WAAW,CAAC;MAEnE,IAAIO,UAAU,CAACI,gBAAgB,EAAE;EAC/B,MAAA;EACF,IAAA;MAEA,IAAI,CAACD,QAAQ,CAACE,SAAS,CAACC,MAAM,CAACV,eAAe,CAAC;MAE/C,MAAMW,UAAU,GAAG,IAAI,CAACJ,QAAQ,CAACE,SAAS,CAACG,QAAQ,CAACb,eAAe,CAAC;EACpE,IAAA,IAAI,CAACc,cAAc,CAAC,MAAM,IAAI,CAACC,eAAe,EAAE,EAAE,IAAI,CAACP,QAAQ,EAAEI,UAAU,CAAC;EAC9E,EAAA;;EAEA;EACAG,EAAAA,eAAeA,GAAG;EAChB,IAAA,IAAI,CAACP,QAAQ,CAACG,MAAM,EAAE;MACtBL,YAAY,CAACC,OAAO,CAAC,IAAI,CAACC,QAAQ,EAAET,YAAY,CAAC;MACjD,IAAI,CAACiB,OAAO,EAAE;EAChB,EAAA;;EAEA;IACA,OAAOC,eAAeA,CAACC,MAAM,EAAE;EAC7B,IAAA,OAAO,IAAI,CAACC,IAAI,CAAC,YAAY;EAC3B,MAAA,MAAMC,IAAI,GAAGlB,KAAK,CAACmB,mBAAmB,CAAC,IAAI,CAAC;EAE5C,MAAA,IAAI,OAAOH,MAAM,KAAK,QAAQ,EAAE;EAC9B,QAAA;EACF,MAAA;EAEA,MAAA,IAAIE,IAAI,CAACF,MAAM,CAAC,KAAKI,SAAS,IAAIJ,MAAM,CAACK,UAAU,CAAC,GAAG,CAAC,IAAIL,MAAM,KAAK,aAAa,EAAE;EACpF,QAAA,MAAM,IAAIM,SAAS,CAAC,CAAA,iBAAA,EAAoBN,MAAM,GAAG,CAAC;EACpD,MAAA;EAEAE,MAAAA,IAAI,CAACF,MAAM,CAAC,CAAC,IAAI,CAAC;EACpB,IAAA,CAAC,CAAC;EACJ,EAAA;EACF;;EAEA;EACA;EACA;;AAEAO,4CAAoB,CAACvB,KAAK,EAAE,OAAO,CAAC;;EAEpC;EACA;EACA;;AAEAwB,6BAAkB,CAACxB,KAAK,CAAC;;;;;;;;"}
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
/*!
|
||||
* CoreUI base-component.js v5.8.0 (https://coreui.io)
|
||||
* Copyright 2026 The CoreUI Team (https://github.com/orgs/coreui/people)
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/data.js'), require('./dom/event-handler.js'), require('./util/config.js'), require('./util/index.js')) :
|
||||
typeof define === 'function' && define.amd ? define(['./dom/data', './dom/event-handler', './util/config', './util/index'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.BaseComponent = factory(global.Data, global.EventHandler, global.Config, global.Index));
|
||||
})(this, (function (Data, EventHandler, Config, index_js) { 'use strict';
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* CoreUI base-component.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*
|
||||
* This component is a modified version of the Bootstrap's base-component.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Constants
|
||||
*/
|
||||
|
||||
const VERSION = '5.8.0';
|
||||
|
||||
/**
|
||||
* Class definition
|
||||
*/
|
||||
|
||||
class BaseComponent extends Config {
|
||||
constructor(element, config) {
|
||||
super();
|
||||
element = index_js.getElement(element);
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
this._element = element;
|
||||
this._config = this._getConfig(config);
|
||||
Data.set(this._element, this.constructor.DATA_KEY, this);
|
||||
}
|
||||
|
||||
// Public
|
||||
dispose() {
|
||||
Data.remove(this._element, this.constructor.DATA_KEY);
|
||||
EventHandler.off(this._element, this.constructor.EVENT_KEY);
|
||||
for (const propertyName of Object.getOwnPropertyNames(this)) {
|
||||
this[propertyName] = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Private
|
||||
_queueCallback(callback, element, isAnimated = true) {
|
||||
index_js.executeAfterTransition(callback, element, isAnimated);
|
||||
}
|
||||
_getConfig(config) {
|
||||
config = this._mergeConfigObj(config, this._element);
|
||||
config = this._configAfterMerge(config);
|
||||
this._typeCheckConfig(config);
|
||||
return config;
|
||||
}
|
||||
|
||||
// Static
|
||||
static getInstance(element) {
|
||||
return Data.get(index_js.getElement(element), this.DATA_KEY);
|
||||
}
|
||||
static getOrCreateInstance(element, config = {}) {
|
||||
return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null);
|
||||
}
|
||||
static get VERSION() {
|
||||
return VERSION;
|
||||
}
|
||||
static get DATA_KEY() {
|
||||
return `coreui.${this.NAME}`;
|
||||
}
|
||||
static get EVENT_KEY() {
|
||||
return `.${this.DATA_KEY}`;
|
||||
}
|
||||
static eventName(name) {
|
||||
return `${name}${this.EVENT_KEY}`;
|
||||
}
|
||||
}
|
||||
|
||||
return BaseComponent;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=base-component.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"base-component.js","sources":["../src/base-component.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * CoreUI base-component.js\n * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)\n *\n * This component is a modified version of the Bootstrap's base-component.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport Data from './dom/data.js'\nimport EventHandler from './dom/event-handler.js'\nimport Config from './util/config.js'\nimport { executeAfterTransition, getElement } from './util/index.js'\n\n/**\n * Constants\n */\n\nconst VERSION = '5.8.0'\n\n/**\n * Class definition\n */\n\nclass BaseComponent extends Config {\n constructor(element, config) {\n super()\n\n element = getElement(element)\n if (!element) {\n return\n }\n\n this._element = element\n this._config = this._getConfig(config)\n\n Data.set(this._element, this.constructor.DATA_KEY, this)\n }\n\n // Public\n dispose() {\n Data.remove(this._element, this.constructor.DATA_KEY)\n EventHandler.off(this._element, this.constructor.EVENT_KEY)\n\n for (const propertyName of Object.getOwnPropertyNames(this)) {\n this[propertyName] = null\n }\n }\n\n // Private\n _queueCallback(callback, element, isAnimated = true) {\n executeAfterTransition(callback, element, isAnimated)\n }\n\n _getConfig(config) {\n config = this._mergeConfigObj(config, this._element)\n config = this._configAfterMerge(config)\n this._typeCheckConfig(config)\n return config\n }\n\n // Static\n static getInstance(element) {\n return Data.get(getElement(element), this.DATA_KEY)\n }\n\n static getOrCreateInstance(element, config = {}) {\n return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null)\n }\n\n static get VERSION() {\n return VERSION\n }\n\n static get DATA_KEY() {\n return `coreui.${this.NAME}`\n }\n\n static get EVENT_KEY() {\n return `.${this.DATA_KEY}`\n }\n\n static eventName(name) {\n return `${name}${this.EVENT_KEY}`\n }\n}\n\nexport default BaseComponent\n"],"names":["VERSION","BaseComponent","Config","constructor","element","config","getElement","_element","_config","_getConfig","Data","set","DATA_KEY","dispose","remove","EventHandler","off","EVENT_KEY","propertyName","Object","getOwnPropertyNames","_queueCallback","callback","isAnimated","executeAfterTransition","_mergeConfigObj","_configAfterMerge","_typeCheckConfig","getInstance","get","getOrCreateInstance","NAME","eventName","name"],"mappings":";;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;EAOA;EACA;EACA;;EAEA,MAAMA,OAAO,GAAG,OAAO;;EAEvB;EACA;EACA;;EAEA,MAAMC,aAAa,SAASC,MAAM,CAAC;EACjCC,EAAAA,WAAWA,CAACC,OAAO,EAAEC,MAAM,EAAE;EAC3B,IAAA,KAAK,EAAE;EAEPD,IAAAA,OAAO,GAAGE,mBAAU,CAACF,OAAO,CAAC;MAC7B,IAAI,CAACA,OAAO,EAAE;EACZ,MAAA;EACF,IAAA;MAEA,IAAI,CAACG,QAAQ,GAAGH,OAAO;MACvB,IAAI,CAACI,OAAO,GAAG,IAAI,CAACC,UAAU,CAACJ,MAAM,CAAC;EAEtCK,IAAAA,IAAI,CAACC,GAAG,CAAC,IAAI,CAACJ,QAAQ,EAAE,IAAI,CAACJ,WAAW,CAACS,QAAQ,EAAE,IAAI,CAAC;EAC1D,EAAA;;EAEA;EACAC,EAAAA,OAAOA,GAAG;EACRH,IAAAA,IAAI,CAACI,MAAM,CAAC,IAAI,CAACP,QAAQ,EAAE,IAAI,CAACJ,WAAW,CAACS,QAAQ,CAAC;EACrDG,IAAAA,YAAY,CAACC,GAAG,CAAC,IAAI,CAACT,QAAQ,EAAE,IAAI,CAACJ,WAAW,CAACc,SAAS,CAAC;MAE3D,KAAK,MAAMC,YAAY,IAAIC,MAAM,CAACC,mBAAmB,CAAC,IAAI,CAAC,EAAE;EAC3D,MAAA,IAAI,CAACF,YAAY,CAAC,GAAG,IAAI;EAC3B,IAAA;EACF,EAAA;;EAEA;IACAG,cAAcA,CAACC,QAAQ,EAAElB,OAAO,EAAEmB,UAAU,GAAG,IAAI,EAAE;EACnDC,IAAAA,+BAAsB,CAACF,QAAQ,EAAElB,OAAO,EAAEmB,UAAU,CAAC;EACvD,EAAA;IAEAd,UAAUA,CAACJ,MAAM,EAAE;MACjBA,MAAM,GAAG,IAAI,CAACoB,eAAe,CAACpB,MAAM,EAAE,IAAI,CAACE,QAAQ,CAAC;EACpDF,IAAAA,MAAM,GAAG,IAAI,CAACqB,iBAAiB,CAACrB,MAAM,CAAC;EACvC,IAAA,IAAI,CAACsB,gBAAgB,CAACtB,MAAM,CAAC;EAC7B,IAAA,OAAOA,MAAM;EACf,EAAA;;EAEA;IACA,OAAOuB,WAAWA,CAACxB,OAAO,EAAE;EAC1B,IAAA,OAAOM,IAAI,CAACmB,GAAG,CAACvB,mBAAU,CAACF,OAAO,CAAC,EAAE,IAAI,CAACQ,QAAQ,CAAC;EACrD,EAAA;IAEA,OAAOkB,mBAAmBA,CAAC1B,OAAO,EAAEC,MAAM,GAAG,EAAE,EAAE;MAC/C,OAAO,IAAI,CAACuB,WAAW,CAACxB,OAAO,CAAC,IAAI,IAAI,IAAI,CAACA,OAAO,EAAE,OAAOC,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,IAAI,CAAC;EACnG,EAAA;IAEA,WAAWL,OAAOA,GAAG;EACnB,IAAA,OAAOA,OAAO;EAChB,EAAA;IAEA,WAAWY,QAAQA,GAAG;EACpB,IAAA,OAAO,CAAA,OAAA,EAAU,IAAI,CAACmB,IAAI,CAAA,CAAE;EAC9B,EAAA;IAEA,WAAWd,SAASA,GAAG;EACrB,IAAA,OAAO,CAAA,CAAA,EAAI,IAAI,CAACL,QAAQ,CAAA,CAAE;EAC5B,EAAA;IAEA,OAAOoB,SAASA,CAACC,IAAI,EAAE;EACrB,IAAA,OAAO,GAAGA,IAAI,CAAA,EAAG,IAAI,CAAChB,SAAS,CAAA,CAAE;EACnC,EAAA;EACF;;;;;;;;"}
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
/*!
|
||||
* CoreUI button.js v5.8.0 (https://coreui.io)
|
||||
* Copyright 2026 The CoreUI Team (https://github.com/orgs/coreui/people)
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./base-component.js'), require('./dom/event-handler.js'), require('./util/index.js')) :
|
||||
typeof define === 'function' && define.amd ? define(['./base-component', './dom/event-handler', './util/index'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Button = factory(global.BaseComponent, global.EventHandler, global.Index));
|
||||
})(this, (function (BaseComponent, EventHandler, index_js) { 'use strict';
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* CoreUI button.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*
|
||||
* This component is a modified version of the Bootstrap's button.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Constants
|
||||
*/
|
||||
|
||||
const NAME = 'button';
|
||||
const DATA_KEY = 'coreui.button';
|
||||
const EVENT_KEY = `.${DATA_KEY}`;
|
||||
const DATA_API_KEY = '.data-api';
|
||||
const CLASS_NAME_ACTIVE = 'active';
|
||||
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="button"]';
|
||||
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
|
||||
|
||||
/**
|
||||
* Class definition
|
||||
*/
|
||||
|
||||
class Button extends BaseComponent {
|
||||
// Getters
|
||||
static get NAME() {
|
||||
return NAME;
|
||||
}
|
||||
|
||||
// Public
|
||||
toggle() {
|
||||
// Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method
|
||||
this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE));
|
||||
}
|
||||
|
||||
// Static
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = Button.getOrCreateInstance(this);
|
||||
if (config === 'toggle') {
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data API implementation
|
||||
*/
|
||||
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
|
||||
event.preventDefault();
|
||||
const button = event.target.closest(SELECTOR_DATA_TOGGLE);
|
||||
const data = Button.getOrCreateInstance(button);
|
||||
data.toggle();
|
||||
});
|
||||
|
||||
/**
|
||||
* jQuery
|
||||
*/
|
||||
|
||||
index_js.defineJQueryPlugin(Button);
|
||||
|
||||
return Button;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=button.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"button.js","sources":["../src/button.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * CoreUI button.js\n * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)\n *\n * This component is a modified version of the Bootstrap's button.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport BaseComponent from './base-component.js'\nimport EventHandler from './dom/event-handler.js'\nimport { defineJQueryPlugin } from './util/index.js'\n\n/**\n * Constants\n */\n\nconst NAME = 'button'\nconst DATA_KEY = 'coreui.button'\nconst EVENT_KEY = `.${DATA_KEY}`\nconst DATA_API_KEY = '.data-api'\n\nconst CLASS_NAME_ACTIVE = 'active'\nconst SELECTOR_DATA_TOGGLE = '[data-coreui-toggle=\"button\"]'\nconst EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`\n\n/**\n * Class definition\n */\n\nclass Button extends BaseComponent {\n // Getters\n static get NAME() {\n return NAME\n }\n\n // Public\n toggle() {\n // Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method\n this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE))\n }\n\n // Static\n static jQueryInterface(config) {\n return this.each(function () {\n const data = Button.getOrCreateInstance(this)\n\n if (config === 'toggle') {\n data[config]()\n }\n })\n }\n}\n\n/**\n * Data API implementation\n */\n\nEventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {\n event.preventDefault()\n\n const button = event.target.closest(SELECTOR_DATA_TOGGLE)\n const data = Button.getOrCreateInstance(button)\n\n data.toggle()\n})\n\n/**\n * jQuery\n */\n\ndefineJQueryPlugin(Button)\n\nexport default Button\n"],"names":["NAME","DATA_KEY","EVENT_KEY","DATA_API_KEY","CLASS_NAME_ACTIVE","SELECTOR_DATA_TOGGLE","EVENT_CLICK_DATA_API","Button","BaseComponent","toggle","_element","setAttribute","classList","jQueryInterface","config","each","data","getOrCreateInstance","EventHandler","on","document","event","preventDefault","button","target","closest","defineJQueryPlugin"],"mappings":";;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;EAMA;EACA;EACA;;EAEA,MAAMA,IAAI,GAAG,QAAQ;EACrB,MAAMC,QAAQ,GAAG,eAAe;EAChC,MAAMC,SAAS,GAAG,CAAA,CAAA,EAAID,QAAQ,CAAA,CAAE;EAChC,MAAME,YAAY,GAAG,WAAW;EAEhC,MAAMC,iBAAiB,GAAG,QAAQ;EAClC,MAAMC,oBAAoB,GAAG,+BAA+B;EAC5D,MAAMC,oBAAoB,GAAG,CAAA,KAAA,EAAQJ,SAAS,CAAA,EAAGC,YAAY,CAAA,CAAE;;EAE/D;EACA;EACA;;EAEA,MAAMI,MAAM,SAASC,aAAa,CAAC;EACjC;IACA,WAAWR,IAAIA,GAAG;EAChB,IAAA,OAAOA,IAAI;EACb,EAAA;;EAEA;EACAS,EAAAA,MAAMA,GAAG;EACP;EACA,IAAA,IAAI,CAACC,QAAQ,CAACC,YAAY,CAAC,cAAc,EAAE,IAAI,CAACD,QAAQ,CAACE,SAAS,CAACH,MAAM,CAACL,iBAAiB,CAAC,CAAC;EAC/F,EAAA;;EAEA;IACA,OAAOS,eAAeA,CAACC,MAAM,EAAE;EAC7B,IAAA,OAAO,IAAI,CAACC,IAAI,CAAC,YAAY;EAC3B,MAAA,MAAMC,IAAI,GAAGT,MAAM,CAACU,mBAAmB,CAAC,IAAI,CAAC;QAE7C,IAAIH,MAAM,KAAK,QAAQ,EAAE;EACvBE,QAAAA,IAAI,CAACF,MAAM,CAAC,EAAE;EAChB,MAAA;EACF,IAAA,CAAC,CAAC;EACJ,EAAA;EACF;;EAEA;EACA;EACA;;EAEAI,YAAY,CAACC,EAAE,CAACC,QAAQ,EAAEd,oBAAoB,EAAED,oBAAoB,EAAEgB,KAAK,IAAI;IAC7EA,KAAK,CAACC,cAAc,EAAE;IAEtB,MAAMC,MAAM,GAAGF,KAAK,CAACG,MAAM,CAACC,OAAO,CAACpB,oBAAoB,CAAC;EACzD,EAAA,MAAMW,IAAI,GAAGT,MAAM,CAACU,mBAAmB,CAACM,MAAM,CAAC;IAE/CP,IAAI,CAACP,MAAM,EAAE;EACf,CAAC,CAAC;;EAEF;EACA;EACA;;AAEAiB,6BAAkB,CAACnB,MAAM,CAAC;;;;;;;;"}
|
||||
+391
@@ -0,0 +1,391 @@
|
||||
/*!
|
||||
* CoreUI carousel.js v5.8.0 (https://coreui.io)
|
||||
* Copyright 2026 The CoreUI Team (https://github.com/orgs/coreui/people)
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./base-component.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./util/index.js'), require('./util/swipe.js')) :
|
||||
typeof define === 'function' && define.amd ? define(['./base-component', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './util/index', './util/swipe'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Carousel = factory(global.BaseComponent, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Index, global.Swipe));
|
||||
})(this, (function (BaseComponent, EventHandler, Manipulator, SelectorEngine, index_js, Swipe) { 'use strict';
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* CoreUI carousel.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*
|
||||
* This component is a modified version of the Bootstrap's carousel.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Constants
|
||||
*/
|
||||
|
||||
const NAME = 'carousel';
|
||||
const DATA_KEY = 'coreui.carousel';
|
||||
const EVENT_KEY = `.${DATA_KEY}`;
|
||||
const DATA_API_KEY = '.data-api';
|
||||
const ARROW_LEFT_KEY = 'ArrowLeft';
|
||||
const ARROW_RIGHT_KEY = 'ArrowRight';
|
||||
const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
|
||||
|
||||
const ORDER_NEXT = 'next';
|
||||
const ORDER_PREV = 'prev';
|
||||
const DIRECTION_LEFT = 'left';
|
||||
const DIRECTION_RIGHT = 'right';
|
||||
const EVENT_SLIDE = `slide${EVENT_KEY}`;
|
||||
const EVENT_SLID = `slid${EVENT_KEY}`;
|
||||
const EVENT_KEYDOWN = `keydown${EVENT_KEY}`;
|
||||
const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`;
|
||||
const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`;
|
||||
const EVENT_DRAG_START = `dragstart${EVENT_KEY}`;
|
||||
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
|
||||
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
|
||||
const CLASS_NAME_CAROUSEL = 'carousel';
|
||||
const CLASS_NAME_ACTIVE = 'active';
|
||||
const CLASS_NAME_SLIDE = 'slide';
|
||||
const CLASS_NAME_END = 'carousel-item-end';
|
||||
const CLASS_NAME_START = 'carousel-item-start';
|
||||
const CLASS_NAME_NEXT = 'carousel-item-next';
|
||||
const CLASS_NAME_PREV = 'carousel-item-prev';
|
||||
const SELECTOR_ACTIVE = '.active';
|
||||
const SELECTOR_ITEM = '.carousel-item';
|
||||
const SELECTOR_ACTIVE_ITEM = SELECTOR_ACTIVE + SELECTOR_ITEM;
|
||||
const SELECTOR_ITEM_IMG = '.carousel-item img';
|
||||
const SELECTOR_INDICATORS = '.carousel-indicators';
|
||||
const SELECTOR_DATA_SLIDE = '[data-coreui-slide], [data-coreui-slide-to]';
|
||||
const SELECTOR_DATA_RIDE = '[data-coreui-ride="carousel"]';
|
||||
const KEY_TO_DIRECTION = {
|
||||
[ARROW_LEFT_KEY]: DIRECTION_RIGHT,
|
||||
[ARROW_RIGHT_KEY]: DIRECTION_LEFT
|
||||
};
|
||||
const Default = {
|
||||
interval: 5000,
|
||||
keyboard: true,
|
||||
pause: 'hover',
|
||||
ride: false,
|
||||
touch: true,
|
||||
wrap: true
|
||||
};
|
||||
const DefaultType = {
|
||||
interval: '(number|boolean)',
|
||||
// TODO:v6 remove boolean support
|
||||
keyboard: 'boolean',
|
||||
pause: '(string|boolean)',
|
||||
ride: '(boolean|string)',
|
||||
touch: 'boolean',
|
||||
wrap: 'boolean'
|
||||
};
|
||||
|
||||
/**
|
||||
* Class definition
|
||||
*/
|
||||
|
||||
class Carousel extends BaseComponent {
|
||||
constructor(element, config) {
|
||||
super(element, config);
|
||||
this._interval = null;
|
||||
this._activeElement = null;
|
||||
this._isSliding = false;
|
||||
this.touchTimeout = null;
|
||||
this._swipeHelper = null;
|
||||
this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element);
|
||||
this._addEventListeners();
|
||||
if (this._config.ride === CLASS_NAME_CAROUSEL) {
|
||||
this.cycle();
|
||||
}
|
||||
}
|
||||
|
||||
// Getters
|
||||
static get Default() {
|
||||
return Default;
|
||||
}
|
||||
static get DefaultType() {
|
||||
return DefaultType;
|
||||
}
|
||||
static get NAME() {
|
||||
return NAME;
|
||||
}
|
||||
|
||||
// Public
|
||||
next() {
|
||||
this._slide(ORDER_NEXT);
|
||||
}
|
||||
nextWhenVisible() {
|
||||
// FIXME TODO use `document.visibilityState`
|
||||
// Don't call next when the page isn't visible
|
||||
// or the carousel or its parent isn't visible
|
||||
if (!document.hidden && index_js.isVisible(this._element)) {
|
||||
this.next();
|
||||
}
|
||||
}
|
||||
prev() {
|
||||
this._slide(ORDER_PREV);
|
||||
}
|
||||
pause() {
|
||||
if (this._isSliding) {
|
||||
index_js.triggerTransitionEnd(this._element);
|
||||
}
|
||||
this._clearInterval();
|
||||
}
|
||||
cycle() {
|
||||
this._clearInterval();
|
||||
this._updateInterval();
|
||||
this._interval = setInterval(() => this.nextWhenVisible(), this._config.interval);
|
||||
}
|
||||
_maybeEnableCycle() {
|
||||
if (!this._config.ride) {
|
||||
return;
|
||||
}
|
||||
if (this._isSliding) {
|
||||
EventHandler.one(this._element, EVENT_SLID, () => this.cycle());
|
||||
return;
|
||||
}
|
||||
this.cycle();
|
||||
}
|
||||
to(index) {
|
||||
const items = this._getItems();
|
||||
if (index > items.length - 1 || index < 0) {
|
||||
return;
|
||||
}
|
||||
if (this._isSliding) {
|
||||
EventHandler.one(this._element, EVENT_SLID, () => this.to(index));
|
||||
return;
|
||||
}
|
||||
const activeIndex = this._getItemIndex(this._getActive());
|
||||
if (activeIndex === index) {
|
||||
return;
|
||||
}
|
||||
const order = index > activeIndex ? ORDER_NEXT : ORDER_PREV;
|
||||
this._slide(order, items[index]);
|
||||
}
|
||||
dispose() {
|
||||
if (this._swipeHelper) {
|
||||
this._swipeHelper.dispose();
|
||||
}
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
// Private
|
||||
_configAfterMerge(config) {
|
||||
config.defaultInterval = config.interval;
|
||||
return config;
|
||||
}
|
||||
_addEventListeners() {
|
||||
if (this._config.keyboard) {
|
||||
EventHandler.on(this._element, EVENT_KEYDOWN, event => this._keydown(event));
|
||||
}
|
||||
if (this._config.pause === 'hover') {
|
||||
EventHandler.on(this._element, EVENT_MOUSEENTER, () => this.pause());
|
||||
EventHandler.on(this._element, EVENT_MOUSELEAVE, () => this._maybeEnableCycle());
|
||||
}
|
||||
if (this._config.touch && Swipe.isSupported()) {
|
||||
this._addTouchEventListeners();
|
||||
}
|
||||
}
|
||||
_addTouchEventListeners() {
|
||||
for (const img of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) {
|
||||
EventHandler.on(img, EVENT_DRAG_START, event => event.preventDefault());
|
||||
}
|
||||
const endCallBack = () => {
|
||||
if (this._config.pause !== 'hover') {
|
||||
return;
|
||||
}
|
||||
|
||||
// If it's a touch-enabled device, mouseenter/leave are fired as
|
||||
// part of the mouse compatibility events on first tap - the carousel
|
||||
// would stop cycling until user tapped out of it;
|
||||
// here, we listen for touchend, explicitly pause the carousel
|
||||
// (as if it's the second time we tap on it, mouseenter compat event
|
||||
// is NOT fired) and after a timeout (to allow for mouse compatibility
|
||||
// events to fire) we explicitly restart cycling
|
||||
|
||||
this.pause();
|
||||
if (this.touchTimeout) {
|
||||
clearTimeout(this.touchTimeout);
|
||||
}
|
||||
this.touchTimeout = setTimeout(() => this._maybeEnableCycle(), TOUCHEVENT_COMPAT_WAIT + this._config.interval);
|
||||
};
|
||||
const swipeConfig = {
|
||||
leftCallback: () => this._slide(this._directionToOrder(DIRECTION_LEFT)),
|
||||
rightCallback: () => this._slide(this._directionToOrder(DIRECTION_RIGHT)),
|
||||
endCallback: endCallBack
|
||||
};
|
||||
this._swipeHelper = new Swipe(this._element, swipeConfig);
|
||||
}
|
||||
_keydown(event) {
|
||||
if (/input|textarea/i.test(event.target.tagName)) {
|
||||
return;
|
||||
}
|
||||
const direction = KEY_TO_DIRECTION[event.key];
|
||||
if (direction) {
|
||||
event.preventDefault();
|
||||
this._slide(this._directionToOrder(direction));
|
||||
}
|
||||
}
|
||||
_getItemIndex(element) {
|
||||
return this._getItems().indexOf(element);
|
||||
}
|
||||
_setActiveIndicatorElement(index) {
|
||||
if (!this._indicatorsElement) {
|
||||
return;
|
||||
}
|
||||
const activeIndicator = SelectorEngine.findOne(SELECTOR_ACTIVE, this._indicatorsElement);
|
||||
activeIndicator.classList.remove(CLASS_NAME_ACTIVE);
|
||||
activeIndicator.removeAttribute('aria-current');
|
||||
const newActiveIndicator = SelectorEngine.findOne(`[data-coreui-slide-to="${index}"]`, this._indicatorsElement);
|
||||
if (newActiveIndicator) {
|
||||
newActiveIndicator.classList.add(CLASS_NAME_ACTIVE);
|
||||
newActiveIndicator.setAttribute('aria-current', 'true');
|
||||
}
|
||||
}
|
||||
_updateInterval() {
|
||||
const element = this._activeElement || this._getActive();
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
const elementInterval = Number.parseInt(element.getAttribute('data-coreui-interval'), 10);
|
||||
this._config.interval = elementInterval || this._config.defaultInterval;
|
||||
}
|
||||
_slide(order, element = null) {
|
||||
if (this._isSliding) {
|
||||
return;
|
||||
}
|
||||
const activeElement = this._getActive();
|
||||
const isNext = order === ORDER_NEXT;
|
||||
const nextElement = element || index_js.getNextActiveElement(this._getItems(), activeElement, isNext, this._config.wrap);
|
||||
if (nextElement === activeElement) {
|
||||
return;
|
||||
}
|
||||
const nextElementIndex = this._getItemIndex(nextElement);
|
||||
const triggerEvent = eventName => {
|
||||
return EventHandler.trigger(this._element, eventName, {
|
||||
relatedTarget: nextElement,
|
||||
direction: this._orderToDirection(order),
|
||||
from: this._getItemIndex(activeElement),
|
||||
to: nextElementIndex
|
||||
});
|
||||
};
|
||||
const slideEvent = triggerEvent(EVENT_SLIDE);
|
||||
if (slideEvent.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
if (!activeElement || !nextElement) {
|
||||
// Some weirdness is happening, so we bail
|
||||
// TODO: change tests that use empty divs to avoid this check
|
||||
return;
|
||||
}
|
||||
const isCycling = Boolean(this._interval);
|
||||
this.pause();
|
||||
this._isSliding = true;
|
||||
this._setActiveIndicatorElement(nextElementIndex);
|
||||
this._activeElement = nextElement;
|
||||
const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END;
|
||||
const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV;
|
||||
nextElement.classList.add(orderClassName);
|
||||
index_js.reflow(nextElement);
|
||||
activeElement.classList.add(directionalClassName);
|
||||
nextElement.classList.add(directionalClassName);
|
||||
const completeCallBack = () => {
|
||||
nextElement.classList.remove(directionalClassName, orderClassName);
|
||||
nextElement.classList.add(CLASS_NAME_ACTIVE);
|
||||
activeElement.classList.remove(CLASS_NAME_ACTIVE, orderClassName, directionalClassName);
|
||||
this._isSliding = false;
|
||||
triggerEvent(EVENT_SLID);
|
||||
};
|
||||
this._queueCallback(completeCallBack, activeElement, this._isAnimated());
|
||||
if (isCycling) {
|
||||
this.cycle();
|
||||
}
|
||||
}
|
||||
_isAnimated() {
|
||||
return this._element.classList.contains(CLASS_NAME_SLIDE);
|
||||
}
|
||||
_getActive() {
|
||||
return SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element);
|
||||
}
|
||||
_getItems() {
|
||||
return SelectorEngine.find(SELECTOR_ITEM, this._element);
|
||||
}
|
||||
_clearInterval() {
|
||||
if (this._interval) {
|
||||
clearInterval(this._interval);
|
||||
this._interval = null;
|
||||
}
|
||||
}
|
||||
_directionToOrder(direction) {
|
||||
if (index_js.isRTL()) {
|
||||
return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT;
|
||||
}
|
||||
return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV;
|
||||
}
|
||||
_orderToDirection(order) {
|
||||
if (index_js.isRTL()) {
|
||||
return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT;
|
||||
}
|
||||
return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT;
|
||||
}
|
||||
|
||||
// Static
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = Carousel.getOrCreateInstance(this, config);
|
||||
if (typeof config === 'number') {
|
||||
data.to(config);
|
||||
return;
|
||||
}
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data API implementation
|
||||
*/
|
||||
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, function (event) {
|
||||
const target = SelectorEngine.getElementFromSelector(this);
|
||||
if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
const carousel = Carousel.getOrCreateInstance(target);
|
||||
const slideIndex = this.getAttribute('data-coreui-slide-to');
|
||||
if (slideIndex) {
|
||||
carousel.to(slideIndex);
|
||||
carousel._maybeEnableCycle();
|
||||
return;
|
||||
}
|
||||
if (Manipulator.getDataAttribute(this, 'slide') === 'next') {
|
||||
carousel.next();
|
||||
carousel._maybeEnableCycle();
|
||||
return;
|
||||
}
|
||||
carousel.prev();
|
||||
carousel._maybeEnableCycle();
|
||||
});
|
||||
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
||||
const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE);
|
||||
for (const carousel of carousels) {
|
||||
Carousel.getOrCreateInstance(carousel);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* jQuery
|
||||
*/
|
||||
|
||||
index_js.defineJQueryPlugin(Carousel);
|
||||
|
||||
return Carousel;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=carousel.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+355
@@ -0,0 +1,355 @@
|
||||
/*!
|
||||
* CoreUI chip-input.js v5.8.0 (https://coreui.io)
|
||||
* Copyright 2026 The CoreUI Team (https://github.com/orgs/coreui/people)
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./chip-set.js'), require('./dom/event-handler.js'), require('./dom/selector-engine.js'), require('./util/index.js')) :
|
||||
typeof define === 'function' && define.amd ? define(['./chip-set', './dom/event-handler', './dom/selector-engine', './util/index'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ChipInput = factory(global.ChipSet, global.EventHandler, global.SelectorEngine, global.Index));
|
||||
})(this, (function (ChipSet, EventHandler, SelectorEngine, index_js) { 'use strict';
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* CoreUI chip-input.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*
|
||||
* This component is a highly modified version of the Bootstrap's chip-input.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Constants
|
||||
*/
|
||||
|
||||
const NAME = 'chip-input';
|
||||
const DATA_KEY = 'coreui.chip-input';
|
||||
const EVENT_KEY = `.${DATA_KEY}`;
|
||||
const DATA_API_KEY = '.data-api';
|
||||
const EVENT_INPUT = `input${EVENT_KEY}`;
|
||||
const SELECTOR_DATA_CHIP_INPUT = '[data-coreui-chip-input]';
|
||||
const SELECTOR_CHIP = '.chip';
|
||||
const SELECTOR_CHIP_INPUT_LABEL = '.chip-input-label';
|
||||
const SELECTOR_CHIP_REMOVE = '.chip-remove';
|
||||
const CLASS_NAME_DISABLED = 'disabled';
|
||||
const CLASS_NAME_CHIP_INPUT_FIELD = 'chip-input-field';
|
||||
const Default = {
|
||||
...ChipSet.Default,
|
||||
createOnBlur: true,
|
||||
id: null,
|
||||
name: null,
|
||||
placeholder: '',
|
||||
readonly: false,
|
||||
removable: true,
|
||||
separator: ',',
|
||||
unique: true
|
||||
};
|
||||
const DefaultType = {
|
||||
...ChipSet.DefaultType,
|
||||
createOnBlur: 'boolean',
|
||||
id: '(string|null)',
|
||||
name: '(string|null)',
|
||||
placeholder: 'string',
|
||||
readonly: 'boolean',
|
||||
separator: '(string|null)'
|
||||
};
|
||||
|
||||
/**
|
||||
* Class definition
|
||||
*
|
||||
* ChipInput is a thin input layer on top of ChipSet: ChipSet owns the chips
|
||||
* (the single source of truth), while ChipInput only adds the text field, form
|
||||
* integration (hidden input) and turns typed text into chips. The public API
|
||||
* (methods + `*.coreui.chip-input` events) is preserved through overrides.
|
||||
*/
|
||||
|
||||
class ChipInput extends ChipSet {
|
||||
constructor(element, config) {
|
||||
var _this$_config$id;
|
||||
super(element, config);
|
||||
this._uniqueId = (_this$_config$id = this._config.id) != null ? _this$_config$id : index_js.getUID(NAME);
|
||||
this._hiddenInput = null;
|
||||
this._input = SelectorEngine.findOne('input', this._element);
|
||||
if (this._input) {
|
||||
this._setInputSize();
|
||||
} else {
|
||||
this._createInput();
|
||||
}
|
||||
this._applyInteractionState();
|
||||
this._createHiddenInput();
|
||||
this._addInputEventListeners();
|
||||
}
|
||||
|
||||
// Getters
|
||||
static get Default() {
|
||||
return Default;
|
||||
}
|
||||
static get DefaultType() {
|
||||
return DefaultType;
|
||||
}
|
||||
static get NAME() {
|
||||
return NAME;
|
||||
}
|
||||
|
||||
// Public
|
||||
// Keep the inherited add behavior and mirror the new value into the form input.
|
||||
add(value) {
|
||||
const chip = super.add(value);
|
||||
if (chip) {
|
||||
this._syncHiddenInput();
|
||||
}
|
||||
return chip;
|
||||
}
|
||||
focus() {
|
||||
var _this$_input;
|
||||
(_this$_input = this._input) == null || _this$_input.focus();
|
||||
}
|
||||
|
||||
// Private
|
||||
_canModify() {
|
||||
return !this._disabled && !this._config.readonly;
|
||||
}
|
||||
|
||||
// Chips live before the text field, not at the end of the set.
|
||||
_appendChip(chip) {
|
||||
this._element.insertBefore(chip, this._input);
|
||||
}
|
||||
|
||||
// Per-chip configuration based on the chip value and the input's
|
||||
// disabled/readonly state.
|
||||
_getChipConfig(chip) {
|
||||
return {
|
||||
ariaRemoveLabel: `Remove ${this._getChipValue(chip)}`,
|
||||
disabled: this._disabled,
|
||||
removable: this._config.removable && !this._config.readonly && !this._disabled,
|
||||
removeIcon: this._config.removeIcon,
|
||||
selectable: this._config.selectable
|
||||
};
|
||||
}
|
||||
|
||||
// Keep the inherited chip instantiation and sync the remove button.
|
||||
_setupChip(chip) {
|
||||
super._setupChip(chip);
|
||||
const removeButton = SelectorEngine.findOne(SELECTOR_CHIP_REMOVE, chip);
|
||||
if (removeButton) {
|
||||
removeButton.disabled = this._disabled || this._config.readonly;
|
||||
}
|
||||
}
|
||||
|
||||
// Sync the form mirror and refocus the text field after a chip is removed.
|
||||
_handleChipRemoved(event) {
|
||||
var _this$_input2;
|
||||
super._handleChipRemoved(event);
|
||||
this._syncHiddenInput();
|
||||
(_this$_input2 = this._input) == null || _this$_input2.focus();
|
||||
}
|
||||
_syncHiddenInput() {
|
||||
if (this._hiddenInput) {
|
||||
this._hiddenInput.value = this.getValues().join(',');
|
||||
}
|
||||
}
|
||||
_addInputEventListeners() {
|
||||
EventHandler.on(this._element, 'keydown', event => {
|
||||
if (event.target === this._input) {
|
||||
return;
|
||||
}
|
||||
|
||||
// The arrow key past the last chip moves focus into the text field, which
|
||||
// sits after the chips (mirrors the input's "go to last chip" key). The
|
||||
// direction is mirrored in RTL.
|
||||
if (event.key === (index_js.isRTL() ? 'ArrowLeft' : 'ArrowRight')) {
|
||||
const chips = this._getFocusableChips();
|
||||
if (chips.length > 0 && chips.at(-1).contains(event.target)) {
|
||||
event.preventDefault();
|
||||
this._input.focus();
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (event.key.length === 1) {
|
||||
this._input.focus();
|
||||
}
|
||||
});
|
||||
EventHandler.on(this._input, 'keydown', event => this._handleInputKeydown(event));
|
||||
EventHandler.on(this._input, 'input', event => this._handleInput(event));
|
||||
EventHandler.on(this._input, 'paste', event => this._handlePaste(event));
|
||||
EventHandler.on(this._input, 'focus', () => this.clearSelection());
|
||||
if (this._config.createOnBlur) {
|
||||
EventHandler.on(this._input, 'blur', event => {
|
||||
var _event$relatedTarget;
|
||||
// Don't create chip if clicking on a chip
|
||||
if (!((_event$relatedTarget = event.relatedTarget) != null && _event$relatedTarget.closest(SELECTOR_CHIP))) {
|
||||
this._createChipFromInput();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Focus input when clicking container background
|
||||
EventHandler.on(this._element, 'click', event => {
|
||||
if (event.target === this._element) {
|
||||
var _this$_input3;
|
||||
(_this$_input3 = this._input) == null || _this$_input3.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
_createInput() {
|
||||
const input = document.createElement('input');
|
||||
const label = SelectorEngine.findOne(SELECTOR_CHIP_INPUT_LABEL, this._element);
|
||||
const labelFor = label == null ? void 0 : label.getAttribute('for');
|
||||
const generatedInputId = labelFor || index_js.getUID(`${NAME}-input`);
|
||||
input.type = 'text';
|
||||
input.className = CLASS_NAME_CHIP_INPUT_FIELD;
|
||||
input.id = generatedInputId;
|
||||
if (this._config.placeholder) {
|
||||
input.placeholder = this._config.placeholder;
|
||||
}
|
||||
if (label && !labelFor) {
|
||||
label.setAttribute('for', generatedInputId);
|
||||
}
|
||||
this._input = input;
|
||||
this._setInputSize();
|
||||
this._element.append(input);
|
||||
}
|
||||
_createHiddenInput() {
|
||||
const hiddenInput = document.createElement('input');
|
||||
hiddenInput.type = 'hidden';
|
||||
hiddenInput.id = this._uniqueId;
|
||||
hiddenInput.name = this._config.name || this._uniqueId;
|
||||
this._element.append(hiddenInput);
|
||||
this._hiddenInput = hiddenInput;
|
||||
this._hiddenInput.value = this.getValues().join(',');
|
||||
}
|
||||
_createChipFromInput() {
|
||||
if (!this._canModify()) {
|
||||
return;
|
||||
}
|
||||
const value = this._input.value.trim();
|
||||
if (value) {
|
||||
this.add(value);
|
||||
this._input.value = '';
|
||||
this._setInputSize();
|
||||
}
|
||||
}
|
||||
_applyInteractionState() {
|
||||
const {
|
||||
readonly
|
||||
} = this._config;
|
||||
this._element.classList.toggle(CLASS_NAME_DISABLED, this._disabled);
|
||||
this._input.disabled = this._disabled;
|
||||
this._input.readOnly = !this._disabled && readonly;
|
||||
this._element.setAttribute('aria-disabled', this._disabled ? 'true' : 'false');
|
||||
this._element.setAttribute('aria-readonly', readonly ? 'true' : 'false');
|
||||
}
|
||||
_handleInputKeydown(event) {
|
||||
const {
|
||||
key
|
||||
} = event;
|
||||
switch (key) {
|
||||
case 'Enter':
|
||||
{
|
||||
event.preventDefault();
|
||||
this._createChipFromInput();
|
||||
break;
|
||||
}
|
||||
case 'Backspace':
|
||||
case 'Delete':
|
||||
{
|
||||
if (this._input.value === '') {
|
||||
event.preventDefault();
|
||||
const chips = this._getChipElements();
|
||||
if (chips.length > 0) {
|
||||
chips.at(-1).focus();
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowRight':
|
||||
{
|
||||
// The arrow pointing toward the chips (left in LTR, right in RTL) jumps
|
||||
// to the last chip when the caret is at the start of the input.
|
||||
const towardChipsKey = index_js.isRTL() ? 'ArrowRight' : 'ArrowLeft';
|
||||
if (key === towardChipsKey && this._input.selectionStart === 0 && this._input.selectionEnd === 0) {
|
||||
event.preventDefault();
|
||||
const chips = this._getChipElements();
|
||||
if (chips.length > 0) {
|
||||
chips.at(-1).focus();
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'Escape':
|
||||
{
|
||||
this._input.value = '';
|
||||
this._input.blur();
|
||||
break;
|
||||
}
|
||||
|
||||
// No default
|
||||
}
|
||||
}
|
||||
_handleInput(event) {
|
||||
if (!this._canModify()) {
|
||||
return;
|
||||
}
|
||||
const {
|
||||
value
|
||||
} = event.target;
|
||||
const {
|
||||
separator
|
||||
} = this._config;
|
||||
if (separator && value.includes(separator)) {
|
||||
const parts = value.split(separator);
|
||||
for (const part of parts.slice(0, -1)) {
|
||||
this.add(part.trim());
|
||||
}
|
||||
this._input.value = parts.at(-1);
|
||||
}
|
||||
this._setInputSize();
|
||||
EventHandler.trigger(this._element, EVENT_INPUT, {
|
||||
value: this._input.value,
|
||||
relatedTarget: this._input
|
||||
});
|
||||
}
|
||||
_handlePaste(event) {
|
||||
if (!this._canModify()) {
|
||||
return;
|
||||
}
|
||||
const {
|
||||
separator
|
||||
} = this._config;
|
||||
if (!separator) {
|
||||
return;
|
||||
}
|
||||
const pastedData = (event.clipboardData || window.clipboardData).getData('text');
|
||||
if (pastedData.includes(separator)) {
|
||||
event.preventDefault();
|
||||
const parts = pastedData.split(separator);
|
||||
for (const part of parts) {
|
||||
this.add(part.trim());
|
||||
}
|
||||
}
|
||||
}
|
||||
_setInputSize() {
|
||||
if (!this._input) {
|
||||
return;
|
||||
}
|
||||
this._input.size = Math.max(this._input.placeholder.length, this._input.value.length) || 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data API implementation
|
||||
*/
|
||||
|
||||
EventHandler.on(document, `DOMContentLoaded${EVENT_KEY}${DATA_API_KEY}`, () => {
|
||||
for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP_INPUT)) {
|
||||
ChipInput.getOrCreateInstance(element);
|
||||
}
|
||||
});
|
||||
|
||||
return ChipInput;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=chip-input.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+464
@@ -0,0 +1,464 @@
|
||||
/*!
|
||||
* CoreUI chip-set.js v5.8.0 (https://coreui.io)
|
||||
* Copyright 2026 The CoreUI Team (https://github.com/orgs/coreui/people)
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./base-component.js'), require('./chip.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./util/index.js')) :
|
||||
typeof define === 'function' && define.amd ? define(['./base-component', './chip', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './util/index'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ChipSet = factory(global.BaseComponent, global.Chip, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Index));
|
||||
})(this, (function (BaseComponent, Chip, EventHandler, Manipulator, SelectorEngine, index_js) { 'use strict';
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* CoreUI chip-set.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Constants
|
||||
*/
|
||||
|
||||
const NAME = 'chip-set';
|
||||
const DATA_KEY = 'coreui.chip-set';
|
||||
const EVENT_KEY = `.${DATA_KEY}`;
|
||||
const DATA_API_KEY = '.data-api';
|
||||
const EVENT_ADD = 'add';
|
||||
const EVENT_REMOVE = 'remove';
|
||||
const EVENT_CHANGE = 'change';
|
||||
const EVENT_SELECT = 'select';
|
||||
const EVENT_KEYDOWN = 'keydown';
|
||||
const EVENT_CHIP_SELECTED = 'selected.coreui.chip';
|
||||
const EVENT_CHIP_DESELECTED = 'deselected.coreui.chip';
|
||||
const EVENT_CHIP_REMOVE = 'remove.coreui.chip';
|
||||
const EVENT_CHIP_REMOVED = 'removed.coreui.chip';
|
||||
const SELECTOR_DATA_CHIP_SET = '[data-coreui-chip-set]';
|
||||
const SELECTOR_CHIP = '.chip';
|
||||
const SELECTOR_CHIP_ACTIVE = `${SELECTOR_CHIP}.active`;
|
||||
const SELECTOR_CHIP_REMOVE = '.chip-remove';
|
||||
const SELECTOR_FOCUSABLE_ITEMS = '.chip:not(.disabled)';
|
||||
const CLASS_NAME_CHIP = 'chip';
|
||||
const CLASS_NAME_DISABLED = 'disabled';
|
||||
const SELECTION_MODE_SINGLE = 'single';
|
||||
const DEFAULT_REMOVE_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>';
|
||||
const DEFAULT_SELECTED_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="currentColor"><path d="M425.373 89.373 196 318.745 86.627 209.373l-45.254 45.254L196 409.255l274.627-274.628z"/></svg>';
|
||||
const Default = {
|
||||
ariaRemoveLabel: 'Remove',
|
||||
chipClassName: null,
|
||||
disabled: false,
|
||||
filter: false,
|
||||
maxChips: null,
|
||||
removable: false,
|
||||
removeIcon: DEFAULT_REMOVE_ICON,
|
||||
selectable: false,
|
||||
selectedIcon: DEFAULT_SELECTED_ICON,
|
||||
selectionMode: 'multiple',
|
||||
unique: false
|
||||
};
|
||||
const DefaultType = {
|
||||
ariaRemoveLabel: 'string',
|
||||
chipClassName: '(string|function|null)',
|
||||
disabled: 'boolean',
|
||||
filter: 'boolean',
|
||||
maxChips: '(number|null)',
|
||||
removable: 'boolean',
|
||||
removeIcon: 'string',
|
||||
selectable: 'boolean',
|
||||
selectedIcon: 'string',
|
||||
selectionMode: 'string',
|
||||
unique: 'boolean'
|
||||
};
|
||||
|
||||
/**
|
||||
* Class definition
|
||||
*/
|
||||
|
||||
class ChipSet extends BaseComponent {
|
||||
constructor(element, config) {
|
||||
super(element, config);
|
||||
this._disabled = this._config.disabled || this._element.classList.contains(CLASS_NAME_DISABLED);
|
||||
this._pendingFocus = null;
|
||||
this._chips = [];
|
||||
this._initChips();
|
||||
this._addEventListeners();
|
||||
}
|
||||
|
||||
// Getters
|
||||
static get Default() {
|
||||
return Default;
|
||||
}
|
||||
static get DefaultType() {
|
||||
return DefaultType;
|
||||
}
|
||||
static get NAME() {
|
||||
return NAME;
|
||||
}
|
||||
|
||||
// Public
|
||||
add(chip) {
|
||||
var _this$_input;
|
||||
if (!this._canModify()) {
|
||||
return null;
|
||||
}
|
||||
const isElement = typeof chip !== 'string';
|
||||
const value = isElement ? this._getChipValue(chip) : String(chip).trim();
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
if (this._config.unique && this._chips.includes(value)) {
|
||||
return null;
|
||||
}
|
||||
if (this._config.maxChips !== null && this._chips.length >= this._config.maxChips) {
|
||||
return null;
|
||||
}
|
||||
const addEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_ADD), {
|
||||
value,
|
||||
relatedTarget: (_this$_input = this._input) != null ? _this$_input : null
|
||||
});
|
||||
if (addEvent.defaultPrevented) {
|
||||
return null;
|
||||
}
|
||||
const element = isElement ? chip : this._createChip(value);
|
||||
this._appendChip(element);
|
||||
this._setupChip(element);
|
||||
this._chips.push(value);
|
||||
EventHandler.trigger(this._element, this.constructor.eventName(EVENT_CHANGE), {
|
||||
values: this.getValues()
|
||||
});
|
||||
return element;
|
||||
}
|
||||
remove(chipOrValue) {
|
||||
var _this$_input2;
|
||||
if (!this._canModify()) {
|
||||
return false;
|
||||
}
|
||||
let chip;
|
||||
let value;
|
||||
if (typeof chipOrValue === 'string') {
|
||||
value = chipOrValue;
|
||||
chip = this._findChipByValue(value);
|
||||
} else {
|
||||
chip = chipOrValue;
|
||||
value = this._getChipValue(chip);
|
||||
}
|
||||
if (!chip || !value) {
|
||||
return false;
|
||||
}
|
||||
const removeEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_REMOVE), {
|
||||
value,
|
||||
chip,
|
||||
relatedTarget: (_this$_input2 = this._input) != null ? _this$_input2 : null
|
||||
});
|
||||
if (removeEvent.defaultPrevented) {
|
||||
return false;
|
||||
}
|
||||
const instance = Chip.getInstance(chip);
|
||||
if (instance) {
|
||||
instance.remove();
|
||||
} else {
|
||||
chip.remove();
|
||||
this._handleChipRemoval(chip, value);
|
||||
}
|
||||
return !chip.isConnected;
|
||||
}
|
||||
removeSelected() {
|
||||
for (const chip of this.getSelected()) {
|
||||
this.remove(chip);
|
||||
}
|
||||
}
|
||||
clear() {
|
||||
for (const chip of this._getChipElements()) {
|
||||
this.remove(chip);
|
||||
}
|
||||
}
|
||||
selectChip(chip) {
|
||||
var _Chip$getInstance;
|
||||
if (!this._getChipElements().includes(chip)) {
|
||||
return;
|
||||
}
|
||||
(_Chip$getInstance = Chip.getInstance(chip)) == null || _Chip$getInstance.select();
|
||||
}
|
||||
selectAll() {
|
||||
if (!this._config.selectable) {
|
||||
return;
|
||||
}
|
||||
for (const chip of this._getChipElements()) {
|
||||
var _Chip$getInstance2;
|
||||
(_Chip$getInstance2 = Chip.getInstance(chip)) == null || _Chip$getInstance2.select();
|
||||
}
|
||||
}
|
||||
deselectAll() {
|
||||
for (const chip of this.getSelected()) {
|
||||
var _Chip$getInstance3;
|
||||
(_Chip$getInstance3 = Chip.getInstance(chip)) == null || _Chip$getInstance3.deselect();
|
||||
}
|
||||
}
|
||||
clearSelection() {
|
||||
this.deselectAll();
|
||||
EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SELECT), {
|
||||
selected: this.getSelectedValues()
|
||||
});
|
||||
}
|
||||
getSelected() {
|
||||
return SelectorEngine.find(SELECTOR_CHIP_ACTIVE, this._element);
|
||||
}
|
||||
getValues() {
|
||||
return [...this._chips];
|
||||
}
|
||||
getSelectedValues() {
|
||||
return this.getSelected().map(chip => this._getChipValue(chip));
|
||||
}
|
||||
dispose() {
|
||||
EventHandler.off(this._element, Chip.EVENT_KEY);
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
// Private
|
||||
_configAfterMerge(config) {
|
||||
// Filter chips are selectable by definition.
|
||||
if (config.filter) {
|
||||
config.selectable = true;
|
||||
}
|
||||
return config;
|
||||
}
|
||||
_canModify() {
|
||||
return !this._disabled;
|
||||
}
|
||||
_appendChip(chip) {
|
||||
this._element.append(chip);
|
||||
}
|
||||
_getChipElements() {
|
||||
return SelectorEngine.find(SELECTOR_CHIP, this._element);
|
||||
}
|
||||
_findChipByValue(value) {
|
||||
return this._getChipElements().find(chip => this._getChipValue(chip) === value);
|
||||
}
|
||||
_getChipValue(chip) {
|
||||
var _clone$textContent;
|
||||
if (chip.dataset.coreuiChipValue) {
|
||||
return chip.dataset.coreuiChipValue;
|
||||
}
|
||||
const clone = chip.cloneNode(true);
|
||||
const remove = SelectorEngine.findOne(SELECTOR_CHIP_REMOVE, clone);
|
||||
if (remove) {
|
||||
remove.remove();
|
||||
}
|
||||
return ((_clone$textContent = clone.textContent) == null ? void 0 : _clone$textContent.trim()) || '';
|
||||
}
|
||||
_getFocusableChips() {
|
||||
return SelectorEngine.find(SELECTOR_FOCUSABLE_ITEMS, this._element);
|
||||
}
|
||||
_initChips() {
|
||||
for (const chip of this._getChipElements()) {
|
||||
const value = this._getChipValue(chip);
|
||||
if (value) {
|
||||
this._chips.push(value);
|
||||
this._applyChipClassName(chip, value);
|
||||
}
|
||||
this._setupChip(chip);
|
||||
}
|
||||
}
|
||||
_setupChip(chip) {
|
||||
Chip.getOrCreateInstance(chip, this._getChipConfig(chip));
|
||||
}
|
||||
_getChipConfig(chip) {
|
||||
// A chip's own data attributes override the set's options.
|
||||
return {
|
||||
ariaRemoveLabel: this._config.ariaRemoveLabel,
|
||||
disabled: this._disabled,
|
||||
filter: this._config.filter,
|
||||
removable: this._config.removable,
|
||||
removeIcon: this._config.removeIcon,
|
||||
selectable: this._config.selectable,
|
||||
selectedIcon: this._config.selectedIcon,
|
||||
...Manipulator.getDataAttributes(chip)
|
||||
};
|
||||
}
|
||||
_createChip(value) {
|
||||
const chip = document.createElement('span');
|
||||
chip.className = CLASS_NAME_CHIP;
|
||||
chip.dataset.coreuiChipValue = value;
|
||||
chip.append(document.createTextNode(value));
|
||||
this._applyChipClassName(chip, value);
|
||||
return chip;
|
||||
}
|
||||
_applyChipClassName(chip, value) {
|
||||
const className = this._resolveChipClassName(value);
|
||||
if (!className) {
|
||||
return;
|
||||
}
|
||||
chip.classList.add(...className.split(/\s+/).filter(Boolean));
|
||||
}
|
||||
_resolveChipClassName(value) {
|
||||
const {
|
||||
chipClassName
|
||||
} = this._config;
|
||||
if (!chipClassName) {
|
||||
return '';
|
||||
}
|
||||
if (typeof chipClassName === 'function') {
|
||||
const resolvedClassName = chipClassName(value);
|
||||
return typeof resolvedClassName === 'string' ? resolvedClassName : '';
|
||||
}
|
||||
return typeof chipClassName === 'string' ? chipClassName : '';
|
||||
}
|
||||
_addEventListeners() {
|
||||
EventHandler.on(this._element, this.constructor.eventName(EVENT_KEYDOWN), SELECTOR_CHIP, event => this._handleKeydown(event));
|
||||
EventHandler.on(this._element, EVENT_CHIP_SELECTED, SELECTOR_CHIP, event => this._handleSelectionChange(event));
|
||||
EventHandler.on(this._element, EVENT_CHIP_DESELECTED, SELECTOR_CHIP, event => this._handleSelectionChange(event));
|
||||
EventHandler.on(this._element, EVENT_CHIP_REMOVE, SELECTOR_CHIP, event => this._handleChipRemove(event));
|
||||
EventHandler.on(this._element, EVENT_CHIP_REMOVED, SELECTOR_CHIP, event => this._handleChipRemoved(event));
|
||||
}
|
||||
_handleKeydown(event) {
|
||||
const chip = event.target.closest(SELECTOR_CHIP);
|
||||
if (!chip || chip.classList.contains(CLASS_NAME_DISABLED)) {
|
||||
return;
|
||||
}
|
||||
switch (event.key) {
|
||||
case 'ArrowLeft':
|
||||
{
|
||||
event.preventDefault();
|
||||
// In RTL the visual direction is mirrored, so ArrowLeft moves to the next chip.
|
||||
this._focusSibling(chip, index_js.isRTL());
|
||||
break;
|
||||
}
|
||||
case 'ArrowRight':
|
||||
{
|
||||
event.preventDefault();
|
||||
this._focusSibling(chip, !index_js.isRTL());
|
||||
break;
|
||||
}
|
||||
case 'Home':
|
||||
{
|
||||
event.preventDefault();
|
||||
this._navigateToEdge(0);
|
||||
break;
|
||||
}
|
||||
case 'End':
|
||||
{
|
||||
event.preventDefault();
|
||||
this._navigateToEdge(-1);
|
||||
break;
|
||||
}
|
||||
|
||||
// No default
|
||||
}
|
||||
}
|
||||
_focusSibling(chip, shouldGetNext) {
|
||||
const chips = this._getFocusableChips();
|
||||
if (chips.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// No cycling: navigation stops at the edges.
|
||||
const sibling = index_js.getNextActiveElement(chips, chip, shouldGetNext, false);
|
||||
if (sibling && sibling !== chip) {
|
||||
sibling.focus();
|
||||
}
|
||||
}
|
||||
_getRemovalNeighbor(chip) {
|
||||
const chips = this._getFocusableChips();
|
||||
if (chips.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Prefer the next chip, fall back to the previous one at the end.
|
||||
const next = index_js.getNextActiveElement(chips, chip, true, false);
|
||||
if (next && next !== chip) {
|
||||
return next;
|
||||
}
|
||||
const previous = index_js.getNextActiveElement(chips, chip, false, false);
|
||||
return previous && previous !== chip ? previous : null;
|
||||
}
|
||||
_navigateToEdge(targetIndex) {
|
||||
var _chips$at;
|
||||
const chips = this._getFocusableChips();
|
||||
(_chips$at = chips.at(targetIndex)) == null || _chips$at.focus();
|
||||
}
|
||||
_handleSelectionChange(event) {
|
||||
const chip = event.target.closest(SELECTOR_CHIP);
|
||||
if (this._config.selectionMode === SELECTION_MODE_SINGLE && chip != null && chip.matches(SELECTOR_CHIP_ACTIVE)) {
|
||||
this._enforceSingleSelection(chip);
|
||||
}
|
||||
EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SELECT), {
|
||||
selected: this.getSelectedValues()
|
||||
});
|
||||
}
|
||||
_enforceSingleSelection(selectedChip) {
|
||||
for (const chip of this.getSelected()) {
|
||||
if (chip !== selectedChip) {
|
||||
var _Chip$getInstance4;
|
||||
(_Chip$getInstance4 = Chip.getInstance(chip)) == null || _Chip$getInstance4.deselect();
|
||||
}
|
||||
}
|
||||
}
|
||||
_handleChipRemove(event) {
|
||||
const chip = event.target.closest(SELECTOR_CHIP);
|
||||
this._pendingFocus = chip ? this._getRemovalNeighbor(chip) : null;
|
||||
}
|
||||
_handleChipRemoved(event) {
|
||||
var _this$_pendingFocus;
|
||||
const chip = event.target.closest(SELECTOR_CHIP);
|
||||
(_this$_pendingFocus = this._pendingFocus) == null || _this$_pendingFocus.focus();
|
||||
this._pendingFocus = null;
|
||||
this._handleChipRemoval(chip, this._getChipValue(chip));
|
||||
}
|
||||
_handleChipRemoval(chip, value) {
|
||||
const index = this._chips.indexOf(value);
|
||||
if (index !== -1) {
|
||||
this._chips.splice(index, 1);
|
||||
}
|
||||
EventHandler.trigger(this._element, this.constructor.eventName(EVENT_CHANGE), {
|
||||
values: this.getValues()
|
||||
});
|
||||
EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SELECT), {
|
||||
selected: this.getSelectedValues()
|
||||
});
|
||||
}
|
||||
|
||||
// Static
|
||||
static chipSetInterface(element, config) {
|
||||
const data = ChipSet.getOrCreateInstance(element, config);
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
data[config]();
|
||||
}
|
||||
}
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = ChipSet.getOrCreateInstance(this);
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
}
|
||||
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
data[config](this);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data API implementation
|
||||
*/
|
||||
|
||||
EventHandler.on(document, `DOMContentLoaded${EVENT_KEY}${DATA_API_KEY}`, () => {
|
||||
for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP_SET)) {
|
||||
ChipSet.chipSetInterface(element);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* jQuery
|
||||
*/
|
||||
|
||||
index_js.defineJQueryPlugin(ChipSet);
|
||||
|
||||
return ChipSet;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=chip-set.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user