{"version":3,"file":"item-picker-modal.element-DCqPEIst.js","sources":["../../../src/packages/core/modal/common/item-picker/item-picker-modal.element.ts"],"sourcesContent":["import {\n\tcss,\n\thtml,\n\tcustomElement,\n\trepeat,\n\tnothing,\n\twhen,\n\tstate,\n\tifDefined,\n} from '@umbraco-cms/backoffice/external/lit';\nimport { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';\nimport { UmbTextStyles } from '@umbraco-cms/backoffice/style';\nimport type { UmbItemPickerModalData, UmbItemPickerModel } from '@umbraco-cms/backoffice/modal';\nimport { umbFocus } from '@umbraco-cms/backoffice/lit-element';\n\n@customElement('umb-item-picker-modal')\nexport class UmbItemPickerModalElement extends UmbModalBaseElement<UmbItemPickerModalData, UmbItemPickerModel> {\n\t@state()\n\tprivate _filtered: Array<UmbItemPickerModel> = [];\n\n\t#close() {\n\t\tthis.modalContext?.reject();\n\t}\n\n\t#filter(event: { target: HTMLInputElement }) {\n\t\tif (!this.data) return;\n\n\t\tif (event.target.value) {\n\t\t\tconst query = event.target.value.toLowerCase();\n\t\t\tthis._filtered = this.data.items.filter(\n\t\t\t\t(item) => item.label.toLowerCase().includes(query) || item.value.toLowerCase().includes(query),\n\t\t\t);\n\t\t} else {\n\t\t\tthis._filtered = this.data.items;\n\t\t}\n\t}\n\n\t#submit(item: UmbItemPickerModel) {\n\t\tthis.modalContext?.setValue(item);\n\t\tthis.modalContext?.submit();\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\n\t\tif (!this.data) return;\n\t\tthis._filtered = this.data.items;\n\t}\n\n\toverride render() {\n\t\tif (!this.data) return nothing;\n\t\tconst items = this._filtered;\n\t\treturn html`\n\t\t\t<umb-body-layout headline=${this.localize.string(this.data.headline)}>\n\t\t\t\t<div id=\"main\">\n\t\t\t\t\t<uui-input\n\t\t\t\t\t\ttype=\"search\"\n\t\t\t\t\t\tplaceholder=${this.localize.term('placeholders_filter')}\n\t\t\t\t\t\t@input=${this.#filter}\n\t\t\t\t\t\t${umbFocus()}>\n\t\t\t\t\t\t<div slot=\"prepend\">\n\t\t\t\t\t\t\t<uui-icon name=\"search\"></uui-icon>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</uui-input>\n\t\t\t\t\t${when(\n\t\t\t\t\t\titems.length,\n\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t<uui-box>\n\t\t\t\t\t\t\t\t<uui-ref-list>\n\t\t\t\t\t\t\t\t\t${repeat(\n\t\t\t\t\t\t\t\t\t\titems,\n\t\t\t\t\t\t\t\t\t\t(item) => item.value,\n\t\t\t\t\t\t\t\t\t\t(item) => html`\n\t\t\t\t\t\t\t\t\t\t\t<umb-ref-item\n\t\t\t\t\t\t\t\t\t\t\t\tname=${this.localize.string(item.label)}\n\t\t\t\t\t\t\t\t\t\t\t\tdetail=${ifDefined(item.description)}\n\t\t\t\t\t\t\t\t\t\t\t\ticon=${ifDefined(item.icon)}\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${() => this.#submit(item)}>\n\t\t\t\t\t\t\t\t\t\t\t</umb-ref-item>\n\t\t\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</uui-ref-list>\n\t\t\t\t\t\t\t</uui-box>\n\t\t\t\t\t\t`,\n\t\t\t\t\t\t() => html`<p>There are no items to select.</p>`,\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div slot=\"actions\">\n\t\t\t\t\t<uui-button @click=${this.#close} label=\"${this.localize.term('general_close')}\"></uui-button>\n\t\t\t\t</div>\n\t\t\t</umb-body-layout>\n\t\t`;\n\t}\n\n\tstatic override styles = [\n\t\tUmbTextStyles,\n\t\tcss`\n\t\t\t#main {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: var(--uui-size-space-5);\n\t\t\t}\n\n\t\t\tuui-box > uui-input {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\tuui-box > uui-button {\n\t\t\t\tdisplay: block;\n\t\t\t\t--uui-button-content-align: flex-start;\n\t\t\t}\n\n\t\t\tuui-box > uui-button:not(:last-of-type) {\n\t\t\t\tmargin-bottom: var(--uui-size-space-5);\n\t\t\t}\n\n\t\t\th4 {\n\t\t\t\ttext-align: left;\n\t\t\t\tmargin: 0.5rem 0;\n\t\t\t}\n\n\t\t\tp {\n\t\t\t\ttext-align: left;\n\t\t\t\tmargin: 0 0 0.5rem 0;\n\t\t\t}\n\t\t`,\n\t];\n}\n\nexport default UmbItemPickerModalElement;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'umb-item-picker-modal': UmbItemPickerModalElement;\n\t}\n}\n"],"names":["_UmbItemPickerModalElement_instances","close_fn","filter_fn","submit_fn","UmbItemPickerModalElement","UmbModalBaseElement","__privateAdd","nothing","items","html","__privateMethod","umbFocus","when","repeat","item","ifDefined","event","query","UmbTextStyles","css","__decorateClass","state","customElement","UmbItemPickerModalElement$1"],"mappings":";;;;;;;;;;8OAAAA,GAAAC,GAAAC,GAAAC;AAgBa,IAAAC,IAAN,cAAwCC,EAAgE;AAAA,EAAxG,cAAA;AAAA,UAAA,GAAA,SAAA,GAAAC,EAAA,MAAAN,CAAA,GAEN,KAAQ,YAAuC;EAAC;AAAA,EAwBvC,oBAAoB;AAGxB,IAFJ,MAAM,kBAAkB,GAEnB,KAAK,SACL,KAAA,YAAY,KAAK,KAAK;AAAA,EAC5B;AAAA,EAES,SAAS;AACb,QAAA,CAAC,KAAK,KAAa,QAAAO;AACvB,UAAMC,IAAQ,KAAK;AACZ,WAAAC;AAAA,+BACsB,KAAK,SAAS,OAAO,KAAK,KAAK,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,oBAInD,KAAK,SAAS,KAAK,qBAAqB,CAAC;AAAA,eAC9CC,QAAKV,GAAOE,CAAA,CAAA;AAAA,QACnBS,GAAU;AAAA;AAAA;AAAA;AAAA;AAAA,OAKXC;AAAA,MACDJ,EAAM;AAAA,MACN,MAAMC;AAAA;AAAA;AAAA,WAGDI;AAAA,QACDL;AAAA,QACA,CAACM,MAASA,EAAK;AAAA,QACf,CAACA,MAASL;AAAA;AAAA,mBAED,KAAK,SAAS,OAAOK,EAAK,KAAK,CAAC;AAAA,qBAC9BC,EAAUD,EAAK,WAAW,CAAC;AAAA,mBAC7BC,EAAUD,EAAK,IAAI,CAAC;AAAA,qBAClB,MAAMJ,EAAA,MAAKV,GAALG,CAAA,EAAA,KAAA,MAAaW,CAAK,CAAA;AAAA;AAAA;AAAA,MAAA,CAGnC;AAAA;AAAA;AAAA;AAAA,MAIJ,MAAML;AAAA,IAAA,CACN;AAAA;AAAA;AAAA,0BAGoBC,QAAKV,GAAMC,CAAA,CAAA,WAAW,KAAK,SAAS,KAAK,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA,EAIlF;AAmCD;AA/GOD,IAAA,oBAAA,QAAA;AAINC,IAAM,WAAG;AACR,OAAK,cAAc;AACpB;AAEAC,IAAO,SAACc,GAAqC;AACxC,MAAC,KAAK;AAEN,QAAAA,EAAM,OAAO,OAAO;AACvB,YAAMC,IAAQD,EAAM,OAAO,MAAM,YAAY;AACxC,WAAA,YAAY,KAAK,KAAK,MAAM;AAAA,QAChC,CAACF,MAASA,EAAK,MAAM,YAAc,EAAA,SAASG,CAAK,KAAKH,EAAK,MAAM,YAAY,EAAE,SAASG,CAAK;AAAA,MAAA;AAAA,IAC9F;AAEK,WAAA,YAAY,KAAK,KAAK;AAE7B;AAEAd,IAAO,SAACW,GAA0B;AAC5B,OAAA,cAAc,SAASA,CAAI,GAChC,KAAK,cAAc;AACpB;AAxBYV,EA8EI,SAAS;AAAA,EACxBc;AAAA,EACAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BD;AA5GQC,EAAA;AAAA,EADPC,EAAM;AAAA,GADKjB,EAEJ,WAAA,aAAA,CAAA;AAFIA,IAANgB,EAAA;AAAA,EADNE,EAAc,uBAAuB;AAAA,GACzBlB,CAAA;AAiHb,MAAAmB,IAAenB;"}