@kontent-ai/smart-link
Version:
Kontent.ai Smart Link SDK allowing to automatically inject [smart links](https://docs.kontent.ai/tutorials/develop-apps/build-strong-foundation/set-up-editing-from-preview#a-using-smart-links) to Kontent.ai according to manually specified [HTML data attri
528 lines • 77.4 kB
JavaScript
(function(k,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define("KontentSmartLink",["exports"],w):(k=typeof globalThis<"u"?globalThis:k||self,w(k.kontentSmartLink={}))})(this,function(k){"use strict";var Pn=Object.defineProperty;var xn=(k,w,V)=>w in k?Pn(k,w,{enumerable:!0,configurable:!0,writable:!0,value:V}):k[w]=V;var a=(k,w,V)=>xn(k,typeof w!="symbol"?w+"":w,V);function w(){return window.self!==window.top}const V={debug:!1,defaultDataAttributes:{languageCodename:void 0,environmentId:void 0},forceWebSpotlightMode:!1,isInsideWebSpotlight:!1,queryParam:"ksl-enabled"};function H(t){return t.forceWebSpotlightMode||w()&&t.isInsideWebSpotlight}var g=(t=>(t.AddButtonInsertPosition="data-kontent-add-button-insert-position",t.ElementCodename="data-kontent-element-codename",t.ComponentId="data-kontent-component-id",t.ItemId="data-kontent-item-id",t.LanguageCodename="data-kontent-language-codename",t.EnvironmentId="data-kontent-environment-id",t))(g||{}),L=(t=>(t.AddButton="data-kontent-add-button",t.AddButtonRenderPosition="data-kontent-add-button-render-position",t.DisableFeatures="data-kontent-disable-features",t))(L||{}),dt=(t=>(t.Highlight="highlight",t))(dt||{}),I=(t=>(t.None="",t.Element="element",t.ContentComponent="content-component",t.ContentItem="content-item",t))(I||{});function ct(t){return!t||re(t,dt.Highlight)?"":t.hasAttribute(g.ElementCodename)?"element":t.hasAttribute(g.ComponentId)?"content-component":t.hasAttribute(g.ItemId)?"content-item":""}function re(t,n){const e=t.getAttribute(L.DisableFeatures);return(e==null?void 0:e.toLowerCase().includes(n))??!1}const ut=`[${L.DisableFeatures}*="${dt.Highlight}"]`,$t=`*[${g.ElementCodename}]:not(${ut})`,le=`*[${g.ComponentId}]:not([${g.ElementCodename}]):not(${ut})`,Lt=`*[${g.ItemId}]:not([${g.ComponentId}]):not([${g.ElementCodename}]):not(${ut})`,de=`*[${L.AddButton}]`,ce=`${$t}, ${le}, ${Lt}, ${de}`,ue=`${$t}, ${Lt}`;function ht(t,n){const e=H(n);return n.debug||e?t.querySelectorAll(ce):t.querySelectorAll(ue)}function At(t,n){return Pt(t,n)||xt(t,n)}function Pt(t,n){switch(ct(t)){case I.None:return!1;case I.Element:case I.ContentItem:return!0;case I.ContentComponent:return n.debug||H(n)}}function xt(t,n){return((H(n)||n.debug)&&t&&t.hasAttribute(L.AddButton))??!1}class mt extends Error{constructor(n){super(n),this.name="AssertionError",Object.setPrototypeOf(this,mt.prototype)}}class J extends Error{constructor(n){super(n),this.name="NotImplementedError",Object.setPrototypeOf(this,J.prototype)}}class B extends Error{constructor(n){super(n),this.name="InvalidEnvironmentError",Object.setPrototypeOf(this,B.prototype)}}class q extends Error{constructor(n){super(n),this.name="NotInitializedError",Object.setPrototypeOf(this,q.prototype)}}function he(t){throw new Error(t)}function Y(t){return`https://app.kontent.ai/goto/edit-item/project/${t.environmentId}/variant-codename/${t.languageCodename}/item/${t.itemId}`}function me(t){return`${Y({environmentId:t.environmentId,languageCodename:t.languageCodename,itemId:t.itemId})}/element/${t.elementCodename}`}function pe(t){return`${Y({environmentId:t.environmentId,languageCodename:t.languageCodename,itemId:t.itemId})}/component/${t.contentComponentId}/element/${t.componentElementCodename}`}function Tt(t){return"contentComponentId"in t?pe({environmentId:t.environmentId,languageCodename:t.languageCodename,itemId:t.itemId,contentComponentId:t.contentComponentId,componentElementCodename:t.componentElementCodename}):me({environmentId:t.environmentId,languageCodename:t.languageCodename,itemId:t.itemId,elementCodename:t.elementCodename})}var P=(t=>(t.After="after",t.Before="before",t.End="end",t.Start="start",t))(P||{}),X=(t=>(t.CreateComponent="CreateComponent",t.CreateLinkedItem="CreateLinkedItem",t.InsertLinkedItem="InsertLinkedItem",t))(X||{}),z=(t=>(t.LinkedItems="LinkedItems",t.RichText="RichText",t.Unknown="Unknown",t))(z||{}),U=(t=>(t.CreateNew="createNew",t.Edit="edit",t.ViewParent="viewParent",t))(U||{}),W=(t=>(t.ItemNotTranslated="ItemNotTranslated",t.Ok="Ok",t.PermissionMissing="PermissionMissing",t.RteWithForbiddenComponents="RteWithForbiddenComponents",t.Unknown="Unknown",t))(W||{}),$=(t=>(t.ElementClicked="kontent-smart-link:element:clicked",t.ContentItemClicked="kontent-smart-link:content-item:clicked",t.ContentComponentClicked="kontent-smart-link:content-component:clicked",t.Initialized="kontent-smart-link:initialized",t.Status="kontent-smart-link:status",t.AddInitial="kontent-smart-link:add:initial",t.AddAction="kontent-smart-link:add:action",t.RefreshPreview="kontent-smart-link:preview:refresh",t.UpdatePreview="kontent-smart-link:preview:update",t.PreviewIFrameCurrentUrl="kontent-smart-link:preview:current-url",t.PreviewIFrameCurrentUrlResponse="kontent-smart-link:preview:current-url:response",t))($||{}),tt=(t=>(t[t.Debug=1]="Debug",t[t.Info=2]="Info",t[t.Warn=3]="Warn",t[t.Error=4]="Error",t))(tt||{});let M=2;function St(t){M=t}function O(...t){M<=4&&console.error("[KSL][Error]: ",...t)}function N(...t){M<=3&&console.warn("[KSL][Warning]: ",...t)}function et(...t){M<=2&&console.info("[KSL][Info]: ",...t)}function nt(...t){M<=1&&console.log("[KSL][Debug]: ",...t)}function Bt(...t){M<=2&&console.groupCollapsed(...t)}function Mt(){M<=2&&console.groupEnd()}const _t=(t,n)=>{const e=t.parsed.languageCodename??n.languageCodename,o=t.parsed.environmentId??n.environmentId;return!e||!o?{success:!1,missing:[...e?[]:["languageCodename"],...o?[]:["environmentId"]]}:{success:!0,data:{languageCodename:e,projectId:o}}};function pt(t,n){const e=_t(t,n);return!t.parsed.itemId||!e.success?{success:!1,missing:[...t.parsed.itemId?[]:["itemId"],...e.success?[]:e.missing]}:{success:!0,data:{languageCodename:e.data.languageCodename,projectId:e.data.projectId,itemId:t.parsed.itemId}}}function fe(t,n){const e=pt(t,n);return!t.parsed.elementCodename||!e.success?{success:!1,missing:["elementCodename",...e.success?[]:e.missing]}:{success:!0,data:{...e.data,elementCodename:t.parsed.elementCodename,contentComponentId:t.parsed.contentComponentId??void 0}}}function ge(t,n){const e=pt(t,n);return!t.parsed.contentComponentId||!e.success?{success:!1,missing:["contentComponentId",...e.success?[]:e.missing]}:{success:!0,data:{...e.data,contentComponentId:t.parsed.contentComponentId}}}const be=(t,n)=>{const e=()=>"elementCodename"in t.parsed?{type:"element",validationResult:fe(t,n.defaultDataAttributes)}:"contentComponentId"in t.parsed?{type:"contentComponent",validationResult:ge(t,n.defaultDataAttributes)}:{type:"contentItem",validationResult:pt(t,n.defaultDataAttributes)},{type:o,validationResult:i}=e();return i.success?(n.debug&&ot(t.debugData,"[KSL]: Parsed edit button data attributes"),o==="element"?{type:"element",data:i.data}:o==="contentComponent"?{type:"contentComponent",data:i.data}:{type:"contentItem",data:i.data}):(ot(t.debugData,"[KSL]: Parsing edit button data attributes failed"),{type:"error",missing:i.missing})},ve=t=>{const n=ke(t.parsed.placement);return(n===P.After||n===P.Before)&&!t.parsed.targetId?{success:!1,missing:["targetId"]}:{success:!0,data:{placement:n,targetId:t.parsed.targetId??void 0}}},ke=t=>{switch(t){case"after":return P.After;case"before":return P.Before;case"start":return P.Start;default:return P.End}};function Dt(t,n){const e=_t(t,n.defaultDataAttributes),o=ve(t);return!t.parsed.itemId||!t.parsed.elementCodename||!o.success||!e.success?(ot(t.debugData,"[KSL]: Parsing add button data attributes failed"),{success:!1,missing:[...t.parsed.itemId?[]:["itemId"],...t.parsed.elementCodename?[]:["elementCodename"],...o.success?[]:o.missing,...e.success?[]:e.missing]}):(n.debug&&ot(t.debugData,"[KSL]: Parsed add button data attributes"),{success:!0,data:{projectId:e.data.projectId,languageCodename:e.data.languageCodename,itemId:t.parsed.itemId,contentComponentId:t.parsed.contentComponentId??void 0,insertPosition:o.data,elementCodename:t.parsed.elementCodename}})}const ot=(t,n)=>{Bt(n),t.forEach(e=>{Bt(e.element),e.parsedAttributes.length>0&&(et("Resolved attributes:"),e.parsedAttributes.forEach(o=>{et(`${o.token}: ${o.dataAttribute}: ${o.value}`)})),e.skippedAttributes.length>0&&(et("Parsed Kontent.ai attributes:"),e.skippedAttributes.forEach(o=>{et(`${o.dataAttribute}: ${o.value}`)})),Mt()}),Mt()};function x(t,n){if(!t){const e=new mt(n);throw O(e),e}}function ye(t){const n=ct(t),e=Ce(n);return nt("Parsing edit button data attributes for element: ",t),nt("Parsing values from data attributes using this pattern: ",e),ft(e,t)}function Vt(t){const n=t.getAttribute(g.AddButtonInsertPosition),e=we(n);return nt("Parsing add button data attributes for element: ",t),nt("Parsing values from data attributes following this pattern: ",e),ft(e,t)}function Ce(t){switch(t){case I.Element:return Re;case I.ContentComponent:return Ie;case I.ContentItem:return bt;case I.None:return gt}}function we(t){switch(t){case P.After:case P.Before:return $e;default:return Le}}function Ee(t,n){const e=new Set,o=[];for(const i of t){const s=n.find(r=>i.dataAttributes.includes(r.dataAttribute)&&!e.has(r.dataAttribute));if(!(!s&&i.optional)){if(!s)break;e.add(s.dataAttribute),o.push({token:i.key,value:s.value,dataAttribute:s.dataAttribute})}}return o}const ft=(t,n)=>{if(!n||t.length===0)return{parsed:{},debugData:[]};const e=Object.values(g).map(d=>{const h=n.getAttribute(d);return h?{dataAttribute:d,value:h}:null}).filter(d=>d!==null),o=Ee(t,e),i=t.findIndex(d=>{var h;return d.key===((h=o.at(-1))==null?void 0:h.token)}),s=t.slice(i+1),r=ft(s,n.parentElement);return{parsed:{...Object.fromEntries(o.map(d=>[d.token,d.value])),...r.parsed},debugData:[...r.debugData,...e.length>0?[{element:n,parsedAttributes:e.filter(d=>o.find(h=>h.dataAttribute===d.dataAttribute)!==void 0).map(d=>{var h;return{token:((h=o.find(m=>m.dataAttribute===d.dataAttribute))==null?void 0:h.token)??he("[Parser]: Token not found"),dataAttribute:d.dataAttribute,value:d.value}}),skippedAttributes:e.filter(d=>o.find(h=>h.dataAttribute===d.dataAttribute)===void 0).map(d=>({dataAttribute:d.dataAttribute,value:d.value}))}]:[]]}},gt=[{key:"languageCodename",dataAttributes:[g.LanguageCodename]},{key:"environmentId",dataAttributes:[g.EnvironmentId]}],bt=[{key:"itemId",dataAttributes:[g.ItemId]},...gt],Ie=[{key:"contentComponentId",dataAttributes:[g.ComponentId]},...bt],Re=[{key:"elementCodename",dataAttributes:[g.ElementCodename]},{key:"contentComponentId",dataAttributes:[g.ComponentId],optional:!0},...bt],Ht=[{key:"elementCodename",dataAttributes:[g.ElementCodename]},{key:"contentComponentId",dataAttributes:[g.ComponentId],optional:!0},{key:"itemId",dataAttributes:[g.ItemId]},...gt],$e=[{key:"placement",dataAttributes:[g.AddButtonInsertPosition]},{key:"targetId",dataAttributes:[g.ComponentId,g.ItemId]},...Ht],Le=[{key:"placement",dataAttributes:[g.AddButtonInsertPosition],optional:!0},...Ht];function Ae(t){const n=new Map;for(const e of t){const o=zt(e),i=n.get(o)??new Set;n.set(o,i.add(e))}return n}function zt(t){const n=t.parentElement;if(!n)return null;const e=Ot(n),o=!["TD","TH","TABLE"].includes(n.tagName);return e.isPositioned||e.isContentClipped&&o?n:zt(n)}function Ot(t){const n=window.getComputedStyle(t),e=n.getPropertyValue("position"),o=n.getPropertyValue("overflow");return{isPositioned:e!=="static",isContentClipped:o.split(" ").some(i=>["auto","scroll","clip","hidden"].includes(i))}}function Nt(t){if(!t)return[0,0];const n=t.offsetParent;if(!n)return[0,0];const e=o=>{if(n.isSameNode(o)||!o)return[0,0];const[i,s]=e(o.parentElement);return[i+o.scrollTop,s+o.scrollLeft]};return e(t.parentElement)}function T(t){const n=document.createElement("template");return n.innerHTML=t,n}typeof window>"u"&&(global.HTMLElement=null);class Z extends HTMLElement{static get is(){throw new J('KSLCustomElement: "is" getter is not implemented for this custom element.')}static get template(){return this._template??(this._template=this.initializeTemplate()),this._template}constructor(){super();const n={mode:"open"},e=Object.getPrototypeOf(this).constructor;this.attachShadow(n).appendChild(e.template.content.cloneNode(!0))}static define(){if(typeof window>"u")throw new B("KSLCustomElement: custom elements can only be defined in a browser environment.");const n=this,e=window.customElements.get(this.is);return e?Promise.resolve(e):(customElements.define(this.is,n),customElements.whenDefined(this.is))}static initializeTemplate(){throw new J('KSLCustomElement: "initializeTemplate" method should be implemented for every component.')}updateAttribute(n,e){e!==null&&e?this.setAttribute(n,e.toString()):this.removeAttribute(n)}dispatchAsyncEvent(n,e,o=null){return new Promise((i,s)=>{const r=o!==null?window.setTimeout(s,o):0,d=new CustomEvent(n,{detail:{eventData:e,onResolve:h=>{window.clearTimeout(r),i(h)},onReject:h=>{window.clearTimeout(r),s(h)}}});this.dispatchEvent(d)})}}a(Z,"_template",null);var l=(t=>(t.Bottom="bottom",t.BottomEnd="bottom-end",t.BottomStart="bottom-start",t.Left="left",t.LeftEnd="left-end",t.LeftStart="left-start",t.None="",t.Right="right",t.RightEnd="right-end",t.RightStart="right-start",t.Top="top",t.TopEnd="top-end",t.TopStart="top-start",t))(l||{});class vt extends Z{constructor(){super(...arguments);a(this,"targetRef",null)}get position(){return""}connectedCallback(){this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1")}disconnectedCallback(){this.targetRef=null}attachTo(e){this.targetRef=e}calculateTopOffset(e,o){switch(this.position){case"top-start":case"top":case"top-end":return-e.height;case"bottom-start":case"bottom":case"bottom-end":return o.height;case"left":case"right":return(o.height-e.height)/2;case"left-end":case"right-end":return o.height-e.height;case"left-start":case"right-start":case"":return 0}}calculateLeftOffset(e,o){switch(this.position){case"top":case"bottom":return(o.width-e.width)/2;case"top-end":case"bottom-end":return o.width-e.width;case"left-start":case"left":case"left-end":return-e.width;case"right-start":case"right":case"right-end":return o.width;case"top-start":case"bottom-start":case"":return 0}}}var y=(t=>(t.BackgroundDefault="rgba(255, 255, 255, 1)",t.BackgroundDefaultDisabled="rgba(223, 223, 223, 1)",t.BackgroundDefaultHover="rgba(21, 21, 21, 0.1)",t.BackgroundDefaultSelected="rgba(255, 240, 239, 1)",t.BackgroundSecondary="rgba(20, 22, 25, 1)",t.Primary="rgba(219, 60, 0, 1)",t.PrimaryHover="rgba(149, 48, 0, 1)",t.PrimaryTransparent="rgba(219, 60, 0, 0.5)",t.TextDefault="rgba(21, 21, 21, 1)",t.TextDefaultDisabled="rgba(140, 140, 140, 1)",t.TextSecondary="rgba(255, 255, 255, 1)",t))(y||{}),K=(t=>(t.Default="0 8px 32px rgba(16, 33, 60, 0.24), 0 0 8px rgba(0, 0, 0, 0.03)",t.Primary="0 8px 10px rgba(219, 60, 0, 0.2), 0 6px 20px rgba(219, 60, 0, 0.12), 0 8px 14px rgba(219, 60, 0, 0.14)",t))(K||{});const F=9e3,Pe=`
<style>
:host {
--arrow-size: var(--ksl-pop-up-arrow-size, 12px);
--background-color: var(--ksl-pop-up-background-color, ${y.BackgroundDefault});
--border-radius: var(--ksl-pop-up-border-radius, 4px);
--box-shadow: var(--ksl-pop-up-box-shadow, ${K.Default});
--color: var(--ksl-pop-up-color, ${y.TextDefault});
--padding: var(--ksl-pop-up-padding, 8px 8px);
display: block;
position: absolute;
opacity: 0;
z-index: calc(var(--ksl-z-index, ${F}) + 1000);
transition: opacity 250ms ease-in-out;
}
:host([visible]) {
opacity: 1;
}
:host(:focus) {
outline: none;
}
.ksl-pop-up__content {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
box-shadow: var(--box-shadow);
background-color: var(--background-color);
padding: var(--padding);
border-radius: var(--border-radius);
font-size: 12px;
line-height: 16px;
font-weight: normal;
color: var(--color);
}
:host([position="${l.RightStart}"]) .ksl-pop-up__content,
:host([position="${l.Right}"]) .ksl-pop-up__content,
:host([position="${l.RightEnd}"]) .ksl-pop-up__content {
margin-left: var(--arrow-size);
}
:host([position="${l.LeftStart}"]) .ksl-pop-up__content,
:host([position="${l.Left}"]) .ksl-pop-up__content,
:host([position="${l.LeftEnd}"]) .ksl-pop-up__content {
margin-right: var(--arrow-size);
}
:host([position="${l.BottomStart}"]) .ksl-pop-up__content,
:host([position="${l.Bottom}"]) .ksl-pop-up__content,
:host([position="${l.BottomEnd}"]) .ksl-pop-up__content {
margin-top: var(--arrow-size);
}
:host([position="${l.TopStart}"]) .ksl-pop-up__content,
:host([position="${l.Top}"]) .ksl-pop-up__content,
:host([position="${l.TopEnd}"]) .ksl-pop-up__content {
margin-bottom: var(--arrow-size);
}
.ksl-pop-up__arrow {
position: absolute;
width: 0;
height: 0;
margin: 0 .25rem;
}
:host([position="${l.RightStart}"]) .ksl-pop-up__arrow,
:host([position="${l.Right}"]) .ksl-pop-up__arrow,
:host([position="${l.RightEnd}"]) .ksl-pop-up__arrow {
left: -(var(--arrow-size));
border-right: var(--arrow-size) solid var(--background-color);
border-top: var(--arrow-size) solid transparent;
border-bottom: var(--arrow-size) solid transparent;
}
:host([position="${l.LeftStart}"]) .ksl-pop-up__arrow,
:host([position="${l.Left}"]) .ksl-pop-up__arrow,
:host([position="${l.LeftEnd}"]) .ksl-pop-up__arrow {
right: -(var(--arrow-size));
border-top: var(--arrow-size) solid transparent;
border-left: var(--arrow-size) solid var(--background-color);
border-bottom: var(--arrow-size) solid transparent;
}
:host([position="${l.BottomStart}"]) .ksl-pop-up__arrow,
:host([position="${l.Bottom}"]) .ksl-pop-up__arrow,
:host([position="${l.BottomEnd}"]) .ksl-pop-up__arrow {
top: 0;
border-left: var(--arrow-size) solid transparent;
border-right: var(--arrow-size) solid transparent;
border-bottom: var(--arrow-size) solid var(--background-color);
}
:host([position="${l.TopStart}"]) .ksl-pop-up__arrow,
:host([position="${l.Top}"]) .ksl-pop-up__arrow,
:host([position="${l.TopEnd}"]) .ksl-pop-up__arrow {
bottom: 0;
border-top: var(--arrow-size) solid var(--background-color);
border-left: var(--arrow-size) solid transparent;
border-right: var(--arrow-size) solid transparent;
}
:host([position="${l.Top}"]) .ksl-pop-up__arrow,
:host([position="${l.Bottom}"]) .ksl-pop-up__arrow {
left: calc(50% - var(--arrow-size) - 0.25rem);
}
:host([position="${l.TopEnd}"]) .ksl-pop-up__arrow,
:host([position="${l.BottomEnd}"]) .ksl-pop-up__arrow {
right: 0;
}
:host([position="${l.TopStart}"]) .ksl-pop-up__arrow,
:host([position="${l.BottomStart}"]) .ksl-pop-up__arrow {
left: 0;
}
:host([position="${l.Left}"]) .ksl-pop-up__arrow,
:host([position="${l.Right}"]) .ksl-pop-up__arrow {
top: 8px;
}
:host([position="${l.LeftEnd}"]) .ksl-pop-up__arrow,
:host([position="${l.RightEnd}"]) .ksl-pop-up__arrow {
bottom: 0;
}
:host([position="${l.LeftStart}"]) .ksl-pop-up__arrow,
:host([position="${l.RightStart}"]) .ksl-pop-up__arrow {
top: 0;
}
</style>
<div class="ksl-pop-up__content">
<slot></slot>
</div>
<div class="ksl-pop-up__arrow"/>
`;class it extends vt{constructor(){super(...arguments);a(this,"attachTo",e=>{super.attachTo(e),this.adjustPosition()});a(this,"adjustPosition",()=>{if(!this.targetRef||!this.offsetParent)return;const e=this.getBoundingClientRect(),o=this.targetRef.getBoundingClientRect(),i=this.offsetParent.getBoundingClientRect(),s=this.offsetParent.isSameNode(document.body),r=this.offsetParent.isSameNode(this.targetRef),d=this.calculateTopOffset(e,o),h=this.calculateLeftOffset(e,o);let m,c;if(r)m=d,c=h;else{const[p,E]=Nt(this.parentElement);m=o.top+d+(s?window.pageYOffset:p),c=o.left+h+(s?window.pageXOffset:E)}s?(i.top+m+e.height>window.innerHeight?(this.style.bottom=`${i.height}px`,this.style.top="auto"):(this.style.bottom="auto",this.style.top=`${Math.max(-i.top,m)}px`),i.left+c+e.width>window.innerWidth?(this.style.right="0px",this.style.left="auto"):(this.style.right="auto",this.style.left=`${Math.max(-i.left,c)}px`)):(this.style.right="auto",this.style.left=`${c}px`,this.style.bottom="auto",this.style.top=`${m}px`)})}get position(){return this.getAttribute("position")??l.Bottom}set position(e){this.updateAttribute("position",e)}get visible(){return this.hasAttribute("visible")}set visible(e){this.updateAttribute("visible",e)}static initializeTemplate(){return T(Pe)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","tooltip"),window.addEventListener("resize",this.adjustPosition,{capture:!0}),window.addEventListener("scroll",this.adjustPosition,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.adjustPosition,{capture:!0}),window.removeEventListener("scroll",this.adjustPosition,{capture:!0})}}const xe=`
<style>
:host {
--ksl-pop-up-arrow-size: 4px;
--ksl-pop-up-background-color: var(--ksl-color-background-secondary, ${y.BackgroundSecondary});
--ksl-pop-up-box-shadow: none;
--ksl-pop-up-color: var(--ksl-color-text-secondary, ${y.TextSecondary});
--ksl-pop-up-padding: 4px 6px;
}
</style>
`;class Ft extends it{static get is(){return"ksl-tooltip"}static initializeTemplate(){const n=it.initializeTemplate(),e=T(xe);return n.content.appendChild(e.content.cloneNode(!0)),n}}class jt extends Z{constructor(){super(...arguments);a(this,"tooltipRef",null);a(this,"showTooltip",()=>{if(this.tooltipRef&&this.hideTooltip(),!this.tooltipMessage||this.tooltipDisabled)return;const e=document.createElement(Ft.is);e.innerText=this.tooltipMessage,this.tooltipRef=document.body.appendChild(e),this.tooltipRef.position=this.tooltipPosition,this.tooltipRef.attachTo(this),this.tooltipRef.visible=!0});a(this,"hideTooltip",()=>{this.tooltipRef&&(this.tooltipRef.visible=!1,this.tooltipRef.remove(),this.tooltipRef=null)})}static get observedAttributes(){return["tooltip-disabled","tooltip-message"]}get tooltipDisabled(){return this.hasAttribute("tooltip-disabled")}set tooltipDisabled(e){this.updateAttribute("tooltip-disabled",e)}get tooltipMessage(){return this.getAttribute("tooltip-message")}set tooltipMessage(e){this.updateAttribute("tooltip-message",e)}get tooltipPosition(){return this.getAttribute("tooltip-position")??l.Bottom}set tooltipPosition(e){this.updateAttribute("tooltip-position",e)}connectedCallback(){this.addEventListener("focus",this.showTooltip),this.addEventListener("mouseenter",this.showTooltip),this.addEventListener("blur",this.hideTooltip),this.addEventListener("mouseleave",this.hideTooltip)}disconnectedCallback(){this.hideTooltip(),this.removeEventListener("focus",this.showTooltip),this.removeEventListener("mouseenter",this.showTooltip),this.removeEventListener("blur",this.hideTooltip),this.removeEventListener("mouseleave",this.hideTooltip)}attributeChangedCallback(e,o,i){e==="tooltip-disabled"?i&&this.hideTooltip():e==="tooltip-message"&&(i||this.hideTooltip())}}var _=(t=>(t.CollapseScheme="icon-collapse-scheme",t.Edit="icon-edit",t.Plus="icon-plus",t.PlusPuzzle="icon-plus-puzzle",t.Puzzle="icon-puzzle",t.Spinner="icon-spinner",t))(_||{});const Te=`
<template id="icon-edit">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1 14.993V10.0515L9.47121 1.58221C10.2522 0.801373 11.5183 0.801373 12.2993 1.58221L14.4132 3.69561C15.1945 4.47669 15.1945 5.74327 14.4132 6.52436L5.94263 14.993H1ZM5.52848 13.993L10.7581 8.7646L7.22982 5.23714L2 10.4658V13.993H5.52848ZM7.937 4.53012L11.4653 8.05757L13.7062 5.81717C14.0968 5.42663 14.0968 4.79334 13.7062 4.4028L11.5923 2.28939C11.2018 1.89898 10.5687 1.89898 10.1782 2.28939L7.937 4.53012Z"
/>
<path
d="M9.48975 13.9982C9.2136 13.9982 8.98975 14.2221 8.98975 14.4982C8.98975 14.7743 9.2136 14.9982 9.48975 14.9982H14.4865C14.7626 14.9982 14.9865 14.7743 14.9865 14.4982C14.9865 14.2221 14.7626 13.9982 14.4865 13.9982H9.48975Z"
/>
</svg>
</template>
<template id="icon-plus">
<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.75366 16.5C7.75366 17.1904 8.31331 17.75 9.00366 17.75C9.69402 17.75 10.2537 17.1904 10.2537 16.5V10.2861H16.5C17.1904 10.2861 17.75 9.72642 17.75 9.03606C17.75 8.34571 17.1904 7.78606 16.5 7.78606H10.2537V1.5C10.2537 0.809643 9.69402 0.25 9.00366 0.25C8.31331 0.25 7.75366 0.809644 7.75366 1.5V7.78606H1.5C0.809644 7.78606 0.25 8.34571 0.25 9.03606C0.25 9.72642 0.809644 10.2861 1.5 10.2861H7.75366V16.5Z"
/>
</svg>
</template>
<template id="icon-spinner">
<svg class="spin-500" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.25049 10.0001C1.25049 5.16797 5.16766 1.25069 9.99979 1.25061C10.345 1.2506 10.6248 1.53042 10.6248 1.8756C10.6248 2.22078 10.345 2.5006 9.99981 2.50061C5.85803 2.50068 2.50049 5.85831 2.50049 10.0001C2.50049 14.1418 5.85811 17.4995 9.99993 17.4995C14.1418 17.4995 17.4994 14.1418 17.4994 10.0001C17.4994 8.00692 16.7227 6.19654 15.4542 4.85289C15.2172 4.60189 15.2286 4.20633 15.4796 3.96937C15.7306 3.73241 16.1261 3.74379 16.3631 3.99479C17.8419 5.5612 18.7494 7.67533 18.7494 10.0001C18.7494 14.8322 14.8321 18.7495 9.99993 18.7495C5.16775 18.7495 1.25049 14.8322 1.25049 10.0001Z"
/>
</svg>
</template>
<template id="icon-puzzle">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.36522 2.48835C5.12409 2.7724 5.03429 3.10232 5.03429 3.27273V4.50861C5.03429 4.78476 4.81043 5.00861 4.53429 5.00861H2V14H4.0343V13.2727C4.0343 12.8522 4.21698 12.2958 4.60288 11.8412C5.00497 11.3675 5.63191 11 6.49745 11C7.36086 11 7.99972 11.3654 8.41593 11.8319C8.81555 12.2798 9.02461 12.8381 9.02461 13.2727V14.0072L11.0125 14.0014V11.4936C11.0125 11.2175 11.2363 10.9936 11.5125 10.9936H12.7273C12.8923 10.9936 13.2215 10.9016 13.5081 10.6537C13.7758 10.4221 14 10.0599 14 9.50642C14 8.95199 13.7748 8.58042 13.5038 8.34043C13.2141 8.08395 12.8857 7.98937 12.7273 7.98937H11.5125C11.2363 7.98937 11.0125 7.76551 11.0125 7.48937V5.00861H8.52459C8.24845 5.00861 8.02459 4.78476 8.02459 4.50861V3.27273C8.02459 3.11648 7.92916 2.7884 7.66975 2.49765C7.42692 2.2255 7.0522 2 6.49743 2C5.94479 2 5.59016 2.22337 5.36522 2.48835ZM4.60286 1.84119C5.00495 1.36753 5.6319 1 6.49743 1C7.36085 1 7.9997 1.36541 8.41592 1.83189C8.81554 2.27978 9.0246 2.83807 9.0246 3.27273V4.00861H11.5125C11.7886 4.00861 12.0125 4.23247 12.0125 4.50861V6.98937H12.7273C13.1597 6.98937 13.7177 7.19422 14.1667 7.59172C14.6343 8.00572 15 8.64268 15 9.50642C15 10.3712 14.6333 11.0025 14.1624 11.41C13.7103 11.8011 13.1531 11.9936 12.7273 11.9936H12.0125V14.5C12.0125 14.7756 11.7895 14.9992 11.5139 15L8.52605 15.0086C8.3932 15.009 8.26565 14.9565 8.17157 14.8627C8.07749 14.7689 8.02461 14.6415 8.02461 14.5086V13.2727C8.02461 13.1165 7.92918 12.7884 7.66976 12.4977C7.42694 12.2255 7.05222 12 6.49745 12C5.9448 12 5.59017 12.2234 5.36523 12.4884C5.12411 12.7724 5.0343 13.1023 5.0343 13.2727V14.5C5.0343 14.7761 4.81044 15 4.5343 15H1.5C1.22386 15 1 14.7761 1 14.5V4.50861C1 4.23247 1.22386 4.00861 1.5 4.00861H4.03429V3.27273C4.03429 2.85223 4.21696 2.29579 4.60286 1.84119Z"/>
</svg>
</template>
<template id="icon-plus-puzzle">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 8.97021C4.22386 8.97021 4 9.19407 4 9.47021C4 9.74636 4.22386 9.97021 4.5 9.97021H6.01123V11.5C6.01123 11.7761 6.23509 12 6.51123 12C6.78737 12 7.01123 11.7761 7.01123 11.5V9.97021H8.5C8.77614 9.97021 9 9.74636 9 9.47021C9 9.19407 8.77614 8.97021 8.5 8.97021H7.01123V7.5C7.01123 7.22386 6.78737 7 6.51123 7C6.23509 7 6.01123 7.22386 6.01123 7.5V8.97021H4.5Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.49743 1C5.6319 1 5.00495 1.36753 4.60286 1.84119C4.21696 2.29579 4.03429 2.85223 4.03429 3.27273V4.00861H1.5C1.22386 4.00861 1 4.23247 1 4.50861V10.9545C1 12.5357 1.67001 13.5722 2.53739 14.1967C3.37928 14.8028 4.37453 15 5.04545 15H11.5125C11.7886 15 12.0125 14.7761 12.0125 14.5V11.9936H12.7273C13.1531 11.9936 13.7103 11.8011 14.1624 11.41C14.6333 11.0025 15 10.3712 15 9.50642C15 8.64268 14.6343 8.00572 14.1667 7.59172C13.7177 7.19422 13.1597 6.98937 12.7273 6.98937H12.0125V4.50861C12.0125 4.23247 11.7886 4.00861 11.5125 4.00861H9.0246V3.27273C9.0246 2.83807 8.81554 2.27978 8.41592 1.83189C7.9997 1.36541 7.36085 1 6.49743 1ZM5.03429 3.27273C5.03429 3.10232 5.12409 2.7724 5.36522 2.48835C5.59016 2.22337 5.94479 2 6.49743 2C7.0522 2 7.42692 2.2255 7.66975 2.49765C7.92916 2.7884 8.02459 3.11648 8.02459 3.27273V4.50861C8.02459 4.78476 8.24845 5.00861 8.52459 5.00861H11.0125V7.48937C11.0125 7.76551 11.2363 7.98937 11.5125 7.98937H12.7273C12.8857 7.98937 13.2141 8.08395 13.5038 8.34043C13.7748 8.58042 14 8.95199 14 9.50642C14 10.0599 13.7758 10.4221 13.5081 10.6537C13.2215 10.9016 12.8923 10.9936 12.7273 10.9936H11.5125C11.2363 10.9936 11.0125 11.2175 11.0125 11.4936V14H5.04545C4.53456 14 3.75708 13.8426 3.1217 13.3851C2.51181 12.946 2 12.2098 2 10.9545V5.00861H4.53429C4.81043 5.00861 5.03429 4.78476 5.03429 4.50861V3.27273Z" />
</svg>
</template>
<template id="icon-collapse-scheme">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.9952 2.54249V4.99715H15.0024V6.99547H14.0027V6.00319H2.00561L2.00561 6.99547H1.00586L1.00586 6.00319H1.00244V2.54249C1.00244 1.69346 1.62932 1.00439 2.40172 1.00439H13.596C14.3684 1.00439 14.9952 1.69346 14.9952 2.54249ZM13.9955 5.00403H2.00561V4.99715H2.0022V2.54249C2.0022 2.15367 2.26888 2.00356 2.40172 2.00356H13.596C13.7288 2.00356 13.9955 2.15366 13.9955 2.54249V5.00403Z"
/>
<path
d="M1.00625 14.0052H3.00537L3.00498 15.0044H1.50732C1.37433 15.0044 1.24678 14.938 1.15273 14.8198C1.05869 14.7016 1.00586 14.5412 1.00586 14.3741L1.00625 14.0052Z"
/>
<path
d="M13.0029 13.9964H15.0021L15.0024 14.3653C15.0024 14.5325 14.9496 14.6928 14.8556 14.811C14.7615 14.9292 14.634 14.9956 14.501 14.9956H13.0033L13.0029 13.9964Z"
/>
<path d="M1.00586 11.0039L1.00586 13.0022H2.00561L2.00561 11.0039H1.00586Z"/>
<path d="M14.0027 13.0022V11.0039H15.0024V13.0022H14.0027Z"/>
<path d="M1.00586 7.99464L1.00586 9.99296H2.00561L2.00561 7.99464H1.00586Z"/>
<path d="M14.0027 7.99464V9.99296H15.0024V7.99464H14.0027Z"/>
<path d="M6.00464 14.0052H4.00513L4.00513 15.0044H6.00464V14.0052Z"/>
<path d="M7.00439 14.0052H9.00391V15.0044H7.00439V14.0052Z"/>
<path d="M12.0032 14.0052H10.0037V15.0044H12.0032V14.0052Z"/>
</svg>
</template>
`,Se=`
<style>
@-webkit-keyframes spin-500 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@keyframes spin-500 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
:host {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: var(--ksl-icon-width, 0px);
height: var(--ksl-icon-height, 0px);
}
.spin-500 {
animation-direction: normal;
animation-delay: 0s;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: spin-500;
animation-timing-function: linear;
transform-origin: center;
}
</style>
`,D=class D extends Z{constructor(){super();a(this,"iconRef");a(this,"getTemplateByIconName",e=>{if(!e)return null;const o=D.icons.content.querySelector(`template#${e}`);return o instanceof HTMLTemplateElement?o:null});a(this,"updateIcon",e=>{if(!this.shadowRoot)return;const o=this.getTemplateByIconName(e);if(o){const i=o.content.cloneNode(!0);this.iconRef?this.shadowRoot.replaceChild(i,this.iconRef):this.shadowRoot.appendChild(i),this.iconRef=this.shadowRoot.lastElementChild}else this.iconRef&&(this.iconRef.remove(),this.iconRef=null)});x(this.shadowRoot,'Shadow root must be always accessible in "open" mode.');const e=this.getAttribute("icon-name"),o=this.getTemplateByIconName(e);if(o){const i=o.content.cloneNode(!0);this.shadowRoot.appendChild(i),this.iconRef=this.shadowRoot.lastElementChild}else this.iconRef=null}static get is(){return"ksl-icon"}static get icons(){if(!D._icons){const e=document.createElement("template");e.innerHTML=Te,D._icons=e}return D._icons}static get observedAttributes(){return["icon-name"]}get iconName(){return this.getAttribute("icon-name")}set iconName(e){this.updateAttribute("icon-name",e)}static initializeTemplate(){return T(Se)}attributeChangedCallback(e,o,i){e==="icon-name"&&this.updateIcon(i)}};a(D,"_icons",null);let kt=D;var j=(t=>(t.Primary="primary",t.Quinary="quinary",t))(j||{});const Be=`
<style>
:host,
:host * {
box-sizing: border-box;
}
:host {
display: block;
}
:host([hidden]) {
display: none;
}
:host(:focus) {
outline: none;
}
.ksl-button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: none;
cursor: pointer;
}
.ksl-button:focus {
outline: none;
}
:host([disabled]) .ksl-button {
cursor: not-allowed;
}
.ksl-button__content,
:host([loading]) .ksl-button__loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ksl-button__loader,
:host([loading]) .ksl-button__content {
display: none;
}
:host([type=primary]) .ksl-button {
--ksl-icon-width: 18px;
--ksl-icon-height: 18px;
min-width: 40px;
max-width: 40px;
min-height: 40px;
max-height: 40px;
border-radius: 5000px;
box-shadow: var(--ksl-shadow-primary, ${K.Primary});
background-color: var(--ksl-color-primary, ${y.Primary});
color: var(--ksl-color-text-secondary, ${y.TextSecondary});
fill: var(--ksl-color-text-secondary, ${y.TextSecondary});
}
:host([type=primary]:not([disabled])) .ksl-button:hover,
:host([type=primary]:not([disabled])) .ksl-button:active {
background-color: var(--ksl-color-primary-hover, ${y.PrimaryHover});
}
:host([type=primary][disabled]) .ksl-button {
background-color: var(--ksl-color-background-default-disabled, ${y.BackgroundDefaultDisabled});
color: var(--ksl-color-text-default-disabled, ${y.TextDefaultDisabled});
fill: var(--ksl-color-text-default-disabled, ${y.TextDefaultDisabled});
box-shadow: none;
}
:host([type=primary][loading]) .ksl-button {
color: var(--ksl-color-primary, ${y.Primary});
fill: var(--ksl-color-primary, ${y.Primary});
box-shadow: none;
}
:host([type=quinary]) .ksl-button {
--ksl-icon-width: 16px;
--ksl-icon-height: 16px;
border-radius: 5px;
padding: 0;
min-height: 24px;
min-width: 24px;
max-height: 24px;
max-width: 24px;
color: var(--ksl-color-text-default, ${y.TextDefault});
fill: var(--ksl-color-text-default, ${y.TextDefault});
background-color: var(--ksl-color-background-default, ${y.BackgroundDefault});
}
:host([type=quinary][disabled]) .ksl-button {
color: var(--ksl-color-text-default-disabled, ${y.TextDefaultDisabled});
fill: var(--ksl-color-text-default-disabled, ${y.TextDefaultDisabled});
}
:host([type=quinary]:not([disabled])) .ksl-button:hover {
background-color: var(--ksl-color-background-default-hover, ${y.BackgroundDefaultHover});
}
:host([type=quinary]:not([disabled])) .ksl-button:active {
background-color: var(--ksl-color-background-default-selected, ${y.BackgroundDefaultSelected});
}
</style>
<button class="ksl-button">
<div class="ksl-button__content">
<slot></slot>
</div>
<ksl-icon icon-name="${_.Spinner}" class="ksl-button__loader" />
</button>
`;class qt extends jt{constructor(){super();a(this,"handleClick",e=>{this.disabled&&(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation())});x(this.shadowRoot,'Shadow root must be always accessible in "open" mode.')}static get is(){return"ksl-button"}static get observedAttributes(){return[...jt.observedAttributes,"loading"]}get loading(){return this.hasAttribute("loading")}set loading(e){this.updateAttribute("loading",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){this.updateAttribute("disabled",e)}static initializeTemplate(){return T(Be)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick,{capture:!0})}attributeChangedCallback(e,o,i){if(super.attributeChangedCallback(e,o,i),e==="loading"){const s=!!i;this.disabled=s,this.tooltipDisabled=s}}}const Me=`
<style>
:host,
:host * {
box-sizing: border-box;
}
:host {
display: block;
position: absolute;
pointer-events: none;
touch-action: none;
min-height: 40px;
min-width: 40px;
width: 100%;
height: 100%;
border: 2px dashed;
border-color: var(--ksl-color-primary-transparent, ${y.PrimaryTransparent});
border-radius: 5px;
}
:host([hidden]) {
display: none;
}
:host(:hover),
:host([selected]) {
border-color: var(--ksl-color-primary, ${y.Primary});
z-index: calc(var(--ksl-z-index, ${F}) + 10);
}
:host(:focus) {
outline: none;
}
.ksl-highlight__toolbar {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
pointer-events: all;
touch-action: auto;
min-height: 40px;
max-height: 40px;
border-radius: 8px;
background-color: var(--ksl-color-background-default, ${y.BackgroundDefault});
z-index: var(--ksl-z-index, ${F});
padding: 8px;
box-shadow: var(--ksl-shadow-default, ${K.Default});
}
.ksl-highlight__toolbar:hover {
z-index: calc(var(--ksl-z-index, ${F}) + 10);
}
.ksl-highlight__toolbar-button + .ksl-highlight__toolbar-button {
margin-left: 4px;
}
</style>
<div id="ksl-toolbar" class="ksl-highlight__toolbar">
<ksl-button
id="ksl-edit"
class="ksl-highlight__toolbar-button"
type="${j.Quinary}"
tooltip-position="${l.BottomEnd}"
>
<ksl-icon icon-name="${_.Edit}" />
</ksl-button>
</div>
`;class st extends vt{constructor(){super();a(this,"editButtonRef");a(this,"attachTo",e=>{this.unregisterTargetNodeListeners(),super.attachTo(e);const o=this.type;this.hidden=o===I.None,this.editButtonRef.tooltipMessage=st.getEditButtonTooltip(o),this.targetRef&&(this.targetRef.addEventListener("mousemove",this.handleTargetNodeMouseEnter),this.targetRef.addEventListener("mouseleave",this.handleTargetNodeMouseLeave),this.targetRef.addEventListener("click",this.handleEditButtonClick))});a(this,"adjustPosition",()=>{if(!this.targetRef||!this.offsetParent)return;this.offsetParent instanceof G||N("KSLHighlightElement: should be located inside KSLContainerElement to be positioned properly.");const e=this.offsetParent.getBoundingClientRect(),o=this.targetRef.getBoundingClientRect();this.style.top=`${o.top-e.top}px`,this.style.left=`${o.left-e.left}px`,this.style.width=`${o.width}px`,this.style.height=`${o.height}px`});a(this,"unregisterTargetNodeListeners",()=>{this.targetRef&&(this.targetRef.removeEventListener("mousemove",this.handleTargetNodeMouseEnter),this.targetRef.removeEventListener("mouseleave",this.handleTargetNodeMouseLeave),this.targetRef.removeEventListener("click",this.handleEditButtonClick))});a(this,"handleTargetNodeMouseEnter",()=>{this.selected=!0});a(this,"handleTargetNodeMouseLeave",()=>{this.selected=!1});a(this,"handleEditButtonClick",e=>{x(this.targetRef,"Target node is not set for this highlight."),e.preventDefault(),e.stopPropagation();const o=ye(this.targetRef);this.dispatchEditEvent(o)});a(this,"dispatchEditEvent",e=>{x(this.targetRef,"Target node is not set for this highlight element.");const o=new CustomEvent("ksl:highlight:edit",{detail:{data:e,targetNode:this.targetRef}});this.dispatchEvent(o)});x(this.shadowRoot,'Shadow root must be always accessible in "open" mode.'),this.editButtonRef=this.shadowRoot.querySelector("#ksl-edit")}static get is(){return"ksl-highlight"}get type(){return ct(this.targetRef)}get selected(){return this.hasAttribute("selected")}set selected(e){this.updateAttribute("selected",e)}static initializeTemplate(){return T(Me)}static getEditButtonTooltip(e){switch(e){case I.Element:return"Edit element";case I.ContentComponent:return"Edit component";case I.ContentItem:return"Edit item";case I.None:return"Edit"}}connectedCallback(){super.connectedCallback(),this.editButtonRef.addEventListener("click",this.handleEditButtonClick)}disconnectedCallback(){super.connectedCallback(),this.editButtonRef.removeEventListener("click",this.handleEditButtonClick),this.unregisterTargetNodeListeners()}}const _e=`
<style>
:host {
display: block;
position: absolute;
box-sizing: border-box;
top: 0;
right: 0;
left: 0;
bottom: 0;
pointer-events: none;
touch-action: none;
z-index: var(--ksl-z-index, ${F});
}
:host([clipped]) {
overflow: hidden;
}
</style>
<slot></slot>
`;class G extends Z{constructor(){super(...arguments);a(this,"_boundingClientRect",null);a(this,"createHighlightForElement",e=>{const o=document.createElement(st.is);return o.attachTo(e),this.appendChild(o),o});a(this,"createAddButtonForElement",e=>{const o=document.createElement(Zt.is);return o.attachTo(e),this.appendChild(o),o});a(this,"adjustPosition",()=>{const e=this.parentElement;if(!e)return;const o=Ot(e);if(!o.isPositioned){const[i,s]=Nt(e);this.style.height=`${e.clientHeight}px`,this.style.width=`${e.clientWidth}px`,this.style.top=`${e.offsetTop-i}px`,this.style.left=`${e.offsetLeft-s}px`,this.updateAttribute("clipped",!!o.isContentClipped)}this.getBoundingClientRect(!0)})}static get is(){return"ksl-container"}static initializeTemplate(){return T(_e)}getBoundingClientRect(e=!1){return(!this._boundingClientRect||e)&&(this._boundingClientRect=super.getBoundingClientRect()),this._boundingClientRect}}const De=`
<style>
:host {
--ksl-pop-up-arrow-size: 12px;
--ksl-pop-up-background-color: var(--ksl-color-background-default, ${y.BackgroundDefault});
--ksl-pop-up-border-radius: 4px;
--ksl-pop-up-box-shadow: var(--ksl-shadow-default, ${K.Default});;
--ksl-pop-up-color: var(--ksl-color-text-default, ${y.TextDefault});
--ksl-pop-up-padding: 8px;
}
</style>
`;class Ut extends it{static get is(){return"ksl-popover"}static initializeTemplate(){const n=it.initializeTemplate(),e=T(De);return n.content.appendChild(e.content.cloneNode(!0)),n}}const yt="Content is published",Wt="Insert...",Ve=t=>t?"Create new item":"Your role cannot create items from the allowed types",He=({elementType:t,isParentPublished:n,permissions:e})=>{const o=e.get(U.CreateNew)===W.Ok;return`
<style>
.ksl-add-button__popover-button + .ksl-add-button__popover-button {
margin-left: 4px;
}
</style>
<ksl-button
id="insert-linked-item"
class="ksl-add-button__popover-button"
type="${j.Quinary}"
tooltip-position="${l.Top}"
tooltip-message="${n?yt:"Insert existing item"}"
${n&&"disabled"}
>
<ksl-icon icon-name="${_.Puzzle}"/>
</ksl-button>
<ksl-button
id="create-linked-item"
class="ksl-add-button__popover-button"
type="${j.Quinary}"
tooltip-position="${l.Top}"
tooltip-message="${n?yt:Ve(o)}"
${(n||!o)&&"disabled"}
${t!==z.LinkedItems&&"hidden"}
>
<ksl-icon icon-name="${_.PlusPuzzle}"/>
</ksl-button>
<ksl-button
id="create-component"
class="ksl-add-button__popover-button"
type="${j.Quinary}"
tooltip-position="${l.Top}"
tooltip-message="${n?yt:"Insert new component"}"
${n&&"disabled"}
${t!==z.RichText&&"hidden"}
>
<ksl-icon icon-name="${_.CollapseScheme}"/>
</ksl-button>
`},ze=`
<style>
:host {
display: inline-block;
position: absolute;
z-index: calc(var(--ksl-z-index, ${F}) + 20);
pointer-events: all;
touch-action: initial;
}
:host(:focus) {
outline: none;
}
</style>
<ksl-button
type="${j.Primary}"
tooltip-position="${l.Top}"
>
<ksl-icon icon-name="${_.Plus}"/>
</ksl-button>
`;class Zt extends vt{constructor(){super();a(this,"buttonRef");a(this,"popoverRef",null);a(this,"adjustPosition",()=>{if(!this.targetRef||!this.offsetParent)return;this.offsetParent instanceof G||console.warn("KSLAddButtonElement: should be located inside KSLContainerElement to be positioned properly.");const e=this.offsetParent.getBoundingClientRect(),o=this.targetRef.getBoundingClientRect(),i=this.getBoundingClientRect(),s=this.calculateTopOffset(i,o),r=this.calculateLeftOffset(i,o);this.style.top=`${o.top-e.top+s}px`,this.style.left=`${o.left-e.left+r}px`});a(this,"handleClick",async e=>{if(this.popoverRef)return;x(this.targetRef,"Target node is not set for this add button."),e.preventDefault(),e.stopPropagation(),this.buttonRef.loading=!0;const o=Vt(this.targetRef);try{const i={data:o,targetNode:this.targetRef},s=await this.dispatchAsyncEvent("ksl:add-button:initial",i),{permissions:r}=s,d=r.get(U.ViewParent)!==W.Ok||r.get(U.Edit)!==W.Ok,h=r.get(U.CreateNew)===W.RteWithForbiddenComponents;d||h?(this.buttonRef.loading=!1,this.buttonRef.disabled=!0,this.buttonRef.tooltipMessage=d?"You are not allowed to add content here":"Components and items can't be added here"):(this.buttonRef.loading=!1,this.buttonRef.disabled=!1,this.buttonRef.tooltipMessage=Wt,this.displayPopover(s))}catch(i){O(i),this.buttonRef.loading=!1,this.buttonRef.disabled=!0,typeof i=="object"&&i!==null&&"message"in i&&typeof i.message=="string"?this.buttonRef.tooltipMessage=i.message:this.buttonRef.tooltipMessage="Something went wrong"}});a(this,"handleClickOutside",e=>{if(!this.popoverRef||!(e.target instanceof Element))return;this.isSameNode(e.target)||this.contains(e.target)||this.dismissPopover()});a(this,"displayPopover",e=>{x(this.shadowRoot,'Shadow root must be available in "open" mode.'),this.popoverRef&&this.dismissPopover(),this.buttonRef.tooltipPosition=l.Bottom;const o=document.createElement(Ut.is);o.innerHTML=He(e);const i=this.shadowRoot;this.popoverRef=i.appendChild(o),this.popoverRef.position=l.Top,this.popoverRef.attachTo(this),this.addPopoverEventListeners(e.elementType),this.popoverRef.visible=!0,this.popoverRef.adjustPosition()});a(this,"dismissPopover",()=>{this.buttonRef.tooltipPosition=l.Top,this.popoverRef&&(this.removePopoverEventListeners(),this.popoverRef.visible=!1,this.popoverRef.remove(),this.popoverRef=null)});a(this,"addPopoverEventListeners",e=>{if(!this.popoverRef)return;const o=this.popoverRef.querySelector("#create-component"),i=this.popoverRef.querySelector("#create-linked-item"),s=this.popoverRef.querySelector("#insert-linked-item");o&&e===z.RichText&&o.addEventListener("click",r=>{this.handleCreateComponentClick(r)}),i&&e===z.LinkedItems&&i.addEventListener("click",r=>{this.handleCreateLinkedItemClick(r)}),s&&s.addEventListener("click",r=>{this.handleInsertLinkedItemClick(r)})});a(this,"removePopoverEventListeners",()=>{if(!this.popoverRef)return;const e=this.popoverRef.querySelector("#create-component"),o=this.popoverRef.querySelector("#create-linked-item"),i=this.popoverRef.querySelector("#insert-linked-item");e&&e.removeEventListener("click",this.handleCreateComponentClick),o&&o.removeEventListener("click",this.handleCreateLinkedItemClick),i&&i.removeEventListener("click",this.handleInsertLinkedItemClick)});a(this,"handleCreateComponentClick",e=>{this.handleAddActionClick(e,X.CreateComponent)});a(this,"handleCreateLinkedItemClick",e=>{this.handleAddActionClick(e,X.CreateLinkedItem)});a(this,"handleInsertLinkedItemClick",e=>{this.handleAddActionClick(e,X.InsertLinkedItem)});a(this,"handleAddActionClick",(e,o)=>{x(this.targetRef,"Target node is not set for this add button."),e.preventDefault(),e.stopPropagation();const i=Vt(this.targetRef),s=new CustomEvent("ksl:add-button:action",{detail:{data:{...i,action:o},targetNode:this.targetRef}});this.dismissPopover(),this.dispatchEvent(s)});x(this.shadowRoot,'Shadow root must be available in "open" mode.'),this.buttonRef=this.shadowRoot.querySelector(qt.is)}static get is(){return"ksl-add-button"}get position(){var e;return((e=this.targetRef)==null?void 0:e.getAttribute(L.AddButtonRenderPosition))??l.Bottom}static initializeTemplate(){return T(ze)}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this.handleClickOutside,{capture:!0}),this.buttonRef.addEventListener("click",e=>{this.handleClick(e)}),this.buttonRef.tooltipMessage=Wt}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("click",this.handleClickOutside,{capture:!0}),this.buttonRef.removeEventListener("click",e=>{this.handleClick(e)}),this.dismissPopover()}calculateTopOffset(e,o){const i=super.calculateTopOffset(e,o);switch(this.position){case l.TopStart:case l.Top:case l.TopEnd:return i/2;case l.BottomStart:case l.Bottom:case l.BottomEnd:return i-e.height/2;case l.Left:case l.LeftEnd:case l.LeftStart:case l.None:case l.Right:case l.RightEnd:case l.RightStart:return i}}calculateLeftOffset(e,o){const i=super.calculateLeftOffset(e,o);switch(this.position){case l.LeftStart:case l.Left:case l.LeftEnd:return i/2;case l.RightStart:case l.Right:case l.RightEnd:return o.width-e.width/2;case l.Bottom:case l.BottomEnd:case l.BottomStart:case l.None:case l.Top:case l.TopEnd:case l.TopStart:return i}}}const Kt=[kt,qt,Zt,st,G,Ft,Ut],Oe=Kt.map(t=>t.is);function Ne(){const t=Kt.map(async n=>await n.define());return Promise.all(t)}function Ct(t){return Oe.includes(t.tagName.toLowerCase())}class Fe{constructor(n){a(this,"defaultContainer");a(this,"containerByRenderingRoot");a(this,"highlightByElement");a(this,"addButtonByElement");a(this,"render",(n,e)=>{if(e.size===0){this.clear();return}const{newAddButtonByElement:o,newHighlightByElement:i}=this.processVisibleElements(n,this.addButtonByElement,this.highlightByElement);for(const[s,r]of i)e.has(s)||(r.remove(),i.delete(s));for(const[s,r]of o)e.has(s)||(r.remove(),o.delete(s));for(const[s,r]of this.containerByRenderingRoot.entries())r.children.length===0&&(r.remove(),this.containerByRenderingRoot.delete(s));this.highlightByElement=i,this.addButtonByElement=o});a(this,"destroy",()=>{this.clear(),this.defaultContainer.remove()});a(this,"clear",()=>{for(const[,n]of this.addButtonByElement.entries())n.remove();for(const[,n]of this.highlightByElement.entries())n.remove();for(const[,n]of this.containerByRenderingRoot.entries())n.remove();this.highlightByElement=new Map,this.containerByRenderingRoot=new Map,this.addButtonByElement=new Map,this.defaultContainer.innerHTML=""});a(this,"processVisibleElements",(n,e,o)=>{const i=Ae(n);return Array.from(i.entries()).reduce((s,[r,d])=>{const h=this.createContainerIfNotExist(r);h.adjustPosition();for(const m of d){if(!(m.offsetHeight===0||m.offsetWidth===0)&&Pt(m,this.configuration)){const p=s.newHighlightByElement.get(m)??h.createHighlightForElement(m);p.adjustPosition(),s.newHighlightByElement.set(m,p)}if(xt(m,this.configuration)){const p=s.newAddButtonByElement.get(m)??h.createAddButtonForElement(m);p.adjustPosition(),s.newAddButtonByElement.set(m,p)}}return s},{newAddButtonByElement:new Map(e),newHighlightByElement:new Map(o)})});a(this,"createContainerIfNotExist",n=>{if(!n||n===document.body)return this.defaultContainer;const e=this.containerByRenderingRoot.get(n);if(e)return e;const o=document.createElement(G.is);return n.appendChild(o),this.containerByRenderingRoot.set(n,o),o});this.configuration=n,this.containerByRenderingRoot=new Map,this.highlightByElement=new Map,this.addButtonByElement=new Map,this.defaultContainer=je()}}const je=()=>{const t=document.createElement(G.is);return window.document.body.appendChild(t),t};class qe{constructor(n,e){a(this,"mutationObserver");a(this,"intersectionObserver");a(this,"renderer");a(this,"enabled",!1);a(this,"renderingTimeoutId",0);a(this,"observedElements",new Set);a(this,"visibleElements",new Set);a(this,"toggle",n=>{n??!this.enabled?this.enable():this.disable()});a(this,"enable",()=>{this.enabled||(this.startRenderingInterval(),this.listenToGlobalEvents(),this.observeDomMutations(),this.enabled=!0)});a(this,"disable",()=>{this.enabled&&(this.stopRenderingInterval(),this.unlistenToGlobalEvents(),this.disconnectObservers(),this.renderer.clear(),this.enabled=!1)});a(this,"destroy",()=>{this.disable(),this.renderer.destroy()});a(this,"augmentVisibleElements",()=>{requestAnimationFrame(()=>{this.renderer.render(this.visibleElements,this.observedElements)})});a(this,"startRenderingInterval",()=>{this.renderingTimeoutId=window.setInterval(this.augmentVisibleElements,1e3)});a(this,"stopRenderingInterval",()=>{this.renderingTimeoutId&&(clearInterval(this.renderingTimeoutId),this.renderingTimeoutId=0)});a(this,"listenToGlobalEvents",()=>{window.addEventListener("ksl:add-button:initial",this.onAddInitialClick,{capture:!0}),window.addEventListener("ksl:add-button:action",this.onAddActionClick,{capture:!0}),window.addEventListener("ksl:highlight:edit",this.onEditElement,{capture:!0})});a(this,"unlistenToGlobalEvents",()=>{window.removeEventListener("ksl:add-button:initial",this.onAddInitialClick,{capture:!0}),window.removeEventListener("ksl:add-button:action",this.onAddActionClick,{capture:!0}),window.removeEventListener("ksl:highlight:edit",this.onEditElement,{capture:!0})});a(this,"observeDomMutations",()=>{this.enabled||(this.mutationObserver.observe(window.document.body,{childList:!0,subtree:!0}),ht(document,this.configuration).forEach(n=>{n instanceof HTMLElement&&this.observeElementVisibility(n)}))});a(this,"disconnectObservers",()=>{this.mutationObserver.disconnect(),this.intersectionObserver.disconnect(),this.observedElements.forEach(n=>{this.unobserveElementVisibility(n)}),this.observedElements=new Set,this.visibleElements=new Set});a(this,"observeElementVisibility",n=>{this.observedElements.has(n)||(this.intersectionObserver.observe(n),this.observedElements.add(n))});a(this,"unobserveElementVisibility",n=>{this.observedElements.has(n)&&(this.intersectionObserver.unobserve(n),this.observedElements.delete(n),this.visibleElements.delete(n))});a(this,"onDomMutation",n=>{const e=n.filter(Ue);for(const o of e){for(const i of o.addedNodes)if(i instanceof HTMLElement){At(i,this.configuration)&&this.observeElementVisibility(i);for(const s of ht(i,this.configuration))s instanceof HTMLElement&&this.observeElementVisibility(s)}for(const i of o.removedNodes)if(i instanceof HTMLElement){At(i,this.configuration)&&this.unobserveElementVisibility(i);for(const s of ht(i,this.configuration))s instanceof HTMLElement&&this.unobserveElementVisibility(s)}}e.length>0&&this.augmentVisibleElements()});a(this,"onElementVisibilityChange",n=>{const e=n.filter(o=>o.target instanceof HTMLElement);for(const o of e){const i=o.target;o.isIntersecting?this.visibleElements.add(i):this.visibleElements.delete(i)}e.length>0&&this.augmentVisibleElements()});a(this,"onEditElement",n=>{const e=H(this.configuration),{data:o,targetNode:i}=n.detail,s={elementRect:i.getBoundingClientRect()},r=be(o,this.configuration);if(r.type==="error"){O(`Required attribute was not found: ${r.missing[0]}. Skipped parsing these attributes: ${r.missing.slice(1).join(", ")}`),O("Debug info: ",r.debug),O("Skipping edit button click");return}if(r.type==="element")if(e)this.iframeCommunicator.sendMessage($.ElementClicked,r.data,s);else{const d=Tt({environmentId:r.data.projectId,languageCodename:r.data.languageCodename,itemId:r.data.itemId,elementCodename:r.data.elementCodename});window.open(d,"_blank")}else if(r.type==="contentComponent")e?this.iframeCommunicator.sendMessage($.ContentComponentClicked,r.data,s):N("Edit buttons for content components are only functional inside Web Spotlight.");else if(e)this.iframeCommunicator.sendMessage($.ContentItemClicked,r.data,s);else{const d=Y({environmentId:r.data.projectId,languageCodename:r.data.languageCodename,itemId:r.data.itemId});window.open(d,"_blank")}});a(this,"onAddInitialClick",n=>{const e=H(this.configuration),{eventData:o,onResolve:i,onReject:s}=n.detail,{data:r,targetNode:d}=o,h={elementRect:d.getBoundingClientRect()};console.log("data",r);const m=Dt(r,this.configuration);if(!m.success){const[c,...p]=m.missing;s({message:`Could not find required data attribute: '${c}'.${p.length>0?` All attributes higher in hierarchy were never searched for: [${p.join(", ")}]`:""}`});return}if(!e){s({message:"Add buttons are only functional inside Web Spotlight"});return}this.iframeCommunicator.sendMessageWithResponse($.AddInitial,m.data,c=>!c||c.elementType===z.Unknown?(console.log("response",JSON.stringify(c)),s({message:"Something went wrong"})):i(c),h)});a(this,"onAddActionClick",n=>{const e=H(this.configuration),{data:o,targetNode:i}=n.detail,s={elementRect:i.getBoundingClientRect()},r=Dt(o,this.configuration);if(r.success){if(!e){N("Add buttons are only functional inside Web Spotlight.");return}this.iframeCommunicator.sendMessage($.AddAction,{...r.data,action:o.action},s)}});if(this.iframeCommunicator=n,this.configuration=e,typeof window>"u"||typeof MutationObserver>"u"||typeof IntersectionObserver>"u")throw new B("NodeSmartLinkProvider can only be initialized in a browser environment.");this.mutationObserver=new MutationObserver(this.onDomMutation),this.intersectionObserver=new IntersectionObserver(this.onElementVisibilityChange),this.renderer=new Fe(this.configuration)}}const Ue=t=>{const n=t.type==="childList",e=t.target instanceof HTMLElement&&!Ct(t.target);if(!n||!e)return!1;const o=Array.from(t.addedNodes).some(s=>s instanceof HTMLElement&&!Ct(s)),i=Array.from(t.removedNodes).some(s=>s instanceof HTMLElement&&!Ct(s));return o||i},Gt=(t,n,e)=>{var i;const o=((i=t.get(n))==null?void 0:i.add(e))??new Set([e]);t.set(n,o)},Qt=(t,n,e)=>{var o;(o=t.get(n))==null||o.delete(e)},wt=(t,n,...e)=>{const o=t.get(n);o&&o.size>0&&o.forEach(i=>{i(...e)})},We=()=>window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16);class Ze{constructor(){a(this,"events",new Map);a(this,"callbacks",new Map);a(this,"sendMessageWithResponse",(n,e,o,i)=>{const s=We();o&&this.callbacks.set(s,o),this.sendMessage(n,e,i,s)});a(this,"sendMessage",(n,e,o,i)=>{if(!w())throw new B("IFrameCommunicator: iframe message can only be send while inside iframe.");const s={type:n,data:e,metadata:o,requestId:i};window.parent.postMessage(s,"*")});a(this,"addMessageListener",(n,e)=>{Gt(this.events,n,e)});a(this,"removeMessageListener",(n,e)=>{Qt(this.events,n,e)});a(this,"onMessage",n=>{if(n.data===void 0)return;const e=n.data;wt(this.events,e.type,e.data,e.metadata),e.requestId!==void 0&&this.executeCallback(e.requestId,e.data)});a(this,"executeCallback",(n,e)=>{const o=this.callbacks.get(n);o&&(o(e),this.callbacks.delete(n))})}initialize(){if(typeof window>"u")throw new B("IFrameCommunicator can only be initialized in a browser environment.");window.addEventListener("message",this.onMessage,!0)}destroy(){this.events=new Map,window.removeEventListener("message",this.onMessage,!0)}}const Ke=1e3;function Ge(t){return new RegExp(`[?&]${t}([=&]|$)`,"i").test(window.location.search)}const Jt=(t,n)=>{let e=!1;const o=()=>{const s=Ge(t);e!==s&&(n(s),e=s)};o();const i=window.setInterval(o,Ke);return()=>{clearInterval(i)}};function Yt(){try{window.location.reload()}catch(t){O(t)}}const Et="Local storage is not available or access to local storage is denied for the current document. It may affect the proper work of the SDK.";function Qe(t){return{get(){try{const n=window.localStorage.getItem(t);return n!==null?JSON.parse(n):null}catch{return N(Et),null}},set(n){try{const e=JSON.stringify(n);window.localStorage.setItem(t,e)}catch{N(Et)}},remove(){try{window.localStorage.removeItem(t)}catch{N(Et)}}}}var Xt=(t=>(t.Refresh="refresh",t.Update="update",t))(Xt||{});class at{constructor(n){a(this,"configuration",V);a(this,"iframeCommunicator");a(this,"domSmartLinkManager");a(this,"events");a(this,"queryPresenceIntervalCleanup",null);a(this,"initialize",async()=>{await Ne();const n=this.configuration.debug?tt.Debug:tt.Info;St(n),this.configuration.queryParam?this.queryPresenceIntervalCleanup=Jt(this.configuration.queryParam,this.domSmartLinkManager.toggle):this.domSmartLinkManager.enable(),w()&&this.initializeIFrameCommunication()});a(this,"destroy",()=>{var n;this.events=new Map,(n=this.queryPresenceIntervalCleanup)==null||n.call(this),this.iframeCommunicator.destroy(),this.domSmartLinkManager.destroy()});a(this,"updateConfiguration",n=>{var e;n.queryParam!==void 0&&(n.queryParam===""?this.domSmartLinkManager.enable():n.queryParam!==this.configuration.queryParam&&((e=this.queryPresenceIntervalCleanup)==null||e.call(this),this.queryPresenceIntervalCleanup=Jt(n.queryParam,this.domSmartLinkManager.toggle))),n.debug===!0&&St(tt.Debug),Object.assign(this.configuration,n)});a(this,"on",(n,e)=>{Gt(this.events,n,e)});a(this,"off",(n,e)=>{Qt(this.events,n,e)});a(this,"initializeIFrameCommunication",()=>{this.iframeCommunicator.initialize();const e=at.getSettingsStorage().get(),o=e!==null?e.enabled:!0,i={enabled:o,languageCodename:this.configuration.defaultDataAttributes.languageCodename??null,projectId:this.configuration.defaultDataAttributes.environmentId??null,supportedFeatures:{previewIFrameCurrentUrlHandler:!0,refreshHandler:!0,updateHandler:!0}};this.iframeCommunicator.sendMessageWithResponse($.Initialized,i,()=>{var s;Object.assign(this.configuration,{isInsideWebSpotlight:!0}),(s=this.queryPresenceIntervalCleanup)==null||s.call(this),this.domSmartLinkManager.disable(),o&&this.domSmartLinkManager.enable(),this.iframeCommunicator.addMessageListener($.Status,this.handleStatusMessage),this.iframeCommunicator.addMessageListener($.RefreshPreview,this.handleRefreshMessage),this.iframeCommunicator.addMessageListener($.UpdatePreview,this.handleUpdateMessage),this.iframeCommunicator.addMessageListener($.PreviewIFrameCurrentUrl,this.handlePreviewIFrameCurrentUrlRequestMessage)})});a(this,"handleStatusMessage",n=>{this.domSmartLinkManager.toggle(n.enabled),at.getSettingsStorage().set({enabled:n.enabled})});a(this,"handleRefreshMessage",(n,e)=>{this.events.has("refresh")?wt(this.events,"refresh",n,e,Yt):Yt()});a(this,"handleUpdateMessage",n=>{wt(this.events,"update",n,void 0,void 0)});a(this,"handlePreviewIFrameCurrentUrlRequestMessage",()=>{const n={previewUrl:window.location.href};this.iframeCommunicator.sendMessage($.PreviewIFrameCurrentUrlResponse,n)});this.configuration={...this.configuration,...n},this.events=new Map,this.iframeCommunicator=new Ze,this.domSmartLinkManager=new qe(this.iframeCommunicator,this.configuration),this.initialize()}static getSettingsStorage(){return Qe("kontent-smart-link:iframe-settings")}}const A=class A{constructor(){a(this,"sdk",null);a(this,"destroy",()=>{var n;(n=this.sdk)==null||n.destroy(),this.sdk=null});a(this,"setConfiguration",n=>{if(this.sdk)this.sdk.updateConfiguration(n);else throw new q("KontentSmartLink is not initialized or has already been destroyed.")});a(this,"on",(n,e)=>{if(this.sdk)this.sdk.on(n,e);else throw new q("KontentSmartLink is not initialized or has already been destroyed.")});a(this,"off",(n,e)=>{if(this.sdk)this.sdk.off(n,e);else throw new q("KontentSmartLink is not initialized or has already been destroyed.")})}static initializeOnLoad(n){if(typeof window>"u")throw new B("KontentSmartLink can only be initialized in a browser environment.");return new Promise(e=>{window.addEventListener("load",()=>{e(A.initialize(n))})})}static initialize(n){var e;return A.instance??(A.instance=new A),(e=A.instance).sdk??(e.sdk=new at(n)),A.instance}};a(A,"instance",null);let rt=A;const Je=t=>({[g.EnvironmentId]:t}),Ye=t=>({[g.LanguageCodename]:t}),Xe=t=>({[g.ItemId]:t}),tn=t=>({[g.ComponentId]:t}),en=t=>({[g.ElementCodename]:t}),nn=()=>({[L.DisableFeatures]:"highlight"}),on=(t,n)=>({[L.AddButton]:!0,[g.AddButtonInsertPosition]:t,...n===void 0?{[L.AddButtonRenderPosition]:n}:{}}),sn=(t,n,e)=>({[L.AddButton]:!0,[g.AddButtonInsertPosition]:t,...e?{[L.AddButtonRenderPosition]:e}:{},...n.type==="item"?{[g.ItemId]:n.id}:{[g.ComponentId]:n.id}});var te;(function(t){class n{constructor(o,i){if(this.name=o,this.value=i,!o)throw Error("Name of the custom parameter is not specified")}getParam(){return this.name}getParamValue(){return this.value}}t.CustomParameter=n})(te||(te={}));var ee;(function(t){const n=",",e="",o=C=>{if(!C)return e;if(Array.isArray(C)){let u="";for(let v=0;v<C.length;v++)u=u+C[v].toString(),v!==C.length-1&&(u=u+n);return u}return C.toString()};class i{constructor(u){this.type=u}getParam(){return Array.isArray(this.type)?`system.type[in]=${o(this.type)}`:`system.type=${o(this.type)}`}}t.TypeFilter=i;class s{constructor(u){this.collection=u}getParam(){return Array.isArray(this.collection)?`system.collection[in]=${o(this.collection)}`:`system.collection=${o(this.collection)}`}}t.CollectionFilter=s;class r{constructor(u){this.element=u}getParam(){return`${this.element.trim()}[empty]`}}t.EmptyFilter=r;class d{constructor(u){this.element=u}getParam(){return`${this.element.trim()}[nempty]`}}t.NotEmptyFilter=d;class h{constructor(u,v){this.element=u,this.value=v}getParam(){return`${this.element.trim()}[eq]=${this.getParamValue()}`}getParamValue(){return this.value?this.value:e}}t.EqualsFilter=h;class m{constructor(u,v){this.element=u,this.value=v}getParam(){return`${this.element.trim()}[neq]=${this.getParamValue()}`}getParamValue(){return this.value?this.value:e}}t.NotEqualsFilter=m;class c{constructor(u,v){this.element=u,this.values=v}getParam(){return`${this.element.trim()}[all]=${this.getParamValue()}`}getParamValue(){return!this.values||!Array.isArray(this.values)?e:this.values.map(u=>u.trim()).join(",")}}t.AllFilter=c;class p{constructor(u,v){this.element=u,this.values=v}getParam(){return`${this.element.trim()}[any]=${this.getParamValue()}`}getParamValue(){return!this.values||!Array.isArray(this.values)?e:this.values.map(u=>u.trim()).join(",")}}t.AnyFilter=p;class E{constructor(u,v){this.element=u,this.values=v}getParam(){return`${this.element.trim()}[contains]=${this.getParamValue()}`}getParamValue(){return!this.values||!Array.isArray(this.values)?e:this.values.map(u=>u.trim()).join(",")}}t.ContainsFilter=E;class b{constructor(u,v){this.element=u,this.value=v}getParam(){return`${this.element.trim()}[gt]=${this.getParamValue()}`}getParamValue(){return this.value?this.value:e}}t.GreaterThanFilter=b;class Q{constructor(u,v){this.element=u,this.value=v}getParam(){return`${this.element.trim()}[gte]=${this.getParamValue()}`}getParamValue(){return this.value?this.value:e}}t.GreaterThanOrEqualFilter=Q;class En{constructor(u,v){this.element=u,this.values=v}getParam(){return`${this.element.trim()}[in]=${this.getParamValue()}`}getParamValue(){return!this.values||!Array.isArray(this.values)?e:this.values.map(u=>u.trim()).join(",")}}t.InFilter=En;class In{constructor(u,v){this.element=u,this.values=v}getParam(){return`${this.element.trim()}[nin]=${this.getParamValue()}`}getParamValue(){return!this.values||!Array.isArray(this.values)?e:this.values.map(u=>u.trim()).join(",")}}t.NotInFilter=In;class Rn{constructor(u,v){this.element=u,this.value=v}getParam(){return`${this.element.trim()}[lt]=${this.getParamValue()}`}getParamValue(){return this.value?this.value:e}}t.LessThanFilter=Rn;class $n{constructor(u,v){this.element=u,this.value=v}getParam(){return`${this.element.trim()}[lte]=${this.getParamValue()}`}getParamValue(){return this.value?this.value:e}}t.LessThanOrEqualFilter=$n;class Ln{constructor(u,v,An){this.element=u,this.lowerValue=v,this.higherValue=An}getParam(){return`${this.element.trim()}[range]=${this.getParamValue()}`}getParamValue(){let u=e,v=e;return this.lowerValue&&(u=this.lowerValue.toString()),this.higherValue&&(v=this.higherValue.toString()),`${u},${v}`}}t.RangeFilter=Ln})(ee||(ee={}));var ne;(function(t){const n="";class e{constructor(b,Q){if(this.name=b,this.value=Q,!b)throw Error("Name of the parameter is not specified")}getParam(){return`${this.name}=${this.value}`}}t.QueryParameter=e;class o{constructor(b){this.elementCodenames=b}getParam(){return`elements=${this.getParamValue()}`}getParamValue(){return this.elementCodenames?this.elementCodenames.map(b=>{if(!b)throw Error("Codename of 'ElementsParameter' cannot be null or empty");return b.trim()}).join(","):n}}t.ElementsParameter=o;class i{constructor(b){this.elementCodenames=b}getParam(){return`excludeElements=${this.getParamValue()}`}getParamValue(){return this.elementCodenames?this.elementCodenames.map(b=>{if(!b)throw Error("Codename of 'ExcludeElementsParameter' cannot be null or empty");return b.trim()}).join(","):n}}t.ExcludeElementsParameter=i;class s{constructor(b){if(this.limit=b,b<=0)throw Error("'LimitParameter' must specify a positive integer")}getParam(){return`limit=${this.limit}`}}t.LimitParameter=s;class r{constructor(){}getParam(){return"includeTotalCount=true"}}t.IncludeTotalCountParameter=r;class d{constructor(b){if(this.skip=b,b<0)throw Error(`'SkipParameter' must specify a positive integer number or zero."`)}getParam(){return`skip=${this.skip}`}}t.SkipParameter=d;class h{constructor(b,Q){if(this.element=b,this.sortOrder=Q,!b)throw Error("Element specified in 'OrderParameter' is null or empty")}getParam(){return`order=${this.getParamValue()}`}getParamValue(){return`${this.element.trim()}[${this.sortOrder}]`}}t.OrderParameter=h;class m{constructor(b){this.param=b}getParam(){return this.param}}t.CustomParameter=m;class c{constructor(b){if(this.depth=b,b<0)throw Error("'DepthParameter' must specify a positive integer or zero")}getParam(){return`depth=${this.depth}`}}t.DepthParameter=c;class p{constructor(b){this.languageCodename=b}getParam(){return`language=${this.languageCodename}`}}t.LanguageParameter=p})(ne||(ne={}));var f;(function(t){t.Text="text",t.Number="number",t.ModularContent="modular_content",t.Asset="asset",t.DateTime="date_time",t.RichText="rich_text",t.MultipleChoice="multiple_choice",t.UrlSlug="url_slug",t.Taxonomy="taxonomy",t.Custom="custom",t.Unknown="unknown"})(f||(f={}));const R=t=>({optionallyAsyncFnc:t}),S=(t,n)=>({optionallyAsyncFnc:e=>{const o=t.optionallyAsyncFnc(e);return o instanceof Promise?o.then(n):n(o)}}),an=(t,n)=>rn(S(t,n)),rn=t=>({optionallyAsyncFnc:n=>{const e=t.optionallyAsyncFnc(n);return e instanceof Promise?e.then(i=>i.optionallyAsyncFnc(n)):e.optionallyAsyncFnc(n)}}),It=t=>({optionallyAsyncFnc:n=>{const e=t.map(i=>i.optionallyAsyncFnc(n)),o=e.filter(i=>!(i instanceof Promise));return o.length===e.length?o:Promise.all(e.map(i=>i instanceof Promise?i:Promise.resolve(i)))}});function oe(t,n){return t.optionallyAsyncFnc(n??void 0)}const ln=(t,n)=>oe(lt(t,n),null),dn=async(t,n,e)=>Promise.resolve(oe(lt(t,n),e)),lt=(t,n,e=null,o=[])=>{const i=t.system.codename===n.item.codename&&t.system.language===n.variant.codename,s=!e&&i?{...t}:e,r=It(Object.entries(t.elements).map(([d,h])=>{const m=n.elements.find(c=>c.element.codename===d);if(i&&m)return S(un(h,m),c=>[d,c]);if(h.type===f.ModularContent||h.type===f.RichText){const c=h;return S(It(c.linkedItems.map(p=>(e==null?void 0:e.system.codename)===p.system.codename?R(()=>e):cn(o,p.system.codename,(e==null?void 0:e.system.codename)??null)?R(()=>p):lt(p,n,s,[...o,p.system.codename]))),p=>p.some((E,b)=>E!==c.linkedItems[b])?[d,{...c,linkedItems:p}]:[d,c])}return R(()=>[d,h])}));return S(r,d=>(s==null?void 0:s.system.codename)===t.system.codename?(s.elements=Object.fromEntries(d),s):d.some(([h,m])=>t.elements[h]!==m)?{...t,elements:Object.fromEntries(d)}:t)},cn=(t,n,e)=>{const o=t.indexOf(n);return o!==-1&&(!e||o>t.indexOf(e))},un=(t,n)=>{switch(n.type){case f.Text:case f.Number:case f.UrlSlug:return R(()=>pn(t,n));case f.ModularContent:return fn(t,n);case f.RichText:return gn(t,n);case f.MultipleChoice:return R(()=>Rt(t,n,(e,o)=>(e==null?void 0:e.codename)===(o==null?void 0:o.codename)));case f.DateTime:return R(()=>mn(t,n));case f.Asset:return R(()=>Rt(t,n,(e,o)=>(e==null?void 0:e.url)===(o==null?void 0:o.url)));case f.Taxonomy:return R(()=>Rt(t,n,(e,o)=>(e==null?void 0:e.codename)===(o==null?void 0:o.codename)));case f.Custom:return R(()=>hn(t,n));default:return R(()=>t)}},hn=(t,n)=>typeof t.value=="string"&&t.value!==n.data.value?{...t,value:n.data.value}:t,mn=(t,n)=>t.value===n.data.value&&t.displayTimeZone===n.data.displayTimeZone?t:{...t,value:n.data.value,displayTimeZone:n.data.displayTimeZone},pn=(t,n)=>t.value===n.data.value?t:{...t,value:n.data.value},Rt=(t,n,e)=>t.value.length===n.data.value.length&&t.value.every((o,i)=>e(o,n.data.value[i]))?t:{...t,value:n.data.value},fn=(t,n)=>yn(t.value,n.data.value)?R(()=>t):S(se(n.data.value,t.linkedItems),e=>({...t,value:n.data.value,linkedItems:e})),gn=(t,n)=>{if(ie(t,n.data))return R(()=>t);const e=S(se(n.data.linkedItemCodenames,n.data.linkedItems.filter(o=>!t.linkedItems.find(i=>i.system.codename===o.system.codename)).concat(t.linkedItems)),o=>({...t,value:n.data.value,linkedItemCodenames:n.data.linkedItemCodenames,links:n.data.links,images:n.data.images,linkedItems:o}));return an(e,o=>S(kn(n.data.linkedItems,o.linkedItems),i=>({...o,linkedItems:i})))},bn=(t,n)=>t.system.codename===n.system.codename&&t.system.language===n.system.language&&Object.entries(t.elements).every(([e,o])=>vn(o,n.elements[e])),vn=(t,n)=>{switch(t.type){case f.Text:case f.Number:case f.UrlSlug:return t.value===n.value;case f.MultipleChoice:{const e=t,o=n;return e.value.length===o.value.length&&e.value.every((i,s)=>{var r;return i.codename===((r=o.value[s])==null?void 0:r.codename)})}case f.DateTime:{const e=t,o=n;return e.value===o.value&&e.displayTimeZone===o.displayTimeZone}case f.RichText:return ie(t,n);case f.Taxonomy:{const e=t,o=n;return e.value.length===o.value.length&&e.value.every((i,s)=>i.codename===o.value[s].codename)}case f.Asset:{const e=t,o=n;return e.value.length===o.value.length&&e.value.every((i,s)=>i.url===o.value[s].url)}case f.ModularContent:{const e=t,o=n;return e.value.length===o.value.length&&e.value.every((i,s)=>i===o.value[s])}case f.Custom:return t.value===n.value;case f.Unknown:throw new Error}},ie=(t,n)=>t.value===n.value&&t.links.length===n.links.length&&t.links.every((e,o)=>e.codename===n.links[o].codename)&&t.images.length===n.images.length&&t.images.every((e,o)=>e.url===n.images[o].url)&&t.linkedItemCodenames.length===n.linkedItemCodenames.length&&t.linkedItemCodenames.every((e,o)=>e===n.linkedItemCodenames[o])&&t.linkedItems.length===n.linkedItems.length&&t.linkedItems.every((e,o)=>bn(e,n.linkedItems[o])),kn=(t,n)=>It(n.map(e=>{const o=t.find(i=>i.system.codename===e.system.codename);return o?lt(e,wn(o)):R(()=>e)})),se=(t,n)=>{const e=new Map(n.map(s=>[s.system.codename,s])),o=t.map(s=>e.get(s)??s),i=o.filter(ae);return S(R(async s=>s&&i.length?await s(i):[]),s=>{const r=new Map(s.map(d=>[d.system.codename,d]));return o.map(d=>ae(d)?r.get(d)??null:d).filter(Cn)})},yn=(t,n)=>t.length===n.length&&t.every((e,o)=>e===n[o]),Cn=t=>t!==null,ae=t=>typeof t=="string",wn=t=>({variant:{codename:t.system.language},item:{codename:t.system.codename},elements:Object.entries(t.elements).map(([n,e])=>{switch(e.type){case f.Number:case f.UrlSlug:case f.MultipleChoice:case f.Custom:case f.Asset:case f.Text:return{element:{codename:n},type:e.type,data:e};case f.DateTime:return{element:{codename:n},type:e.type,data:e};case f.RichText:return{element:{codename:n},type:e.type,data:e};case f.Taxonomy:return{element:{codename:n},type:e.type,data:e};case f.ModularContent:return{element:{codename:n},type:e.type,data:e};case f.Unknown:throw new Error(`Cannot update element of type ${e.type}.`);default:throw new Error("Unknown element type")}})});k.ElementPositionOffset=l,k.KontentSmartLink=rt,k.KontentSmartLinkEvent=Xt,k.applyUpdateOnItem=ln,k.applyUpdateOnItemAndLoadLinkedItems=dn,k.buildKontentElementLink=Tt,k.buildKontentItemLink=Y,k.createComponentDataAttribute=tn,k.createDisableFeaturesDataAttribute=nn,k.createElementCodenameDataAttribute=en,k.createEnvironmentDataAttribute=Je,k.createFixedAddButtonDataAttributes=on,k.createItemDataAttribute=Xe,k.createLanguageDataAttribute=Ye,k.createRelativeAddButtonSmartLink=sn,k.default=rt,Object.defineProperties(k,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
//# sourceMappingURL=kontent-smart-link.min.js.map