/*
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 */
import{property as c,customElement as M}from"lit/decorators.js";import{LitElement as R,css as z,html as r,nothing as p}from"lit";import g from"@typo3/backend/modal.js";import"@typo3/backend/element/icon-element.js";import T from"@typo3/core/ajax/ajax-request.js";import U from"@typo3/backend/notification.js";import b from"@typo3/backend/viewport.js";import A from"@typo3/core/event/regular-event.js";import{KeyTypesEnum as y}from"@typo3/backend/enum/key-types.js";import{RecordUsageStore as E}from"@typo3/backend/record-usage/record-usage-store.js";import w from"@typo3/backend/storage/client.js";import C from"@typo3/backend/storage/persistent.js";import v from"~labels/core.misc";var l=function(d,e,t,o){var a=arguments.length,i=a<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(d,e,t,o);else for(var h=d.length-1;h>=0;h--)(n=d[h])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};const $={fromAttribute:d=>d===null?!0:d.toLowerCase()==="true",toAttribute:d=>d?"true":"false"};class f{constructor(e,t,o,a,i,n,h,x,k,N){this.identifier=e,this.label=t,this.description=o,this.icon=a,this.iconOverlay=i,this.url=n,this.requestType=h,this.defaultValues=x,this.saveAndClose=k,this.event=N,this.visible=!0}static fromData(e){return new f(e.identifier,e.label,e.description,e.icon,e.iconOverlay,e.url??null,e.requestType??"location",e.defaultValues??[],e.saveAndClose??!1,e.event??null)}reset(){this.visible=!0}}class m{constructor(e,t,o,a,i){this.identifier=e,this.label=t,this.items=o,this.icon=a,this.featured=i,this.disabled=!1}static fromData(e){return new m(e.identifier,e.label,e.items.map(t=>f.fromData(t)))}reset(){this.disabled=!1,this.items.forEach(e=>{e.reset()})}activeItems(){return this.items.filter(e=>e.visible)??[]}}class u{constructor(e){this.items=e}static fromData(e){return new u(Object.values(e).map(t=>m.fromData(t)))}reset(){this.items.forEach(e=>{e.reset()})}categoriesWithItems(){return this.items.filter(e=>e.activeItems().length>0)??[]}}const S="wizard-last-category/";let s=class extends R{constructor(){super(...arguments),this.categories=new u([]),this.searchPlaceholder=v.get("newRecordWizard.filter.placeholder"),this.searchNothingFoundLabel=v.get("newRecordWizard.filter.noResults"),this.userNotAllowedLabel=v.get("newContentElement.filter.userNotAllowed"),this.displayMenu=!0,this.displayFilter=!0,this.selectedCategory=null,this.searchTerm="",this.messages=[],this.toggleMenu=!1,this.storeName=null,this.hasNavigation=!1}static{this.styles=[z`:host{display:block;container-type:inline-size;height:100%}.element{gap:var(--typo3-spacing);font-size:var(--typo3-component-font-size);line-height:var(--typo3-component-line-height);height:100%}.element,.main{display:flex;flex-direction:column}.main{width:100%;gap:calc(var(--typo3-spacing)*2)}@container (min-width: 500px){.main{flex-direction:row;overflow:hidden}}.main>*{flex-grow:1;padding-inline-end:calc(var(--typo3-spacing)/4)}.navigation{position:relative;flex-shrink:0}@container (min-width: 500px){.navigation{flex-grow:0;width:200px;overflow-block:auto}.navigation-toggle{display:none!important}}.navigation-list{display:none;flex-direction:column;gap:2px;list-style:none;padding:0;margin:0}.navigation-list.show{display:flex}@container (max-width: 499px){.navigation-list{z-index:1;position:absolute;top:calc(100% + 2px);padding:2px;background:var(--typo3-component-bg);border:var(--typo3-component-border-width) solid var(--typo3-component-border-color);border-radius:var(--typo3-component-border-radius);box-shadow:var(--typo3-component-box-shadow)}}@container (min-width: 500px){.navigation-list{display:flex}}.navigation-item{cursor:pointer;align-items:center;display:flex;width:100%;gap:calc(var(--typo3-spacing)/2);text-align:start;color:inherit;background:transparent;border:var(--typo3-component-border-width) solid var(--typo3-component-border-color);border-radius:var(--typo3-component-border-radius);padding:var(--typo3-list-item-padding-y) var(--typo3-list-item-padding-x)}.navigation-item-featured:has(+.navigation-item:not(.navigation-item-featured)){margin-bottom:calc(var(--typo3-spacing)/2)}@container (max-width: 499px){.navigation-item{--typo3-component-border-color:transparent;margin-bottom:0!important;border-radius:calc(var(--typo3-component-border-radius) - var(--typo3-component-border-width))}}.navigation-item:hover{color:var(--typo3-component-hover-color);background:var(--typo3-component-hover-bg);border-color:var(--typo3-component-hover-border-color)}.navigation-item:focus{outline:none;color:var(--typo3-component-focus-color);background:var(--typo3-component-focus-bg);border-color:var(--typo3-component-focus-border-color)}.navigation-item.active{color:var(--typo3-component-active-color);background:var(--typo3-component-active-bg);border-color:var(--typo3-component-active-border-color)}.navigation-item.active:focus-visible{outline:var(--typo3-outline-width) var(--typo3-outline-style) color-mix(in srgb,var(--typo3-component-active-border-color),transparent 25%)}.navigation-item[disabled]{cursor:not-allowed;color:var(--typo3-component-disabled-color);background:var(--typo3-component-disabled-bg);border-color:var(--typo3-component-disabled-border-color)}.navigation-item-label{flex-grow:1}.navigation-item-count{opacity:.75;flex-shrink:0}.content{container-type:inline-size;overflow-block:auto}.elementwizard-categories{display:grid;gap:var(--typo3-spacing)}.elementwizard-category-headline{font-weight:700;color:var(--typo3-text-color-variant);margin-bottom:calc(var(--typo3-spacing)/2)}.elementwizard-category-items{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--typo3-spacing)}@container (min-width: 500px){.elementwizard-category-items{grid-template-columns:repeat(2,1fr)}}@container (min-width: 750px){.elementwizard-category-items{grid-template-columns:repeat(3,1fr)}}.item{cursor:pointer;display:flex;gap:calc(var(--typo3-spacing)/2);text-align:start;border:var(--typo3-component-border-width) solid transparent;border-radius:var(--typo3-component-border-radius);padding:var(--typo3-list-item-padding-y) var(--typo3-list-item-padding-x);background:transparent;color:inherit}.item:hover{color:var(--typo3-component-hover-color);background:var(--typo3-component-hover-bg);border-color:var(--typo3-component-hover-border-color)}.item:focus{outline:none;color:var(--typo3-component-focus-color);background:var(--typo3-component-focus-bg);border-color:var(--typo3-component-focus-border-color)}.item-body-label{text-wrap:balance;font-weight:700;margin-bottom:.25rem}.item-body-description{opacity:.75;text-wrap:pretty}`]}firstUpdated(){const e=document.createElement("link");e.setAttribute("rel","stylesheet"),e.setAttribute("href",TYPO3.settings.cssUrls.backend),this.shadowRoot.appendChild(e),this.displayFilter===!0&&this.renderRoot.querySelector('input[name="search"]').focus();const t=C.isset("displayRecentlyUsed")?!!JSON.parse(C.get("displayRecentlyUsed")):!0;this.storeName&&(this.recordUsageStore=new E(this.storeName),t&&this.addRecentlyUsedCategory()),this.selectAvailableCategory()}addRecentlyUsedCategory(){const e=this.recordUsageStore.getUsage();if(Object.keys(e).length===0)return;const t=this.categories.items.flatMap(o=>o.items.filter(a=>a.identifier in e)).sort((o,a)=>{const i=e[o.identifier],n=e[a.identifier];return n.count!==i.count?n.count-i.count:n.lastUsed-i.lastUsed}).slice(0,10);if(t.length>0){const o=new m("recently-used",v.get("newRecordWizard.recentlyUsed"),t,"actions-history",!0);this.categories.items.unshift(o)}}selectAvailableCategory(){let e=null;this.storeName&&(e=w.get(this.getCategoryLocalStorageKey())),this.categories.categoriesWithItems().filter(o=>o===this.selectedCategory).length===0&&(e?this.selectedCategory=this.categories.categoriesWithItems().find(o=>o.identifier===e)??this.categories.categoriesWithItems()[0]??null:this.selectedCategory=this.categories.categoriesWithItems()[0]??null),this.messages=[],this.categories.items.length===0?this.messages=[{message:this.userNotAllowedLabel,severity:"info"}]:this.selectedCategory===null&&(this.messages=[{message:this.searchNothingFoundLabel,severity:"info"}])}filter(e){this.searchTerm=e,this.categories.reset(),this.categories.items.forEach(t=>{const o=t.label.trim().replace(/\s+/g," ");!(this.searchTerm!==""&&!RegExp(this.searchTerm,"i").test(o))||t.items.forEach(i=>{const n=i.label.trim().replace(/\s+/g," ")+i.description?.trim().replace(/\s+/g," ");i.visible=!(this.searchTerm!==""&&!RegExp(this.searchTerm,"i").test(n))}),t.disabled=t.items.filter(i=>i.visible).length===0}),this.selectAvailableCategory()}willUpdate(){const e=this.selectedCategory!==null&&this.displayMenu===!0&&this.categories.items.length>1;this.hasNavigation!==e&&(this.hasNavigation=e)}render(){return r`<div class=element>${this.displayFilter===!0?this.renderFilter():p} ${this.renderMessages()} ${this.selectedCategory===null?p:r`<div class=main>${this.categories.items.length>1&&this.displayMenu===!0?r`<div class=navigation>${this.renderNavigationToggle()} ${this.renderNavigationList()}</div>`:p}<div class=content>${this.renderCategories()}</div></div>`}</div>`}renderFilter(){return r`<form class=filter @submit=${e=>e.preventDefault()}><input name=search type=search autocomplete=off class=form-control .value=${this.searchTerm} @input=${e=>{this.filter(e.target.value)}} @keydown=${e=>{e.key===y.ESCAPE&&(e.stopImmediatePropagation(),this.filter(""))}} placeholder=${this.searchPlaceholder}></form>`}renderMessages(){return r`${this.messages.length>0?r`<div class=messages>${this.messages.map(e=>r`<div class="alert alert-${e.severity}" role=alert>${e.message}</div>`)}</div>`:p}`}renderNavigationToggle(){return r`<button class="navigation-toggle btn btn-default" @click=${()=>{this.toggleMenu=!this.toggleMenu}}>${this.selectedCategory.icon?r`<typo3-backend-icon identifier=${this.selectedCategory.icon} size=small></typo3-backend-icon>`:p} ${this.selectedCategory.label}<typo3-backend-icon identifier=actions-chevron-${this.toggleMenu===!0?"up":"down"} size=small></typo3-backend-icon></button>`}renderNavigationList(){return r`<div class=navigation-list${this.toggleMenu===!0?" show":""} role=tablist aria-orientation=vertical>${this.categories.items.map(e=>r`<button data-identifier=${e.identifier} class=navigation-item${e.featured?" navigation-item-featured":""}${this.selectedCategory===e?" active":""} ?disabled=${e.disabled} @click=${()=>{this.handleNavigationClick(e)}} @keydown=${t=>{this.handleNavigationKeydown(t,e)}} role=tab aria-selected=${this.selectedCategory===e?"true":"false"} tabindex=${this.selectedCategory===e?"0":"-1"}>${e.icon?r`<span class=navigation-item-icon><typo3-backend-icon identifier=${e.icon} size=small></typo3-backend-icon></span>`:p} <span class=navigation-item-label>${e.label}</span> <span class=navigation-item-count>${e.activeItems().length}</span></button>`)}</div>`}handleNavigationClick(e){this.selectedCategory=e,this.toggleMenu=!1,this.storeName&&w.set(this.getCategoryLocalStorageKey(),e.identifier)}handleNavigationKeydown(e,t){const o=this.categories.categoriesWithItems(),a=o.findIndex(n=>n.identifier===t.identifier);let i;if(e.key===y.UP)i=o[a-1]??void 0;else if(e.key===y.DOWN)i=o[a+1]??void 0;else return;i&&(this.shadowRoot.querySelector(`button[data-identifier="${i.identifier}"]`).focus(),this.handleNavigationClick(i))}renderCategories(){return r`<div class=elementwizard-categories>${this.categories.items.map(e=>this.renderCategory(e))}</div>`}renderCategory(e){return r`${(this.selectedCategory===e||this.displayMenu===!1)&&!e.disabled?r`<div class=elementwizard-category role=${this.displayMenu?"tabpanel":p}>${this.displayMenu===!1?r`<div class=elementwizard-category-headline>${e.icon?r`<typo3-backend-icon identifier=${e.icon} size=small></typo3-backend-icon>`:p} ${e.label}</div>`:p}<div class=elementwizard-category-items>${e.items.map(t=>this.renderCategoryItem(t))}</div></div>`:p}`}renderCategoryItem(e){return r`${e.visible?r`<button type=button class=item data-identifier=${e.identifier} @click=${t=>{t.preventDefault(),this.handleItemClick(e)}}><div class=item-icon><typo3-backend-icon identifier=${e.icon||"empty-empty"} overlay=${e.iconOverlay} size=medium></typo3-backend-icon></div><div class=item-body><div class=item-body-label>${e.label}</div><div class=item-body-description>${e.description}</div></div></button>`:p}`}handleItemClick(e){if(this.storeName&&this.recordUsageStore.track(e.identifier),e.requestType==="event"){const t=new CustomEvent(e.event,{detail:{item:e}});this.dispatchEvent(t),g.dismiss();return}if(e.url.trim()!==""){if(e.requestType==="location"){b.ContentContainer.setUrl(e.url.replace(/_CURRENT_MODULE_/g,top.TYPO3.ModuleMenu.App.getCurrentModule())),g.dismiss();return}e.requestType==="ajax"&&new T(e.url).post({defVals:e.defaultValues,saveAndClose:e.saveAndClose?"1":"0"}).then(async t=>{const o=document.createRange().createContextualFragment(await t.resolve());g.currentModal.addEventListener("modal-updated",()=>{new A("click",(a,i)=>{a.preventDefault();const n=i.dataset.target;n&&(b.ContentContainer.setUrl(n),g.dismiss())}).delegateTo(g.currentModal,"button[data-target]")}),g.currentModal.setContent(o)}).catch(()=>{U.error("Could not load module data")})}}getCategoryLocalStorageKey(){return S+this.storeName}};l([c({type:Object,converter:{fromAttribute:d=>{const e=JSON.parse(d);return u.fromData(e)}}})],s.prototype,"categories",void 0),l([c({type:String})],s.prototype,"searchPlaceholder",void 0),l([c({type:String})],s.prototype,"searchNothingFoundLabel",void 0),l([c({type:String})],s.prototype,"userNotAllowedLabel",void 0),l([c({type:Boolean,converter:$})],s.prototype,"displayMenu",void 0),l([c({type:Boolean,converter:$})],s.prototype,"displayFilter",void 0),l([c({type:String,attribute:!1})],s.prototype,"selectedCategory",void 0),l([c({type:String,attribute:!1})],s.prototype,"searchTerm",void 0),l([c({type:Array,attribute:!1})],s.prototype,"messages",void 0),l([c({type:Boolean,attribute:!1})],s.prototype,"toggleMenu",void 0),l([c({type:String})],s.prototype,"storeName",void 0),l([c({type:Boolean,reflect:!0,attribute:"has-navigation"})],s.prototype,"hasNavigation",void 0),s=l([M("typo3-backend-new-record-wizard")],s);export{u as Categories,m as Category,s as NewRecordWizard};