@kelvininc/ui-components
Version:
Kelvin UI Components
1,070 lines (918 loc) • 43.9 kB
JavaScript
import { H as proxyCustomElement, I as H, K as h, t as EIconName, L as Host } from './p-BP5CxQcH.js';
import { a as copyTextToClipboard } from './p-DWmIpAOE.js';
import { C as COPY_TOOLTIP } from './p-BJWqAn4w.js';
import { d as defineCustomElement$5 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$4 } from './p-CgqRIP0M.js';
import { d as defineCustomElement$3 } from './p-DdZmrasC.js';
import { d as defineCustomElement$2 } from './p-DFBbXuLI.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
var ResizeSensor$1 = {exports: {}};
var ResizeSensor = ResizeSensor$1.exports;
var hasRequiredResizeSensor;
function requireResizeSensor () {
if (hasRequiredResizeSensor) return ResizeSensor$1.exports;
hasRequiredResizeSensor = 1;
(function (module, exports) {
/**
* Copyright Marc J. Schmidt. See the LICENSE file at the top-level
* directory of this distribution and at
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
*/
(function (root, factory) {
{
module.exports = factory();
}
}(typeof window !== 'undefined' ? window : ResizeSensor, function () {
// Make sure it does not throw in a SSR (Server Side Rendering) situation
if (typeof window === "undefined") {
return null;
}
// https://github.com/Semantic-Org/Semantic-UI/issues/3855
// https://github.com/marcj/css-element-queries/issues/257
var globalWindow = typeof window != 'undefined' && window.Math == Math
? window
: typeof self != 'undefined' && self.Math == Math
? self
: Function('return this')();
// Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
// In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
// would generate too many unnecessary events.
var requestAnimationFrame = globalWindow.requestAnimationFrame ||
globalWindow.mozRequestAnimationFrame ||
globalWindow.webkitRequestAnimationFrame ||
function (fn) {
return globalWindow.setTimeout(fn, 20);
};
var cancelAnimationFrame = globalWindow.cancelAnimationFrame ||
globalWindow.mozCancelAnimationFrame ||
globalWindow.webkitCancelAnimationFrame ||
function (timer) {
globalWindow.clearTimeout(timer);
};
/**
* Iterate over each of the provided element(s).
*
* @param {HTMLElement|HTMLElement[]} elements
* @param {Function} callback
*/
function forEachElement(elements, callback){
var elementsType = Object.prototype.toString.call(elements);
var isCollectionTyped = ('[object Array]' === elementsType
|| ('[object NodeList]' === elementsType)
|| ('[object HTMLCollection]' === elementsType)
|| ('[object Object]' === elementsType)
|| ('undefined' !== typeof jQuery && elements instanceof jQuery) //jquery
|| ('undefined' !== typeof Elements && elements instanceof Elements) //mootools
);
var i = 0, j = elements.length;
if (isCollectionTyped) {
for (; i < j; i++) {
callback(elements[i]);
}
} else {
callback(elements);
}
}
/**
* Get element size
* @param {HTMLElement} element
* @returns {Object} {width, height}
*/
function getElementSize(element) {
if (!element.getBoundingClientRect) {
return {
width: element.offsetWidth,
height: element.offsetHeight
}
}
var rect = element.getBoundingClientRect();
return {
width: Math.round(rect.width),
height: Math.round(rect.height)
}
}
/**
* Apply CSS styles to element.
*
* @param {HTMLElement} element
* @param {Object} style
*/
function setStyle(element, style) {
Object.keys(style).forEach(function(key) {
element.style[key] = style[key];
});
}
/**
* Class for dimension change detection.
*
* @param {Element|Element[]|Elements|jQuery} element
* @param {Function} callback
*
* @constructor
*/
var ResizeSensor = function(element, callback) {
//Is used when checking in reset() only for invisible elements
var lastAnimationFrameForInvisibleCheck = 0;
/**
*
* @constructor
*/
function EventQueue() {
var q = [];
this.add = function(ev) {
q.push(ev);
};
var i, j;
this.call = function(sizeInfo) {
for (i = 0, j = q.length; i < j; i++) {
q[i].call(this, sizeInfo);
}
};
this.remove = function(ev) {
var newQueue = [];
for(i = 0, j = q.length; i < j; i++) {
if(q[i] !== ev) newQueue.push(q[i]);
}
q = newQueue;
};
this.length = function() {
return q.length;
};
}
/**
*
* @param {HTMLElement} element
* @param {Function} resized
*/
function attachResizeEvent(element, resized) {
if (!element) return;
if (element.resizedAttached) {
element.resizedAttached.add(resized);
return;
}
element.resizedAttached = new EventQueue();
element.resizedAttached.add(resized);
element.resizeSensor = document.createElement('div');
element.resizeSensor.dir = 'ltr';
element.resizeSensor.className = 'resize-sensor';
var style = {
pointerEvents: 'none',
position: 'absolute',
left: '0px',
top: '0px',
right: '0px',
bottom: '0px',
overflow: 'hidden',
zIndex: '-1',
visibility: 'hidden',
maxWidth: '100%'
};
var styleChild = {
position: 'absolute',
left: '0px',
top: '0px',
transition: '0s',
};
setStyle(element.resizeSensor, style);
var expand = document.createElement('div');
expand.className = 'resize-sensor-expand';
setStyle(expand, style);
var expandChild = document.createElement('div');
setStyle(expandChild, styleChild);
expand.appendChild(expandChild);
var shrink = document.createElement('div');
shrink.className = 'resize-sensor-shrink';
setStyle(shrink, style);
var shrinkChild = document.createElement('div');
setStyle(shrinkChild, styleChild);
setStyle(shrinkChild, { width: '200%', height: '200%' });
shrink.appendChild(shrinkChild);
element.resizeSensor.appendChild(expand);
element.resizeSensor.appendChild(shrink);
element.appendChild(element.resizeSensor);
var computedStyle = window.getComputedStyle(element);
var position = computedStyle ? computedStyle.getPropertyValue('position') : null;
if ('absolute' !== position && 'relative' !== position && 'fixed' !== position && 'sticky' !== position) {
element.style.position = 'relative';
}
var dirty = false;
//last request animation frame id used in onscroll event
var rafId = 0;
var size = getElementSize(element);
var lastWidth = 0;
var lastHeight = 0;
var initialHiddenCheck = true;
lastAnimationFrameForInvisibleCheck = 0;
var resetExpandShrink = function () {
var width = element.offsetWidth;
var height = element.offsetHeight;
expandChild.style.width = (width + 10) + 'px';
expandChild.style.height = (height + 10) + 'px';
expand.scrollLeft = width + 10;
expand.scrollTop = height + 10;
shrink.scrollLeft = width + 10;
shrink.scrollTop = height + 10;
};
var reset = function() {
// Check if element is hidden
if (initialHiddenCheck) {
var invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
if (invisible) {
// Check in next frame
if (!lastAnimationFrameForInvisibleCheck){
lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function(){
lastAnimationFrameForInvisibleCheck = 0;
reset();
});
}
return;
} else {
// Stop checking
initialHiddenCheck = false;
}
}
resetExpandShrink();
};
element.resizeSensor.resetSensor = reset;
var onResized = function() {
rafId = 0;
if (!dirty) return;
lastWidth = size.width;
lastHeight = size.height;
if (element.resizedAttached) {
element.resizedAttached.call(size);
}
};
var onScroll = function() {
size = getElementSize(element);
dirty = size.width !== lastWidth || size.height !== lastHeight;
if (dirty && !rafId) {
rafId = requestAnimationFrame(onResized);
}
reset();
};
var addEvent = function(el, name, cb) {
if (el.attachEvent) {
el.attachEvent('on' + name, cb);
} else {
el.addEventListener(name, cb);
}
};
addEvent(expand, 'scroll', onScroll);
addEvent(shrink, 'scroll', onScroll);
// Fix for custom Elements and invisible elements
lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function(){
lastAnimationFrameForInvisibleCheck = 0;
reset();
});
}
forEachElement(element, function(elem){
attachResizeEvent(elem, callback);
});
this.detach = function(ev) {
// clean up the unfinished animation frame to prevent a potential endless requestAnimationFrame of reset
if (!lastAnimationFrameForInvisibleCheck) {
cancelAnimationFrame(lastAnimationFrameForInvisibleCheck);
lastAnimationFrameForInvisibleCheck = 0;
}
ResizeSensor.detach(element, ev);
};
this.reset = function() {
element.resizeSensor.resetSensor();
};
};
ResizeSensor.reset = function(element) {
forEachElement(element, function(elem){
elem.resizeSensor.resetSensor();
});
};
ResizeSensor.detach = function(element, ev) {
forEachElement(element, function(elem){
if (!elem) return;
if(elem.resizedAttached && typeof ev === "function"){
elem.resizedAttached.remove(ev);
if(elem.resizedAttached.length()) return;
}
if (elem.resizeSensor) {
if (elem.contains(elem.resizeSensor)) {
elem.removeChild(elem.resizeSensor);
}
delete elem.resizeSensor;
delete elem.resizedAttached;
}
});
};
if (typeof MutationObserver !== "undefined") {
var observer = new MutationObserver(function (mutations) {
for (var i in mutations) {
if (mutations.hasOwnProperty(i)) {
var items = mutations[i].addedNodes;
for (var j = 0; j < items.length; j++) {
if (items[j].resizeSensor) {
ResizeSensor.reset(items[j]);
}
}
}
}
});
document.addEventListener("DOMContentLoaded", function (event) {
observer.observe(document.body, {
childList: true,
subtree: true,
});
});
}
return ResizeSensor;
}));
} (ResizeSensor$1));
return ResizeSensor$1.exports;
}
var ElementQueries$1 = {exports: {}};
var ElementQueries = ElementQueries$1.exports;
var hasRequiredElementQueries;
function requireElementQueries () {
if (hasRequiredElementQueries) return ElementQueries$1.exports;
hasRequiredElementQueries = 1;
(function (module, exports) {
/**
* Copyright Marc J. Schmidt. See the LICENSE file at the top-level
* directory of this distribution and at
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
*/
(function (root, factory) {
{
module.exports = factory(requireResizeSensor());
}
}(typeof window !== 'undefined' ? window : ElementQueries, function (ResizeSensor) {
/**
*
* @type {Function}
* @constructor
*/
var ElementQueries = function () {
//<style> element with our dynamically created styles
var cssStyleElement;
//all rules found for element queries
var allQueries = {};
//association map to identify which selector belongs to a element from the animationstart event.
var idToSelectorMapping = [];
/**
*
* @param element
* @returns {Number}
*/
function getEmSize(element) {
if (!element) {
element = document.documentElement;
}
var fontSize = window.getComputedStyle(element, null).fontSize;
return parseFloat(fontSize) || 16;
}
/**
* Get element size
* @param {HTMLElement} element
* @returns {Object} {width, height}
*/
function getElementSize(element) {
if (!element.getBoundingClientRect) {
return {
width: element.offsetWidth,
height: element.offsetHeight
}
}
var rect = element.getBoundingClientRect();
return {
width: Math.round(rect.width),
height: Math.round(rect.height)
}
}
/**
*
* @copyright https://github.com/Mr0grog/element-query/blob/master/LICENSE
*
* @param {HTMLElement} element
* @param {*} value
* @returns {*}
*/
function convertToPx(element, value) {
var numbers = value.split(/\d/);
var units = numbers[numbers.length - 1];
value = parseFloat(value);
switch (units) {
case "px":
return value;
case "em":
return value * getEmSize(element);
case "rem":
return value * getEmSize();
// Viewport units!
// According to http://quirksmode.org/mobile/tableViewport.html
// documentElement.clientWidth/Height gets us the most reliable info
case "vw":
return value * document.documentElement.clientWidth / 100;
case "vh":
return value * document.documentElement.clientHeight / 100;
case "vmin":
case "vmax":
var vw = document.documentElement.clientWidth / 100;
var vh = document.documentElement.clientHeight / 100;
var chooser = Math[units === "vmin" ? "min" : "max"];
return value * chooser(vw, vh);
default:
return value;
// for now, not supporting physical units (since they are just a set number of px)
// or ex/ch (getting accurate measurements is hard)
}
}
/**
*
* @param {HTMLElement} element
* @param {String} id
* @constructor
*/
function SetupInformation(element, id) {
this.element = element;
var key, option, elementSize, value, actualValue, attrValues, attrValue, attrName;
var attributes = ['min-width', 'min-height', 'max-width', 'max-height'];
/**
* Extracts the computed width/height and sets to min/max- attribute.
*/
this.call = function () {
// extract current dimensions
elementSize = getElementSize(this.element);
attrValues = {};
for (key in allQueries[id]) {
if (!allQueries[id].hasOwnProperty(key)) {
continue;
}
option = allQueries[id][key];
value = convertToPx(this.element, option.value);
actualValue = option.property === 'width' ? elementSize.width : elementSize.height;
attrName = option.mode + '-' + option.property;
attrValue = '';
if (option.mode === 'min' && actualValue >= value) {
attrValue += option.value;
}
if (option.mode === 'max' && actualValue <= value) {
attrValue += option.value;
}
if (!attrValues[attrName]) attrValues[attrName] = '';
if (attrValue && -1 === (' ' + attrValues[attrName] + ' ').indexOf(' ' + attrValue + ' ')) {
attrValues[attrName] += ' ' + attrValue;
}
}
for (var k in attributes) {
if (!attributes.hasOwnProperty(k)) continue;
if (attrValues[attributes[k]]) {
this.element.setAttribute(attributes[k], attrValues[attributes[k]].substr(1));
} else {
this.element.removeAttribute(attributes[k]);
}
}
};
}
/**
* @param {HTMLElement} element
* @param {Object} id
*/
function setupElement(element, id) {
if (!element.elementQueriesSetupInformation) {
element.elementQueriesSetupInformation = new SetupInformation(element, id);
}
if (!element.elementQueriesSensor) {
element.elementQueriesSensor = new ResizeSensor(element, function () {
element.elementQueriesSetupInformation.call();
});
}
}
/**
* Stores rules to the selector that should be applied once resized.
*
* @param {String} selector
* @param {String} mode min|max
* @param {String} property width|height
* @param {String} value
*/
function queueQuery(selector, mode, property, value) {
if (typeof(allQueries[selector]) === 'undefined') {
allQueries[selector] = [];
// add animation to trigger animationstart event, so we know exactly when a element appears in the DOM
var id = idToSelectorMapping.length;
cssStyleElement.innerHTML += '\n' + selector + ' {animation: 0.1s element-queries;}';
cssStyleElement.innerHTML += '\n' + selector + ' > .resize-sensor {min-width: '+id+'px;}';
idToSelectorMapping.push(selector);
}
allQueries[selector].push({
mode: mode,
property: property,
value: value
});
}
function getQuery(container) {
var query;
if (document.querySelectorAll) query = (container) ? container.querySelectorAll.bind(container) : document.querySelectorAll.bind(document);
if (!query && 'undefined' !== typeof $$) query = $$;
if (!query && 'undefined' !== typeof jQuery) query = jQuery;
if (!query) {
throw 'No document.querySelectorAll, jQuery or Mootools\'s $$ found.';
}
return query;
}
/**
* If animationStart didn't catch a new element in the DOM, we can manually search for it
*/
function findElementQueriesElements(container) {
var query = getQuery(container);
for (var selector in allQueries) if (allQueries.hasOwnProperty(selector)) {
// find all elements based on the extract query selector from the element query rule
var elements = query(selector, container);
for (var i = 0, j = elements.length; i < j; i++) {
setupElement(elements[i], selector);
}
}
}
/**
*
* @param {HTMLElement} element
*/
function attachResponsiveImage(element) {
var children = [];
var rules = [];
var sources = [];
var defaultImageId = 0;
var lastActiveImage = -1;
var loadedImages = [];
for (var i in element.children) {
if (!element.children.hasOwnProperty(i)) continue;
if (element.children[i].tagName && element.children[i].tagName.toLowerCase() === 'img') {
children.push(element.children[i]);
var minWidth = element.children[i].getAttribute('min-width') || element.children[i].getAttribute('data-min-width');
//var minHeight = element.children[i].getAttribute('min-height') || element.children[i].getAttribute('data-min-height');
var src = element.children[i].getAttribute('data-src') || element.children[i].getAttribute('url');
sources.push(src);
var rule = {
minWidth: minWidth
};
rules.push(rule);
if (!minWidth) {
defaultImageId = children.length - 1;
element.children[i].style.display = 'block';
} else {
element.children[i].style.display = 'none';
}
}
}
lastActiveImage = defaultImageId;
function check() {
var imageToDisplay = false, i;
for (i in children) {
if (!children.hasOwnProperty(i)) continue;
if (rules[i].minWidth) {
if (element.offsetWidth > rules[i].minWidth) {
imageToDisplay = i;
}
}
}
if (!imageToDisplay) {
//no rule matched, show default
imageToDisplay = defaultImageId;
}
if (lastActiveImage !== imageToDisplay) {
//image change
if (!loadedImages[imageToDisplay]) {
//image has not been loaded yet, we need to load the image first in memory to prevent flash of
//no content
var image = new Image();
image.onload = function () {
children[imageToDisplay].src = sources[imageToDisplay];
children[lastActiveImage].style.display = 'none';
children[imageToDisplay].style.display = 'block';
loadedImages[imageToDisplay] = true;
lastActiveImage = imageToDisplay;
};
image.src = sources[imageToDisplay];
} else {
children[lastActiveImage].style.display = 'none';
children[imageToDisplay].style.display = 'block';
lastActiveImage = imageToDisplay;
}
} else {
//make sure for initial check call the .src is set correctly
children[imageToDisplay].src = sources[imageToDisplay];
}
}
element.resizeSensorInstance = new ResizeSensor(element, check);
check();
}
function findResponsiveImages() {
var query = getQuery();
var elements = query('[data-responsive-image],[responsive-image]');
for (var i = 0, j = elements.length; i < j; i++) {
attachResponsiveImage(elements[i]);
}
}
var regex = /,?[\s\t]*([^,\n]*?)((?:\[[\s\t]*?(?:min|max)-(?:width|height)[\s\t]*?[~$\^]?=[\s\t]*?"[^"]*?"[\s\t]*?])+)([^,\n\s\{]*)/mgi;
var attrRegex = /\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]/mgi;
/**
* @param {String} css
*/
function extractQuery(css) {
var match, smatch, attrs, attrMatch;
css = css.replace(/'/g, '"');
while (null !== (match = regex.exec(css))) {
smatch = match[1] + match[3];
attrs = match[2];
while (null !== (attrMatch = attrRegex.exec(attrs))) {
queueQuery(smatch, attrMatch[1], attrMatch[2], attrMatch[3]);
}
}
}
/**
* @param {CssRule[]|String} rules
*/
function readRules(rules) {
var selector = '';
if (!rules) {
return;
}
if ('string' === typeof rules) {
rules = rules.toLowerCase();
if (-1 !== rules.indexOf('min-width') || -1 !== rules.indexOf('max-width')) {
extractQuery(rules);
}
} else {
for (var i = 0, j = rules.length; i < j; i++) {
if (1 === rules[i].type) {
selector = rules[i].selectorText || rules[i].cssText;
if (-1 !== selector.indexOf('min-height') || -1 !== selector.indexOf('max-height')) {
extractQuery(selector);
} else if (-1 !== selector.indexOf('min-width') || -1 !== selector.indexOf('max-width')) {
extractQuery(selector);
}
} else if (4 === rules[i].type) {
readRules(rules[i].cssRules || rules[i].rules);
} else if (3 === rules[i].type) {
if(rules[i].styleSheet.hasOwnProperty("cssRules")) {
readRules(rules[i].styleSheet.cssRules);
}
}
}
}
}
var defaultCssInjected = false;
/**
* Searches all css rules and setups the event listener to all elements with element query rules..
*/
this.init = function () {
var animationStart = 'animationstart';
if (typeof document.documentElement.style['webkitAnimationName'] !== 'undefined') {
animationStart = 'webkitAnimationStart';
} else if (typeof document.documentElement.style['MozAnimationName'] !== 'undefined') {
animationStart = 'mozanimationstart';
} else if (typeof document.documentElement.style['OAnimationName'] !== 'undefined') {
animationStart = 'oanimationstart';
}
document.body.addEventListener(animationStart, function (e) {
var element = e.target;
var styles = element && window.getComputedStyle(element, null);
var animationName = styles && styles.getPropertyValue('animation-name');
var requiresSetup = animationName && (-1 !== animationName.indexOf('element-queries'));
if (requiresSetup) {
element.elementQueriesSensor = new ResizeSensor(element, function () {
if (element.elementQueriesSetupInformation) {
element.elementQueriesSetupInformation.call();
}
});
var sensorStyles = window.getComputedStyle(element.resizeSensor, null);
var id = sensorStyles.getPropertyValue('min-width');
id = parseInt(id.replace('px', ''));
setupElement(e.target, idToSelectorMapping[id]);
}
});
if (!defaultCssInjected) {
cssStyleElement = document.createElement('style');
cssStyleElement.type = 'text/css';
cssStyleElement.innerHTML = '[responsive-image] > img, [data-responsive-image] {overflow: hidden; padding: 0; } [responsive-image] > img, [data-responsive-image] > img {width: 100%;}';
//safari wants at least one rule in keyframes to start working
cssStyleElement.innerHTML += '\n@keyframes element-queries { 0% { visibility: inherit; } }';
document.getElementsByTagName('head')[0].appendChild(cssStyleElement);
defaultCssInjected = true;
}
for (var i = 0, j = document.styleSheets.length; i < j; i++) {
try {
if (document.styleSheets[i].href && 0 === document.styleSheets[i].href.indexOf('file://')) {
console.warn("CssElementQueries: unable to parse local css files, " + document.styleSheets[i].href);
}
readRules(document.styleSheets[i].cssRules || document.styleSheets[i].rules || document.styleSheets[i].cssText);
} catch (e) {
}
}
findResponsiveImages();
};
/**
* Go through all collected rules (readRules()) and attach the resize-listener.
* Not necessary to call it manually, since we detect automatically when new elements
* are available in the DOM. However, sometimes handy for dirty DOM modifications.
*
* @param {HTMLElement} container only elements of the container are considered (document.body if not set)
*/
this.findElementQueriesElements = function (container) {
findElementQueriesElements(container);
};
this.update = function () {
this.init();
};
};
ElementQueries.update = function () {
ElementQueries.instance.update();
};
/**
* Removes all sensor and elementquery information from the element.
*
* @param {HTMLElement} element
*/
ElementQueries.detach = function (element) {
if (element.elementQueriesSetupInformation) {
//element queries
element.elementQueriesSensor.detach();
delete element.elementQueriesSetupInformation;
delete element.elementQueriesSensor;
} else if (element.resizeSensorInstance) {
//responsive image
element.resizeSensorInstance.detach();
delete element.resizeSensorInstance;
}
};
ElementQueries.init = function () {
if (!ElementQueries.instance) {
ElementQueries.instance = new ElementQueries();
}
ElementQueries.instance.init();
};
var domLoaded = function (callback) {
/* Mozilla, Chrome, Opera */
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', callback, false);
}
/* Safari, iCab, Konqueror */
else if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
var DOMLoadTimer = setInterval(function () {
if (/loaded|complete/i.test(document.readyState)) {
callback();
clearInterval(DOMLoadTimer);
}
}, 10);
}
/* Other web browsers */
else window.onload = callback;
};
ElementQueries.findElementQueriesElements = function (container) {
ElementQueries.instance.findElementQueriesElements(container);
};
ElementQueries.listen = function () {
domLoaded(ElementQueries.init);
};
return ElementQueries;
}));
} (ElementQueries$1));
return ElementQueries$1.exports;
}
var cssElementQueries;
var hasRequiredCssElementQueries;
function requireCssElementQueries () {
if (hasRequiredCssElementQueries) return cssElementQueries;
hasRequiredCssElementQueries = 1;
cssElementQueries = {
ResizeSensor: requireResizeSensor(),
ElementQueries: requireElementQueries()
};
return cssElementQueries;
}
var cssElementQueriesExports = requireCssElementQueries();
const DEFAULT_DESCRIPTION_COLLAPSED_TEXT = 'Read more';
const DEFAULT_DESCRIPTION_OPENED_TEXT = 'Read less';
const infoLabelCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--text-color-title:var(--text-surface-neutral-tertiary);--text-color-description:var(--text-surface-neutral-secondary);--expanded-button-color:var(--text-surface-neutral-primary);--description-fade-height:30px;--description-shadow-background:var(--background-surface-neutral-default);--description-fade-shadow:linear-gradient(to bottom, color-mix(in srgb, var(--description-shadow-background) 10%, transparent) 50%, color-mix(in srgb, var(--description-shadow-background) 50%, transparent) 30%)}.info-label{display:flex;flex-direction:column}.info-label .title{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-color-title);white-space:nowrap;margin-bottom:var(--spacing-md)}.info-label .title.no-description{margin-bottom:0}.info-label .description-wrapper{position:relative;overflow-y:hidden;transition:height 0.3s ease-in-out;height:auto}.info-label .description-wrapper .text{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;color:var(--text-color-description)}.info-label .expand-description-button{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;display:flex;align-items:center;cursor:pointer;margin-top:var(--spacing-xl);color:var(--expanded-button-color)}.info-label .expand-description-button kv-icon{--icon-color:var(--expanded-button-color);margin-left:var(--spacing-xs);transition:transform 0.3s ease-in-out}.info-label .expand-description-button.expanded kv-icon{--icon-rotation:180deg}.description{display:flex;align-items:center}.description .copy-icon{opacity:0}.description:hover .copy-icon{opacity:1;transition:all 200ms ease-in-out}.copy-icon{margin-left:var(--spacing-md);cursor:pointer;user-select:none}.description-fade{position:absolute;bottom:-2px;left:0;right:0;height:var(--description-fade-height);background:var(--description-fade-shadow);pointer-events:none;transition:background 0.3s ease-in-out}.description-fade--expanded{background:transparent}";
const KvInfoLabel$1 = /*@__PURE__*/ proxyCustomElement(class KvInfoLabel extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.tooltipConfig = COPY_TOOLTIP;
this.resizeSensor = null;
/** Define if the show more button needed to be visible */
this.enableShowMoreButton = false;
/** Define if the label content is completely visible */
this.isExpanded = false;
/** Store the current div content height */
this.currentDescriptionHeight = null;
/** (optional) Info label description collapse text */
this.descriptionCollapsedText = DEFAULT_DESCRIPTION_COLLAPSED_TEXT;
/** (optional) Info label description opened text */
this.descriptionOpenedText = DEFAULT_DESCRIPTION_OPENED_TEXT;
/** (optional) Show text with a shadow */
this.showTextShadow = false;
this.onShowMoreToggle = () => {
this.isExpanded = !this.isExpanded;
if (this.isExpanded) {
const textElementHeight = this.descriptionContainer.clientHeight;
this.currentDescriptionHeight = textElementHeight;
return;
}
this.currentDescriptionHeight = this.descriptionHeight;
};
this.onClickCopyAction = async () => {
const tooltip = this.el.shadowRoot.querySelector('kv-tooltip');
const tooltipText = tooltip.shadowRoot.querySelector('#tooltip');
if (await copyTextToClipboard(this.copyValue)) {
tooltipText.innerText = this.tooltipConfig.resultLabel;
}
else {
console.error('Copy to clipboard failed');
}
};
}
get showMoreButtonLabel() {
return this.isExpanded ? this.descriptionOpenedText : this.descriptionCollapsedText;
}
loadDescriptionHeight() {
if (this.descriptionHeight !== undefined) {
const descriptionHeight = this.descriptionContainer.clientHeight;
this.enableShowMoreButton = descriptionHeight !== undefined && descriptionHeight > this.descriptionHeight;
}
else {
this.enableShowMoreButton = false;
}
this.isExpanded = this.enableShowMoreButton ? this.isExpanded : false;
this.currentDescriptionHeight = this.enableShowMoreButton && !this.isExpanded ? this.descriptionHeight : null;
}
componentDidRender() {
this.descriptionContainer = this.el.shadowRoot.querySelector('.description');
if (this.descriptionHeight >= 0) {
this.resizeSensor = new cssElementQueriesExports.ResizeSensor(this.descriptionContainer, () => {
this.loadDescriptionHeight();
});
}
}
disconnectedCallback() {
var _a, _b;
(_a = this.resizeSensor) === null || _a === void 0 ? void 0 : _a.reset();
(_b = this.resizeSensor) === null || _b === void 0 ? void 0 : _b.detach();
this.resizeSensor = null;
}
render() {
return (h(Host, { key: '8f547b932e3667d4d0c3fbf758f37323faeb785a' }, h("div", { key: '36545708584bb4f4f0308c83bbd93d5676e4d17a', class: "info-label" }, this.labelTitle && (h("div", { key: 'ab986205bc9e2bb260ef641a05093c8e9d474b48', part: "title", class: { 'title': true, 'no-description': isEmpty(this.description) } }, this.labelTitle)), h("div", { key: 'f45e6bd9aa8e33912f60426d4b2de8f76fe6cdcc', style: { height: `${this.currentDescriptionHeight}px` }, class: "description-wrapper" }, h("div", { key: 'de424e67dc7d38fb84ab5012b593cb1d56f9e0f8', class: "description" }, h("slot", { key: '0d50deef33e094a592c53aea71bbc7d17074ee7b' }, this.description && h("div", { key: 'a955b580c29f876bbaf3d56e0ee9f8fc01714c4d', class: "text" }, this.description), this.copyValue && (h("kv-tooltip", { key: '6d70a35873865788bd7c445132e377d1ed5f546b', text: this.tooltipConfig.label, position: this.tooltipConfig.position }, h("kv-icon", { key: 'c1c42886a57df72900d534654cac6bb711fe6829', class: "copy-icon", name: EIconName.Copy, onClick: this.onClickCopyAction }))))), this.showTextShadow && this.enableShowMoreButton && (h("div", { key: '2fb62bc35ce8f5007ee45dc860ad2500d0728cba', class: {
'description-fade': true,
'description-fade--expanded': this.isExpanded
} }))), this.enableShowMoreButton && (h("div", { key: '21b2ad78bce89e3be36339412673ad0d724d6bf4', class: { 'expand-description-button': true, 'expanded': this.isExpanded }, onClick: this.onShowMoreToggle }, this.showMoreButtonLabel, h("kv-icon", { key: '98fdbb75bd7e308abfe8627c459e84db9dcdc983', name: EIconName.Expand }))))));
}
get el() { return this; }
static get style() { return infoLabelCss; }
}, [257, "kv-info-label", {
"labelTitle": [513, "label-title"],
"description": [513],
"descriptionHeight": [514, "description-height"],
"descriptionCollapsedText": [513, "description-collapsed-text"],
"descriptionOpenedText": [513, "description-opened-text"],
"copyValue": [513, "copy-value"],
"showTextShadow": [516, "show-text-shadow"],
"enableShowMoreButton": [32],
"isExpanded": [32],
"currentDescriptionHeight": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-info-label", "kv-icon", "kv-portal", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-info-label":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvInfoLabel$1);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvInfoLabel = KvInfoLabel$1;
const defineCustomElement = defineCustomElement$1;
export { KvInfoLabel, defineCustomElement };