@freshworks/crayons
Version:
Crayons Web Components library
1 lines • 15.6 kB
JavaScript
var __spreadArray=this&&this.__spreadArray||function(e,t){for(var n=0,o=t.length,r=e.length;n<o;n++,r++)e[r]=t[n];return e};System.register(["./p-6d102d56.system.js","./p-a5f2e72b.system.js","./p-129461a2.system.js"],(function(e){"use strict";var t,n,o,r,i,a,s,l;return{setters:[function(e){t=e.r;n=e.h;o=e.e;r=e.i;i=e.c},function(e){a=e.T},function(e){s=e.d;l=e.c}],execute:function(){var c=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}.anchor{color:#2c5cc5;text-decoration:none;font-weight:600;display:inline-block;width:250px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}';var d=e("fw_custom_cell_anchor",function(){function e(e){t(this,e);this.href="";this.text=""}e.prototype.render=function(){return n("a",{class:"anchor",href:this.href},this.text)};return e}());d.style=c;var h=e("fw_custom_cell_icon",function(){function e(e){t(this,e);this.name="";this.size=18;this.color="#647A8E";this.library="crayons";this.src=null}e.prototype.render=function(){return n("fw-icon",{name:this.name,size:this.size,color:this.color,library:this.library,src:this.src})};return e}());var p=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}.paragraph-container{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}.paragraph-container .paragraph-text{overflow:hidden;margin:0px}.paragraph-container .paragraph-text.expanded{display:inline}.paragraph-container .paragraph-toggle{display:inline;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;color:#2c5cc5;white-space:nowrap;font-weight:600}.paragraph-container .paragraph-toggle:hover,.paragraph-container .paragraph-toggle:focus{cursor:pointer}';var f=e("fw_custom_cell_paragraph",function(){function e(e){t(this,e);this.text="";this.maxHeight="60px";this.showToggle=false;this.hide=true;this.toggleParaButton=null}e.prototype.textChangeHandler=function(){this.showToggleOnTextChange()};e.prototype.componentDidLoad=function(){this.showToggleOnTextChange()};e.prototype.onFocus=function(){if(this.toggleParaButton){this.toggleParaButton.focus()}else{this.el.parentElement.setAttribute("tabindex","0");this.el.parentElement.focus()}};e.prototype.showToggleOnTextChange=function(){var e=this.el.getBoundingClientRect().height;if(e>=parseInt(this.maxHeight)){this.showToggle=true}else{this.showToggle=false}};e.prototype.toggleParagraph=function(){this.hide=!this.hide;if(this.hide){this.maxHeight="60px"}else{this.maxHeight="none"}};e.prototype.render=function(){var e=this;var t=n("p",{class:{"paragraph-text":true,open:this.showToggle,expanded:!this.hide},style:{maxHeight:this.maxHeight}},this.text," ");return n(o,{onFocus:function(){return e.onFocus()}},n("div",{class:"paragraph-container"},this.showToggle&&this.hide?n("fw-tooltip",{content:this.text,hoist:true,placement:"bottom-start",fallbackPlacements:["top-start"]},t):t,this.showToggle&&n("div",{class:"paragraph-toggle",role:"button",tabIndex:0,onKeyUp:function(t){return(t.code==="Space"||t.code==="Enter")&&e.toggleParagraph()},onClick:function(){return e.toggleParagraph()},ref:function(t){return e.toggleParaButton=t}},this.hide?n("span",null,a.t("datatable.showMore")):n("span",null,a.t("datatable.showLess")))))};Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{text:["textChangeHandler"]}},enumerable:false,configurable:true});return e}());f.style=p;var u=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}.name-box-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.name-box-container .name-box{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;margin:0 12px}.name-box-container .name-box .name-box-text{font-weight:600;font-size:14px;line-height:20px;width:250px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.name-box-container .name-box .name-box-email{font-size:12px;color:#475867;line-height:18px;width:250px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}';var g=e("fw_custom_cell_user",function(){function e(e){t(this,e);this.image=null;this.name="";this.email="";this.alt=""}e.prototype.render=function(){return n("div",{class:"name-box-container"},n("div",{class:"avatar"},n("fw-avatar",{size:"small",image:this.image,name:this.name,alt:this.alt})),n("div",{class:"name-box"},n("div",{class:"name-box-text"},this.name),n("div",{class:"name-box-email"},this.email)))};return e}());g.style=u;var m;var b=[];var v={sortable:false,acceptFrom:"",placeholderClass:"",copy:true,addOnDrop:true};var y=function(){function e(e,t){var n=this;this.childElements=[];this.acceptFrom=[];this.dropped=false;this.debouncedSetElement=s((function(e,t,o){if(n.cancelDebouncedDrag){return}var r=n.getDragAfterElement(e,o);var i;if(t.parentElement.id===n.dragContainer.id){i=t}else{n.placeholder||(n.placeholder=n.createPlaceholder(t));i=n.placeholder}n.addElement(i,r)}),this,5);this.onDragStart=function(e){m=e.target;n.dropped=false;n.cancelDebouncedDrag=false;e.dataTransfer.setData("text/plain",m.id);n.childElements=Array.from(n.dragContainer.children);var t=n.childElements.indexOf(m);n.nextSibling=n.childElements[t+1];n.childElements.splice(t,1);e.stopPropagation()};this.onDragEnter=function(e){if(!n.canAcceptDragElement()){return}var t=e.composedPath().find((function(e){return e.id===n.dragContainer.id}));if(t&&t!==n.previousContainer){n.childElements=Array.from(n.dragContainer.children);n.cancelDebouncedDrag=false}n.previousContainer=t};this.onDragLeave=function(e){if(!n.canAcceptDragElement()){return}var t=e.fromElement||e.relatedTarget;if(!e.currentTarget.contains(t)){var o=n.getMatchingHost(t,n.dragContainer.children[0].tagName);if(!e.currentTarget.contains(o)){n.previousContainer=undefined}}};this.onDragOver=function(e){e.preventDefault();if(!n.canAcceptDragElement()){return}n.debouncedSetElement(n.childElements,m,e.clientY)};this.onDragEnd=function(e){if((!n.dropped||b.length>0)&&m){n.addElement(m,n.nextSibling);n.removePlaceholder()}n.resetData(e)};this.onDrop=function(e){if(!n.canAcceptDragElement()){return}n.dropped=true;var t=m.parentElement.id;var o=n.placeholder||m;var r=__spreadArray([],n.dragContainer.children).indexOf(o);if(n.placeholder){if(n.options.addOnDrop){var i=n.options.copy?l(m,true,true):m;n.placeholder.replaceWith(i)}else{n.removePlaceholder()}}n.dragContainer.dispatchEvent(new CustomEvent("fwDropBase",{cancelable:true,bubbles:false,detail:{droppedElement:m,droppedIndex:r,dragFromId:t,dropToId:n.dragContainer.id}}));n.resetData(e)};this.dragContainer=e;this.options=Object.assign({},v,t);this.acceptFrom=this.options.acceptFrom?this.options.acceptFrom.split(","):[];this.options.sortable&&this.acceptFrom.push(this.dragContainer.id);this.addListeners()}e.prototype.addListeners=function(){this.dragContainer.addEventListener("dragstart",this.onDragStart);this.dragContainer.addEventListener("dragend",this.onDragEnd);this.dragContainer.addEventListener("dragenter",this.onDragEnter);this.dragContainer.addEventListener("dragleave",this.onDragLeave);this.dragContainer.addEventListener("dragover",this.onDragOver);this.dragContainer.addEventListener("drop",this.onDrop)};e.prototype.removeListeners=function(){this.dragContainer.removeEventListener("dragstart",this.onDragStart);this.dragContainer.removeEventListener("dragend",this.onDragEnd);this.dragContainer.removeEventListener("dragenter",this.onDragEnter);this.dragContainer.removeEventListener("dragleave",this.onDragLeave);this.dragContainer.removeEventListener("dragover",this.onDragOver);this.dragContainer.removeEventListener("drop",this.onDrop)};e.prototype.getDragAfterElement=function(e,t){return e.reduce((function(e,n){var o=n.getBoundingClientRect();var r=t-o.top-o.height/2;if(r<0&&r>e.offset){return{offset:r,element:n}}else{return e}}),{offset:Number.NEGATIVE_INFINITY}).element};e.prototype.createPlaceholder=function(e){var t;var n=this.options.placeholderClass;var o=this.dragContainer.tagName;var r;if(["UL","OL"].includes(o)){r=document.createElement("li")}else if(["TABLE","TBODY"].includes(o)){r=document.createElement("tr");r.innerHTML='<td colspan="100"></td>'}else{r=document.createElement("div")}if(typeof n==="string"&&n){(t=r.classList).add.apply(t,n.split(" "))}else{r.style.height=this.getElementHeight(e)+"px";r.style.width=this.getElementWidth(e)+"px"}b.push(r);return r};e.prototype.removePlaceholder=function(){b.forEach((function(e){e.remove()}))};e.prototype.addElement=function(e,t){if(t){if(this.canInsertBefore(t)&&!(e===null||e===void 0?void 0:e.isSameNode(t))){this.dragContainer.insertBefore(e,t)}return}this.canAppendTo(this.dragContainer)&&this.dragContainer.appendChild(e)};e.prototype.canAcceptDragElement=function(){if(!m){return false}var e=m.parentElement.id;return this.acceptFrom.includes(e)};e.prototype.canInsertBefore=function(e){return e&&e.pinned!=="top"};e.prototype.canAppendTo=function(e){return e.lastElementChild.pinned!=="bottom"};e.prototype.getHost=function(e){return e.getRootNode().host};e.prototype.getMatchingHost=function(e,t){var n=e;while(n){n=this.getHost(n);if(n&&n.tagName===t){return n}}return undefined};e.prototype.resetData=function(e){e.dataTransfer.clearData();this.previousContainer=undefined;m=undefined;this.placeholder=undefined;this.cancelDebouncedDrag=true};e.prototype.getElementHeight=function(e){if(!(e instanceof HTMLElement)){throw new Error("You must provide a valid dom element")}var t=window.getComputedStyle(e);if(t.getPropertyValue("box-sizing")==="border-box"){return parseInt(t.getPropertyValue("height"),10)}return["height","padding-top","padding-bottom"].map((function(e){var n=parseInt(t.getPropertyValue(e),10);return isNaN(n)?0:n})).reduce((function(e,t){return e+t}))};e.prototype.getElementWidth=function(e){if(!(e instanceof HTMLElement)){throw new Error("You must provide a valid dom element")}var t=window.getComputedStyle(e);return["width","padding-left","padding-right"].map((function(e){var n=parseInt(t.getPropertyValue(e),10);return isNaN(n)?0:n})).reduce((function(e,t){return e+t}))};e.prototype.destroy=function(){this.removeListeners()};return e}();var x=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}.drag-container{display:block}';var w=e("fw_drag_container",function(){function e(e){t(this,e);this.fwDrop=i(this,"fwDrop",7);this.acceptFrom="";this.addOnDrop=true;this.copy=true;this.placeholderClass="";this.sortable=true}e.prototype.componentWillLoad=function(){this.containerInstance=new y(this.host,{acceptFrom:this.acceptFrom,addOnDrop:this.addOnDrop,copy:this.copy,placeholderClass:this.placeholderClass,sortable:this.sortable});this.host.addEventListener("fwDropBase",this.emitFwDrop.bind(this))};e.prototype.emitFwDrop=function(e){this.fwDrop.emit(e["detail"])};e.prototype.disconnectedCallback=function(){var e;(e=this.containerInstance)===null||e===void 0?void 0:e.destroy();this.host.removeEventListener("fwDropBase",this.emitFwDrop)};e.prototype.render=function(){return n(o,{class:"drag-container"})};Object.defineProperty(e.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});return e}());w.style=x;var k=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}.skeleton{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;overflow:hidden;position:relative;background:var(--fw-skeleton-background, #cfd7df);border-radius:var(--fw-skeleton-border-radius, 999px);width:var(--fw-skeleton-width, 100%);height:var(--fw-skeleton-height, 16px);display:block;margin-bottom:var(--fw-skeleton-margin-bottom, 8px);will-change:auto}.skeleton:after,.skeleton:before{-webkit-box-sizing:border-box;box-sizing:border-box}.skeleton.circle{width:var(--fw-skeleton-width, 32px);height:var(--fw-skeleton-height, 32px);margin-bottom:var(--fw-skeleton-margin-bottom, 8px);border-radius:var(--fw-skeleton-border-radius, 50%)}.skeleton.rect{border-radius:var(--fw-skeleton-border-radius, 0px)}.skeleton.only{margin-bottom:var(--fw-skeleton-margin-bottom, 0px)}@media (prefers-reduced-motion: reduce){.skeleton.pulse,.skeleton.sheen{-webkit-animation:none;animation:none}}.skeleton.pulse{-webkit-animation:pulse 2s ease-in-out 0.5s infinite;animation:pulse 2s ease-in-out 0.5s infinite}.skeleton.sheen{background:-webkit-gradient(linear, right top, left top, from(var(--fw-skeleton-sheen-color, #b1bdc8)), color-stop(var(--fw-skeleton-background, #cfd7df)), color-stop(var(--fw-skeleton-background, #cfd7df)), to(var(--fw-skeleton-sheen-color, #b1bdc8)));background:linear-gradient(270deg, var(--fw-skeleton-sheen-color, #b1bdc8), var(--fw-skeleton-background, #cfd7df), var(--fw-skeleton-background, #cfd7df), var(--fw-skeleton-sheen-color, #b1bdc8));-webkit-animation:sheen 8s ease-in-out infinite;animation:sheen 8s ease-in-out infinite}@-webkit-keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}@-webkit-keyframes sheen{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes sheen{0%{background-position:200% 0}to{background-position:-200% 0}}';var E=e("fw_skeleton",function(){function e(e){t(this,e);this.effect="pulse";this.variant="text";this.width=null;this.height=null;this.marginBottom=null;this.count=1;this.customStyles={};this.items=[]}e.prototype.componentWillLoad=function(){this.init()};e.prototype.componentWillUpdate=function(){this.init()};e.prototype.init=function(){this.items.length=this.count;this.items.fill(1);if(this.customStyles&&typeof this.customStyles==="string"){try{this.customStyles=JSON.parse(this.customStyles)}catch(e){console.warn("can't parse styles",this.customStyles)}}};Object.defineProperty(e.prototype,"style",{get:function(){var e={width:null,height:null,marginBottom:null};if(this.width){e.width=this.width}if(this.height){e.height=this.height}if(this.marginBottom){e.marginBottom=this.marginBottom}var t=typeof this.customStyles==="object"?this.customStyles:{};return Object.assign(Object.assign({},e),t)},enumerable:false,configurable:true});e.prototype.render=function(){var e=this;return n(o,null,this.items.map((function(t,o){return n("div",{part:"base",key:o,class:{circle:e.variant==="circle",rect:e.variant==="rect",skeleton:true,pulse:e.effect==="pulse",sheen:e.effect==="sheen",only:e.count===1},"aria-busy":"true","aria-live":"polite",style:e.style})})))};return e}());E.style=k}}}));