@kelvininc/ui-components
Version:
Kelvin UI Components
10 lines • 19 kB
JavaScript
import{r as t,h as e,H as i,g as n}from"./p-D-JVwta2.js";import{a as o}from"./p-CMuIy_Ah.js";import{E as r}from"./p-SVedE_O8.js";import{b as a}from"./p-DzZLIMy0.js";import{i as s}from"./p-BA_npyc9.js";import"./p-DjSNdVAB.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";var c,l={exports:{}};function d(){return c||(c=1,"undefined"!=typeof window&&window,l.exports=function(){if("undefined"==typeof window)return null;var t="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),e=t.requestAnimationFrame||t.mozRequestAnimationFrame||t.webkitRequestAnimationFrame||function(e){return t.setTimeout(e,20)},i=t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||function(e){t.clearTimeout(e)};function n(t,e){var i=Object.prototype.toString.call(t),n="[object Array]"===i||"[object NodeList]"===i||"[object HTMLCollection]"===i||"[object Object]"===i||"undefined"!=typeof jQuery&&t instanceof jQuery||"undefined"!=typeof Elements&&t instanceof Elements,o=0,r=t.length;if(n)for(;o<r;o++)e(t[o]);else e(t)}function o(t){if(!t.getBoundingClientRect)return{width:t.offsetWidth,height:t.offsetHeight};var e=t.getBoundingClientRect();return{width:Math.round(e.width),height:Math.round(e.height)}}function r(t,e){Object.keys(e).forEach((function(i){t.style[i]=e[i]}))}var a=function(t,s){var c=0;function l(){var t,e,i=[];this.add=function(t){i.push(t)},this.call=function(n){for(t=0,e=i.length;t<e;t++)i[t].call(this,n)},this.remove=function(n){var o=[];for(t=0,e=i.length;t<e;t++)i[t]!==n&&o.push(i[t]);i=o},this.length=function(){return i.length}}function d(t,i){if(t)if(t.resizedAttached)t.resizedAttached.add(i);else{t.resizedAttached=new l,t.resizedAttached.add(i),t.resizeSensor=document.createElement("div"),t.resizeSensor.dir="ltr",t.resizeSensor.className="resize-sensor";var n={pointerEvents:"none",position:"absolute",left:"0px",top:"0px",right:"0px",bottom:"0px",overflow:"hidden",zIndex:"-1",visibility:"hidden",maxWidth:"100%"},a={position:"absolute",left:"0px",top:"0px",transition:"0s"};r(t.resizeSensor,n);var s=document.createElement("div");s.className="resize-sensor-expand",r(s,n);var d=document.createElement("div");r(d,a),s.appendChild(d);var f=document.createElement("div");f.className="resize-sensor-shrink",r(f,n);var p=document.createElement("div");r(p,a),r(p,{width:"200%",height:"200%"}),f.appendChild(p),t.resizeSensor.appendChild(s),t.resizeSensor.appendChild(f),t.appendChild(t.resizeSensor);var u=window.getComputedStyle(t),h=u?u.getPropertyValue("position"):null;"absolute"!==h&&"relative"!==h&&"fixed"!==h&&"sticky"!==h&&(t.style.position="relative");var v=!1,m=0,b=o(t),x=0,g=0,y=!0;c=0;var w=function(){if(y){if(0===t.offsetWidth&&0===t.offsetHeight)return void(c||(c=e((function(){c=0,w()}))));y=!1}var i,n;n=t.offsetHeight,d.style.width=(i=t.offsetWidth)+10+"px",d.style.height=n+10+"px",s.scrollLeft=i+10,s.scrollTop=n+10,f.scrollLeft=i+10,f.scrollTop=n+10};t.resizeSensor.resetSensor=w;var k=function(){m=0,v&&(x=b.width,g=b.height,t.resizedAttached&&t.resizedAttached.call(b))},j=function(){b=o(t),(v=b.width!==x||b.height!==g)&&!m&&(m=e(k)),w()},M=function(t,e,i){t.attachEvent?t.attachEvent("on"+e,i):t.addEventListener(e,i)};M(s,"scroll",j),M(f,"scroll",j),c=e((function(){c=0,w()}))}}n(t,(function(t){d(t,s)})),this.detach=function(e){c||(i(c),c=0),a.detach(t,e)},this.reset=function(){t.resizeSensor.resetSensor()}};if(a.reset=function(t){n(t,(function(t){t.resizeSensor.resetSensor()}))},a.detach=function(t,e){n(t,(function(t){t&&(t.resizedAttached&&"function"==typeof e&&(t.resizedAttached.remove(e),t.resizedAttached.length())||t.resizeSensor&&(t.contains(t.resizeSensor)&&t.removeChild(t.resizeSensor),delete t.resizeSensor,delete t.resizedAttached))}))},"undefined"!=typeof MutationObserver){var s=new MutationObserver((function(t){for(var e in t)if(t.hasOwnProperty(e))for(var i=t[e].addedNodes,n=0;n<i.length;n++)i[n].resizeSensor&&a.reset(i[n])}));document.addEventListener("DOMContentLoaded",(function(){s.observe(document.body,{childList:!0,subtree:!0})}))}return a}()),l.exports}var f,p,u,h={exports:{}};var v,m,b=u?p:(u=1,p={ResizeSensor:d(),ElementQueries:(f||(f=1,"undefined"!=typeof window&&window,h.exports=(v=d(),m=function(){var t,e={},i=[];function n(t){t||(t=document.documentElement);var e=window.getComputedStyle(t,null).fontSize;return parseFloat(e)||16}
/**
*
* @copyright https://github.com/Mr0grog/element-query/blob/master/LICENSE
*
* @param {HTMLElement} element
* @param {*} value
* @returns {*}
*/
function o(t,e){var i=e.split(/\d/),o=i[i.length-1];switch(e=parseFloat(e),o){case"px":default:return e;case"em":return e*n(t);case"rem":return e*n();case"vw":return e*document.documentElement.clientWidth/100;case"vh":return e*document.documentElement.clientHeight/100;case"vmin":case"vmax":var r=document.documentElement.clientWidth/100,a=document.documentElement.clientHeight/100;return e*(0,Math["vmin"===o?"min":"max"])(r,a)}}function r(t,i){var n,r,a,s,c,l,d,f;this.element=t;var p=["min-width","min-height","max-width","max-height"];this.call=function(){for(n in a=function(t){if(!t.getBoundingClientRect)return{width:t.offsetWidth,height:t.offsetHeight};var e=t.getBoundingClientRect();return{width:Math.round(e.width),height:Math.round(e.height)}}(this.element),l={},e[i])e[i].hasOwnProperty(n)&&(s=o(this.element,(r=e[i][n]).value),c="width"===r.property?a.width:a.height,d="","min"===r.mode&&c>=s&&(d+=r.value),"max"===r.mode&&c<=s&&(d+=r.value),l[f=r.mode+"-"+r.property]||(l[f]=""),d&&-1===(" "+l[f]+" ").indexOf(" "+d+" ")&&(l[f]+=" "+d));for(var t in p)p.hasOwnProperty(t)&&(l[p[t]]?this.element.setAttribute(p[t],l[p[t]].substr(1)):this.element.removeAttribute(p[t]))}}function a(t,e){t.elementQueriesSetupInformation||(t.elementQueriesSetupInformation=new r(t,e)),t.elementQueriesSensor||(t.elementQueriesSensor=new v(t,(function(){t.elementQueriesSetupInformation.call()})))}function s(n,o,r,a){if(void 0===e[n]){e[n]=[];var s=i.length;t.innerHTML+="\n"+n+" {animation: 0.1s element-queries;}",t.innerHTML+="\n"+n+" > .resize-sensor {min-width: "+s+"px;}",i.push(n)}e[n].push({mode:o,property:r,value:a})}function c(t){var e;if(document.querySelectorAll&&(e=t?t.querySelectorAll.bind(t):document.querySelectorAll.bind(document)),e||"undefined"==typeof $$||(e=$$),e||"undefined"==typeof jQuery||(e=jQuery),!e)throw"No document.querySelectorAll, jQuery or Mootools's $$ found.";return e}function l(t){var e=[],i=[],n=[],o=0,r=-1,a=[];for(var s in t.children)if(t.children.hasOwnProperty(s)&&t.children[s].tagName&&"img"===t.children[s].tagName.toLowerCase()){e.push(t.children[s]);var c=t.children[s].getAttribute("min-width")||t.children[s].getAttribute("data-min-width"),l=t.children[s].getAttribute("data-src")||t.children[s].getAttribute("url");n.push(l),i.push({minWidth:c}),c?t.children[s].style.display="none":(o=e.length-1,t.children[s].style.display="block")}function d(){var s,c=!1;for(s in e)e.hasOwnProperty(s)&&i[s].minWidth&&t.offsetWidth>i[s].minWidth&&(c=s);if(c||(c=o),r!==c)if(a[c])e[r].style.display="none",e[c].style.display="block",r=c;else{var l=new Image;l.onload=function(){e[c].src=n[c],e[r].style.display="none",e[c].style.display="block",a[c]=!0,r=c},l.src=n[c]}else e[c].src=n[c]}r=o,t.resizeSensorInstance=new v(t,d),d()}var d=/,?[\s\t]*([^,\n]*?)((?:\[[\s\t]*?(?:min|max)-(?:width|height)[\s\t]*?[~$\^]?=[\s\t]*?"[^"]*?"[\s\t]*?])+)([^,\n\s\{]*)/gim,f=/\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]/gim;function p(t){var e,i,n,o;for(t=t.replace(/'/g,'"');null!==(e=d.exec(t));)for(i=e[1]+e[3],n=e[2];null!==(o=f.exec(n));)s(i,o[1],o[2],o[3])}function u(t){var e="";if(t)if("string"==typeof t)-1===(t=t.toLowerCase()).indexOf("min-width")&&-1===t.indexOf("max-width")||p(t);else for(var i=0,n=t.length;i<n;i++)1===t[i].type?-1!==(e=t[i].selectorText||t[i].cssText).indexOf("min-height")||-1!==e.indexOf("max-height")?p(e):-1===e.indexOf("min-width")&&-1===e.indexOf("max-width")||p(e):4===t[i].type?u(t[i].cssRules||t[i].rules):3===t[i].type&&t[i].styleSheet.hasOwnProperty("cssRules")&&u(t[i].styleSheet.cssRules)}var h=!1;this.init=function(){var e="animationstart";void 0!==document.documentElement.style.webkitAnimationName?e="webkitAnimationStart":void 0!==document.documentElement.style.MozAnimationName?e="mozanimationstart":void 0!==document.documentElement.style.OAnimationName&&(e="oanimationstart"),document.body.addEventListener(e,(function(t){var e=t.target,n=e&&window.getComputedStyle(e,null),o=n&&n.getPropertyValue("animation-name");if(o&&-1!==o.indexOf("element-queries")){e.elementQueriesSensor=new v(e,(function(){e.elementQueriesSetupInformation&&e.elementQueriesSetupInformation.call()}));var r=window.getComputedStyle(e.resizeSensor,null).getPropertyValue("min-width");r=parseInt(r.replace("px","")),a(t.target,i[r])}})),h||((t=document.createElement("style")).type="text/css",t.innerHTML="[responsive-image] > img, [data-responsive-image] {overflow: hidden; padding: 0; } [responsive-image] > img, [data-responsive-image] > img {width: 100%;}",t.innerHTML+="\n@keyframes element-queries { 0% { visibility: inherit; } }",document.getElementsByTagName("head")[0].appendChild(t),h=!0);for(var n=0,o=document.styleSheets.length;n<o;n++)try{document.styleSheets[n].href&&0===document.styleSheets[n].href.indexOf("file://")&&console.warn("CssElementQueries: unable to parse local css files, "+document.styleSheets[n].href),u(document.styleSheets[n].cssRules||document.styleSheets[n].rules||document.styleSheets[n].cssText)}catch(t){}!function(){for(var t=c()("[data-responsive-image],[responsive-image]"),e=0,i=t.length;e<i;e++)l(t[e])}()},this.findElementQueriesElements=function(t){!function(t){var i=c(t);for(var n in e)if(e.hasOwnProperty(n))for(var o=i(n,t),r=0,s=o.length;r<s;r++)a(o[r],n)}(t)},this.update=function(){this.init()}},m.update=function(){m.instance.update()},m.detach=function(t){t.elementQueriesSetupInformation?(t.elementQueriesSensor.detach(),delete t.elementQueriesSetupInformation,delete t.elementQueriesSensor):t.resizeSensorInstance&&(t.resizeSensorInstance.detach(),delete t.resizeSensorInstance)},m.init=function(){m.instance||(m.instance=new m),m.instance.init()},m.findElementQueriesElements=function(t){m.instance.findElementQueriesElements(t)},m.listen=function(){!function(t){if(document.addEventListener)document.addEventListener("DOMContentLoaded",t,!1);else if(/KHTML|WebKit|iCab/i.test(navigator.userAgent))var e=setInterval((function(){/loaded|complete/i.test(document.readyState)&&(t(),clearInterval(e))}),10);else window.onload=t}(m.init)},m)),h.exports)});const x={label:"Copy",resultLabel:"Copied!",position:a.Top},g=class{constructor(e){t(this,e),this.tooltipConfig=x,this.resizeSensor=null,this.enableShowMoreButton=!1,this.isExpanded=!1,this.currentDescriptionHeight=null,this.descriptionCollapsedText="Read more",this.descriptionOpenedText="Read less",this.showTextShadow=!1,this.onShowMoreToggle=()=>{this.isExpanded=!this.isExpanded,this.currentDescriptionHeight=this.isExpanded?this.descriptionContainer.clientHeight:this.descriptionHeight},this.onClickCopyAction=async()=>{const t=this.el.shadowRoot.querySelector("kv-tooltip").shadowRoot.querySelector("#tooltip");await o(this.copyValue)?t.innerText=this.tooltipConfig.resultLabel:console.error("Copy to clipboard failed")}}get showMoreButtonLabel(){return this.isExpanded?this.descriptionOpenedText:this.descriptionCollapsedText}loadDescriptionHeight(){if(void 0!==this.descriptionHeight){const t=this.descriptionContainer.clientHeight;this.enableShowMoreButton=void 0!==t&&t>this.descriptionHeight}else this.enableShowMoreButton=!1;this.isExpanded=!!this.enableShowMoreButton&&this.isExpanded,this.currentDescriptionHeight=this.enableShowMoreButton&&!this.isExpanded?this.descriptionHeight:null}componentDidRender(){this.descriptionContainer=this.el.shadowRoot.querySelector(".description"),this.descriptionHeight>=0&&(this.resizeSensor=new b.ResizeSensor(this.descriptionContainer,(()=>{this.loadDescriptionHeight()})))}disconnectedCallback(){var t,e;null===(t=this.resizeSensor)||void 0===t||t.reset(),null===(e=this.resizeSensor)||void 0===e||e.detach(),this.resizeSensor=null}render(){return e(i,{key:"9fb0bf30732d3bfad83cee777caf20470bc0c649"},e("div",{key:"a90032f25664562fdb7d9abe5d143416cfa06bb9",class:"info-label"},this.labelTitle&&e("div",{key:"4043ebca36656a193da357896ff3878b22798050",part:"title",class:{title:!0,"no-description":s(this.description)}},this.labelTitle),e("div",{key:"5b8d76bab309e9bdfae7ddd35c93cfef35589a5f",style:{height:`${this.currentDescriptionHeight}px`},class:"description-wrapper"},e("div",{key:"42f32ab40a8cba1bc1f059a8988532061af32301",class:"description"},e("slot",{key:"6546ece4b6c202d84e66914e60798dc851f3fb21"},this.description&&e("div",{key:"edf33cf8312f569855a608ed1ee04173875a40f1",class:"text"},this.description),this.copyValue&&e("kv-tooltip",{key:"131bb0f854af09480252aa4c9b1d2607e29ed8ea",text:this.tooltipConfig.label,position:this.tooltipConfig.position},e("kv-icon",{key:"0bc0460babc2e112352048cb972ab08736a45eb6",class:"copy-icon",name:r.Copy,onClick:this.onClickCopyAction})))),this.showTextShadow&&this.enableShowMoreButton&&e("div",{key:"4727f75990c54b51e1ff8c3e2f3fa489b5d01601",class:{"description-fade":!0,"description-fade--expanded":this.isExpanded}})),this.enableShowMoreButton&&e("div",{key:"faef3b347e8bd31561872902c7c099cec9da1f67",class:{"expand-description-button":!0,expanded:this.isExpanded},onClick:this.onShowMoreToggle},this.showMoreButtonLabel,e("kv-icon",{key:"0bbdb0336281b93edd207492a14cc3a7ba63f041",name:r.Expand}))))}get el(){return n(this)}};g.style={light:'@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--text-color-title:var(--kv-neutral-4, #bebebe);--text-color-description:var(--kv-neutral-2, #e5e5e5);--expanded-button-color:var(--kv-neutral-0, #fff);--description-fade-height:30px;--description-fade-shadow:linear-gradient(to bottom, rgba(32, 32, 32, 0) 0%, rgba(32, 32, 32, 1) 100%)}.info-label{display:flex;flex-direction:column}.info-label .title{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-color-title);white-space:nowrap;margin-bottom:var(--kv-spacing-2x, 8px)}.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:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--text-color-description)}.info-label .expand-description-button{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;cursor:pointer;margin-top:var(--kv-spacing-3x, 12px);color:var(--expanded-button-color)}.info-label .expand-description-button kv-icon{--icon-color:var(--expanded-button-color);margin-left:var(--kv-spacing, 4px);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(--kv-spacing-2x, 8px);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}:host{--text-color-title:var(--kv-neutral-5, #707070);--text-color-description:var(--kv-neutral-9, #121212);--expanded-button-color:var(--kv-primary, #005cc7)}',night:'@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--text-color-title:var(--kv-neutral-4, #bebebe);--text-color-description:var(--kv-neutral-2, #e5e5e5);--expanded-button-color:var(--kv-neutral-0, #fff);--description-fade-height:30px;--description-fade-shadow:linear-gradient(to bottom, rgba(32, 32, 32, 0) 0%, rgba(32, 32, 32, 1) 100%)}.info-label{display:flex;flex-direction:column}.info-label .title{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-color-title);white-space:nowrap;margin-bottom:var(--kv-spacing-2x, 8px)}.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:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--text-color-description)}.info-label .expand-description-button{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;cursor:pointer;margin-top:var(--kv-spacing-3x, 12px);color:var(--expanded-button-color)}.info-label .expand-description-button kv-icon{--icon-color:var(--expanded-button-color);margin-left:var(--kv-spacing, 4px);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(--kv-spacing-2x, 8px);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}:host{--text-color-title:var(--kv-neutral-4, #bebebe);--text-color-description:var(--kv-neutral-2, #e5e5e5);--expanded-button-color:var(--kv-neutral-0, #fff)}'};export{g as kv_info_label}