PageSourceSearch

https://www.theograce.co.uk/_next/static/chunks/3795-4fe0312b57fccc4c.js

js theograce.co.uk collected 2026-10-08 03:35:00 UTC 17,170 bytes, 107 lines download raw bytes

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3795],{73795:(e,t,i)=>{i.d(t,{a:()=>W,b:()=>H,c:()=>J,g:()=>Q,u:()=>K});var n=i(14232),l=i(72091),o=i(8402),r=i(37876),s=i(87718);let a=({selection:e})=>{if(!e)return;let{type:t,value:i,cart_display:n}=e;return(0,r.jsx)(r.Fragment,{children:(()=>{switch(t){case"selection"===t&&"visual"===n&&e.image:return(0,r.jsx)("img",{src:e.image});case"template_customization":return(0,r.jsx)("img",{src:i,style:{maxWidth:"10rem"},alt:e.category_name});default:return i}})()})},d=s.d.div`
2   padding: 8px;
3   cursor: pointer;
4   
5   ${e=>e.$isGrid?(0,s.l)`
6       display: flex;
7       flex-direction: column;
8       align-items: center;
9       gap: 8px;
10       border: 1px solid #ccc;
11   `:(0,s.l)`
12       display: flex;
13       align-items: center;
14       gap: 8px;
15       border-bottom: 1px solid #ccc;
16   `}
17
18   ${e=>e.$isDisabled&&(0,s.l)`
19       background-color: #c5c5c5;
20       pointer-events: none;
21   `}
22
23   ${e=>e.$isSelected&&(0,s.l)`
24        background-color: #f0f0f0;
25    `}
26`,u=s.d.img`
27   max-width: 32px;
28`,c=s.d.div`
29   font-size: 12px;
30   max-width: ${e=>e.$isGrid?"10ch":"unset"};
31`,p=({grid:e,option:t,isVisual:i,onImgLoadCallback:n,isSelected:l})=>{var s;let{is_active:a}=t,p=(0,o.g)(t,"USD");return(0,r.jsxs)(d,{$isDisabled:!a,$isGrid:!!e,$isSelected:l,children:[i&&(0,r.jsx)(u,{src:null==(s=t.image)?void 0:s.url,onLoad:n}),(0,r.jsx)(c,{$isGrid:!!e,children:p})]})},g=s.d.div`
32  display: flex;
33  flex-wrap: nowrap;
34  overflow-x: auto;
35  margin: 0 auto;
36`,m=({category:e,onOptionChange:t,selectedOptionId:i})=>{var n;return(0,r.jsx)(g,{children:null==(n=e.options)?void 0:n.map(n=>(0,r.jsx)("div",{onClick:()=>t(n),style:{minWidth:"110px"},children:(0,r.jsx)(p,{isSelected:n.id===i,category:e,option:n,grid:!0,isVisual:(0,o.i)(e,n,!1)})},n.id))})},h=(e,t="")=>{var i,r;let{uid:s,options:a}=e,d=(0,n.useRef)(null),u=(0,l.u)(e=>e.updateOptionSelectionForSelectionFields),c=(0,l.u)(e=>e.itemEditorsList[t]),p=(null==(i=(0,o.a)(null==c?void 0:c.userSelections,s))?void 0:i.value)??(null==(r=null==a?void 0:a.find(e=>e.is_default))?void 0:r.id),[g,m]=(0,n.useState)(()=>({inputFocus:!1,isLabelActive:!1})),h=(0,n.useCallback)(e=>{let{id:i,is_active:n,isLinkComponent:l}=e;!n||l||u(t,i,s)},[t,s,u]);return{onOptionChange:h,onInputFocus:(0,n.useCallback)(()=>{m(e=>({...e,inputFocus:!0,isLabelActive:!0}))},[]),onInputBlur:(0,n.useCallback)(()=>{m(e=>({...e,inputFocus:!1}))},[]),inputFocus:g.inputFocus,isLabelActive:g.isLabelActive,fieldRef:d,selectedOptionId:p}},v=()=>{let{instanceId:e,category:t}=(0,l.a)(),i=(0,l.b)().carousel,{onOptionChange:n,selectedOptionId:o}=h(t,e),s=e=>{e&&n(e)};return i?(0,r.jsx)(i,{category:t,instanceId:e,selectedOptionId:o,onOptionChange:s}):(0,r.jsx)(m,{instanceId:e,category:t,onOptionChange:s,selectedOptionId:o})},x=s.d.div`
37  width: 100%;
38  margin: 0 auto;
39`,f=s.d.div`
40  display: flex;
41  justify-content: space-between;
42  align-items: center;
43  padding: 4px 8px;
44  border: 1px solid #ccc;
45  background-color: #fff;
46  cursor: pointer;
47`,y=s.d.span`
48  font-size: 8px;
49  color: #666;
50`,j=s.d.div`
51  border: 1px solid #ccc;
52  background-color: #fff;
53  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
54  
55  ${e=>e.$isGrid&&`
56    display: grid;
57    grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr));
58    overflow-y: auto;
59    max-height: 400px;
60  `}
61`,I=s.d.div`
62  cursor: pointer;
63  transition: background-color 0.2s;
64
65  &:hover 
66    background-color: #f0f0f0;
67  `,b=({category:e,onOptionChange:t,selectedOptionId:i,fieldRef:l})=>{let{options:s}=e,[a,d]=(0,n.useState)(!1),u=e=>{l&&l.current&&!l.current.contains(e.target)&&d(!1)};if((0,n.useEffect)(()=>(document.addEventListener("mousedown",u),()=>{document.removeEventListener("mousedown",u)})),!s)return;let c=s.find(e=>e.id===i)||s[0],g=(0,o.g)(c,"USD")||"Select option";return(0,r.jsxs)(x,{ref:l,children:[(0,r.jsxs)(f,{$isOpen:a,onClick:()=>d(e=>!e),children:[(0,r.jsx)("span",{children:g}),(0,r.jsx)(y,{children:a?"▲":"▼"})]}),a&&(0,r.jsx)(j,{$isGrid:!!(s&&s.length>5),children:null==s?void 0:s.map(n=>(0,r.jsx)(I,{onClick:()=>{t(n),d(!1)},children:(0,r.jsx)(p,{isSelected:n.id===i,category:e,option:n,isVisual:(0,o.i)(e,n,!1),grid:s.length>5})},n.id))})]})},w=()=>{let{instanceId:e,category:t}=(0,l.a)(),i=(0,l.b)().dropdown,{onOptionChange:n,selectedOptionId:o,fieldRef:s}=h(t,e),a=e=>{e&&n(e)};return i?(0,r.jsx)(i,{instanceId:e,category:t,onOptionChange:a,selectedOptionId:o}):(0,r.jsx)(b,{instanceId:e,category:t,onOptionChange:a,selectedOptionId:o,fieldRef:s})},O=({category:e,onOptionChange:t,selectedOptionId:i})=>{var n;let l=s.d.ul`
68		display: grid;
69		grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr));
70		padding: 20px;
71		gap: 8px;
72		text-align: center;
73		list-style: none;
74		max-width: 550px;
75		margin: 0 auto;
76	`;return(0,r.jsx)("div",{className:"grid-wrapper",children:(0,r.jsx)(l,{children:null==(n=e.options)?void 0:n.map(n=>(0,r.jsx)("li",{className:"iec-grid-item",onClick:()=>t(n),children:(0,r.jsx)(p,{isSelected:n.id===i,category:e,option:n,isVisual:(0,o.i)(e,n,!1),grid:!0},`list_option_${n.id}`)},n.id))})})},C=()=>{let{instanceId:e,category:t}=(0,l.a)(),i=(0,l.b)().grid,{onOptionChange:n,selectedOptionId:o}=h(t,e);return i?(0,r.jsx)(i,{instanceId:e,category:t,onOptionChange:n,selectedOptionId:o}):(0,r.jsx)(O,{instanceId:e,category:t,onOptionChange:n,selectedOptionId:o})},_=s.d.div`
77  &.plugin-to-right {
78    flex-grow: 1;
79    display: flex;
80    flex-direction: column;
81    justify-content: center;
82  }
83
84  &.plugin-default {
85    margin-top: 20px;
86  }
87`,S=({location:e="default"})=>{var t;let{defaultPlugin:i,fieldNamePlugin:l,toRightPlugin:o}=K(),s=(0,n.useMemo)(()=>{switch(e){case"to-right":return o;case"field-name":return l;default:return i}},[i,l,o,e]);return s&&(null==(t=s.props)?void 0:t.text)!==""?(0,r.jsx)(_,{className:`plugin-${e}`,children:(0,r.jsx)(s.component,{...s.props})}):null},L=["carousel_standard_image","carousel_big_image_only"],E=({fieldId:e})=>{var t;let{category:i,plugins:s,instanceId:a}=(0,l.a)(),d=null==(t=(0,l.u)(e=>
87e.itemEditorsList[a]))?void 0:t.userSelections,u=(0,l.b)().label,c=!!(null!=s&&s.find(e=>e.categoryUid===i.uid&&"field-name"===e.location)),p=(0,n.useMemo)(()=>{if(!L.includes(i.display_type))return null;let e=(0,o.b)(i,d);return(null==e?void 0:e.name)??null},[i,d]);return u?c?(0,r.jsx)(S,{location:"field-name"}):(0,r.jsx)(u,{category:i,fieldId:e,selectedOptionLabel:p}):(0,r.jsxs)("label",{className:"itemEditorLabel",htmlFor:e,children:[i.name,(0,r.jsx)(S,{location:"field-name"})]})},k=()=>{var e;let t=(0,n.useRef)(null),{instanceId:i,category:s}=(0,l.a)(),a=null==(e=(0,l.u)(e=>e.itemEditorsList[i]))?void 0:e.options.hideValidationErrors,d=(0,l.b)().error,{errorMsg:u,hasError:c}=((e,t)=>{var i,r;let{validations:s,uid:a,is_hidden:d}=e,u=null==(i=(0,l.u)(e=>e.itemEditorsList[t]))?void 0:i.userSelections,c=(0,l.u)(e=>e.addValidationError),p=(0,l.u)(e=>e.removeValidationError),[g,m]=(0,n.useState)(null),[h,v]=(0,n.useState)(!1),x=(null==(r=(0,o.a)(u,a))?void 0:r.value)||"";(0,n.useEffect)(()=>{s?y():f()},[x,s]);let f=()=>{m(null),v(!1)},y=()=>{f(),Object.entries(s||{}).forEach(([i,n])=>{let{value:l,error_text:o}=n||{};if(!1!==l&&null!=l)switch(i){case"is_required":x?p(t,{categoryId:e.id,validationType:i}):j(o||"This field is required.",i);break;case"min_text_length":I(o,l,"min",i);break;case"max_text_length":I(o,l,"max",i)}})},j=(i,n)=>{d||(m(i),v(!0),c(t,{categoryId:e.id,validationType:n,errorMsg:i}))},I=(i,n,l,o)=>{var r;let a=x||"";(a.length||"min"!==l||null==(r=null==s?void 0:s.is_required)||!r.value)&&(("min"===l?a.length>=n:a.length<=n)?p(t,{categoryId:e.id,validationType:o}):j(i,o))};return{hasError:h,errorMsg:g,resetError:f}})(s,i);return(0,n.useEffect)(()=>{var e;c&&t.current&&t.current.setAttribute("data-error","true"),c||null==(e=document.querySelector(".error-border"))||e.classList.remove("error-border")},[c]),a||!c?null:d?(0,r.jsx)("div",{ref:t,id:`error-wrapper-${s.uid}`,"data-error":"true",children:(0,r.jsx)(d,{errorMessage:u})}):(0,r.jsx)("p",{ref:t,id:`error-wrapper-${s.uid}`,"data-error":"true",style:{color:"red",fontSize:"12px",margin:"4px 0",display:"none"},className:c?"iec-invalid-input":"",children:u})},F=s.d.div`
88    &.hide-when-show-only-switch {
89        display: none;
90    }
91`,N=s.d.div`
92    display: grid;
93    grid-template-columns: minmax(0, 1fr);
94    grid-auto-flow: column;
95    grid-auto-columns: minmax(0, 1fr);
96`,P=({children:e})=>{var t;let{category:i,instanceId:n}=(0,l.a)(),o=(0,l.u)(e=>{var t;return null==(t=e.itemEditorsList[n])?void 0:t.options}),s=null==(t=i.options)?void 0:t.some(e=>e.isLinkComponent||null!==e.related_product),a=(null==o?void 0:o.showOnlySwitchOptions)&&!s;return(0,r.jsxs)(F,{className:`field-wrapper-${i.uid} ${s?"link-component-wrapper":""} ${a?"hide-when-show-only-switch":""}`,children:[(0,r.jsx)(E,{}),(0,r.jsxs)(N,{children:[e,(0,r.jsx)(S,{location:"to-right"})]}),(0,r.jsx)(k,{}),(0,r.jsx)(S,{})]})},$=()=>{let{instanceId:e,category:t}=(0,l.a)(),i=(0,l.b)().drawer,{onOptionChange:n,selectedOptionId:o}=h(t,e),s=e=>{e&&n(e)};return i?(0,r.jsx)(i,{category:t,instanceId:e,selectedOptionId:o,onOptionChange:s}):(0,r.jsx)(b,{instanceId:e,category:t,onOptionChange:s,selectedOptionId:o})},M=n.memo(()=>{let{display_type:e}=(0,l.a)();return(0,r.jsx)(P,{children:e.includes("carousel")?(0,r.jsx)(v,{}):e.includes("grid")?(0,r.jsx)(C,{}):e.includes("drawer")?(0,r.jsx)($,{}):(0,r.jsx)(w,{})})}),U=({category:e,onInputBlur:t,onInputChange:i,onInputFocus:n,inputMaxLength:l,value:o})=>{let{text_placeholder:s}=e;return(0,r.jsx)("div",{className:"textarea-input-wrapper",children:(0,r.jsx)("textarea",{rows:4,id:"ID",placeholder:s||"",onChange:i,onFocus:n,onBlur:t,maxLength:l,value:o})})},A=({category:e,onInputBlur:t,onInputChange:i,onInputFocus:n,inputMaxLength:l,value:o})=>{let{text_placeholder:s}=e;return(0,r.jsxs)("div",{className:"text-input-wrapper",children:[(0,r.jsx)("input",{type:"text",id:"ID",placeholder:s||"",onChange:i,onFocus:n,onBlur:t,maxLength:l,value:o}),l&&o.length>0&&(0,r.jsxs)("div",{className:"text-input-length-counter",children:[o.length,"/",l]})]})},B=n.memo(()=>{let{instanceId:e,category:t}=(0,l.a)(),{text_is_multiline:i}=t,s=(0,l.b)()[i?"textArea":"text"]||(i?U:A),{onInputBlur:a,onInputChange:d,onInputFocus:u,maxLength:c,value:p}=((e,t="")=>{var i,r;let{validations:s,id:a,uid:d}=e,u=(0,l.u)(e=>e.updateTextOptionSelection),c=null==(i=(0,l.u)(e=>e.itemEditorsList[t]))?void 0:i.userSelections,p=(null==(r=(0,o.a)(c,d))?void 0:r.value)||"",[g,m]=(0,n.use
96State)(()=>({inputFocus:!1,isLabelActive:!1})),h=(0,n.useMemo)(()=>{var e;if(!(null!=(e=null==s?void 0:s.max_text_length)&&e.value))return;let t=s.max_text_length.value;return"number"==typeof t?t:void 0},[s]),v=(0,n.useCallback)((0,o.d)(e=>{u(t,a,d,e)},100),[t,a,d,u]),x=(0,n.useCallback)(e=>{let t=e.target.value;(!h||t.length<=h)&&v(t)},[h,v]),f=(0,n.useCallback)(()=>{m(e=>({...e,inputFocus:!0})),o.e.emit("textOptionFocus",{instanceId:t,categoryUid:d,value:p})},[t,d,p]),y=(0,n.useCallback)(()=>{m(e=>({...e,inputFocus:!1}))},[]);return(0,n.useEffect)(()=>{m(e=>({...e,isLabelActive:e.inputFocus||(null==p?void 0:p.length)>0}))},[p,g.inputFocus]),{onInputFocus:f,onInputBlur:y,onInputChange:x,isLabelActive:g.isLabelActive,value:p,inputFocus:g.inputFocus,maxLength:h}})(t,e);return(0,r.jsx)(P,{children:(0,r.jsx)(s,{instanceId:e,onInputBlur:a,onInputChange:d,onInputFocus:u,inputMaxLength:c,value:p,category:t})})}),D=()=>{var e;let{instanceId:t,category:i}=(0,l.a)(),n=(0,l.u)(e=>e.itemEditorsList[t]),o=null==n?void 0:n.productData,s=null==n?void 0:n.options.hidePhotoPendantCategory,a=(0,l.b)().photoUpload,d=(0,l.u)(e=>e.getFieldValueById)(t,i.uid);if(s||!a||!o)return null;let u=(null==(e=o.categories)?void 0:e.find(e=>e.uid===i.uid))||i;return(0,r.jsx)(P,{children:(0,r.jsxs)("div",{className:"photo-upload-field",children:[(0,r.jsx)(a,{category:u,instanceKey:t}),d&&(0,r.jsx)("img",{src:"",className:"photo-upload-image"})]})})};var V=i(8106);let R=s.d.div`
97   display: grid;
98   grid-template-columns: auto 1fr;
99   column-gap: 16px;
100   row-gap: 4px;
101`,G=s.d.div`
102   grid-column: span 2;
103   display: grid;
104   grid-template-columns: subgrid;
105   justify-items: start;
106   align-items: center;
107`,z=n.memo(({instanceId:e,className:t})=>{let i=(0,l.u)(t=>t.itemEditorsList[e]);if(!i)return null;let{userSelections:n,productData:s}=i,d=(0,o.c)(s.categories,n);return(0,r.jsx)(R,{id:"item-editor-view-mode",className:t,children:d.map(e=>{var t;let i=(null==(t=e.labels[0])?void 0:t.name.replace(" ","-").toLowerCase())||"";return(0,r.jsxs)(G,{className:i,children:[(0,r.jsx)("span",{className:"view-label",children:e.category_name}),(0,r.jsx)("span",{className:"view-value",children:(0,r.jsx)(a,{selection:e})})]},e.category_id)})})}),T=n.memo(({instanceId:e,className:t,catalog:i,selections:o,plugins:s=[],visibleCategoryUids:a,categoryOrder:d="catalog"})=>{let u=(0,V.P)(l.u,t=>{var i;return(null==(i=t.itemEditorsList[e])?void 0:i.productData)??null}),c=(0,V.P)(l.u,t=>{var i;return null==(i=t.itemEditorsList[e])?void 0:i.options}),{categories:p,show_and_hides:g}=i,m=(0,n.useMemo)(()=>(0,l.g)(p,g,o||[]),[p,g,o]),h=(0,n.useMemo)(()=>(0,l.d)(i,m,c),[i,m,c]),v=u??h;W(e);let x=(0,n.useMemo)(()=>e=>{switch(e){case"text":return(0,r.jsx)(B,{});case"selection":return(0,r.jsx)(M,{});case"template_customization":return(0,r.jsx)(D,{});default:return null}},[]),f=(0,n.useMemo)(()=>{let e=(null==v?void 0:v.categories.filter(e=>"dnd"!==e.display_type))??[],t=e=>{var t;let i=null==(t=e.options)?void 0:t[0];return i&&"isLinkComponent"in i&&i.isLinkComponent},i=a&&a.length>0?new Set(a):null,n=e=>!i||i.has(e.uid);return null!=c&&c.hideSwitchOptions?e.filter(e=>!t(e)&&n(e)):null!=c&&c.showOnlySwitchOptions?e.filter(e=>t(e)&&n(e)):"presentation"===d&&null!=a&&a.length?e.filter(n).sort((e,t)=>a.indexOf(e.uid)-a.indexOf(t.uid)):e.filter(n).sort((e,t)=>e.order-t.order)},[null==v?void 0:v.categories,null==c?void 0:c.hideSwitchOptions,null==c?void 0:c.showOnlySwitchOptions,a,d]);return v?(0,r.jsx)("div",{id:"item-editor-edit-mode",className:t,children:f.map(t=>{let{is_hidden:i,uid:n,type:o,display_type:a}=t;return i?null:(0,r.jsx)(l.E.Provider,{value:{instanceId:e,category:t,display_type:a,plugins:s},children:x(o)},n)})}):null}),q=({instanceKey:e,mode:t,catalogProduct:i,userSelections:n,customComponents:o,className:s,plugins:a,visibleCategoryUids:d,categoryOrder:u})=>(0,r.jsx)(l.C,{value:o||{},children:"view"===t?(0,r.jsx)(z,{instanceId:e,className:s}):(0,r.jsx)(T,{catalog:i,selections:n,instanceId:e,className:s,plugins:a,visibleCategoryUids:d,categoryOrder:u})}),K=()=>{let{category:e,plugins:t}=(0,l.a)();return(0,n.useMemo)(()=>
107{if(!t||!e)return{fieldNamePlugin:null,toRightPlugin:null,defaultPlugin:null};let i=t.find(t=>t.categoryUid===e.uid&&"field-name"===t.location)||null;return{fieldNamePlugin:i,toRightPlugin:t.find(t=>t.categoryUid===e.uid&&"to-right"===t.location)||null,defaultPlugin:t.find(t=>t.categoryUid===e.uid&&!t.location)||null}},[t,e])},W=e=>{let t=(0,l.u)(t=>t.itemEditorsList[e]),i=(0,l.u)(e=>e.updateUserSelectionByInstanceId),r=(0,l.c)(e=>e.preferences),s=null==t?void 0:t.options.userPreferencesEnabled;(0,n.useEffect)(()=>{!s||!t||t.productData.categories.find(e=>"_"!==e.uid.slice(-1))||t.productData.categories.forEach(({type:n,options:l,uid:s,id:a,is_hidden:d})=>{var u;if(d)return;let c="selection"===n&&(null==(u=null==l?void 0:l[0])?void 0:u.isLinkComponent),p=(0,o.a)(null==t?void 0:t.userSelections,s),g=null==p?void 0:p.value,m=r[a],h=(null==l?void 0:l.some(e=>e.id===m&&e.is_active))||"text"===n;("text"===n||!c)&&m&&g!==m&&h&&i(e,{category_id:a,category_uid:s,value:m})})},[t,s,i,r,e])},H=(e,t={},i=null,o="new",s)=>{let a=(0,l.u)(e=>e.createInstance),d=(0,l.u)(e=>e.getItemEditorById),u=(0,n.useMemo)(()=>"view"===o?`${i}-view`:i||"",[i,o]),c=(0,n.useMemo)(()=>({userPreferencesEnabled:(null==t?void 0:t.userPreferencesEnabled)||!1,hideValidationErrors:(null==t?void 0:t.hideValidationErrors)||!1,hidePhotoPendantCategory:(null==t?void 0:t.hidePhotoPendantCategory)||!1,disableLinksInSelectionFields:(null==t?void 0:t.disableLinksInSelectionFields)||!1,showOnlySwitchOptions:(null==t?void 0:t.showOnlySwitchOptions)||!1,hideSwitchOptions:(null==t?void 0:t.hideSwitchOptions)||!1}),[null==t?void 0:t.userPreferencesEnabled,null==t?void 0:t.hideValidationErrors,null==t?void 0:t.hidePhotoPendantCategory,null==t?void 0:t.disableLinksInSelectionFields,null==t?void 0:t.showOnlySwitchOptions,null==t?void 0:t.hideSwitchOptions]),p=(0,n.useCallback)(e=>e?d(e):null,[d]),g=(0,n.useMemo)(()=>e?a(e,s,o,u,c):"",[e,s,a,o,u,c]),m=(0,n.useCallback)(({customComponents:t,className:i,plugins:n,visibleCategoryUids:l,categoryOrder:a})=>g?(0,r.jsx)(q,{catalogProduct:e,userSelections:s,className:i,instanceKey:g,mode:o,customComponents:t,plugins:n,visibleCategoryUids:l,categoryOrder:a}):null,[g,e,s,o]);return(0,n.useMemo)(()=>({instanceKey:g,getInstance:p,ItemEditor:m}),[g,p,m])},J=e=>(0,l.u)(t=>{var i;return(null==(i=t.itemEditorsList[e||""])?void 0:i.priceAdjustmentsSum)??0}),Q=e=>{var t;return(null==(t=l.u.getState().itemEditorsList[e||""])?void 0:t.priceAdjustmentsSum)??0}}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.