@storyblok/js 6.3.0 → 6.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -8
- package/dist/index.cjs +180 -0
- package/dist/index.d.cts +82 -0
- package/dist/index.d.mts +82 -0
- package/dist/index.mjs +127 -0
- package/package.json +45 -39
- package/dist/api.d.ts +0 -3
- package/dist/bridge.d.ts +0 -1
- package/dist/editable.d.ts +0 -10
- package/dist/index-CtMAhUF-.js +0 -576
- package/dist/index.d.ts +0 -17
- package/dist/storyblok-js.js +0 -216
- package/dist/storyblok-js.mjs +0 -108
- package/dist/types/index.d.ts +0 -58
package/dist/storyblok-js.js
DELETED
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* name: @storyblok/js
|
|
3
|
-
* (c) 2026
|
|
4
|
-
* description: SDK to integrate Storyblok into your project using JavaScript.
|
|
5
|
-
* author: undefined
|
|
6
|
-
*/
|
|
7
|
-
(function(a,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("storyblok-js-client"),require("@storyblok/richtext")):typeof define=="function"&&define.amd?define(["exports","storyblok-js-client","@storyblok/richtext"],m):(a=typeof globalThis<"u"?globalThis:a||self,m(a.storyblok={},a.StoryblokClient,a.StoryblokRichtext))})(this,(function(a,m,E){"use strict";let v=!1,p;const _=[],M=()=>typeof window>"u"?Promise.reject(new Error("Cannot load Storyblok bridge: window is undefined (server-side environment)")):(window.storyblokRegisterEvent=o=>{if(!window.location.search.includes("_storyblok")){console.warn("You are not in Draft Mode or in the Visual Editor.");return}v?o():_.push(o)},v?Promise.resolve():p||(p=Promise.resolve().then(()=>ae).then(({default:o})=>{window.StoryblokBridge=o,_.forEach(e=>e()),v=!0}).catch(o=>{throw p=void 0,o}),p)),L=(o={})=>{const{apiOptions:e}=o;if(!e||!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new m(e)}},P=o=>{if(typeof o!="object"||typeof o._editable!="string")return{};try{const e=JSON.parse(o._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return e?{"data-blok-c":JSON.stringify(e),"data-blok-uid":`${e.id}-${e.uid}`}:{}}catch{return{}}};function R(o){const{language:e,resolveRelations:t,...n}=o;return e&&console.warn("[Storyblok] The `language` bridge option is no longer supported by the bundled bridge. Language context is now passed automatically by the Visual Editor via the `_storyblok_lang` URL parameter."),{...n,...t!==void 0&&{resolveRelations:Array.isArray(t)?t:[t]}}}const w=(o,e,t={})=>{var l;const i=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",r=new URL((l=window.location)==null?void 0:l.href).searchParams.get("_storyblok"),h=r!==null&&+r===o;if(!(!i||!h)){if(!o){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(R(t)).on(["input","published","change"],d=>{var g;d&&(d.action==="input"&&((g=d.story)==null?void 0:g.id)===o?e(d.story):(d.action==="change"||d.action==="published")&&d.storyId===o&&window.location.reload())})})}},U=(o={})=>{var g,$;const{bridge:e,accessToken:t,use:n=[],apiOptions:i={},bridgeUrl:r}=o;r&&console.warn("[Storyblok] The `bridgeUrl` option is deprecated and will be removed in a future major version. The Storyblok bridge is now bundled and is no longer loaded from a CDN URL."),i.accessToken=i.accessToken||t;const h={bridge:e,apiOptions:i};let l={};n.forEach(le=>{l={...l,...le(h)}});const d=!(typeof window>"u")&&(($=(g=window.location)==null?void 0:g.search)==null?void 0:$.includes("_storyblok_tk"));return e!==!1&&d&&M(),l},H=()=>M(),D=(o,e)=>{for(;o&&o.nodeType===1;){if(o.hasAttribute(e))return o;o=o.parentNode}return null},A=o=>{const e=D(o,"data-blok-c");if(!e)return null;const t=e.getAttribute("data-blok-c");return JSON.parse(t)},F=(o,e)=>o.contains(e),u=o=>document.querySelector(`[data-blok-uid="${o}"]`),S=o=>{const e=o.getBoundingClientRect();return e.top<0&&e.top+e.height>=0||e.top>=0&&e.top<=(window.innerHeight||document.documentElement.clientHeight)},j=o=>{let e={};try{const t=o.replace(/\\/g,"");e=JSON.parse(t)}catch{console.error("Error parsing json",o)}return e},V=o=>{const e=[],t=()=>NodeFilter.FILTER_ACCEPT,n=document.createNodeIterator(o,NodeFilter.SHOW_COMMENT,t,!1);let i={};for(;i=n.nextNode();)if(i.nodeValue.indexOf("#storyblok#")>-1){const r=i.nodeValue.replace("#storyblok#",""),h=i.nextElementSibling||i.nextSibling,l=j(r);l&&e.push({options:l,el:h})}return e},I=o=>{let e="";return location.search.substr(1).split("&").forEach(t=>{const n=t.split("=");n[0]===o&&(e=decodeURIComponent(n[1]))}),e},z=(o,e,t)=>typeof o!="string"?"":o.toString().replace(/([A-Z])/g," $1").trim().toLowerCase().replace(/[_-]/g," ").replace(/(?:^|\s)\S/g,function(n,i){return n.toUpperCase()}),O=o=>o&&o.display_name?o.display_name:z(o.name),N=o=>{const e=document.createElementNS("http://www.w3.org/2000/svg","svg");e.setAttribute("viewBox",o.viewBox),e.setAttribute("class",o.svgClass);const t=document.createElementNS(e.namespaceURI,"path");return t.setAttribute("d",o.path),t.setAttribute("fill",o.pathFill),t.setAttribute("transform",o.pathTransform?o.pathTransform:"translate(0 0)"),e.appendChild(t),e},q=o=>o,Y=q,T=Y`
|
|
8
|
-
@keyframes smoke {
|
|
9
|
-
from {
|
|
10
|
-
background-color: rgba(89, 197, 198, 0);
|
|
11
|
-
}
|
|
12
|
-
to {
|
|
13
|
-
background-color: rgba(89, 197, 198, 0.5);
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.storyblok--outlined .storyblok__outline,
|
|
18
|
-
.storyblok--outlined [data-blok-c] {
|
|
19
|
-
outline: 1px dashed rgba(182, 186, 191, 0.5);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.storyblok--outlined .storyblok__outline[data-blok-focused='true'],
|
|
23
|
-
.storyblok--outlined [data-blok-c][data-blok-focused='true'] {
|
|
24
|
-
outline: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.storyblok__hint {
|
|
28
|
-
box-sizing: border-box;
|
|
29
|
-
outline: 1px solid #05807f;
|
|
30
|
-
pointer-events: none;
|
|
31
|
-
position: absolute;
|
|
32
|
-
transition: opacity 0.2s ease;
|
|
33
|
-
z-index: 16777272;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.storyblok__highlight {
|
|
37
|
-
background: rgba(89, 197, 198, 0.2);
|
|
38
|
-
outline: 1px solid #05807f;
|
|
39
|
-
pointer-events: none;
|
|
40
|
-
position: absolute;
|
|
41
|
-
transition: opacity 0.2s ease;
|
|
42
|
-
z-index: 16777270;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.storyblok__overlay {
|
|
46
|
-
box-shadow: 0 0 8px 2px rgba(34, 42, 69, 0.07);
|
|
47
|
-
box-sizing: border-box;
|
|
48
|
-
outline: 1px solid #05807f;
|
|
49
|
-
pointer-events: none;
|
|
50
|
-
position: absolute;
|
|
51
|
-
z-index: 16777273;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.storyblok__overlay-menu {
|
|
55
|
-
background-color: #05807f;
|
|
56
|
-
border-radius: 5px;
|
|
57
|
-
display: inline-flex;
|
|
58
|
-
font-family:
|
|
59
|
-
-apple-system, blinkmacsystemfont, 'Segoe UI', roboto, helvetica, arial,
|
|
60
|
-
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
61
|
-
height: 30px;
|
|
62
|
-
left: -1px;
|
|
63
|
-
pointer-events: auto;
|
|
64
|
-
position: absolute;
|
|
65
|
-
top: -40px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.storyblok__overlay-menu--simple .storyblok__overlay-menu-btn {
|
|
69
|
-
border-bottom-right-radius: 5px;
|
|
70
|
-
border-top-right-radius: 5px;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.storyblok__overlay-menu-label {
|
|
74
|
-
color: #fff;
|
|
75
|
-
font-size: 14px;
|
|
76
|
-
line-height: 30px;
|
|
77
|
-
margin-right: 20px;
|
|
78
|
-
max-width: 200px;
|
|
79
|
-
overflow-x: hidden;
|
|
80
|
-
text-overflow: ellipsis;
|
|
81
|
-
white-space: nowrap;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.storyblok__overlay-menu-label:first-child {
|
|
85
|
-
margin-left: 20px;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.storyblok__overlay-menu-btn {
|
|
89
|
-
align-items: center;
|
|
90
|
-
background-color: transparent;
|
|
91
|
-
border: 0;
|
|
92
|
-
display: flex;
|
|
93
|
-
justify-content: center;
|
|
94
|
-
outline: none;
|
|
95
|
-
padding: 0;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.storyblok__overlay-menu-btn:hover {
|
|
99
|
-
background-color: #0d5454;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.storyblok__overlay-menu-btn-action {
|
|
103
|
-
border-bottom-right-radius: 5px;
|
|
104
|
-
border-left: 1px solid #fff;
|
|
105
|
-
border-top-right-radius: 5px;
|
|
106
|
-
height: inherit;
|
|
107
|
-
margin: auto;
|
|
108
|
-
margin-right: 0;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.storyblok__overlay-menu-btn-parent {
|
|
112
|
-
border-bottom-left-radius: 5px;
|
|
113
|
-
border-top-left-radius: 5px;
|
|
114
|
-
cursor: pointer;
|
|
115
|
-
margin: 0;
|
|
116
|
-
width: auto;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.storyblok__overlay-menu-svg {
|
|
120
|
-
box-sizing: border-box;
|
|
121
|
-
cursor: pointer;
|
|
122
|
-
height: 24px;
|
|
123
|
-
margin: 0 3px;
|
|
124
|
-
width: 24px;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.storyblok__overlay--bottom .storyblok__overlay-menu {
|
|
128
|
-
bottom: -40px;
|
|
129
|
-
top: auto;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.storyblok__overlay--clicked {
|
|
133
|
-
animation-duration: 0.2s;
|
|
134
|
-
animation-iteration-count: 1;
|
|
135
|
-
animation-name: smoke;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.storyblok__actions-menu,
|
|
139
|
-
.storyblok__breadcrumbs-menu {
|
|
140
|
-
background-color: #fff;
|
|
141
|
-
border: 1px solid #dfe3e8;
|
|
142
|
-
border-radius: 5px;
|
|
143
|
-
box-shadow: 0 2px 17px 3px rgba(34, 42, 69, 0.07);
|
|
144
|
-
box-sizing: content-box;
|
|
145
|
-
display: none;
|
|
146
|
-
height: fit-content;
|
|
147
|
-
min-width: 156px;
|
|
148
|
-
overflow: hidden;
|
|
149
|
-
padding: 11px 0;
|
|
150
|
-
position: absolute;
|
|
151
|
-
top: 25px;
|
|
152
|
-
z-index: 2;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.storyblok__actions-menu hr,
|
|
156
|
-
.storyblok__breadcrumbs-menu hr {
|
|
157
|
-
background-color: #dfe3e8;
|
|
158
|
-
border: 0;
|
|
159
|
-
height: 1px;
|
|
160
|
-
margin: 11px 0 11px 20px;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.storyblok__actions-menu__menu-item,
|
|
164
|
-
.storyblok__breadcrumbs-menu__menu-item {
|
|
165
|
-
align-items: center;
|
|
166
|
-
appearance: none;
|
|
167
|
-
background: #fff;
|
|
168
|
-
border: 0;
|
|
169
|
-
color: #1b243f;
|
|
170
|
-
cursor: pointer;
|
|
171
|
-
display: flex;
|
|
172
|
-
font-family:
|
|
173
|
-
-apple-system, blinkmacsystemfont, 'Segoe UI', roboto, helvetica, arial,
|
|
174
|
-
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
175
|
-
font-size: 14px;
|
|
176
|
-
padding: 8px 20px;
|
|
177
|
-
text-align: left;
|
|
178
|
-
width: 100%;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.storyblok__actions-menu__menu-item--delete,
|
|
182
|
-
.storyblok__breadcrumbs-menu__menu-item--delete {
|
|
183
|
-
color: #c11c14;
|
|
184
|
-
margin-bottom: 0;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.storyblok__actions-menu__menu-item--selected,
|
|
188
|
-
.storyblok__breadcrumbs-menu__menu-item--selected {
|
|
189
|
-
color: #05807f;
|
|
190
|
-
cursor: default;
|
|
191
|
-
margin-bottom: 0;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.storyblok__actions-menu__menu-item--selected:hover,
|
|
195
|
-
.storyblok__breadcrumbs-menu__menu-item--selected:hover {
|
|
196
|
-
background: transparent;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.storyblok__actions-menu__menu-item:hover,
|
|
200
|
-
.storyblok__breadcrumbs-menu__menu-item:hover {
|
|
201
|
-
background: #eff1f3;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
.storyblok__actions-menu__menu-item:focus,
|
|
205
|
-
.storyblok__breadcrumbs-menu__menu-item:focus {
|
|
206
|
-
outline: none;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.storyblok__actions-menu {
|
|
210
|
-
left: calc(100% - 20px);
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
.storyblok__breadcrumbs-menu {
|
|
214
|
-
left: -10px;
|
|
215
|
-
}
|
|
216
|
-
`,s={OUTLINE:"storyblok--outlined",STYLESHEET:"storyblok-bridge-stylesheet",HINT:"storyblok__hint",HIGHLIGHTER:"storyblok__highlight",OVERLAY:"storyblok__overlay",COMPONENT_BASE:"storyblok__overlay-menu",ACTIONS_MENU:"storyblok__actions-menu",BREADCRUMBS_MENU:"storyblok__breadcrumbs-menu"};class G{constructor(e){this.appVersion="v1",this.inEditor=!0,this.initialized=!1,this.currentUid=null,this.storyId="",this.componentNames={},this.outlineOnMoveInterval=null,this.calcInterval=null,this.canAddBlocks=!1,this.canMoveForward=!1,this.canMoveBackward=!1,this.canDeleteBlocks=!1,this.navigationBreadcrumbs=[],this.focusState=!1,this.actionsEnabled=!1,this.hinter=null,this.highlighter=null,this.overlay=null,this.componentBase=null,this.componentLabel=null,this.breadcrumbsButtonMenu=null,this.breadcrumbsMenu=null,this.actionsMenu=null,this.actionsMenuButton=null,this.actionsMenuItems=null,this.events={input:[],change:[],published:[],unpublished:[],viewLiveVersion:[],enterEditmode:[],enterComponent:[],hoverComponent:[],highlightComponent:[],customEvent:[],pingBack:[],sessionReceived:[],editedBlok:[],deselectBlok:[],addedBlock:[],deletedBlock:[],movedBlock:[],duplicatedBlock:[]};const t={customParent:null,resolveRelations:null,resolveLinks:null,preventClicks:!1,initOnlyOnce:!0,fallbackLang:null};this.config={...t,...e},this.init()}get isInIframe(){return window.top!==window.self}get csProtocol(){let e=location.protocol.replace(":","");return e!=="http"&&e!=="https"&&(e="https"),e}get targetOrigin(){return this.config.customParent?this.config.customParent:I("_storyblok_env")==="stage"?`${this.csProtocol}://app-beta.storyblok.com`:`${this.csProtocol}://app.storyblok.com`}get lastBreadcrumbItem(){return this.navigationBreadcrumbs[this.navigationBreadcrumbs.length-1]||{}}isInEditor(){return this.inEditor}init(){if(document.body===null){console.error("Body tag not found. Please install the Storyblok bridge script inside the body tag");return}this.config.initOnlyOnce&&document.querySelectorAll(`.${s.HINT}`).length>0||this.isInIframe&&(this.resetAllEvents(),this.addMessageListener(),this.outlineOnMove(),this.buildBridgeStyles(),this.on("enterEditmode",this.enterEditmode),this.isInIframe&&this.sendDataToEditor({action:"initialized",config:this.config}),this.initialized=!0)}keyPress(e,t){(t.key==="z"&&t.metaKey||t.key==="z"&&t.ctrlKey)&&(t.preventDefault(),t.stopImmediatePropagation(),e.sendDataToEditor({action:"undo"})),(t.key==="y"&&t.metaKey||t.key==="y"&&t.ctrlKey)&&(t.preventDefault(),t.stopImmediatePropagation(),e.sendDataToEditor({action:"redo"}))}sendDataToEditor(e){window.parent.postMessage(e,this.targetOrigin)}buildBridgeStyles(){document.getElementById(s.STYLESHEET)?(this.hinter=document.querySelector(`.${s.HINT}`),this.highlighter=document.querySelector(`.${s.HIGHLIGHTER}`),this.overlay=document.querySelector(`.${s.OVERLAY}`),this.componentBase=document.querySelector(`.${s.COMPONENT_BASE}`),this.breadcrumbsButtonMenu=document.querySelector(`.${s.COMPONENT_BASE}-btn-parent`),this.breadcrumbsMenu=document.querySelector(`.${s.BREADCRUMBS_MENU}`),this.actionsMenuButton=document.querySelector(`.${s.COMPONENT_BASE}-btn-action`),this.actionsMenu=document.querySelector(`.${s.ACTIONS_MENU}`),this.componentLabel=document.querySelector(`.${s.COMPONENT_BASE} > .${s.COMPONENT_BASE}-label`),this.createActionsMenuItems()):(this.createBridgeStylesheet(),this.createHinter(),this.createHighlighter(),this.createOverlay(),this.createComponentContext())}createBridgeStylesheet(){const e=document.createElement("style");e.setAttribute("type","text/css"),e.id=s.STYLESHEET,"textContent"in e?e.textContent=T:e.styleSheet.cssText=T,document.getElementsByTagName("head")[0].appendChild(e)}createHinter(){this.hinter=document.createElement("div"),this.hinter.className=s.HINT,this.hideElement(this.hinter),document.body.appendChild(this.hinter)}createHighlighter(){this.highlighter=document.createElement("div"),this.highlighter.style.opacity=0,this.hideElement(this.highlighter),document.body.appendChild(this.highlighter)}createOverlay(){this.overlay=document.createElement("div"),this.overlay.setAttribute("class",s.OVERLAY),this.overlay.setAttribute("id",s.OVERLAY),this.hideElement(this.overlay),document.body.appendChild(this.overlay)}calculateElementPosition(e,t){if(!t){this.hideElement(e);return}const n=u(t);if(n){const{left:i,top:r}=this.getElementOffset(n);r<=30?this.overlay.classList.add(`${s.OVERLAY}--bottom`):this.overlay.classList.remove(`${s.OVERLAY}--bottom`),e.style.top=`${r}px`,e.style.left=`${i}px`,e.style.width=`${n.offsetWidth}px`,e.style.height=`${n.offsetHeight}px`,e.style.minHeight="5px"}else this.hideElement(e)}getElementOffset(e){const t=e.getBoundingClientRect(),n=window.pageXOffset||document.documentElement.scrollLeft,i=window.pageYOffset||document.documentElement.scrollTop;return{top:t.top+i,left:t.left+n}}resetAllEvents(){for(const e in this.events)this.events[e]=[]}addMessageListener(){window.addEventListener&&addEventListener("message",this.receiveMessageFromApp.bind(this),!1)}receiveMessageFromApp(e){e&&e.data&&e.data.action&&this.emit(e.data.action,e.data)}emit(e,...t){const n=this.events[e];if(!(!e||!n||!n.length))for(let i=0;i<n.length;i++)n[i].apply(this,t)}outlineOnMoveHandler(){document.body.classList.add(s.OUTLINE);const e=()=>{document.body.classList.remove(s.OUTLINE),this.hinter&&(this.hinter.style.opacity=0)};this.outlineOnMoveInterval&&clearTimeout(this.outlineOnMoveInterval),this.outlineOnMoveInterval=setTimeout(e,800)}outlineOnMove(){document.addEventListener("mousemove",this.outlineOnMoveHandler.bind(this),!1)}on(e,t){if(e.constructor===Array){for(const n of e)this.subscribeEvent(n,t);return}this.subscribeEvent(e,t)}subscribeEvent(e,t){e==="input"&&(this.actionsEnabled=!0),this.events[e].indexOf(t)===-1&&this.events[e].push(t)}pingEditor(e){this.isInIframe?this.sendDataToEditor({action:"ping"}):(this.inEditor=!1,e(this)),this.on("pingBack",this.handlePingBack(e))}handlePingBack(e){return()=>{this.inEditor=!0,e(this)}}handleEditedBlok(e){this.navigationBreadcrumbs=e.breadcrumbs,this.canAddBlocks=e.canAddBlocks||!1,this.canMoveForward=e.canMoveForward||!1,this.canMoveBackward=e.canMoveBackward||!1,this.canDeleteBlocks=e.canDeleteBlocks||!1,this.updateComponentBase(e.blok)}handleAddMoveBlok(e){const t=u(`${this.storyId}-${e.blockId}`);t&&this.handleOpenBlok(t)}handleDeselectBlock(){document.querySelectorAll("[data-blok-focused]").forEach(e=>e.removeAttribute("data-blok-focused")),this.hideElement(this.overlay)}handleDuplicatedBlok(e){this.handleDeselectBlock(),setTimeout(()=>{const t=u(`${this.storyId}-${e.blockId}`);this.handleOpenBlok(t)},500)}handleWindowClick(e){this.config.preventClicks&&(e.preventDefault(),e.stopPropagation()),this.handleOpenBlok(e.target,e)}handleOpenBlok(e,t){const n=A(e);if(n){t&&n.uid!==this.currentUid&&(t.preventDefault(),t.stopPropagation()),this.currentUid=n.uid,this.storyId=n.id,this.openBlok(n);return}t&&this.toggleFocusElement(e,!0)}enterEditmode(e){const t=V(document.body);e&&e.appVersion&&(this.appVersion=e.appVersion),e&&e.componentNames&&(this.componentNames=e.componentNames);for(let n=0;n<t.length;n++){const i=t[n].el,r=t[n].options;!i||i.nodeType!==Node.ELEMENT_NODE||(r.name=this.componentNames[r.name]||r.name,i.setAttribute("data-blok-c",JSON.stringify(r)),i.setAttribute("data-blok-uid",`${r.id}-${r.uid}`),i.offsetHeight<5&&(i.style["min-height"]="5px"),i.classList.add("storyblok__outline"))}if(this.on("addedBlock",this.handleAddMoveBlok),this.on("duplicatedBlock",this.handleDuplicatedBlok),this.on("movedBlock",this.handleAddMoveBlok),this.on("enterComponent",this.enterComponent),this.on("highlightComponent",this.highlightComponent),this.on("hoverComponent",this.hoverComponent),this.on("editedBlok",this.handleEditedBlok),this.on("deselectBlok",this.handleDeselectBlock),e&&e.blockId&&this.config.setActiveBlock){const n=u(`${e.storyId}-${e.blockId}`);this.handleOpenBlok(n)}window.addEventListener("click",this.handleWindowClick.bind(this)),this.calcInterval!==null&&window.clearInterval(this.calcInterval),this.calcInterval=window.setInterval(()=>{this.calculateElementPosition(this.overlay,`${this.storyId}-${this.currentUid}`)},300)}highlightComponent(e){this.highlighter.innerHTML="",e.componentIds.length>0?(this.highlighter.style.display="block",this.highlighter.style.opacity=1):(this.highlighter.style.display="none",this.highlighter.style.opacity=0);for(let t=0;t<e.componentIds.length;t++){const n=`${e.storyId}-${e.componentIds[t]}`,i=u(n);if(i){const r=document.createElement("div");r.setAttribute("class",s.HIGHLIGHTER),this.highlighter.appendChild(r),this.calculateElementPosition(r,n),e.componentId===e.componentIds[t]&&!S(i)&&typeof i.scrollIntoView<"u"&&i.scrollIntoView()}}}hoverComponent(e){this.calculateElementPosition(this.hinter,`${e.storyId}-${e.componentId}`),this.hinter.style.opacity=1,this.hinter.style.display="block"}toggleFocusElement(e,t=!1){if(!F(this.overlay,e)){if(this.handleDeselectBlock(),!t&&this.storyId===I("_storyblok")){e.setAttribute("data-blok-focused",!0),this.showFocusedElement(this.overlay),this.focusState=!1;return}this.focusState||this.sendDataToEditor({action:"noFocus"})}}showFocusedElement(e){if(!this.currentUid){this.hideElement(e);return}this.showElement(e),this.calculateElementPosition(e,`${this.storyId}-${this.currentUid}`)}handleBlokActions(e){this.sendDataToEditor({action:e,blok:this.lastBreadcrumbItem}),e==="addBlockBefore"||e==="addBlockAfter"||e==="copy"?this.hideElement(this.actionsMenu):this.hideElement(this.overlay),(e==="moveForward"||e==="moveBackward")&&(this.focusState=!0)}hideElement(e){e.style.display="none"}showElement(e){e.style.display="block"}toggleElement(e){if(e.style.display==="block"){this.hideElement(e);return}this.showElement(e)}enterComponent(e){const t=u(`${e.storyId}-${e.componentId}`),n=A(t);n&&(this.hinter.style.opacity=0,this.hinter.style.display="none",this.currentUid=n.uid,this.storyId=n.id,this.scrollIntoView(t),this.handleEditedBlok(e))}scrollIntoView(e){e&&!S(e)&&typeof e.scrollIntoView<"u"&&setTimeout(()=>{e.scrollIntoView({behavior:"smooth",block:"start"})},100)}openBlok(e){this.sendDataToEditor({action:"edit",dataC:e,config:this.config})}createComponentContext(){this.createComponentBase(),this.createActionsMenu(),this.createActionsMenuItems(),this.createBreadcrumbsMenu(),this.createActionsMenuButton(),this.createBreadcrumbsMenuButton(),this.createComponentLabel(),this.createComponentButtonLabel()}createComponentBase(){this.componentBase=document.createElement("div"),this.componentBase.setAttribute("class",s.COMPONENT_BASE),this.componentBase.setAttribute("id",s.COMPONENT_BASE),this.overlay.append(this.componentBase)}createComponentLabel(){this.componentLabel=document.createElement("span"),this.componentLabel.setAttribute("class",`${s.COMPONENT_BASE}-label`),this.componentBase.prepend(this.componentLabel)}createComponentButtonLabel(){const e=document.createElement("span");e.setAttribute("class",`${s.COMPONENT_BASE}-label`),this.breadcrumbsButtonMenu.appendChild(e)}updateComponentLabel(e){document.querySelectorAll(`.${s.COMPONENT_BASE}-label`).forEach(t=>t.innerText=this.componentNames[e.name]||O(e))}updateComponentBase(e){this.hideElement(this.actionsMenu),this.hideElement(this.breadcrumbsMenu),this.overlay.classList.add(`${s.OVERLAY}--clicked`),setTimeout(()=>{this.overlay.classList.remove(`${s.OVERLAY}--clicked`)},400),this.navigationBreadcrumbs.length>1?(this.updateBreadcrumbsMenu(this.navigationBreadcrumbs),this.actionsEnabled?this.updateActionsMenu():(this.componentBase.setAttribute("class",`${s.COMPONENT_BASE} ${s.COMPONENT_BASE}--simple`),this.hideElement(this.actionsMenuButton)),this.hideElement(this.componentLabel)):(this.hideElement(this.breadcrumbsButtonMenu),this.hideElement(this.actionsMenuButton),this.showElement(this.componentLabel)),this.updateComponentLabel(e);const t=u(`${this.storyId}-${e.uid}`);t&&this.toggleFocusElement(t)}createBreadcrumbsMenuButton(){this.breadcrumbsButtonMenu=document.createElement("button"),this.breadcrumbsButtonMenu.setAttribute("class",`${s.COMPONENT_BASE}-btn ${s.COMPONENT_BASE}-btn-parent`),this.breadcrumbsButtonMenu.prepend(N({viewBox:"0 0 24 24",svgClass:`${s.COMPONENT_BASE}-svg`,path:"M13.73 14.284l-2.197-2.216 2.197-2.217a1.051 1.051 0 000-1.477 1.03 1.03 0 00-1.465 0l-2.93 2.955a1.043 1.043 0 00-.287.554l-.014.123v.123c.014.247.115.489.301.677l2.93 2.956a1.03 1.03 0 001.465 0 1.051 1.051 0 000-1.478z",pathFill:"#ffffff"})),this.breadcrumbsButtonMenu.addEventListener("click",()=>{this.toggleElement(this.breadcrumbsMenu),this.hideElement(this.actionsMenu)}),this.componentBase.prepend(this.breadcrumbsButtonMenu)}createBreadcrumbsMenu(){this.breadcrumbsMenu=document.createElement("div"),this.breadcrumbsMenu.setAttribute("class",s.BREADCRUMBS_MENU),this.breadcrumbsMenu.setAttribute("id",s.BREADCRUMBS_MENU),this.componentBase.append(this.breadcrumbsMenu)}updateBreadcrumbsMenu(e){this.breadcrumbsMenu.innerHTML="";const t=[];for(let n=0;n<e.length;n++){t[n]=document.createElement("button"),t[n].innerHTML=O({display_name:this.componentNames[e[n].component],name:e[n].component});const i=e[n];t[n].addEventListener("click",r=>{r.stopPropagation(),this.currentUid=i._uid,this.openBlok({id:this.storyId,uid:i._uid,name:i.component})}),t[n].classList.add(`${s.BREADCRUMBS_MENU}__menu-item`),e[n]._uid===this.currentUid&&(t[n].classList.add(`${s.BREADCRUMBS_MENU}__menu-item--selected`),t[n].setAttribute("disabled",!0)),this.breadcrumbsMenu.appendChild(t[n]),this.breadcrumbsButtonMenu.style.display="flex"}}createActionsMenuButton(){this.actionsMenuButton=document.createElement("button"),this.actionsMenuButton.setAttribute("class",`${s.COMPONENT_BASE}-btn ${s.COMPONENT_BASE}-btn-action`),this.actionsMenuButton.prepend(N({viewBox:"0 0 24 24",svgClass:`${s.COMPONENT_BASE}-svg`,path:"M7.5 11a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm10 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-5 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3z",pathFill:"#ffffff"})),this.actionsMenuButton.addEventListener("click",()=>{this.toggleElement(this.actionsMenu),this.breadcrumbsMenu&&this.hideElement(this.breadcrumbsMenu)}),this.componentBase.append(this.actionsMenuButton)}createActionsMenuItems(){this.actionsMenuItems=[{eventFunction:()=>this.handleBlokActions.bind(this,"addBlockBefore"),innerHTML:"Add Block Before",order:0,show:()=>this.canAddBlocks},{eventFunction:()=>this.handleBlokActions.bind(this,"addBlockAfter"),innerHTML:"Add Block After",order:1,show:()=>this.canAddBlocks},{eventFunction:()=>this.handleBlokActions.bind(this,"duplicateBlock"),innerHTML:"Duplicate",order:2,show:()=>this.canAddBlocks},{eventFunction:()=>this.handleBlokActions.bind(this,"copy"),innerHTML:"Copy",order:3,show:()=>this.appVersion==="v2"},{separator:!0,order:4,show:()=>this.canAddBlocks&&this.canMoveForward||!!(this.canMoveBackward&&this.lastBreadcrumbItem._parentindex)},{eventFunction:()=>this.handleBlokActions.bind(this,"moveForward"),innerHTML:"Move Forward",order:5,show:()=>this.canMoveForward},{eventFunction:()=>this.handleBlokActions.bind(this,"moveBackward"),innerHTML:"Move Backward",order:6,show:()=>this.canMoveBackward&&this.lastBreadcrumbItem._parentindex},{separator:!0,order:7,show:()=>this.canAddBlocks&&this.canDeleteBlocks},{eventFunction:()=>this.handleBlokActions.bind(this,"deleteBlock"),className:`${s.ACTIONS_MENU}__menu-item--delete`,innerHTML:"Delete",order:8,show:()=>this.canDeleteBlocks}]}createActionsMenu(){this.actionsMenu=document.createElement("div"),this.actionsMenu.setAttribute("class",s.ACTIONS_MENU),this.actionsMenu.setAttribute("id",s.ACTIONS_MENU),this.componentBase.append(this.actionsMenu)}updateActionsMenu(){this.actionsMenu.innerHTML="";const e=`${s.ACTIONS_MENU}__menu-item`,t="button",n="click";this.actionsMenuItems.sort((i,r)=>i.order>r.order?1:r.order>i.order?-1:0).forEach(i=>{if(i.separator&&i.show()){this.actionsMenu.appendChild(document.createElement("hr"));return}const r=document.createElement(i.element?i.element:t);r.classList.add(e),i.className&&r.classList.add(i.className),r.innerHTML=i.innerHTML,i.eventFunction&&r.addEventListener(i.event?i.event:n,i.eventFunction()),i.show()&&this.actionsMenu.appendChild(r)}),this.actionsMenuButton.style.display="flex"}}var J=Object.defineProperty,K=(o,e,t)=>e in o?J(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,f=(o,e,t)=>K(o,typeof e!="symbol"?e+"":e,t);let W=class{constructor(e){f(this,"isInEditor"),f(this,"enterEditmode"),f(this,"pingEditor"),f(this,"on");const t=new G(e);this.isInEditor=()=>t.isInEditor(),this.enterEditmode=n=>{t.enterEditmode(n)},this.pingEditor=n=>{t.pingEditor(n)},this.on=(n,i)=>{t.on(n,i)}}};const y=o=>({tag:"success",value:o}),b=o=>({tag:"failure",error:o,path:[]}),C=(o,e)=>({tag:"failure",error:o.error,path:[e,...o.path]}),X=o=>typeof o>"u",Z=o=>typeof o=="string",Q=o=>typeof o=="object"&&o!==null,B=Symbol("propertyAbsent"),x=Symbol("omitProperty"),ee="Not an object",te=o=>C(b("Property is missing"),{tag:"object",key:o}),oe=o=>{const e=Object.entries(o);return t=>{if(!Q(t))return b(ee);const n={};for(let i=0;i<e.length;i++){const[r,h]=e[i],l=t[r];if(l===void 0&&!t.hasOwnProperty(r)){const c=h(B);if(c.tag==="failure"||c.value===B)return te(r);c.value!==x&&(n[r]=c.value)}else{const c=h(l);if(c.tag==="failure")return C(c,{tag:"object",key:r});n[r]=c.value}}return y(n)}},ne=o=>X(o)?y(o):b("Not undefined"),k=o=>Z(o)?y(o):b("Not a string"),ie=(...o)=>e=>{for(const t of o){const n=t(e);if(n.tag==="success")return y(n.value)}return b("No parser in the union matched")},se=o=>ie(re,ne,o),re=o=>o===B?y(x):b("not optional");oe({name:k,space:se(k),uid:k,id:k});const ae=Object.freeze(Object.defineProperty({__proto__:null,default:W},Symbol.toStringTag,{value:"Module"}));a.StoryblokClient=m,Object.defineProperty(a,"buildStoryblokImage",{enumerable:!0,get:()=>E.buildStoryblokImage}),Object.defineProperty(a,"renderRichText",{enumerable:!0,get:()=>E.renderRichText}),Object.defineProperty(a,"splitTableRows",{enumerable:!0,get:()=>E.splitTableRows}),a.apiPlugin=L,a.loadStoryblokBridge=H,a.registerStoryblokBridge=w,a.storyblokEditable=P,a.storyblokInit=U,a.useStoryblokBridge=w,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/storyblok-js.mjs
DELETED
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* name: @storyblok/js
|
|
3
|
-
* (c) 2026
|
|
4
|
-
* description: SDK to integrate Storyblok into your project using JavaScript.
|
|
5
|
-
* author: undefined
|
|
6
|
-
*/
|
|
7
|
-
import g from "storyblok-js-client";
|
|
8
|
-
import { default as _ } from "storyblok-js-client";
|
|
9
|
-
import { buildStoryblokImage as P, renderRichText as x, splitTableRows as A } from "@storyblok/richtext";
|
|
10
|
-
let u = !1, a;
|
|
11
|
-
const y = [], f = () => typeof window > "u" ? Promise.reject(
|
|
12
|
-
new Error("Cannot load Storyblok bridge: window is undefined (server-side environment)")
|
|
13
|
-
) : (window.storyblokRegisterEvent = (o) => {
|
|
14
|
-
if (!window.location.search.includes("_storyblok")) {
|
|
15
|
-
console.warn("You are not in Draft Mode or in the Visual Editor.");
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
u ? o() : y.push(o);
|
|
19
|
-
}, u ? Promise.resolve() : a || (a = import("./index-CtMAhUF-.js").then(({ default: o }) => {
|
|
20
|
-
window.StoryblokBridge = o, y.forEach((e) => e()), u = !0;
|
|
21
|
-
}).catch((o) => {
|
|
22
|
-
throw a = void 0, o;
|
|
23
|
-
}), a)), S = (o = {}) => {
|
|
24
|
-
const { apiOptions: e } = o;
|
|
25
|
-
if (!e || !e.accessToken) {
|
|
26
|
-
console.error(
|
|
27
|
-
"You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication"
|
|
28
|
-
);
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
31
|
-
return { storyblokApi: new g(e) };
|
|
32
|
-
}, m = (o) => {
|
|
33
|
-
if (typeof o != "object" || typeof o._editable != "string")
|
|
34
|
-
return {};
|
|
35
|
-
try {
|
|
36
|
-
const e = JSON.parse(
|
|
37
|
-
o._editable.replace(/^<!--#storyblok#/, "").replace(/-->$/, "")
|
|
38
|
-
);
|
|
39
|
-
return e ? {
|
|
40
|
-
"data-blok-c": JSON.stringify(e),
|
|
41
|
-
"data-blok-uid": `${e.id}-${e.uid}`
|
|
42
|
-
} : {};
|
|
43
|
-
} catch {
|
|
44
|
-
return {};
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
function k(o) {
|
|
48
|
-
const { language: e, resolveRelations: r, ...l } = o;
|
|
49
|
-
return e && console.warn(
|
|
50
|
-
"[Storyblok] The `language` bridge option is no longer supported by the bundled bridge. Language context is now passed automatically by the Visual Editor via the `_storyblok_lang` URL parameter."
|
|
51
|
-
), {
|
|
52
|
-
...l,
|
|
53
|
-
...r !== void 0 && {
|
|
54
|
-
resolveRelations: Array.isArray(r) ? r : [r]
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
const v = (o, e, r = {}) => {
|
|
59
|
-
var i;
|
|
60
|
-
const n = !(typeof window > "u") && typeof window.storyblokRegisterEvent < "u", d = new URL((i = window.location) == null ? void 0 : i.href).searchParams.get(
|
|
61
|
-
"_storyblok"
|
|
62
|
-
), c = d !== null && +d === o;
|
|
63
|
-
if (!(!n || !c)) {
|
|
64
|
-
if (!o) {
|
|
65
|
-
console.warn("Story ID is not defined. Please provide a valid ID.");
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
|
-
window.storyblokRegisterEvent(() => {
|
|
69
|
-
new window.StoryblokBridge(
|
|
70
|
-
k(r)
|
|
71
|
-
).on(["input", "published", "change"], (t) => {
|
|
72
|
-
var s;
|
|
73
|
-
t && (t.action === "input" && ((s = t.story) == null ? void 0 : s.id) === o ? e(t.story) : (t.action === "change" || t.action === "published") && t.storyId === o && window.location.reload());
|
|
74
|
-
});
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
}, R = (o = {}) => {
|
|
78
|
-
var s, b;
|
|
79
|
-
const {
|
|
80
|
-
bridge: e,
|
|
81
|
-
accessToken: r,
|
|
82
|
-
use: l = [],
|
|
83
|
-
apiOptions: n = {},
|
|
84
|
-
bridgeUrl: d
|
|
85
|
-
} = o;
|
|
86
|
-
d && console.warn(
|
|
87
|
-
"[Storyblok] The `bridgeUrl` option is deprecated and will be removed in a future major version. The Storyblok bridge is now bundled and is no longer loaded from a CDN URL."
|
|
88
|
-
), n.accessToken = n.accessToken || r;
|
|
89
|
-
const c = { bridge: e, apiOptions: n };
|
|
90
|
-
let i = {};
|
|
91
|
-
l.forEach((w) => {
|
|
92
|
-
i = { ...i, ...w(c) };
|
|
93
|
-
});
|
|
94
|
-
const t = !(typeof window > "u") && ((b = (s = window.location) == null ? void 0 : s.search) == null ? void 0 : b.includes("_storyblok_tk"));
|
|
95
|
-
return e !== !1 && t && f(), i;
|
|
96
|
-
}, B = () => f();
|
|
97
|
-
export {
|
|
98
|
-
_ as StoryblokClient,
|
|
99
|
-
S as apiPlugin,
|
|
100
|
-
P as buildStoryblokImage,
|
|
101
|
-
B as loadStoryblokBridge,
|
|
102
|
-
v as registerStoryblokBridge,
|
|
103
|
-
x as renderRichText,
|
|
104
|
-
A as splitTableRows,
|
|
105
|
-
m as storyblokEditable,
|
|
106
|
-
R as storyblokInit,
|
|
107
|
-
v as useStoryblokBridge
|
|
108
|
-
};
|
package/dist/types/index.d.ts
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { ISbComponentType, ISbConfig, ISbStoryData, default as StoryblokClient } from 'storyblok-js-client';
|
|
2
|
-
declare global {
|
|
3
|
-
interface Window {
|
|
4
|
-
storyblokRegisterEvent: (cb: () => void) => void;
|
|
5
|
-
StoryblokBridge: {
|
|
6
|
-
new (options?: StoryblokBridgeConfigV2): StoryblokBridgeV2;
|
|
7
|
-
};
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
export interface SbInitResult {
|
|
11
|
-
storyblokApi?: StoryblokClient;
|
|
12
|
-
}
|
|
13
|
-
export type SbPluginFactory = (options: SbSDKOptions) => any;
|
|
14
|
-
export type SbBlokKeyDataTypes = string | number | object | boolean | undefined;
|
|
15
|
-
export interface SbBlokData extends ISbComponentType<string> {
|
|
16
|
-
[index: string]: SbBlokKeyDataTypes;
|
|
17
|
-
}
|
|
18
|
-
export interface SbSDKOptions {
|
|
19
|
-
bridge?: boolean;
|
|
20
|
-
accessToken?: string;
|
|
21
|
-
use?: any[];
|
|
22
|
-
apiOptions?: ISbConfig;
|
|
23
|
-
bridgeUrl?: string;
|
|
24
|
-
}
|
|
25
|
-
export interface ISbEventPayload<S extends ISbComponentType<string> = any> {
|
|
26
|
-
action: 'customEvent' | 'published' | 'input' | 'change' | 'unpublished' | 'enterEditmode';
|
|
27
|
-
event?: string;
|
|
28
|
-
story?: ISbStoryData<S>;
|
|
29
|
-
slug?: string;
|
|
30
|
-
slugChanged?: boolean;
|
|
31
|
-
storyId?: number;
|
|
32
|
-
reload?: boolean;
|
|
33
|
-
}
|
|
34
|
-
export interface StoryblokBridgeConfigV2 {
|
|
35
|
-
resolveRelations?: string | string[];
|
|
36
|
-
customParent?: string;
|
|
37
|
-
preventClicks?: boolean;
|
|
38
|
-
language?: string;
|
|
39
|
-
resolveLinks?: 'url' | 'story' | '0' | '1' | 'link';
|
|
40
|
-
fallbackLang?: string;
|
|
41
|
-
}
|
|
42
|
-
export interface StoryblokBridgeV2 {
|
|
43
|
-
pingEditor: (event: any) => void;
|
|
44
|
-
isInEditor: () => boolean;
|
|
45
|
-
enterEditmode: () => void;
|
|
46
|
-
on: (event: 'customEvent' | 'published' | 'input' | 'change' | 'unpublished' | 'enterEditmode' | string[], callback: (payload?: ISbEventPayload) => void) => void;
|
|
47
|
-
}
|
|
48
|
-
export type { ArrayFn, AsyncFn, ISbAlternateObject, // previously AlternateObject
|
|
49
|
-
ISbCache, // previously StoryblokCache
|
|
50
|
-
ISbComponentType as StoryblokComponentType, ISbConfig, // previously StoryblokConfig
|
|
51
|
-
ISbContentMangmntAPI, ISbDimensions, ISbError, ISbManagmentApiResult, // previously StoryblokManagmentApiResult
|
|
52
|
-
ISbResponse, ISbResult, // previously StoryblokResult
|
|
53
|
-
ISbSchema, ISbStories, // previously Stories
|
|
54
|
-
ISbStoriesParams, // previously StoriesParams
|
|
55
|
-
ISbStory, // previously Story
|
|
56
|
-
ISbStoryData, // previously StoryData
|
|
57
|
-
ISbStoryParams, // previously StoryParams
|
|
58
|
-
ISbThrottle, ISbThrottledRequest, } from 'storyblok-js-client';
|