/*!
 App Connect Tagify
 Version: 2.0.1
 (c) 2024 Wappler.io
 @build 2024-05-08 10:52:57
 */
dmx.Component("tagify",{extends:"form-element",initialData:{items:[],values:[]},attributes:{settings:{type:Object,default:{}},data:{type:Array,default:null},tagValue:{type:String,default:"$value"},tagText:{type:String,default:"$value"},tagSecondary:{type:String,default:null},tagImage:{type:String,default:null},tagClass:{type:String,default:null},tagCount:{type:String,default:null},tagReadonly:{type:String,default:null},nocustom:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},delimiters:{type:String,default:","},duplicates:{type:Boolean,default:!1},noinput:{type:Boolean,default:!1},maxTags:{type:Number,default:1/0},loading:{type:Boolean,default:!1},mode:{type:String,default:null},notrim:{type:Boolean,default:!1},noautocomplete:{type:Boolean,default:!1},keepInvalid:{type:Boolean,default:!1},skipInvalid:{type:Boolean,default:!1},minChars:{type:Number,default:2},caseSensitive:{type:Boolean,default:!1},maxItems:{type:Number,default:10},noFuzzySearch:{type:Boolean,default:!1},noAccentedSearch:{type:Boolean,default:!1},dropdownPosition:{type:String,default:"all",enum:["all","text","input"]},highlightFirst:{type:Boolean,default:!1},noCloseOnSelect:{type:Boolean,default:!1},pattern:{type:String,default:null},dragsort:{type:Boolean,default:!1}},methods:{addEmptyTag(){this._tagify.addEmptyTag()},addTags(t,e,a){this._tagify.addTags(t,e,a),this._updateData()},removeTags(t){this._tagify.removeTags(t),this._updateData()},removeAllTags(){this._tagify.removeAllTags(),this._updateData()}},events:{change:Event,add:Event,remove:Event,invalid:Event,input:Event,focus:Event,blur:Event,noresults:Event},init(t){this._formdataHandler=this._formdataHandler.bind(this),this._updateData=this._updateData.bind(this),this._transformTag=t=>{delete t.class,delete t.count,delete t.image,delete t.__dmx,delete t.__item;const e=this._whitelist().find((e=>e.value==t.value||e.label==t.value));e&&Object.assign(t,e)},dmx.Component("form-element").prototype.init.call(this,t),t.form&&t.form.addEventListener("formdata",this._formdataHandler)},destroy(){dmx.Component("form-element").prototype.destroy.call(this),this.$node.form&&this.$node.form.removeEventListener("formdata",this._formdataHandler),this._tagify.destroy()},render(t){this._tagify=new Tagify(t,{enforceWhitelist:this.props.nocustom,whitelist:this._whitelist(),tagTextProp:"label",delimiters:this.props.delimiters,duplicates:this.props.duplicates,userInput:!this.props.noinput,maxTags:this.props.maxTags,mode:this.props.mode,trim:!this.props.notrim,keepInvalidTags:this.props.keepInvalid,skipInvalid:this.props.skipInvalid,pattern:this.props.pattern&&this.props.pattern.startsWith("/")?new RegExp(this.props.pattern.replace(/^\/|\/$/,"")):this.props.pattern,autoComplete:{enabled:!this.props.noautocomplete,rightKey:!this.props.noautocomplete},dropdown:{enabled:this.props.minChars>=0&&this.props.minChars,searchKeys:["label"],caseSensitive:this.props.caseSensitive,maxItems:this.props.maxItems,fuzzySearch:!this.props.noFuzzySearch,accentedSearch:!this.props.noAccentedSearch,position:this.props.dropdownPosition,highlightFirst:this.props.highlightFirst,closeOnSelect:!this.props.noCloseOnSelect},originalInputValueFormat:t=>t.map((t=>t.value)).join(this.props.delimiters[0]),transformTag:this._transformTag,templates:this._templates,...this.props.settings}),this.props.nocustom&&!this.props.data?(this._tagify.loading(!0),this._tagify.setDisabled(!0)):this._tagify.loading(this.props.loading),this._tagify.setReadonly(this.props.readonly),this._tagify.on("change",(()=>this.dispatchEvent("change"))),this._tagify.on("focus",(()=>this.dispatchEvent("focus"))),this._tagify.on("blur",(()=>this.dispatchEvent("blur"))),this._tagify.on("add",(({detail:t})=>{this.dispatchEvent("add",null,{item:t.data.__item,value:t.data.value,isCustom:!t.data.__item})})),this._tagify.on("remove",(({detail:t})=>{this.dispatchEvent("remove",null,{item:t.data.__item,value:t.data.value,isCustom:t.data.__item})})),this._tagify.on("invalid",(({detail:t})=>{this.dispatchEvent("invalid",null,{value:t.data.value,message:t.message})})),this._tagify.on("input",(({detail:t})=>{this.dispatchEvent("input",null,{value:t.value,isValid:t.isValid})})),this._tagify.on("dropdown:noMatch",(({detail:t})=>{this.dispatchEvent("noresults",null,{value:t.value})})),this._tagify.on("change",this._updateData),this._tagify.on("focus",(()=>this.set("focused",!0))),this._tagify.on("blur",(()=>this.set("focused",!1))),this.props.dragsort&&this._setDragSort(!0)},performUpdate(t){this._tagify&&(t.has("dragSort")&&this._setDragSort(this.props.dragsort),t.has("disabled")&&(this._tagify.setDisabled(this.props.disabled),this.set("disabled",this.props.disabled)),t.has("readonly")&&this._tagify.setReadonly(this.props.readonly),t.has("data")&&(this._tagify.whitelist=this._whitelist(),this.props.nocustom?(this._setValue(this.props.value||"",!0),this._tagify.loading(this.props.loading),this._tagify.setDisabled(this.props.disabled)):(this._tagify.getTagElms().forEach((t=>{const e=this._tagify.getSetTagData(t);if(!e.__dmx){const a=this._whitelist().find((t=>t.value==e.value||t.label==e.value));a&&(Object.assign(e,a),this._tagify.replaceTag(t,e))}})),this._updateData())),t.has("value")&&this._setValue(this.props.value,!0),t.has("loading")&&this._tagify.loading(this.props.loading))},_setDragSort(t){this._dragsort&&this._dragsort.destroy(),t&&(window.DragSort?this._dragsort=new DragSort(this._tagify.DOM.scope,{selector:"."+this._tagify.settings.classNames.tag,callbacks:{dragEnd:()=>this._tagify.updateValueByDOMTags()}}):console.warn("DragSort is not loaded"))},_updateData(){const t=this._tagify.getCleanValue();this.set("items",t.map((t=>t.__item))),this.set("values",t.map((t=>t.value)))},_templates:{wrapper:(t,e)=>`\n        <tags\n          class="${e.classNames.namespace} ${e.mode?e.classNames[e.mode+"Mode"]:""} ${t.className}"\n          ${e.readonly?"readonly":""}\n          ${e.disabled?"disabled":""}\n          ${e.required?"required":""}\n          ${t.hasAttribute("dmxDomId")?`dmxDomId="${t.getAttribute("dmxDomId")}"`:""}\n          ${t.hasAttribute("style")?`style="${t.getAttribute("style")}"`:""}\n          tabindex="-1"\n        ><span\n          ${!e.readonly&&e.userInput?"contenteditable":""}\n          tabindex="0"\n          data-placeholder="${e.placeholder||"&#8203;"}"\n          aria-placeholder="${e.placeholder||""}"\n          class="${e.classNames.input}"\n          role="textbox"\n          aria-autocomplete="both"\n          aria-multiline="${"mix"==e.mode}"\n        ></span>&#8203;</tags>\n      `,tag(t){const e=this.settings;return`\n        <tag\n          ${t.readonly?"readonly":""}\n          title="${t.title||t.value}"\n          contenteditable="false"\n          spellcheck="false"\n          tabindex="${e.a11y.focusableTags?0:-1}"\n          class="${e.classNames.tag} ${t.class||""}"\n          style="white-space:nowrap;${t.style||""}"\n        >\n          <x\n            title=""\n            class="${e.classNames.tagX}"\n            role="button"\n            aria-label="remove tag"\n          ></x>\n          <div\n            ${"select"!=e.mode?'style="display:flex;align-items:center;"':""}\n          >\n            ${t.image?`\n              <img\n                onerror="this.style.visibility='hidden'"\n                src="${t.image}"\n                style="height:var(--tag-img-size, 1em);margin-right:.3em;pointer-events:none;"\n              >\n            `:""}\n            <span\n              class="${e.classNames.tagText}"\n            >${t[e.tagTextProp]||t.value}</span>\n          </div>\n        </tag>\n      `},dropdownItem(t){const e=getComputedStyle(this.DOM.originalInput),a=e.getPropertyValue("--item-gap")||".3em",s=e.getPropertyValue("--item-img-size")||"1em",i=e.getPropertyValue("--item-text-color")||"inherit",n=e.getPropertyValue("--item-sec-color")||"inherit",l=e.getPropertyValue("--items-sec-size")||".75em",o=e.getPropertyValue("--item_count-color")||"inherit";return`\n        <div\n          value="${t.value}"\n          class="${this.settings.classNames.dropdownItem} ${t.class||""}"\n          style="display:flex;align-items:center;gap:var(--item-gap, ${a})"\n          tabindex="0"\n          role="option"\n        >\n          ${t.image?`\n            <img\n              onerror="this.style.visibility='hidden'"\n              src="${t.image}"\n              style="height:var(--item-img-size, ${s});pointerevents:none"\n            >\n          `:""}\n          <div style="color:var(--item-text-color, ${i})">\n            ${t.label||t.value}\n            ${t.secondary?`\n              <br>\n              <span style="color:var(--item-sec-color, ${n});font-size:${l}">\n                ${t.secondary}\n              </span>\n            `:""}\n          </div>\n          ${t.count?`\n            <div style="color:var(--item-count-color, ${o}">\n              (${t.count})\n            </div>\n          `:""}\n        </div>\n      `}},_setValue(t,e){dmx.Component("form-element").prototype._setValue.call(this,t,e),this._tagify.loadOriginalValues(this.props.value),this._updateData()},_whitelist(){return Array.isArray(this.props.data)?this.props.data.map((t=>{const e=dmx.DataScope(t,this),a={__dmx:!0,__item:t,value:String(dmx.parse(this.props.tagValue,e)),label:String(dmx.parse(this.props.tagText,e))};return t.style&&(a.style=t.style),this.props.tagSecondary&&(a.secondary=dmx.parse(this.props.tagSecondary,e)),this.props.tagImage&&(a.image=dmx.parse(this.props.tagImage,e)),this.props.tagClass&&(a.class=dmx.parse(this.props.tagClass,e)),this.props.tagCount&&(a.count=dmx.parse(this.props.tagCount,e)),this.props.tagReadonly&&(a.readonly=!!dmx.parse(this.props.tagReadonly,e)),a})):[]},_formdataHandler(t){const e=t.formData;let a=this.$node.name;a&&"select"!=this.props.mode&&"mix"!=this.props.mode&&(e.delete(this.$node.name),Array.isArray(this.data.values)&&("[]"!=a.slice(-2)&&(a+="[]"),this.data.values.forEach((t=>{e.append(a,t)}))))},_resetHandler(t){this._tagify&&(this.$node.defaultValue?(this._setValue(this.$node.defaultValue),this._tagify.loadOriginalValues(this.$node.defaultValue)):this._tagify.removeAllTags(),this._updateData()),dmx.Component("form-element").prototype._resetHandler.call(this,t)}});
//# sourceMappingURL=dmxTagify.js.map