@freshworks/crayons/dist/crayons/p-056d0769.entry.js

Crayons Web Components library

import{r as t,h as e,e as s,i,c as o}from"./p-c5706edf.js";import{T as n}from"./p-965d32ba.js";import{d as r,c as a}from"./p-c9855591.js";let h=class{constructor(e){t(this,e),this.href="",this.text=""}render(){return e("a",{class:"anchor",href:this.href},this.text)}};h.style=':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}';let l=class{constructor(e){t(this,e),this.name="",this.size=18,this.color="#647A8E",this.library="crayons",this.src=null}render(){return e("fw-icon",{name:this.name,size:this.size,color:this.color,library:this.library,src:this.src})}},c=class{constructor(e){t(this,e),this.text="",this.maxHeight="60px",this.showToggle=!1,this.hide=!0,this.toggleParaButton=null}textChangeHandler(){this.showToggleOnTextChange()}componentDidLoad(){this.showToggleOnTextChange()}onFocus(){this.toggleParaButton?this.toggleParaButton.focus():(this.el.parentElement.setAttribute("tabindex","0"),this.el.parentElement.focus())}showToggleOnTextChange(){const t=this.el.getBoundingClientRect().height;this.showToggle=t>=parseInt(this.maxHeight)}toggleParagraph(){this.hide=!this.hide,this.maxHeight=this.hide?"60px":"none"}render(){const t=e("p",{class:{"paragraph-text":!0,open:this.showToggle,expanded:!this.hide},style:{maxHeight:this.maxHeight}},this.text," ");return e(s,{onFocus:()=>this.onFocus()},e("div",{class:"paragraph-container"},this.showToggle&&this.hide?e("fw-tooltip",{content:this.text,hoist:!0,placement:"bottom-start",fallbackPlacements:["top-start"]},t):t,this.showToggle&&e("div",{class:"paragraph-toggle",role:"button",tabIndex:0,onKeyUp:t=>("Space"===t.code||"Enter"===t.code)&&this.toggleParagraph(),onClick:()=>this.toggleParagraph(),ref:t=>this.toggleParaButton=t},e("span",null,n.t(this.hide?"datatable.showMore":"datatable.showLess")))))}get el(){return i(this)}static get watchers(){return{text:["textChangeHandler"]}}};c.style=':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}';let d,p=class{constructor(e){t(this,e),this.image=null,this.name="",this.email="",this.alt=""}render(){return e("div",{class:"name-box-container"},e("div",{class:"avatar"},e("fw-avatar",{size:"small",image:this.image,name:this.name,alt:this.alt})),e("div",{class:"name-box"},e("div",{class:"name-box-text"},this.name),e("div",{class:"name-box-email"},this.email)))}};p.style=':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}';const b=[],f={sortable:!1,acceptFrom:"",placeholderClass:"",copy:!0,addOnDrop:!0};class g{constructor(t,e){this.childElements=[],this.acceptFrom=[],this.dropped=!1,this.debouncedSetElement=r(((t,e,s)=>{if(this.cancelDebouncedDrag)return;const i=this.getDragAfterElement(t,s);let o;e.parentElement.id===this.dragContainer.id?o=e:(this.placeholder||(this.placeholder=this.createPlaceholder(e)),o=this.placeholder),this.addElement(o,i)}),this,5),this.onDragStart=t=>{d=t.target,this.dropped=!1,this.cancelDebouncedDrag=!1,t.dataTransfer.setData("text/plain",d.id),this.childElements=Array.from(this.dragContainer.children);const e=this.childElements.indexOf(d);this.nextSibling=this.childElements[e+1],this.childElements.splice(e,1),t.stopPropagation()},this.onDragEnter=t=>{if(!this.canAcceptDragElement())return;const e=t.composedPath().find((t=>t.id===this.dragContainer.id));e&&e!==this.previousContainer&&(this.childElements=Array.from(this.dragContainer.children),this.cancelDebouncedDrag=!1),this.previousContainer=e},this.onDragLeave=t=>{if(!this.canAcceptDragElement())return;const e=t.fromElement||t.relatedTarget;if(!t.currentTarget.contains(e)){const s=this.getMatchingHost(e,this.dragContainer.children[0].tagName);t.currentTarget.contains(s)||(this.previousContainer=void 0)}},this.onDragOver=t=>{t.preventDefault(),this.canAcceptDragElement()&&this.debouncedSetElement(this.childElements,d,t.clientY)},this.onDragEnd=t=>{(!this.dropped||b.length>0)&&d&&(this.addElement(d,this.nextSibling),this.removePlaceholder()),this.resetData(t)},this.onDrop=t=>{if(!this.canAcceptDragElement())return;this.dropped=!0;const e=d.parentElement.id,s=[...this.dragContainer.children].indexOf(this.placeholder||d);if(this.placeholder)if(this.options.addOnDrop){const t=this.options.copy?a(d,!0,!0):d;this.placeholder.replaceWith(t)}else this.removePlaceholder();this.dragContainer.dispatchEvent(new CustomEvent("fwDropBase",{cancelable:!0,bubbles:!1,detail:{droppedElement:d,droppedIndex:s,dragFromId:e,dropToId:this.dragContainer.id}})),this.resetData(t)},this.dragContainer=t,this.options=Object.assign({},f,e),this.acceptFrom=this.options.acceptFrom?this.options.acceptFrom.split(","):[],this.options.sortable&&this.acceptFrom.push(this.dragContainer.id),this.addListeners()}addListeners(){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)}removeListeners(){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)}getDragAfterElement(t,e){return t.reduce(((t,s)=>{const i=s.getBoundingClientRect(),o=e-i.top-i.height/2;return o<0&&o>t.offset?{offset:o,element:s}:t}),{offset:Number.NEGATIVE_INFINITY}).element}createPlaceholder(t){const e=this.options.placeholderClass,s=this.dragContainer.tagName;let i;return["UL","OL"].includes(s)?i=document.createElement("li"):["TABLE","TBODY"].includes(s)?(i=document.createElement("tr"),i.innerHTML='<td colspan="100"></td>'):i=document.createElement("div"),"string"==typeof e&&e?i.classList.add(...e.split(" ")):(i.style.height=this.getElementHeight(t)+"px",i.style.width=this.getElementWidth(t)+"px"),b.push(i),i}removePlaceholder(){b.forEach((t=>{t.remove()}))}addElement(t,e){e?this.canInsertBefore(e)&&!(null==t?void 0:t.isSameNode(e))&&this.dragContainer.insertBefore(t,e):this.canAppendTo(this.dragContainer)&&this.dragContainer.appendChild(t)}canAcceptDragElement(){return!!d&&this.acceptFrom.includes(d.parentElement.id)}canInsertBefore(t){return t&&"top"!==t.pinned}canAppendTo(t){return"bottom"!==t.lastElementChild.pinned}getHost(t){return t.getRootNode().host}getMatchingHost(t,e){let s=t;for(;s;)if(s=this.getHost(s),s&&s.tagName===e)return s}resetData(t){t.dataTransfer.clearData(),this.previousContainer=void 0,d=void 0,this.placeholder=void 0,this.cancelDebouncedDrag=!0}getElementHeight(t){if(!(t instanceof HTMLElement))throw new Error("You must provide a valid dom element");const e=window.getComputedStyle(t);return"border-box"===e.getPropertyValue("box-sizing")?parseInt(e.getPropertyValue("height"),10):["height","padding-top","padding-bottom"].map((function(t){const s=parseInt(e.getPropertyValue(t),10);return isNaN(s)?0:s})).reduce((function(t,e){return t+e}))}getElementWidth(t){if(!(t instanceof HTMLElement))throw new Error("You must provide a valid dom element");const e=window.getComputedStyle(t);return["width","padding-left","padding-right"].map((function(t){const s=parseInt(e.getPropertyValue(t),10);return isNaN(s)?0:s})).reduce((function(t,e){return t+e}))}destroy(){this.removeListeners()}}let m=class{constructor(e){t(this,e),this.fwDrop=o(this,"fwDrop",7),this.acceptFrom="",this.addOnDrop=!0,this.copy=!0,this.placeholderClass="",this.sortable=!0}componentWillLoad(){this.containerInstance=new g(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))}emitFwDrop(t){this.fwDrop.emit(t.detail)}disconnectedCallback(){var t;null===(t=this.containerInstance)||void 0===t||t.destroy(),this.host.removeEventListener("fwDropBase",this.emitFwDrop)}render(){return e(s,{class:"drag-container"})}get host(){return i(this)}};m.style=':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}';let u=class{constructor(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=[]}componentWillLoad(){this.init()}componentWillUpdate(){this.init()}init(){if(this.items.length=this.count,this.items.fill(1),this.customStyles&&"string"==typeof this.customStyles)try{this.customStyles=JSON.parse(this.customStyles)}catch(t){console.warn("can't parse styles",this.customStyles)}}get style(){const t={width:null,height:null,marginBottom:null};this.width&&(t.width=this.width),this.height&&(t.height=this.height),this.marginBottom&&(t.marginBottom=this.marginBottom);const e="object"==typeof this.customStyles?this.customStyles:{};return Object.assign(Object.assign({},t),e)}render(){return e(s,null,this.items.map(((t,s)=>e("div",{part:"base",key:s,class:{circle:"circle"===this.variant,rect:"rect"===this.variant,skeleton:!0,pulse:"pulse"===this.effect,sheen:"sheen"===this.effect,only:1===this.count},"aria-busy":"true","aria-live":"polite",style:this.style}))))}};u.style=':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}}';export{h as fw_custom_cell_anchor,l as fw_custom_cell_icon,c as fw_custom_cell_paragraph,p as fw_custom_cell_user,m as fw_drag_container,u as fw_skeleton}