@kelvininc/ui-components
Version:
Kelvin UI Components
10 lines • 16 kB
JavaScript
import{r as t,h as e,H as i,g as n}from"./p-WTwLUJcM.js";import{a as o}from"./p-DWwSys2u.js";import{o as r}from"./p-COrzvkrr.js";import{C as a}from"./p-CWC8gVbA.js";import{i as s}from"./p-GpUjqmUL.js";import"./p-DjSNdVAB.js";import"./p-Dkd2PDJ-.js";var d,c={exports:{}};function f(){return d||(d=1,"undefined"!=typeof window&&window,c.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 d=0;function c(){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 f(t,i){if(t)if(t.resizedAttached)t.resizedAttached.add(i);else{t.resizedAttached=new c,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 f=document.createElement("div");r(f,a),s.appendChild(f);var l=document.createElement("div");l.className="resize-sensor-shrink",r(l,n);var u=document.createElement("div");r(u,a),r(u,{width:"200%",height:"200%"}),l.appendChild(u),t.resizeSensor.appendChild(s),t.resizeSensor.appendChild(l),t.appendChild(t.resizeSensor);var h=window.getComputedStyle(t),p=h?h.getPropertyValue("position"):null;"absolute"!==p&&"relative"!==p&&"fixed"!==p&&"sticky"!==p&&(t.style.position="relative");var m=!1,v=0,b=o(t),w=0,g=0,x=!0;d=0;var y=function(){if(x){if(0===t.offsetWidth&&0===t.offsetHeight)return void(d||(d=e((function(){d=0,y()}))));x=!1}var i,n;n=t.offsetHeight,f.style.width=(i=t.offsetWidth)+10+"px",f.style.height=n+10+"px",s.scrollLeft=i+10,s.scrollTop=n+10,l.scrollLeft=i+10,l.scrollTop=n+10};t.resizeSensor.resetSensor=y;var k=function(){v=0,m&&(w=b.width,g=b.height,t.resizedAttached&&t.resizedAttached.call(b))},j=function(){b=o(t),(m=b.width!==w||b.height!==g)&&!v&&(v=e(k)),y()},M=function(t,e,i){t.attachEvent?t.attachEvent("on"+e,i):t.addEventListener(e,i)};M(s,"scroll",j),M(l,"scroll",j),d=e((function(){d=0,y()}))}}n(t,(function(t){f(t,s)})),this.detach=function(e){d||(i(d),d=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}()),c.exports}var l,u,h,p={exports:{}};var m,v,b=h?u:(h=1,u={ResizeSensor:f(),ElementQueries:(l||(l=1,"undefined"!=typeof window&&window,p.exports=(m=f(),v=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,d,c,f,l;this.element=t;var u=["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),c={},e[i])e[i].hasOwnProperty(n)&&(s=o(this.element,(r=e[i][n]).value),d="width"===r.property?a.width:a.height,f="","min"===r.mode&&d>=s&&(f+=r.value),"max"===r.mode&&d<=s&&(f+=r.value),c[l=r.mode+"-"+r.property]||(c[l]=""),f&&-1===(" "+c[l]+" ").indexOf(" "+f+" ")&&(c[l]+=" "+f));for(var t in u)u.hasOwnProperty(t)&&(c[u[t]]?this.element.setAttribute(u[t],c[u[t]].substr(1)):this.element.removeAttribute(u[t]))}}function a(t,e){t.elementQueriesSetupInformation||(t.elementQueriesSetupInformation=new r(t,e)),t.elementQueriesSensor||(t.elementQueriesSensor=new m(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 d(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 c(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 d=t.children[s].getAttribute("min-width")||t.children[s].getAttribute("data-min-width"),c=t.children[s].getAttribute("data-src")||t.children[s].getAttribute("url");n.push(c),i.push({minWidth:d}),d?t.children[s].style.display="none":(o=e.length-1,t.children[s].style.display="block")}function f(){var s,d=!1;for(s in e)e.hasOwnProperty(s)&&i[s].minWidth&&t.offsetWidth>i[s].minWidth&&(d=s);if(d||(d=o),r!==d)if(a[d])e[r].style.display="none",e[d].style.display="block",r=d;else{var c=new Image;c.onload=function(){e[d].src=n[d],e[r].style.display="none",e[d].style.display="block",a[d]=!0,r=d},c.src=n[d]}else e[d].src=n[d]}r=o,t.resizeSensorInstance=new m(t,f),f()}var f=/,?[\s\t]*([^,\n]*?)((?:\[[\s\t]*?(?:min|max)-(?:width|height)[\s\t]*?[~$\^]?=[\s\t]*?"[^"]*?"[\s\t]*?])+)([^,\n\s\{]*)/gim,l=/\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]/gim;function u(t){var e,i,n,o;for(t=t.replace(/'/g,'"');null!==(e=f.exec(t));)for(i=e[1]+e[3],n=e[2];null!==(o=l.exec(n));)s(i,o[1],o[2],o[3])}function h(t){var e="";if(t)if("string"==typeof t)-1===(t=t.toLowerCase()).indexOf("min-width")&&-1===t.indexOf("max-width")||u(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")?u(e):-1===e.indexOf("min-width")&&-1===e.indexOf("max-width")||u(e):4===t[i].type?h(t[i].cssRules||t[i].rules):3===t[i].type&&t[i].styleSheet.hasOwnProperty("cssRules")&&h(t[i].styleSheet.cssRules)}var p=!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 m(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])}})),p||((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),p=!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),h(document.styleSheets[n].cssRules||document.styleSheets[n].rules||document.styleSheets[n].cssText)}catch(t){}!function(){for(var t=d()("[data-responsive-image],[responsive-image]"),e=0,i=t.length;e<i;e++)c(t[e])}()},this.findElementQueriesElements=function(t){!function(t){var i=d(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()}},v.update=function(){v.instance.update()},v.detach=function(t){t.elementQueriesSetupInformation?(t.elementQueriesSensor.detach(),delete t.elementQueriesSetupInformation,delete t.elementQueriesSensor):t.resizeSensorInstance&&(t.resizeSensorInstance.detach(),delete t.resizeSensorInstance)},v.init=function(){v.instance||(v.instance=new v),v.instance.init()},v.findElementQueriesElements=function(t){v.instance.findElementQueriesElements(t)},v.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}(v.init)},v)),p.exports)});const w=class{constructor(e){t(this,e),this.tooltipConfig=a,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:"8f547b932e3667d4d0c3fbf758f37323faeb785a"},e("div",{key:"36545708584bb4f4f0308c83bbd93d5676e4d17a",class:"info-label"},this.labelTitle&&e("div",{key:"ab986205bc9e2bb260ef641a05093c8e9d474b48",part:"title",class:{title:!0,"no-description":s(this.description)}},this.labelTitle),e("div",{key:"f45e6bd9aa8e33912f60426d4b2de8f76fe6cdcc",style:{height:`${this.currentDescriptionHeight}px`},class:"description-wrapper"},e("div",{key:"de424e67dc7d38fb84ab5012b593cb1d56f9e0f8",class:"description"},e("slot",{key:"0d50deef33e094a592c53aea71bbc7d17074ee7b"},this.description&&e("div",{key:"a955b580c29f876bbaf3d56e0ee9f8fc01714c4d",class:"text"},this.description),this.copyValue&&e("kv-tooltip",{key:"6d70a35873865788bd7c445132e377d1ed5f546b",text:this.tooltipConfig.label,position:this.tooltipConfig.position},e("kv-icon",{key:"c1c42886a57df72900d534654cac6bb711fe6829",class:"copy-icon",name:r.Copy,onClick:this.onClickCopyAction})))),this.showTextShadow&&this.enableShowMoreButton&&e("div",{key:"2fb62bc35ce8f5007ee45dc860ad2500d0728cba",class:{"description-fade":!0,"description-fade--expanded":this.isExpanded}})),this.enableShowMoreButton&&e("div",{key:"21b2ad78bce89e3be36339412673ad0d724d6bf4",class:{"expand-description-button":!0,expanded:this.isExpanded},onClick:this.onShowMoreToggle},this.showMoreButtonLabel,e("kv-icon",{key:"98fdbb75bd7e308abfe8627c459e84db9dcdc983",name:r.Expand}))))}get el(){return n(this)}};w.style='@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}';export{w as kv_info_label}