export const __webpack_ids__=["1624"];export const __webpack_modules__={4941:function(t,e,o){t.exports=o.p+"bookmark-check.22b3511032ad3541.svg"},86144:function(t,e,o){t.exports=o.p+"bookmark.431a822761ea8a1e.svg"},84500:function(t,e,o){o.r(e),o.d(e,{MDNCollectionSaveButton:()=>MDNCollectionSaveButton});var i=o(35470),s=o(14703),l=o(69535),n=o(13117),a=o(1045);o(86499),o(50272);let MDNCollectionSaveButton=class MDNCollectionSaveButton extends(0,l.q)(s.oi){static ssr=!1;static styles=a.Z;static properties={docUrl:{type:String,attribute:"doc-url"},docTitle:{type:String,attribute:"doc-title"},_item:{state:!0},_pending:{state:!0},_lastAction:{state:!0}};constructor(){super(),this.docUrl="",this.docTitle="",this._item=void 0,this._pending=!1,this._lastAction=void 0}_user=new i.iQ(this,{task:async()=>{let t=await (0,n.s)();return t.isAuthenticated&&this._bookmarks.run(),t}});_collections=new i.iQ(this,{task:async()=>{let t=await fetch("/api/v2/collections/");if(!t.ok)throw Error(`${t.status}: ${t.statusText}`);return await t.json()}});_bookmarks=new i.iQ(this,{autoRun:!1,args:()=>[this.docUrl],task:async([t])=>{let e=await fetch(`/api/v2/collections/lookup/?url=${encodeURIComponent(t)}`);if(!e.ok)throw Error(`${e.status}: ${e.statusText}`);let o=await e.json(),i=o?.results,s=i&&i.map(t=>({...t.item,collection_id:t.collection_id}));if(s[0]){let{collection_id:t,title:e,notes:o}=s[0];this._item={collection_id:t,title:e,notes:o}}return s}});_open(){this._bookmarks.run(),this._collections.run(),this.shadowRoot?.querySelector("mdn-modal")?.showModal()}_selectChange({target:t}){if(t instanceof HTMLSelectElement){let{value:e}=t;if("add"===e)this.shadowRoot?.querySelector("mdn-modal")?.close(),open("/en-US/plus/collections");else{let t=this._bookmarks.value?.find(t=>t.collection_id===e);this._item=t||{collection_id:e}}}}_cancel(){this.shadowRoot?.querySelector("mdn-modal")?.close()}async _delete(){let t=this.shadowRoot?.querySelector("select")?.value,e=this._bookmarks.value?.find(e=>e.collection_id===t);if(t&&e){this._pending=!0,this._lastAction="delete";let o=await fetch(`/api/v2/collections/${t}/items/${e.id}/`,{method:"DELETE"});o.ok||console.error(`${o.status}: ${o.statusText}`),this.shadowRoot?.querySelector("mdn-modal")?.close(),this._pending=!1,this._bookmarks.run()}}async _submit(){let t=this.shadowRoot?.querySelector("select")?.value,e=this._bookmarks.value?.find(e=>e.collection_id===t);if(t){this._pending=!0,this._lastAction="save";let o=`/api/v2/collections/${t}/items/${e?`${e.id}/`:""}`,i=await fetch(o,{body:JSON.stringify({url:this.docUrl,title:this.shadowRoot?.querySelector("input")?.value,notes:this.shadowRoot?.querySelector("textarea")?.value}),method:"POST",headers:{"content-type":"application/json"}});i.ok||console.error(`${i.status}: ${i.statusText}`),this.shadowRoot?.querySelector("mdn-modal")?.close(),this._pending=!1,this._bookmarks.run()}}connectedCallback(){super.connectedCallback(),this._user.run()}willUpdate(t){(t.has("docUrl")||t.has("docTitle"))&&(this._item={url:this.docUrl,title:this.docTitle})}render(){let t=this._bookmarks.value?.some(t=>t.collection_id===this._item?.collection_id)||!1;return this._user.render({complete:e=>e.isAuthenticated?(0,s.dy)`
              <button
                class="collection-save-button"
                data-state=${this._bookmarks.value?.length?"remove":"save"}
                title=${this.l10n`Save in collection`}
                @click=${this._open}
              >
                <span
                  >${this._bookmarks.value?.length?this.l10n`Remove`:this.l10n`Save`}</span
                >
              </button>
              <mdn-modal modal-title=${this.l10n`Add to collection`}>
                ${this._bookmarks.render({initial:()=>(0,s.dy)`<progress></progress>`,pending:()=>(0,s.dy)`<progress></progress>`,complete:e=>this._collections.render({initial:()=>(0,s.dy)`<progress></progress>`,pending:()=>(0,s.dy)`<progress></progress>`,complete:o=>(0,s.dy)`
                        <label>
                          ${this.l10n`Collection:`}
                          <select
                            .value=${this._item?.collection_id}
                            @change=${this._selectChange}
                          >
                            ${o.map(t=>(0,s.dy)`
                                <option
                                  value=${t.id}
                                  ?selected=${t.id===this._item?.collection_id}
                                >
                                  ${e.some(e=>e.collection_id===t.id)?"★":"☆"}
                                  ${"Default"===t.name?this.l10n`Saved articles`:t.name}
                                </option>
                              `)}
                            <option disabled role="separator">
                              ——————————
                            </option>
                            <option value=${"add"}>
                              + ${this.l10n`New collection`}
                            </option>
                          </select>
                        </label>
                        <label>
                          ${this.l10n`Name:`}
                          <input .value=${this._item?.title||this.docTitle} />
                        </label>
                        <label>
                          ${this.l10n`Note:`}
                          <textarea
                            .value=${this._item?.notes||""}
                          ></textarea>
                        </label>
                        <mdn-button @click=${this._submit}>
                          ${this._pending&&"save"===this._lastAction?this.l10n`Saving…`:this.l10n`Save`}
                        </mdn-button>
                        <mdn-button
                          @click=${this._cancel}
                          ?disabled=${this._pending}
                          variant="secondary"
                        >
                          ${this.l10n`Cancel`}
                        </mdn-button>
                        ${e?.length?(0,s.dy)`<mdn-button
                              @click=${this._delete}
                              variant="secondary"
                              action="negative"
                              id="bookmark-delete"
                              ?disabled=${this._pending||!t}
                            >
                              ${this._pending&&"delete"===this._lastAction?this.l10n`Deleting…`:this.l10n`Delete`}
                            </mdn-button>`:s.Ld}
                      `})})}
              </mdn-modal>
            `:s.Ld})}};customElements.define("mdn-collection-save-button",MDNCollectionSaveButton)},1045:function(t,e,o){o.d(e,{Z:()=>p});var i=o(14703),s=o(8081),l=o.n(s),n=o(23645),a=o.n(n),c=o(61667),r=o.n(c),d=new o.U(o(86144)),h=new o.U(o(4941)),u=a()(l()),m=r()(d),_=r()(h);u.push([t.id,`.collection-save-button{align-items:center;background-color:initial;border:none;column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:0 .5rem}.collection-save-button:hover{background-color:var(--color-background-secondary)}.collection-save-button:before{background-color:currentcolor;content:"";display:inline-block;height:1.25rem;-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.collection-save-button[data-state=save]:before{-webkit-mask-image:url(${m});mask-image:url(${m})}.collection-save-button[data-state=remove]:before{-webkit-mask-image:url(${_});mask-image:url(${_})}@media (width <= 769px){.collection-save-button span{display:none}}label{display:block}`,""]);let p=(0,i.iv)([u.toString()])}};
//# sourceMappingURL=1624.98ead28526f7a6a1.js.map