TYPO3 v15 dev-main snapshot ()

Resources/Public/JavaScript/tree/tree-toolbar.js

@@ -0,0 +1,13 @@
+/*
+ * 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{LitElement as u,html as d}from"lit";import{property as m,customElement as b}from"lit/decorators.js";import h from"@typo3/core/event/debounce-event.js";import"@typo3/backend/element/icon-element.js";import"@typo3/backend/viewport/content-navigation-toggle.js";import{Tree as f}from"@typo3/backend/tree/tree.js";import r from"~labels/core.core";import"bootstrap";var p=function(s,e,t,n){var i=arguments.length,o=i<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(s,e,t,n);else for(var c=s.length-1;c>=0;c--)(a=s[c])&&(o=(i<3?a(o):i>3?a(e,t,o):a(e,t))||o);return i>3&&o&&Object.defineProperty(e,t,o),o};let l=class extends u{constructor(){super(...arguments),this.tree=null,this.showRefresh=!0,this.settings={searchInput:".search-input",filterTimeout:450}}createRenderRoot(){return this}firstUpdated(){const e=this.querySelector(this.settings.searchInput);e&&new h("input",t=>{const n=t.target;this.tree.filter(n.value.trim())},this.settings.filterTimeout).bindTo(e)}render(){return d`<div class=tree-toolbar><div class=tree-toolbar__menu><div class=tree-toolbar__search><label for=toolbarSearch class=visually-hidden>${r.get("labels.label.searchString")}</label> <input type=search autocomplete=off id=toolbarSearch class="form-control form-control-sm search-input" placeholder=${this.tree?.setup?.searchPlaceholder||r.get("tree.searchTermInfo")}></div><div class=dropdown><button type=button class="btn btn-sm btn-icon btn-default btn-borderless dropdown-toggle dropdown-toggle-no-chevron" data-bs-toggle=dropdown data-bs-boundary=window aria-expanded=false aria-label=${r.get("labels.openTreeOptionsMenu")}><typo3-backend-icon identifier=actions-menu-alternative size=small></typo3-backend-icon></button><ul class="dropdown-menu dropdown-menu-end">${this.showRefresh?d`<li><button class=dropdown-item @click=${()=>this.refreshTree()}><span class=dropdown-item-columns> <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden=true><typo3-backend-icon identifier=actions-refresh size=small></typo3-backend-icon> </span> <span class="dropdown-item-column dropdown-item-column-title">${r.get("labels.refresh")} </span> </span></button></li>`:""}<li><button class=dropdown-item @click=${e=>this.collapseAll(e)}><span class=dropdown-item-columns> <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden=true><typo3-backend-icon identifier=apps-pagetree-category-collapse-all size=small></typo3-backend-icon> </span> <span class="dropdown-item-column dropdown-item-column-title">${r.get("labels.collapse")} </span> </span></button></li></ul></div><typo3-backend-content-navigation-toggle class="btn btn-sm btn-icon btn-default btn-borderless" action=collapse></typo3-backend-content-navigation-toggle></div></div>`}refreshTree(){this.tree.refreshOrFilterTree()}collapseAll(e){e.preventDefault(),this.tree.nodes.forEach(t=>{t.__parents.length&&this.tree.hideChildren(t)})}};p([m({type:f})],l.prototype,"tree",void 0),p([m({type:Boolean})],l.prototype,"showRefresh",void 0),l=p([b("typo3-backend-tree-toolbar")],l);export{l as TreeToolbar};