p-96f1eab7.entry.js

/*!
 * Built by BASIS
 * Copyright BASIS International Ltd.
 */
import{r as t,c as s,h as i,H as o,g as e}from"./p-0e3693b5.js";import{r as h,s as n}from"./p-22ab23bc.js";import"./p-384ad3a0.js";const r={approve:"Ok",cancel:"Cancel",family:"Font:",style:"Style:",size:"Size:",plain:"Plain",bold:"Bold",italic:"Italic","bold italic":"Bold Italic"},c=["plain","bold","italic","bold italic"],l=["Andale Mono","Arial","Comic Sans MS","Courier New","Cursive","Fantasy","Georgia","Impact","Monospace","Sans-Serif","Serif","Times New Roman","Trebuchet MS","Verdana","Webdings"],a=class{constructor(i){t(this,i),this.changedEvent=s(this,"dwc-changed",7),this.approvedEvent=s(this,"dwc-approved",7),this.canceledEvent=s(this,"dwc-canceled",7),this.approveAccessKey=void 0,this.components="family, style, size, preview",this.cancelAccessKey=void 0,this.disabled=!1,this.distance=5,this.expanse="m",this.familiesList=l,this.fontFamily="Arial",this.fontSize=14,this.fontStyle="Plain",this.i18n=r,this.openWidth="480px",this.openHeight="480px",this.opened=!1,this.placement="bottom-end",this.popup=!1,this.previewText="The quick brown fox jumps over the lazy dog",this.previewFontsInList=!1,this.skidding=12,this.sizesList=[8,9,10,11,12,...h(14,72,2)],this.stylesList=c}onValuesChanged(){this.updatePreview(this.fontFamily,this.fontStyle,this.fontSize),this.updateScroll()}connectedCallback(){this.handleSelectionChanged=this.handleSelectionChanged.bind(this),this.handleListInputModified=this.handleListInputModified.bind(this),this.handleListInputBlurred=this.handleListInputBlurred.bind(this),this.handlePopoverHandlerBlurred=this.handlePopoverHandlerBlurred.bind(this),this.handleCancel=this.handleCancel.bind(this),this.handleApprove=this.handleApprove.bind(this),this.handleOpened=this.handleOpened.bind(this),this.handleClosed=this.handleClosed.bind(this)}async componentWillLoad(){this.lastSelectedFontFamily=this.fontFamily,this.lastSelectedFontStyle=this.fontStyle,this.lastSelectedFontSize=this.fontSize}componentDidLoad(){this.onValuesChanged()}async approve(){this.components.indexOf("approveButton")>-1&&this.$approveButton.click()}async cancel(){this.components.indexOf("cancelButton")>-1&&this.$cancelButton.click()}updateScroll(){[[this.$familiesList,this.fontFamily],[this.$stylesList,this.fontStyle],[this.$sizesList,this.fontSize]].forEach((t=>{const s=t[0];if(s){const i=s.items.findIndex((s=>s.value.toLowerCase()===String(t[1]).toLowerCase()));i>-1&&s.scrollToIndex(i)}}))}handleSelectionChanged(t){const s=t.target,i=s.selected[0];s===this.$familiesList&&(this.fontFamily=this.$familiesList.items[i].value),s===this.$stylesList&&(this.fontStyle=this.$stylesList.items[i].value),s===this.$sizesList&&(this.fontSize=Number(this.$sizesList.items[i].value)),this.lastSelectedFontFamily=this.fontFamily,this.lastSelectedFontStyle=this.fontStyle,this.lastSelectedFontSize=this.fontSize,this.fireChangedEvent(),this.updatePreview(this.fontFamily,this.fontStyle,this.fontSize)}async handleListInputModified(t){const s=t.target,i=s.value;if(!i)return;const o=(t,s)=>{const i=new RegExp(t,"ig");return s.findIndex((t=>i.test(t.label)))};if(s===this.$familyInput){const t=this.$familiesList,s=o(i,t.items);s>-1&&(t.selected=[s],this.lastSelectedFontFamily=t.items[s].value,await t.scrollToIndex(s),this.fireChangedEvent())}if(s===this.$styleInput){const t=this.$stylesList,s=o(i,t.items);s>-1&&(t.selected=[s],this.lastSelectedFontStyle=t.items[s].value,await t.scrollToIndex(s),this.fireChangedEvent())}if(s===this.$sizeInput){const t=this.$sizesList,s=o(i,t.items);s>-1&&(t.selected=[s],this.lastSelectedFontSize=Number(t.items[s].value),await t.scrollToIndex(s),this.fireChangedEvent())}this.updatePreview(this.lastSelectedFontFamily,this.lastSelectedFontStyle,this.lastSelectedFontSize)}handleListInputBlurred(){const{name:t,style:s,size:i}=this.validateFontVariation(this.lastSelectedFontFamily,this.lastSelectedFontStyle,this.lastSelectedFontSize);this.fontFamily=t,this.fontStyle=s,this.fontSize=i}handlePopoverHandlerBlurred(t){const s=t.target,i=s.value;let o=this.lastSelectedFontFamily,e=this.lastSelectedFontStyle,h=this.lastSelectedFontSize;if(i){const t=i.split(",");1===t.length&&(isNaN(t[0])?o=t[0].trim():h=Number(t[0])),2===t.length&&(o=t[0].trim(),Number.isNaN(t[1])?e=t[1].trim():h=Number(t[1])),3===t.length&&(o=t[0].trim(),e=t[1].trim(),h=Number(t[2]))}({name:o,style:e,size:h}=this.validateFontVariation(o,e,h,!0)),this.$familiesList&&(this.lastSelectedFontFamily=this.fontFamily=this.$familiesList.items.find((t=>t.value.toLowerCase()===o.toLowerCase())).value),this.$stylesList&&(this.lastSelectedFontStyle=this.fontStyle=this.$stylesList.items.find((t=>t.value.toLowerCase()===e.toLowerCase())).value),this.lastSelectedFontSize=this.fontSize=h,s.value=this.getPopoverHandlerValue()}handleApprove(){this.approvedEvent.emit({family:this.lastSelectedFontFamily,style:this.lastSelectedFontStyle,size:this.lastSelectedFontSize}),this.$popover&&(this.$popover.opened=!1)}handleCancel(){this.canceledEvent.emit(),this.$popover&&(this.$popover.opened=!1)}handleOpened(){this.opened=!0,this.$focusTrap.focusFirstElement(),[this.$familiesList,this.$stylesList,this.$sizesList].forEach((t=>{var s;(null===(s=null==t?void 0:t.selected)||void 0===s?void 0:s.length)&&t.scrollToIndex(t.selected[t.selected.length-1])}))}handleClosed(){this.opened=!1}fireChangedEvent(){this.changedEvent.emit({family:this.lastSelectedFontFamily,style:this.lastSelectedFontStyle,size:this.lastSelectedFontSize})}parseList(t){return"string"==typeof t?JSON.parse(t):t}validateFontVariation(t,s,i,o=!1){const e=this.parseList(this.familiesList),h=this.parseList(this.stylesList),n=this.parseList(this.sizesList),c=e.findIndex((s=>s.toLowerCase()===t.toLowerCase())),l=n.findIndex((t=>Number(t)===i));let a;if(o){const t=Object.assign(r,this.parseList(this.i18n));a=[t.plain,t.italic,t.bold,t["bold italic"]].findIndex((t=>t.toLowerCase()===s.toLowerCase()))}else a=h.findIndex((t=>t.toLowerCase()===s.toLowerCase()));return-1===c&&(t=this.fontFamily),-1===a&&(s=this.fontStyle),-1===l&&(i=this.fontSize),{name:t,style:s,size:i}}updatePreview(t,s,i){const o=s.toLocaleLowerCase().includes("italic")?"italic":"normal",e=`${s.toLocaleLowerCase().includes("bold")?"bold":"normal"} ${o} ${i}px ${t}`;[this.el,this.$control].forEach((t=>{t.style.setProperty("--dwc-font-chooser-current-font",e)}))}getPopoverHandlerValue(){const t=n(this.components),s=t.indexOf("family")>-1,i=t.indexOf("size")>-1,o=t.indexOf("style")>-1,e=Object.assign(r,this.parseList(this.i18n));return[s?this.fontFamily:"",o?e[this.fontStyle.toLowerCase()]:"",i?this.fontSize:""].filter(Boolean).join(", ")}render(){const t=Object.assign(r,this.parseList(this.i18n)),s=this.parseList(this.familiesList).map((t=>({label:this.previewFontsInList?`<span style='font-family: "${t}"'>${t}</span>`:t,value:t}))),e=s.findIndex((t=>t.value.toLowerCase()===this.fontFamily.toLowerCase())),h=this.parseList(this.sizesList).map((t=>({label:t.toString(),value:t.toString()}))),c=h.findIndex((t=>t.value==this.fontSize.toString())),l="string"==typeof this.stylesList?JSON.parse(this.stylesList):this.stylesList,a=l.map((s=>({label:t[s.toLowerCase()],value:s.toLowerCase()}))),d=a.findIndex((t=>t.value==this.fontStyle.toLocaleLowerCase())),p=n(this.components),f=p.indexOf("family")>-1,w=p.indexOf("size")>-1,u=p.indexOf("style")>-1,b=p.indexOf("preview")>-1,v=p.indexOf("approveButton")>-1,m=p.indexOf("cancelButton")>-1,_=()=>i("div",{ref:t=>this.$control=t,class:{control:!0,"control--disabled":this.disabled,"control--popover":this.popup}},i("div",{class:"control__lists"},f&&i("div",{class:"control__listContainer control__listContainer--families"},i("dwc-field",{ref:t=>this.$familyInput=t,class:"control__input control__input--families",label:t.family,value:this.fontFamily,expanse:this.expanse,disabled:this.disabled,"onDwc-modified":this.handleListInputModified,"onDwc-blurred":this.handleListInputBlurred}),i("dwc-listbox",{ref:t=>this.$familiesList=t,class:"control__list control__list--families",items:s,selected:e>-1?[e]:[],expanse:this.expanse,disabled:this.disabled,"onDwc-selected":this.handleSelectionChanged})),u&&i("div",{class:"control__listContainer control__listContainer--styles"},i("dwc-field",{ref:t=>this.$styleInput=t,class:"control__input control__input--styles",label:t.style,value:t[l[d].toLocaleLowerCase()],expanse:this.expanse,disabled:this.disabled,"onDwc-modified":this.handleListInputModified,"onDwc-blurred":this.handleListInputBlurred}),i("dwc-listbox",{ref:t=>this.$stylesList=t,class:"control__list control__list--styles",items:a,selected:d>-1?[d]:[],expanse:this.expanse,disabled:this.disabled,"onDwc-selected":this.handleSelectionChanged})),w&&i("div",{class:"control__listContainer control__listContainer--sizes"},i("dwc-field",{ref:t=>this.$sizeInput=t,class:"control__input control__input--sizes",label:t.size,value:this.fontSize,expanse:this.expanse,disabled:this.disabled,"onDwc-modified":this.handleListInputModified,"onDwc-blurred":this.handleListInputBlurred,type:"number"}),i("dwc-listbox",{ref:t=>this.$sizesList=t,class:"control__list control__list--sizes",items:h,selected:c>-1?[c]:[],expanse:this.expanse,disabled:this.disabled,"onDwc-selected":this.handleSelectionChanged}))),b&&i("div",{class:"control__preview"},this.previewText),(v||m)&&i("div",{class:"control__buttons"},v&&i("dwc-button",{label:t.approve,theme:"primary",accessKey:this.approveAccessKey,expanse:this.expanse,disabled:this.disabled,onClick:this.handleApprove}),m&&i("dwc-button",{label:t.cancel,accessKey:this.cancelAccessKey,expanse:this.expanse,disabled:this.disabled,onClick:this.handleCancel})));return i(o,{class:{BBjControl:!0,BBjFontChooser:!0,"bbj-disabled":this.disabled,"bbj-popup":this.popup}},this.popup?i("dwc-popover",{ref:t=>this.$popover=t,class:{popover:!0,"popover--xs":"xs"===this.expanse,"popover--s":"s"===this.expanse,"popover--m":"m"===this.expanse,"popover--l":"l"===this.expanse,"popover--xl":"xl"===this.expanse},placement:this.placement,distance:this.distance,skidding:this.skidding,disabled:this.disabled,openWidth:this.openWidth,openHeight:this.openHeight,opened:this.opened,arrow:!1,type:"font-chooser","onDwc-popover-opened":this.handleOpened,"onDwc-popover-closed":this.handleClosed,"onDwc-popover-canceled":this.handleCancel},i("dwc-field",{slot:"handler",class:{popover__popoverHandler:!0,"popover__popoverHandler--disabled":this.disabled},value:this.getPopoverHandlerValue(),expanse:this.expanse,disabled:this.disabled,"onDwc-blurred":this.handlePopoverHandlerBlurred},i("dwc-icon",{pool:"dwc",name:"typography",slot:"prefix"})),i("focus-trap",{ref:t=>this.$focusTrap=t},i(_,null))):i(_,null))}get el(){return e(this)}static get watchers(){return{fontFamily:["onValuesChanged"],fontSize:["onValuesChanged"],fontStyle:["onValuesChanged"]}}};a.style="@media (prefers-reduced-motion: reduce){*.sc-dwc-font-chooser,.sc-dwc-font-chooser::before,.sc-dwc-font-chooser::after{animation-delay:-1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;background-attachment:initial !important;scroll-behavior:auto !important;transition-delay:0s !important;transition-duration:0s !important}}.sc-dwc-font-chooser-h{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;-webkit-tap-highlight-color:transparent;text-size-adjust:100%}.sc-dwc-font-chooser-h *.sc-dwc-font-chooser,.sc-dwc-font-chooser-h *.sc-dwc-font-chooser::before,.sc-dwc-font-chooser-h *.sc-dwc-font-chooser::after{box-sizing:inherit}.sc-dwc-font-chooser-h{display:block}.sc-dwc-font-chooser-h:not([popup]){height:480px;width:480px}.control.sc-dwc-font-chooser{align-items:flex-start;border:var(--dwc-border-width) solid var(--dwc-color-default);border-radius:var(--dwc-border-radius-s);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--dwc-space-s);height:100%;padding:var(--dwc-space-s);position:relative;width:100%}.control--popover.sc-dwc-font-chooser{border:0;border-radius:0;height:var(--dwc-popover-open-height)}.control__lists.sc-dwc-font-chooser{align-items:flex-start;align-self:stretch;display:flex;flex:2;flex-direction:row;flex-grow:1;gap:var(--dwc-space-s);overflow:auto;width:100%}.control__listContainer.sc-dwc-font-chooser{align-items:flex-start;align-self:stretch;box-sizing:border-box;display:flex;flex:1;flex-direction:column;flex-grow:1;gap:var(--dwc-space-s);height:100%}.control__listContainer--families.sc-dwc-font-chooser{flex:2}.control__input.sc-dwc-font-chooser{margin:var(--dwc-focus-ring-width)}.control__input.sc-dwc-font-chooser,.control__input.sc-dwc-font-chooser::part(input){width:calc(100% - var(--dwc-focus-ring-width) * 2)}.control__list.sc-dwc-font-chooser{height:100%;overflow:hidden;width:100%}.control__preview.sc-dwc-font-chooser{align-items:center;align-self:stretch;border:var(--dwc-border-width) solid var(--dwc-color-default);border-radius:var(--dwc-space-s);box-sizing:border-box;display:flex;flex:none;flex-direction:row;flex-grow:0;font:var(--dwc-font-chooser-current-font);gap:var(--dwc-space-s);height:50px;overflow:auto;padding:10px}.control__buttons.sc-dwc-font-chooser{align-items:flex-end;align-self:stretch;display:flex;flex:1;flex-direction:row;flex-grow:0;gap:var(--dwc-space-s);justify-content:flex-end}.popover__popoverHandler.sc-dwc-font-chooser::part(input){width:100%}.popover__popoverHandler.sc-dwc-font-chooser dwc-icon.sc-dwc-font-chooser{height:20px;padding:0 var(--dwc-space-xs);width:20px}.control--disabled.sc-dwc-font-chooser{cursor:var(--dwc-disabled-cursor);opacity:var(--dwc-disabled-opacity);user-select:none;pointer-events:none}.control--disabled.sc-dwc-font-chooser *.sc-dwc-font-chooser{cursor:var(--dwc-disabled-cursor);user-select:none;pointer-events:none}";export{a as dwc_font_chooser}