smart-webcomponents-react/source/smart.ribbon.js

[](https://jqwidgets.com/license/)

/* Smart UI v23.0.8 (2025-05-13) 
Copyright (c) 2011-2024 jQWidgets. 
License: https://htmlelements.com/license/ */ //

Smart("smart-ribbon",class extends Smart.ContentElement{static get properties(){return{animationType:{type:"string",value:"advanced",allowedValues:["none","simple","advanced"]},collapsible:{type:"boolean",value:!1},collapsed:{type:"boolean",value:!1},selectedTab:{type:"number",value:0},dataSource:{type:"array",value:[]},disabled:{type:"boolean",value:!1},fileMenu:{type:"object",value:{enabled:{type:"boolean",value:!0},items:{type:"array",value:[]},type:{type:"string",value:"dropDown",allowedValues:["dropDown","button"]},label:{type:"string",value:"File"}}},locale:{type:"string",value:""},messages:{type:"object",value:{en:{collapse:"Collapse",expand:"Expand"}}}}}static get styleUrls(){return["smart.ribbon.css"]}_setDefaults(){this._itemSizes=["grouped","iconOnly","verySmall","small","normal","large"]}template(){return'<div class="smart-ribbon"><div class="smart-ribbon-header"><div class="smart-ribbon-file-container"></div><div class="smart-ribbon-header-tabs"></div></div><div class="smart-ribbon-tabs"></div></div>'}refresh(){this._refreshHeaderTabs(),this._setFileMenu()}static get listeners(){return{keydown:"_keydownHandler"}}_getNextSize(e){const t=this._itemSizes,i=t.indexOf(e);return t[i+1]}_getPreviousSize(e){const t=this._itemSizes,i=t.indexOf(e);return t[i-1]}propertyChangedHandler(e,t,i){if(super.propertyChangedHandler(e,t,i),"selectedTab"===e&&i!==t&&this._selectTab(i),"dataSource"===e){let e=this.querySelector(".smart-ribbon-header-tabs"),t=this.querySelector(".smart-ribbon-tabs");for(;e.firstElementChild;)e.removeChild(e.firstElementChild);for(;t.firstElementChild;)t.removeChild(t.firstElementChild);this.render()}else this.refresh()}async _calculateSizes(e,t){let i=e.cloneNode(!0);i.setAttribute("clone",""),i.style.width=this.querySelector(".smart-ribbon-tabs").offsetWidth+"px",i.style.height=t?"var(--smart-ribbon-collapsed-tab-height)":"var(--smart-ribbon-tab-height)",i.style.position="absolute",i.style.display="flex",i.style.visibility="hidden",i.style.left="-10000px",t&&(i.setAttribute("collapsed",""),i.querySelector(".smart-ribbon-tab-side-container").style.width="min-content"),this.appendChild(i),this._reloadTab(i,t),t||Array.from(i.querySelectorAll(".smart-ribbon-group-drop-down-container smart-drop-down-button .smart-action-button")).forEach((e=>{e.innerHTML=e.closest("smart-ribbon-group").label})),await this._cycleSizes(e,i,t),i.parentNode.removeChild(i)}_attemptResize(e,t){let i=t;if(i||(i=this.querySelector("smart-ribbon-tab[selected]")),!i)return!1;const r=i.offsetWidth,s=this.collapsed?i._collapsedStates:i._states;for(let e=0;e<s.length;e++){let t=s[e];if(t.width<r||e===s.length-1){i.getAttribute("state-index")===e.toString()&&i.getAttribute("collapse-state")===(this.collapsed?"collapsed":"expanded")||(i.setAttribute("state-index",e),i.setAttribute("collapse-state",this.collapsed?"collapsed":"expanded"),this._reloadTab(i,this.collapsed,t.sizes,t.hiddenItems));break}}setTimeout((()=>{this._checkForOverflowAsync(i).then((e=>{e?this._setNavigationButtons(i):this._navigationActive&&this._removeNavigationButtons()}))}),10)}_resizeEventHandler(){this._attemptResize()}_checkForOverflow(e){return e||(e=this.querySelector("smart-ribbon-tab[selected]")),!!e&&e.querySelector(".smart-ribbon-tab-groups").offsetWidth+e.querySelector(".smart-ribbon-tab-side-container").offsetWidth>e.offsetWidth}_checkForOverflowAsync(e){const t=this;return new Promise(((i,r)=>{setTimeout((()=>{i(t._checkForOverflow(e))}))}))}_getWidth(e,t){const i=e.querySelector(".smart-ribbon-tab-groups"),r=e.querySelector(".smart-ribbon-tab-side-container");let s=r.offsetWidth;return t&&(s=Array.from(r.children).reduce(((e,t)=>e+t.offsetWidth),0)),i.offsetWidth+s+10}_getWidthAsync(e,t){const i=this;return new Promise(((r,s)=>{setTimeout((()=>{r(i._getWidth(e,t))}))}))}async _cycleSizes(e,t,i){const r=Array.from(t.querySelectorAll("smart-ribbon-group[root]")),s=r.length;let n=["large","normal","small","verySmall","iconOnly","grouped"],o=Array.from({length:s},(()=>[]));for(let a=0;a<s*n.length;a++){let l=!1,d=Array(s).fill(void 0);for(let l=s-1;l>=0;l--){const c=n[Math.floor((l+a)/s)];d[l]=c;const b=r[l];if("grouped"===c&&i){const r=this._hideLastElement(b,o[l].length);if(r){o[l].push(r),this._hideSeparator(b,o[l]);let s=d.map((e=>e||"iconOnly"));await this._recordState(e,t,i,s,o,!0),l++}}}if(!l){if(-1!==d.indexOf(void 0))break;await this._recordState(e,t,i,d,[],!0)}}}_reloadTab(e,t=!1,i=[],r=[],s=!1){const n=this;r.flat().length>0?n._setHiddenItemsMenu(e,r,s):n._tryRemovMoreItemsMenu(e),e.querySelectorAll("smart-ribbon-group[root]").forEach(((e,n)=>{e._applySize(i[n],t,r[n],s)}))}async _recordState(e,t,i=!1,r=[],s=[]){this._reloadTab(t,i,r,s,!0);const n=await this._getWidthAsync(t,i);if(i){if(-1!==r.indexOf("grouped")&&0===s.flat().length)return;e._collapsedStates.some((e=>e.width===n))||e._collapsedStates.push({sizes:r,width:n,hiddenItems:s.map((e=>e.slice()))})}else e._states.some((e=>e.width===n))||e._states.push({sizes:r,width:n})}_hideLastElement(e,t){if(!e)return;const i=e.querySelectorAll("smart-ribbon-item, smart-ribbon-group"),r=i[i.length-1];return r?(r.parentNode.removeChild(r),r.id):(e._allHidden=!0,null)}_hideSeparator(e,t){if(!e)return;const i=e.querySelectorAll("smart-ribbon-item"),r=i[i.length-1];r&&"separator"===r.getAttribute("type")&&(r.parentNode.removeChild(r),t.push(r.id))}_setHiddenItemsMenu(e,t,i=!1){let r=e.querySelector(".smart-ribbon-tab-side-container .smart-ribbon-more-button");if(r)return;r=this._createMoreButton(e);const s=document.createElement("div");s.classList.add("smart-ribbon-more-items"),s.setAttribute("tab-owner",e.id),Array.from(e.querySelectorAll("smart-ribbon-group[root]")).forEach(((e,t)=>{const i=document.createElement("div");i.classList.add("smart-ribbon-sub-menu-group"),i.id="subMenuGroup-"+e.id,s.appendChild(i)})),r.appendChild(s),e.querySelector(".smart-ribbon-tab-side-container").prepend(r)}_tryRemovMoreItemsMenu(e){const t=e.querySelector(".smart-ribbon-tab-side-container .smart-ribbon-more-button");e.querySelector(".smart-ribbon-tab-side-container").classList.remove("smart-ribbon-tab-side-container-flex-between"),t&&(t.close(),t.parentNode.removeChild(t))}_createMoreButton(e){let t=document.createElement("smart-drop-down-button");return t.classList.add("smart-ribbon-more-button"),t.classList.add("flat"),t.dropDownAppendTo=this,t.dropDownWidth="auto",e.querySelector(".smart-ribbon-tab-side-container").classList.add("smart-ribbon-tab-side-container-flex-between"),t}addTab(e){let t=e;if("string"==typeof e&&(t=this.querySelector(e)),t instanceof HTMLElement)this.appendChild(t);else if(e instanceof Object){const t=this.querySelectorAll("smart-ribbon-tab").length,i=document.createElement("smart-ribbon-tab");i.classList.add("smart-ribbon-tab"),i.label=e.label,i.ribbonGroups=e.ribbonGroups,i.setAttribute("tab-index",t),this.querySelector(".smart-ribbon-tabs").appendChild(i)}this._refreshHeaderTabs()}removeTab(e){let t=e;"string"==typeof e?t=this.querySelector(e):"number"==typeof e&&(t=this.querySelectorAll("smart-ribbon-tab")[e]),t instanceof HTMLElement&&t.parentNode.removeChild(t),this._refreshHeaderTabs()}addGroup(e,t){let i=e;if("number"==typeof i?i=this.querySelectorAll("smart-ribbon-tab")[e]:"string"==typeof i&&(i=this.querySelector(i)),i instanceof HTMLElement){let e=t;if("string"==typeof t&&(e=document.querySelector(t)),t instanceof HTMLElement)i.querySelector(".smart-ribbon-tab-groups").appendChild(t);else if(t instanceof Object){const e=document.createElement("smart-ribbon-group");e.classList.add("smart-ribbon-group");for(let i in t)e[i]=t[i];i.querySelector(".smart-ribbon-tab-groups").appendChild(e)}i._indexSizes()}}removeGroup(e,t){let i=e;if("number"==typeof i?i=this.querySelectorAll("smart-ribbon-tab")[e]:"string"==typeof i&&(i=this.querySelector(i)),i instanceof HTMLElement){let e=t;"number"==typeof t?e=i.querySelectorAll("smart-ribbon-group")[t]:"string"==typeof t&&(e=i.querySelector(t)),e instanceof HTMLElement&&e.parentNode.removeChild(e),i._indexSizes()}}addItem(e,t,i){let r=e;if("number"==typeof r?r=this.querySelectorAll("smart-ribbon-tab")[e]:"string"==typeof r&&(r=this.querySelector(r)),r instanceof HTMLElement){let e=t;if("number"==typeof t?e=r.querySelectorAll("smart-ribbon-group")[t]:"string"==typeof t&&(e=r.querySelector(t)),e instanceof HTMLElement){let t=i;if("string"==typeof i&&(t=document.querySelector(i)),t instanceof HTMLElement)e.querySelector(".smart-ribbon-group-items").appendChild(t);else if(i instanceof Object){const t=document.createElement("smart-ribbon-item");t.classList.add("smart-ribbon-item");for(let e in i)t[e]=i[e];e.querySelector(".smart-ribbon-group-items").appendChild(t)}r._indexSizes()}}}removeItem(e,t,i){let r=e;if("number"==typeof r?r=this.querySelectorAll("smart-ribbon-tab")[e]:"string"==typeof r&&(r=this.querySelector(r)),r instanceof HTMLElement){let e=t;if("number"==typeof t?e=r.querySelectorAll("smart-ribbon-group")[t]:"string"==typeof t&&(e=r.querySelector(t)),e instanceof HTMLElement){let t=i;"number"==typeof i?t=e.querySelectorAll("smart-ribbon-item")[i]:"string"==typeof i&&(t=e.querySelector(i)),t instanceof HTMLElement&&t.parentNode.removeChild(t),r._indexSizes()}}}_handleTabSelection(e){const t=this,i=t.querySelector(".smart-ribbon-header-tab[selected]");i&&i.removeAttribute("selected");const r=t.querySelector(`.smart-ribbon-header-tab[tab-index="${e}"]`);r&&r.setAttribute("selected","");const s=t.querySelector("smart-ribbon-tab[selected]");s&&s.removeAttribute("selected");const n=t.querySelector(`smart-ribbon-tab[tab-index="${e}"]`);n&&n.setAttribute("selected",""),t.selectedTab=e,t._navigationActive&&t._removeNavigationButtons(),t._attemptResize(n)}selectTab(e){this._selectTab(e)}_selectTab(e){const t=this,i=t.querySelectorAll("smart-ribbon-tab");if(e<0||e>=i.length)return;const r=t.$.fireEvent("selecting",{index:e,oldIndex:t.selectedTab});r.defaultPrevented||(t._handleTabSelection(e),t.$.fireEvent("select",{index:e,oldIndex:r.detail.oldIndex}))}_selectNextTab(){const e=this,t=e.querySelectorAll("smart-ribbon-tab");let i=e.selectedTab+1;i>=t.length||e._selectTab(i)}_selectPreviousTab(){const e=this;e.querySelectorAll("smart-ribbon-tab");let t=e.selectedTab-1;t<0||e._selectTab(t)}_keydownHandler(e){const t=this,i=t.isInShadowDOM?t.getRootNode().activeElement:document.activeElement,r=e.key;i===t&&("ArrowRight"===r||"ArrowDown"===r?t._selectNextTab():"ArrowLeft"===r||"ArrowUp"===r?t._selectPreviousTab():"Home"===r?t._selectTab(0):"End"===r&&t._selectTab(t.querySelectorAll("smart-ribbon-tab").length-1))}_setFileMenu(){const e=this;!e.fileMenu.enabled&&e.fileButton&&(e.fileButton.parentNode.removeChild(e.fileButton),e.fileButton=null);let t=e._fileButton;if(!t){if("dropDown"===this.fileMenu.type){e._fileButton=document.createElement("smart-drop-down-button"),(e.rightToLeft||e.hasAttribute("right-to-left"))&&e._fileButton.setAttribute("right-to-left",""),e._fileButton.setAttribute("dropDownOpenMode","click"),e._fileButton.placeholder=this.fileMenu.label||"File",e._fileButton.dropDownWidth="auto",e._fileButton.dropDownHeight="auto",e._fileButton.verticalScrollBarVisibility="hidden";const t=document.createElement("smart-menu");t.classList.add("smart-ribbon-file-menu"),t.mode="tree",t.dataSource=e.fileMenu.items,t.animation=e.animationType,e._fileButton.appendChild(t),t.addEventListener("itemClick",(function(t){e.$.fireEvent("fileMenuItemClick",{item:t.detail.item})}))}else e._fileButton=document.createElement("smart-button"),e._fileButton.textContent="File";e._fileButton.classList.add("smart-ribbon-file-button"),this.fileMenu.template?"string"==typeof this.fileMenu.template?(e.querySelector(".smart-ribbon-file-container").innerHTML=this.fileMenu.template,e._fileButton=e.querySelector(".smart-ribbon-file-container").firstElementChild):"function"==typeof this.fileMenu.template?(this.fileMenu.template(t),e.querySelector(".smart-ribbon-file-container").appendChild(e._fileButton)):this.fileMenu.template instanceof HTMLElement&&e.querySelector(".smart-ribbon-file-container").appendChild(this.fileMenu.template):e.querySelector(".smart-ribbon-file-container").appendChild(e._fileButton),e._fileButton.addEventListener("open",(function(){e.$.fireEvent("fileMenuOpen")})),e._fileButton.addEventListener("close",(function(){e.$.fireEvent("fileMenuClose")})),e._fileButton.addEventListener("click",(function(){e.$.fireEvent("fileMenuClick")}))}}_refreshHeaderTabs(){this._setHeaderTabs()}_setHeaderTabs(){const e=this,t=Array.from(e.querySelectorAll('smart-ribbon-tab:not([clone=""])')),i=e.querySelector(".smart-ribbon-header-tabs");for(;i.firstElementChild;)i.removeChild(i.firstElementChild);t.forEach(((t,r)=>{const s=document.createElement("div");s.classList.add("smart-ribbon-header-tab"),s.innerHTML='<span class="smart-ribbon-header-tab-label">'+t.label+"</span>",s.setAttribute("tab-index",e.getAttribute("tab-index")||r),s.addEventListener("click",(function(){e.selectedTab=parseInt(s.getAttribute("tab-index"))})),t.hasAttribute("selected")&&s.setAttribute("selected",""),this.selectedTab&&this.selectedTab==r&&s.setAttribute("selected",""),i.appendChild(s)}))}expand(){const e=this;if(e.$.fireEvent("expanding").defaultPrevented)return;e.collapsed=!1,Array.from(e.querySelector(".smart-ribbon-tabs").children).forEach((e=>{e.removeAttribute("collapsed")})),e.$.fireEvent("expand");const t=e.querySelector("smart-ribbon-tab[selected]");t&&e._attemptResize(t)}collapse(){const e=this;if(e.$.fireEvent("collapsing").defaultPrevented)return;e.collapsed=!0,Array.from(e.querySelector(".smart-ribbon-tabs").children).forEach((e=>{e.setAttribute("collapsed","")})),e.$.fireEvent("collapse");const t=e.querySelector("smart-ribbon-tab[selected]");t&&e._attemptResize(t)}_setResizeHandler(){this._resizeObserver=new ResizeObserver((e=>{clearTimeout(this._resizeTimeout),this._resizeTimeout=setTimeout((()=>{this._resizeEventHandler()}),5)})),this._resizeObserver.observe(this.querySelector(".smart-ribbon-tabs"))}_buildHTML(){const e=this.querySelector(".smart-ribbon-tabs");Array.from(this.querySelectorAll('smart-ribbon-tab:not([clone=""])')).forEach((t=>{e.appendChild(t)}))}_applyDataSource(){const e=this;e.dataSource.forEach(((t,i)=>{const r=document.createElement("smart-ribbon-tab");r.classList.add("smart-ribbon-tab"),r.label=t.label,r.ribbonGroups=t.ribbonGroups,r.setAttribute("tab-index",i),i===e.selectedTab&&r.setAttribute("selected",""),e.appendChild(r)}))}_correctNavigationVisibility(){const e=this._navigationButtons.left,t=this._navigationButtons.right,i=e._attachedTab,r=i.scrollLeft,s=i.scrollWidth,n=i.clientWidth;r<=0?e.classList.remove("active"):e.classList.add("active"),Math.abs(r+n-s)<5?t.classList.remove("active"):t.classList.add("active")}_createNavigationButtons(){const e=this,t=document.createElement("smart-button");t.classList.add("smart-ribbon-navigation-button","left","very-small"),t.innerHTML='<span class="left-navigation"></span>';const i=document.createElement("smart-button");let r;i.classList.add("smart-ribbon-navigation-button","right","very-small"),i.innerHTML='<span class="right-navigation"></span>',this._navigationButtons={left:t,right:i},this._navigationActive=!1,["left","right"].forEach((t=>{this._navigationButtons[t].addEventListener("mousedown",(function(){r=setInterval((()=>{this._attachedTab.scrollLeft+="left"===t?-5:5}),10)})),this._navigationButtons[t].addEventListener("mouseup",(()=>{e._correctNavigationVisibility(),clearInterval(r)}))}))}_setNavigationButtons(e){this._navigationActive||(["left","right"].forEach((t=>{const i=this._navigationButtons[t];e.parentNode.appendChild(i),i.classList.add("active"),i._attachedTab=e})),this._correctNavigationVisibility(),this._navigationActive=!0)}_removeNavigationButtons(){["left","right"].forEach((e=>{const t=this._navigationButtons[e];t.classList.remove("active"),t.parentNode.removeChild(t)})),this._navigationActive=!1}render(){const e=this;super.render(),this._setDefaults(),0!==e.dataSource.length&&e._applyDataSource(),this._buildHTML(),this._setResizeHandler(),this._refreshHeaderTabs(),this._setFileMenu(),this._createNavigationButtons(),this.setAttribute("tabindex","0")}}),Smart("smart-ribbon-tab",class extends Smart.ContentElement{static get properties(){return{itemId:{value:"",type:"string"},disabled:{value:!1,type:"boolean"},float:{value:"left",allowedValues:["left","right"],type:"string"},label:{value:"",type:"string"},ribbonGroups:{value:[],type:"array"}}}get enableShadowDOM(){return!1}template(){return""}propertyChangedHandler(e,t,i){super.propertyChangedHandler(e,t,i)}_setGroupSideContainer(e){const t=this.closest("smart-ribbon");for(;e.firstElementChild;)e.removeChild(e.firstElementChild);const i=document.createElement("smart-button");i.classList.add("smart-ribbon-tab-collapse-button"),i.innerHTML='<span class="smart-ribbon-tab-collapse-icon"></span>',i.classList.add("flat"),i.classList.add("very-small"),i.addEventListener("click",(function(){t.collapsed?t.expand():t.collapse()})),e.appendChild(i)}_buildHTML(){this.selected&&this.setAttribute("selected","");const e=document.createElement("div");e.classList.add("smart-ribbon-tab-groups");const t=document.createElement("div");t.classList.add("smart-ribbon-tab-side-container"),t.classList.add(this.collapsed?"collapsed":"expanded"),this._setGroupSideContainer(t),Array.from(this.children).forEach((t=>{e.appendChild(t)})),this.appendChild(e),this.appendChild(t)}_buildContent(){const e=this;e.ribbonGroups.forEach((t=>{let i=document.createElement("smart-ribbon-group");i.classList.add("smart-ribbon-group");for(let e in t)i[e]=t[e];e.appendChild(i)}))}_indexSizes(){const e=this.closest("smart-ribbon");this._states=[],this._collapsedStates=[],setTimeout((async()=>{this.selected||e.selectedTab==this.getAttribute("tab-index")?(await e._calculateSizes(this,this.collapsed),e._calculateSizes(this,!this.collapsed),e._attemptResize(null,this)):(e._calculateSizes(this,this.collapsed),e._calculateSizes(this,!this.collapsed))}))}render(){const e=this;if(super.render(),e.hasAttribute("ready"))return;e.setAttribute("ready","");let t=this.getAttribute("tab-index");t||(t=Array.from(this.parentNode.children).indexOf(this)-2,this.setAttribute("tab-index",t)),this.selected&&this.setAttribute("selected",""),e.querySelector(".smart-ribbon-tab-groups")||(0!==e.ribbonGroups.length&&e._buildContent(),e._buildHTML()),this._states=[],this._collapsedStates=[],this._indexSizes()}}),Smart("smart-ribbon-group",class extends Smart.ContentElement{static get properties(){return{itemId:{value:"",type:"string"},label:{value:"",type:"string"},icon:{value:"",type:"string"},ribbonItems:{value:[],type:"array"},direction:{value:"auto",allowedValues:["auto","horizontal","vertical"],type:"string"},wrapSize:{value:"none",allowedValues:["iconOnly","verySmall","small","normal","large","none"],type:"string"},dialogLauncher:{type:"object",value:{enabled:{type:"boolean",value:!0},icon:{type:"string",value:""},tooltip:{type:"string",value:""}}},cssClass:{value:"",type:"string"}}}get enableShadowDOM(){return!1}template(){return""}propertyChangedHandler(e,t,i){super.propertyChangedHandler(e,t,i)}_createDropDownGroup(){const e=this;let t=getComputedStyle(e).getPropertyValue("--smart-ribbon-tab-height"),i={dropDownAppendTo:e.closest("smart-ribbon"),dropDownWidth:"auto",dropDownHeight:t,dropDownButtonPosition:"bottom"};const r=document.createElement("div");if(r.classList.add("smart-ribbon-group-item-placeholder"),e.icon){const t=document.createElement("span");"<"===e.icon[0]?t.innerHTML=item.icon:e.icon.split(" ").forEach((e=>{t.classList.add(e)}));const i=document.createElement("div");i.classList.add("smart-ribbon-group-item-flex-break"),r.appendChild(t),r.appendChild(i)}if(e.label){const t=document.createElement("span");t.classList.add("smart-ribbon-group-item-label"),t.textContent=e.label,r.appendChild(t)}i.placeholder=e.label,i.placeholderTemplate=function(){return r.innerHTML};const s=document.createElement("smart-drop-down-button");for(let e in i)s[e]=i[e];s.classList.add("smart-ribbon-group-drop-down");const n=document.createElement("div");n.classList.add("smart-ribbon-group-drop-down-element");const o=e.cloneNode(!1);n.appendChild(o),s.appendChild(n);const a=document.createElement("div");a.classList.add("smart-ribbon-group-drop-down-container"),a.appendChild(s),e.appendChild(a)}_setDropDownGroup(){const e=this.querySelector(".smart-ribbon-group-drop-down-container smart-drop-down-button");if(e){const t=e.$.dropDownContainer.querySelector("smart-ribbon-group"),i=this.querySelector(".smart-ribbon-group-items"),r=this.querySelector(".smart-ribbon-group-header");t?(t.appendChild(i),t.appendChild(r)):i&&(i.style.display="none")}this.setAttribute("grouped","")}_removeDropDownGroup(){const e=this,t=e.querySelector(".smart-ribbon-group-drop-down-container smart-drop-down-button");if(t){t.close();const i=t.$.dropDownContainer.querySelector("smart-ribbon-group");if(i)for(;i.firstElementChild;)e.appendChild(i.firstElementChild);else{const t=e.querySelector(".smart-ribbon-group-items");t&&(t.style.display="")}}e.removeAttribute("grouped")}_unhideAllItems(e=this){const t=this;Array.from(t.querySelectorAll(".smart-ribbon-item-fragment")).forEach((e=>{e.replaceWith(e.origin),t._unhideAllItems(e.origin)}))}_hideItem(e){const t=document.createElement("div");t.id="fragment-"+e.id,t.classList.add("smart-ribbon-item-fragment"),e.replaceWith(t),t.origin=e;const i=this.closest("smart-ribbon-tab").id;return document.querySelector('.smart-ribbon-more-items[tab-owner="'+i+'"]').querySelector("#subMenuGroup-"+this.id).appendChild(e),t}_applySize(e="normal",t=!1,i=[],r=!1){const s=this;if(s.hasAttribute("root")&&s._unhideAllItems(),"grouped"===e&&!t)return void("grouped"===s.size&&s.collapsed===t||(s._applySize("large",t),s._setDropDownGroup(),s.size="grouped"));"grouped"!==e&&s.hasAttribute("grouped")&&s._removeDropDownGroup(),"grouped"===e&&t&&i.length>0&&(s.hasAttribute("grouped")&&s._removeDropDownGroup(),i.forEach((e=>{let i=s.querySelector("#"+e);i&&(s._hideItem(i),i._applySize("iconOnly",t))}))),s.size=e,s.collapsed=t,t?s.setAttribute("collapsed",""):s.removeAttribute("collapsed"),s.querySelector("smart-ribbon-item")?s.style.display="":s.style.display="none";const n=["iconOnly","verySmall","small","normal","large"];n.indexOf(this.size)<=n.indexOf(this.wrapSize)&&this.size&&this.wrapSize&&!this.collapsed?this.setAttribute("size","small"):this.removeAttribute("size");let o=[],a=Array.from(s.children).find((e=>e.classList.contains("smart-ribbon-group-items")));o=a?Array.from(a.children):Array.from(s.children),o.forEach((i=>{"grouped"!==e||t?"grouped"===e&&t&&(e="iconOnly"):e="large",i.nodeName!=="smart-ribbon-group".toUpperCase()&&i.nodeName!=="smart-ribbon-item".toUpperCase()||i._applySize(e,t)}))}_buildHTML(){const e=this,t=document.createElement("div");if(t.classList.add("smart-ribbon-group-items"),Array.from(e.children).forEach((e=>{t.appendChild(e)})),e.appendChild(t),e.index=Array.from(e.parentNode.children).indexOf(e),e.label){const t=document.createElement("div");if(t.classList.add("smart-ribbon-group-header"),t.innerHTML='<span class="smart-ribbon-group-header-label">'+e.label+"</span>",e.appendChild(t),e.dialogLauncher.enabled){const i=document.createElement("smart-button");i.classList.add("smart-ribbon-group-dialog-launcher"),i.classList.add("flat"),i.classList.add("very-small"),i.innerHTML=`<span class="smart-ribbon-group-dialog-launcher-icon ${e.dialogLauncher.icon}"></span>`,i.title=e.dialogLauncher.tooltip,i.addEventListener("click",(function(){e.$.fireEvent("dialogLauncherClick",{groupLabel:e.label,groupId:e.id})})),t.appendChild(i)}}}_buildContent(){const e=this;e.ribbonItems.forEach((t=>{if("group"===t.type){let i=document.createElement("smart-ribbon-group");i.classList.add("smart-ribbon-group");for(let e in t)i[e]=t[e];return void e.appendChild(i)}let i=document.createElement("smart-ribbon-item");i.classList.add("smart-ribbon-item");for(let e in t)i[e]=t[e];e.appendChild(i)}))}render(){const e=this;if(super.render(),e.hasAttribute("ready"))return;e.setAttribute("ready",""),this._isRoot=this.parentNode.classList.contains("smart-ribbon-tab-groups")||this.parentNode.nodeName==="smart-ribbon-tab".toUpperCase(),this._isRoot?this.setAttribute("root",""):this.setAttribute("inner",""),this.direction&&this.setAttribute("direction",this.direction);const t=["iconOnly","verySmall","small","normal","large"];t.indexOf(this.size)<=t.indexOf(this.wrapSize)&&this.size&&this.wrapSize&&!this.collapsed?this.setAttribute("size","small"):this.removeAttribute("size"),0!==e.ribbonItems.length&&e._buildContent(),e.children[0].classList.contains(".smart-ribbon-group-items")||e._buildHTML(),this._isRoot&&this._createDropDownGroup()}}),Smart("smart-ribbon-item",class extends Smart.ContentElement{static get properties(){return{itemId:{value:"",type:"string"},disabled:{value:!1,type:"boolean"},label:{value:"",type:"string"},type:{value:"",allowedValues:["button","toggleButton","dropDownButton","multiSplitButton","input","separator","custom"],type:"string"},itemTemplate:{value:"",type:"any"},size:{value:"normal",allowedValues:["iconOnly","verySmall","small","normal","large"],type:"string"},allowedSizes:{value:[],type:"array"},sizeChanged:{value:null,type:"function?"},icon:{value:"",type:"string"},cssClass:{value:"",type:"string"},settings:{value:{},type:"object"},tooltip:{value:"",type:"string"},onItemClick:{value:null,type:"function?"},onItemChange:{value:null,type:"function?"}}}get enableShadowDOM(){return!1}template(){return""}propertyChangedHandler(e,t,i){super.propertyChangedHandler(e,t,i)}_createButtonControl(){let e,t;switch(this.type){case"button":e=document.createElement("smart-button"),this._applyItemSettings(e);break;case"toggleButton":e=document.createElement("smart-toggle-button"),this._applyItemSettings(e);break;case"dropDownButton":e=document.createElement("smart-drop-down-button"),t=document.createElement("span"),t.innerHTML=this.label,this._handleIcon(t),this.settings||(settings={}),this.settings.placeholderTemplate=t.innerHTML,this.settings.dropDownButtonPosition||(this.settings.dropDownButtonPosition="bottom"),this._applyItemSettings(e,["label","icon"]);break;case"multiSplitButton":e=document.createElement("smart-multi-split-button"),this._applyItemSettings(e)}return e.classList.add("smart-ribbon-group-item-button"),this.appendChild(e),e}_createInputControl(e){const t=document.createElement("smart-input");return t.classList.add("smart-ribbon-group-item-input"),this._applyItemSettings(t),this.appendChild(t),t}_createSeparatorControl(){const e=document.createElement("div");return e.classList.add("smart-ribbon-group-item-separator"),this.appendChild(e),e}_createCustomControl(){if(0!==this.children.length)return this._applyItemSettings(this.children[0],["label"]),this.children[0];{const e=document.createElement("div");"<"===this.itemTemplate[0]&&(e.innerHTML=this.itemTemplate),this.appendChild(e),e.classList.add("smart-ribbon-group-item-control"),this._applyItemSettings(e.firstElementChild||e)}}_applyItemSettings(e,t=[]){this._template=this.itemTemplate;const i=this.closest("smart-ribbon");if(i.hasAttribute("right-to-left")&&e.setAttribute("right-to-left",""),this.cssClass&&this.cssClass.split(" ").forEach((t=>e.classList.add(t))),this.width&&(e.style.width=this.width),this.disabled&&(e.disabled=this.disabled),this.onItemChange&&e.addEventListener("change",this.onItemChange),this.onItemClick&&e.addEventListener("click",this.onItemClick),this.icon&&!t.includes("icon")&&this._handleIcon(e),this.label&&!t.includes("label")){const t=document.createElement("span");t.classList.add("smart-ribbon-group-item-label"),t.textContent=this.label,e.appendChild(t)}if(!this.tooltip||t.includes("tooltip")||this._tooltip||i.hasAttribute("clone")){if("iconOnly"==this.size&&!this.tooltip&&this.label&&this.type.indexOf("button")>-1){const t=this._createTooltip(e,this.label);this._tooltip=t,document.body.appendChild(t)}}else{const t=this.tooltip||this.label,i=this._createTooltip(e,t);this._tooltip=i,document.body.appendChild(i)}if(this.settings)for(let t in this.settings)e[t]=this.settings[t];if(this.itemTemplate)if("function"==typeof this.itemTemplate)this.itemTemplate(item,this.size);else if(this.itemTemplate instanceof HTMLElement)e.appendChild(this.itemTemplate);else if("string"==typeof itemTemplate)if("<"==itemTemplate[0])e.innerHTML+=this.itemTemplate;else{let t=document.querySelector(itemTemplate);t&&e.appendChild(t)}this._setSizeClass(e)}_handleIcon(e){const t=document.createElement("span");t.classList.add("smart-ribbon-group-item-icon");let i=[];if(!this.icon)return[];if("<"===this.icon[0]?t.innerHTML=this.icon:this.icon.split(" ").forEach((e=>{t.classList.add(e)})),this.type.indexOf("Button")>-1||this.type.indexOf("button")>-1){const t=document.createElement("div");t.classList.add("smart-ribbon-group-item-flex-break"),e?e.prepend(t):i.push(t)}return e?e.prepend(t):i.push(t),i}_createTooltip(e,t){const i=document.createElement("smart-tooltip");return i.classList.add("smart-ribbon-group-item-tooltip"),i.selector=e,i.innerHTML=t,i.theme=this.theme,i.position="bottom",i}_setDefaults(){const e=this,t=["iconOnly","verySmall","small","normal","large"];e.size&&t.includes(e.size)||(e.size="normal"),0===e.allowedSizes.length?e.allowedSizes=t.slice(0,t.indexOf(e.size)+1):e.allowedSizes=e.allowedSizes.map((e=>e.trim()))}_getAppliedSize(e="normal"){const t=this,i=t.allowedSizes,r=["iconOnly","verySmall","small","normal","large"];if(t.collapsed&&!i.some((e=>["iconOnly","verySmall","small"].includes(e))))return t.setAttribute("size","verySmall"),void(t.size="verySmall");if(!t.collapsed&&r.indexOf(i[0])>r.indexOf(e))return t.setAttribute("size",i[0]),void(t.size=i[0]);if(t.collapsed&&r.indexOf(i[0])>r.indexOf(e))return t.setAttribute("size","verySmall"),void(t.size="verySmall");if(t.collapsed)i.includes("small")?(t.setAttribute("size","small"),t.size="small"):i.includes("verySmall")?(t.setAttribute("size","verySmall"),t.size="verySmall"):i.includes("iconOnly")?(t.setAttribute("size","iconOnly"),t.size="iconOnly"):(t.setAttribute("size","verySmall"),t.size="verySmall");else for(let s=i.length-1;s>=0;s--)if(r.indexOf(i[s])<=r.indexOf(e))return t.setAttribute("size",i[s]),void(t.size=i[s])}_applySize(e="normal",t=!1){const i=this;i.collapsed=t;let r=i.size;i._getAppliedSize(e),r!==i.size&&i.refresh()}_setSizeClass(e){if(e)switch(e.classList.remove("large"),e.classList.remove("normal"),e.classList.remove("small"),e.classList.remove("very-small"),e.classList.remove("icon-only"),this.size){case"large":e.classList.add("large");break;case"normal":e.classList.add("normal");break;case"small":e.classList.add("small");break;case"verySmall":e.classList.add("very-small");break;case"iconOnly":e.classList.add("very-small"),e.classList.add("icon-only")}}refresh(){const e=this;if("button"==e.type||e.type.indexOf("Button")>-1){const t=e.querySelector("smart-button, smart-toggle-button, smart-drop-down-button, smart-multi-split-button");e._setSizeClass(t),"iconOnly"==this.size&&!this.tooltip&&this.label?(this._tooltip=this._createTooltip(t,this.label),document.body.appendChild(this._tooltip)):"iconOnly"!=this.size&&!this.tooltip&&this._tooltip&&(this._tooltip.close(),this._tooltip=null)}}_initControl(){const e=this;e.type.indexOf("button")>-1||e.type.indexOf("Button")>-1?e._createButtonControl():"input"===e.type?e._createInputControl():"separator"===e.type?e._createSeparatorControl():e._createCustomControl(),e.onInit&&e.onInit(e)}render(){const e=this;super.render(),e.hasAttribute("ready")||(e.setAttribute("ready",""),e._setDefaults(),e._getAppliedSize(e.size),e._initControl())}});