smart-webcomponents-react 15.2.2 → 15.2.9

package/source/smart.ribbon.js

@@ -1,6 +0,0 @@
-
-/* Smart UI v15.2.5 (2023-05-19) 
-Copyright (c) 2011-2023 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},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"]}}},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._refreshTabs(),this._setFileMenu()}static get listeners(){return{}}_getNextSize(e){const t=["grouped","iconOnly","verySmall","small","normal","large"],s=t.indexOf(e);return t[s+1]}_getPreviousSize(e){const t=["grouped","iconOnly","verySmall","small","normal","large"],s=t.indexOf(e);return t[s-1]}propertyChangedHandler(e,t,s){super.propertyChangedHandler(e,t,s),"selectedTab"!==e&&this.refresh()}async _calculateSizes(e,t,s){let i=t.cloneNode(!0);i.style.width=document.querySelector(".smart-ribbon-tabs").offsetWidth+"px",i.style.height=(t.offsetHeight||50)+"px",i.style.position="absolute",i.style.visibility="hidden",i.style.display="block",i.style.left="-10000px",s&&i.setAttribute("collapsed",""),this._setGroupSideContainer(s,i.querySelector(".smart-ribbon-tab-side-container")),this.appendChild(i),await this._attemptReduce(i,e,s),i.parentNode.removeChild(i)}_attemptResize(e){let t=e;if(t||(t=this.querySelector(".smart-ribbon-tab[active]")),!t)return!1;const s=parseInt(t.getAttribute("tab-index")),i=this.dataSource[s],o=t.offsetWidth,a=t.querySelectorAll(".smart-ribbon-group"),r=this.collapsed?i._collapsedStates:i._states;for(let e=0;e<r.length;e++){let t=r[e];if(t.width<o||e===r.length-1){for(let s=e;s<r.length;s++){const e=r[s];if(e.width===t.width&&e.groupIndex<t.groupIndex&&(t=e),e.width!==t.width)break}for(let e=a.length-1;e>=0;e--){const s=a[e].querySelector(".smart-ribbon-group-items"),i=t.ribbonGroups[e];(this.collapsed||e>=t.groupIndex&&s.appliedSize!==t.size)&&this._refreshGroup(i,s,t.size,this.collapsed)}return!0}}}_resizeEventHandler(){this._attemptResize()}_checkForOverflow(e){return e||(e=this.querySelector(".smart-ribbon-tab[active]")),!!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(((s,i)=>{setTimeout((()=>{s(t._checkForOverflow(e))}))}))}_getWidthAsync(e){return new Promise(((t,s)=>{setTimeout((()=>{const s=e.querySelector(".smart-ribbon-tab-groups"),i=e.querySelector(".smart-ribbon-tab-side-container");t(s.offsetWidth+i.offsetWidth)}))}))}async _attemptReduce(e,t,s){const i=parseInt(e.getAttribute("tab-index")),o=Array.from(e.querySelectorAll(".smart-ribbon-group"));for(let a=o.length-1;a>=0;a--){const r=o[a].querySelector(".smart-ribbon-group-items"),l=this.dataSource[i].ribbonGroups[a];this._refreshGroup(l,r,t,s);const n=await this._getWidthAsync(e);s?this.dataSource[i]._collapsedStates.push({ribbonGroups:this.dataSource[i].ribbonGroups,width:n,size:t,groupIndex:a}):this.dataSource[i]._states.push({ribbonGroups:this.dataSource[i].ribbonGroups,width:n,size:t,groupIndex:a})}return"grouped"!==t&&await this._attemptReduce(e,this._getPreviousSize(t),s),!0}_refreshGroup(e,t,s,i=!1){const o=this;if(void 0===i&&(i=o.collapsed),t.appliedSize!==s||t.appliedState!==i){for(;t.firstChild;)t.removeChild(t.firstChild);if(t.appliedSize=s,t.appliedState=i,"grouped"!==s||i)this._setGroupItems(e,t,s,i),t.parentNode.classList.remove("smart-ribbon-group-grouped");else{const s={label:e.label,type:"dropDownButton",settings:{dropDownAppendTo:"body",dropDownWidth:"auto"}},i=o._setRibbonGroupControl(s);i.classList.add("smart-ribbon-group-drop-down");const a=document.createElement("div");this._setRibbonGroup(e,a,"large"),i.querySelector("smart-drop-down-button").appendChild(a),t.appendChild(i),t.parentNode.classList.add("smart-ribbon-group-grouped")}}}_handleTabSelection(e){const t=this,s=(t._headerTabs,t.querySelector(".smart-ribbon-header-tab[selected]"));s&&s.removeAttribute("selected"),e.setAttribute("selected","");const i=e.getAttribute("tab-index"),o=t.querySelector(".smart-ribbon-tab[active]");o&&o.removeAttribute("active");const a=t.querySelector(`.smart-ribbon-tab[tab-index="${i}"]`);a&&a.setAttribute("active",""),t._attemptResize()}_selectTab(e){const t=this._headerTabs;e<0||e>=t.length||this._handleTabSelection(t[e])}_setFileMenu(){const e=this;!e.fileMenu.visible&&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._fileButton.setAttribute("dropDownOpenMode","click"),e._fileButton.placeholder="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)}else e._fileButton=document.createElement("smart-button"),e._fileButton.textContent="File";e._fileButton.classList.add("smart-ribbon-file-button"),e._fileButton.addEventListener("click",(function(){})),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").firstChild):"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)}}_refreshHeaderTabs(){this._setHeaderTabs()}async _refreshTabs(){this.collapsed?await this._setCollapsedTabs():await this._setRibbonTabs(),setTimeout((()=>{this.collapsed?this._setRibbonTabs():this._setCollapsedTabs()}))}_applyCollapseSize(e,t){for(let s=e.collapseSizes.length-1;s>=0;s--)if(this._itemSizes.indexOf(e.collapseSizes[s])-1<=this._itemSizes.indexOf(t))return e.size=e.collapseSizes[s],e.collapseSizes[s];return"hidden"}_applySize(e,t){for(let s=e.allowedSizes.length-1;s>=0;s--)if(this._itemSizes.indexOf(e.allowedSizes[s])<=this._itemSizes.indexOf(t))return e.size=e.allowedSizes[s],e.allowedSizes[s]}_setHeaderTabs(){const e=this,t=e.querySelector(".smart-ribbon-header-tabs"),s=e.dataSource;for(;t.firstChild;)t.removeChild(t.firstChild);for(let i=0;i<s.length;i++){const o=s[i],a=document.createElement("div");a.classList.add("smart-ribbon-header-tab"),a.innerHTML='<span class="smart-ribbon-header-tab-label">'+o.label+"</span>",a.setAttribute("tab-index",i),a.addEventListener("click",(function(){e.selectedTab=parseInt(this.getAttribute("tab-index")),e._handleTabSelection(this)})),t.appendChild(a),i===e.selectedTab&&a.setAttribute("selected","")}e._headerTabs=t.querySelectorAll(".smart-ribbon-header-tab")}async _setCollapsedTabs(e="verySmall"){let t=this.querySelector(".smart-ribbon-tabs").cloneNode(!0);await this._setRibbonTabs(e,t,!0),this._collapsedTabs=t}async _setRibbonTabs(e="large",t,s){const i=this;t||(t=i.querySelector(".smart-ribbon-tabs"));const o=i.dataSource;for(;t.firstChild;)t.removeChild(t.firstChild);for(let a=0;a<o.length;a++){let r=o[a];const l=document.createElement("div");l.classList.add("smart-ribbon-tab"),l.setAttribute("tab-index",a),l.setAttribute("allowed-size",e);const n=document.createElement("div");n.classList.add("smart-ribbon-tab-groups"),l.appendChild(n);const d=document.createElement("div");d.classList.add("smart-ribbon-tab-side-container"),d.classList.add(this.collapsed?"collapsed":"expanded"),l.appendChild(d),this._setGroupSideContainer(this.collapsed,d);const c=r.ribbonGroups;for(let t=0;t<c.length;t++)i._setRibbonGroup(c[t],n,e);t.appendChild(l),r._states||(r._states=[]),r._collapsedStates||(r._collapsedStates=[]),await this._calculateSizes(e,l,s),i.selectedTab===a&&i._selectTab(a)}s||(this._ribbonTabs=t)}_setGroupSideContainer(e,t){const s=this,i=document.createElement("smart-button");i.innerHTML='<span class="smart-ribbon-tab-collapse-button"></span>',i.classList.add("flat"),i.classList.add("very-small"),i.addEventListener("click",(function(){s.collapsed?s.expand():s.collapse()})),t.appendChild(i)}expand(){const e=this;e.collapsed=!1,this._collapsedTabs.replaceWith(this._ribbonTabs),Array.from(e.querySelector(".smart-ribbon-tabs").children).forEach((e=>{e.removeAttribute("collapsed")})),e._selectTab(e.selectedTab)}collapse(){const e=this;e._collapsedTabs&&(e.collapsed=!0,this._ribbonTabs.replaceWith(this._collapsedTabs),Array.from(e.querySelector(".smart-ribbon-tabs").children).forEach((e=>{e.setAttribute("collapsed","")})),e._selectTab(e.selectedTab))}_setGroupDefaultValues(e){const t=["grouped","iconOnly","verySmall","small","normal","large"];e.size&&t.includes(e.size)||(e.size="normal"),e.allowedSizes||(e.allowedSizes=t.slice(0,t.indexOf(e.size)))}_setItemDefaultValues(e,t){const s=["iconOnly","verySmall","small","normal","large"],i=["hidden","iconOnly","verySmall"];e.size&&s.includes(e.size)||(e.size="normal"),t&&"normal"==e.size&&(e.size="verySmall"),e.allowedSizes||(e.allowedSizes=s.slice(0,s.indexOf(e.size)+1)),e.collapseSizes||(e.collapseSizes=i.slice(0,i.indexOf(e.collapseSize)+1)),e.settings||(e.settings={})}_setRibbonGroup(e,t,s="large",i){const o=document.createElement("div");o.classList.add("smart-ribbon-group");const a=document.createElement("div");a.classList.add("smart-ribbon-group-items"),o.appendChild(a),this._setGroupItems(e,a,s,i);const r=document.createElement("div");r.classList.add("smart-ribbon-group-header"),r.innerHTML='<span class="smart-ribbon-group-header-label">'+e.label+"</span>",o.appendChild(r),t.appendChild(o)}_setGroupItems(e,t,s,i){const o=e.ribbonItems;this._setGroupDefaultValues(e),this._itemSizes.indexOf(s)<=this._itemSizes.indexOf(e.wrapSize)?t.classList.add("smart-ribbon-group-small"):t.classList.remove("smart-ribbon-group-small");for(let e=0;e<o.length;e++)if("group"!==o[e].type)this._setItemDefaultValues(o[e],i),i?this._applyCollapseSize(o[e],s):this._applySize(o[e],s),this._setRibbonGroupControl(o[e],t);else{this._setGroupDefaultValues(o[e]),this._applySize(o[e],s);const i=document.createElement("div");i.classList.add("smart-ribbon-inner-group"),"vertical"===o[e].direction?i.classList.add("smart-ribbon-vertical-group"):"horizontal"===o[e].direction&&i.classList.add("smart-ribbon-horizontal-group"),this._setGroupItems(o[e],i,s),t.appendChild(i)}}_setRibbonGroupControl(e,t){const s=document.createElement("div");return s.classList.add("smart-ribbon-group-item"),e.parentNode=s,e.type.indexOf("button")>-1||e.type.indexOf("Button")>-1?s.appendChild(this._createButtonControl(e,e.type)):"colorInput"===e.type?s.appendChild(this._createColorInputControl(e)):"colorPicker"===e.type?s.appendChild(this._createColorPickerControl(e)):"comboBox"===e.type?s.appendChild(this._createComboBoxControl(e)):"dropDownList"===e.type?s.appendChild(this._createDropDownListControl(e)):"input"===e.type?s.appendChild(this._createInputControl(e)):"separator"===e.type?s.appendChild(this._createSeparatorControl(e)):s.appendChild(this._createCustomControl(e)),t&&t.appendChild(s),s}_createButtonControl(e,t="button"){let s,i;switch(t){case"button":s=document.createElement("smart-button"),this._applyItemSettings(s,e);break;case"toggleButton":s=document.createElement("smart-toggle-button"),this._applyItemSettings(s,e);break;case"dropDownButton":s=document.createElement("smart-drop-down-button"),i=document.createElement("span"),i.innerHTML=e.label,this._handleIcon(e,i),e.settings||(e.settings={}),e.settings.placeholderTemplate=i.innerHTML,e.settings.dropDownButtonPosition="bottom",this._applyItemSettings(s,e,["label","icon"]);break;case"multiSplitButton":s=document.createElement("smart-multi-split-button"),this._applyItemSettings(s,e)}return s.classList.add("smart-ribbon-group-item-button"),s}_createColorInputControl(e){const t=document.createElement("smart-color-input");return this._applyItemSettings(t,e),t.classList.add("smart-ribbon-group-item-color-input"),t}_createColorPickerControl(e){const t=document.createElement("smart-color-picker");return e.settings.dropDownAppendTo||(e.settings.dropDownAppendTo="body"),"iconOnly"!==e.size&&"small"!==e.size||e.settings.valueDisplayMode||(e.settings.valueDisplayMode="colorBox"),e.settings.dropDownOpenMode||(e.settings.dropDownOpenMode="dropDownButton"),this._applyItemSettings(t,e,["label","icon"]),t.classList.add("smart-ribbon-group-item-color-picker"),t}_createComboBoxControl(e){const t=document.createElement("smart-combo-box");return t.classList.add("smart-ribbon-group-item-combo-box"),e.settings.dropDownAppendTo||(e.settings.dropDownAppendTo="body"),this._applyItemSettings(t,e,["label","icon"]),t}_createDropDownListControl(e){const t=document.createElement("smart-drop-down-list");return t.classList.add("smart-ribbon-group-item-drop-down-list"),e.settings.dropDownAppendTo||(e.settings.dropDownAppendTo="body"),this._applyItemSettings(t,e,["label","icon"]),t}_createInputControl(e){const t=document.createElement("smart-input");return this._applyItemSettings(t,e),t.classList.add("smart-ribbon-group-item-input"),t}_createSeparatorControl(){const e=document.createElement("div");return e.classList.add("smart-ribbon-group-item-separator"),e}_createCustomControl(e){const t=document.createElement("div");return this._applyItemSettings(t,e),t.classList.add("smart-ribbon-group-item-custom-control"),t}_applyItemSettings(e,t,s=[]){if(t._template=t.template,t._collapsedTemplate=t.collapsedTemplate,t.id&&(e.id=t.id),t.class&&t.class.split(" ").forEach((t=>e.classList.add(t))),t.width&&(e.style.width=t.width),t.disabled&&(e.disabled=t.disabled),t.onChange&&e.addEventListener("change",t.onChange),t.onClick&&e.addEventListener("click",t.onClick),t.icon&&!s.includes("icon")&&this._handleIcon(t,e),t.label&&!t.collapsed&&"iconOnly"!==t.size&&!s.includes("label")){const s=document.createElement("span");s.classList.add("smart-ribbon-group-item-label"),s.textContent=t.label,e.appendChild(s)}if((t.tooltip||"iconOnly"===t.size)&&!s.includes("tooltip")){const s=t.tooltip||t.label,i=this._createTooltip(e,s);t.parentNode.appendChild(i)}if(t.settings)for(let s in t.settings)e[s]=t.settings[s];switch(t.template&&!t.collapsed&&("string"==typeof t.template?e.innerHTML=t.template:"function"==typeof t.template?t.template(t,t.size):t.template instanceof HTMLElement&&e.appendChild(t.template)),t.collapsedTemplate&&t.collapsed&&("string"==typeof t.collapsedTemplate?e.innerHTML=t.collapsedTemplate:"function"==typeof t.collapsedTemplate?t.collapsedTemplate(t):t.collapsedTemplate instanceof HTMLElement&&e.appendChild(t.collapsedTemplate)),t.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")}}_handleIcon(e,t){const s=document.createElement("span");s.classList.add("smart-ribbon-group-item-icon");let i=[];if(!e.icon)return[];if("<"===e.icon[0]?s.innerHTML=e.icon:e.icon.split(" ").forEach((e=>{s.classList.add(e)})),("large"===e.size||"normal"===e.size)&&!e.collapsed){const e=document.createElement("div");e.classList.add("smart-ribbon-group-item-flex-break"),t?t.prepend(e):i.push(e)}return t?t.prepend(s):i.push(s),i}_createTooltip(e,t){const s=document.createElement("smart-tooltip");return s.classList.add("smart-ribbon-group-item-tooltip"),s.selector=e,s.innerHTML=t,s.theme=this.theme,s.position="bottom",s}ready(){super.ready(),this._setDefaults(),this.refresh(),this._resizeObserver=new ResizeObserver((e=>{clearTimeout(this._resizeTimeout),this._resizeTimeout=setTimeout((()=>{this._resizeEventHandler()}),10)})),this._resizeObserver.observe(this.querySelector(".smart-ribbon-tabs"))}});

package/source/styles/components/smart.ribbon.css

@@ -1,13 +0,0 @@
-@import url("./../default/smart.ribbon.css");
-@import url("./../default/smart.scrollviewer.css");
-@import url("./../default/smart.menu.css");
-@import url("./../default/smart.button.css");
-@import url("./../default/smart.toggle.css");
-@import url("./../default/smart.dropdown.css");
-@import url("./../default/smart.textbox.css");
-@import url("./../default/smart.dropdownbutton.css");
-@import url("./../default/smart.dropdownlist.css");
-@import url("./../default/smart.multisplitbutton.css");
-@import url("./../default/smart.colorpanel.css");
-@import url("./../default/smart.colorpicker.css");
-@import url("./../default/smart.tooltip.css");

package/source/styles/default/smart.ribbon.css

@@ -1,235 +0,0 @@
-smart-ribbon .smart-ribbon-header {
-  display: flex;
-  border: var(--smart-border-width) solid var(--smart-surface);
-  background: var(--smart-surface);
-  color: var(--smart-surface-color);
-  padding: var(--smart-tabs-header-padding);
-  height: var(--smart-ribbon-tab-header-height);
-}
-
-.smart-ribbon-file-container smart-drop-down-button .smart-action-button{
-  cursor: pointer;
-  width: 100%;
-}
-
-
-.smart-ribbon-file-container smart-drop-down-button, .smart-ribbon-file-container smart-button{
-  text-align: center;
-  --smart-editor-addon-width: 0;
-  --smart-border-radius: 0;
-  --smart-border-top-right-radius: var(--smart-border-radius);
-  --smart-border-bottom-right-radius: var(--smart-border-radius);
-  --smart-border-top-left-radius: var(--smart-border-radius);
-  --smart-border-bottom-left-radius: var(--smart-border-radius);
-  border-radius: 0px;
-  min-width: 70px;
-}
-
-.smart-ribbon-file-container smart-menu {
-  --smart-menu-vertical-default-height: auto;
-  border: 0;
-}
-
-.smart-ribbon-header .smart-ribbon-header-tabs {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-.smart-ribbon-header-tabs .smart-ribbon-header-tab{
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  border: var(--smart-border-width) solid var(--smart-surface);
-  border-bottom: none;
-  background: var(--smart-surface);
-  color: var(--smart-surface-color);
-  padding: var(--smart-tabs-header-tab-padding);
-  cursor: pointer;
-  max-width: var(--smart-ribbon-tab-header-width);
-}
-
-.smart-ribbon-header-tabs .smart-ribbon-header-tab:hover {
-  background: var(--smart-ui-state-hover);
-  color: var(--smart-ui-state-color-hover);
-  border-color: var(--smart-ui-state-border-hover);
-}
-
-.smart-ribbon-header-tabs .smart-ribbon-header-tab[selected] {
-  background-color: var(--smart-ui-state-selected);
-  border-color: var(--smart-item-border-selected);
-  border-width: 0 0 var(--smart-border-width) 0;
-  color: var(--smart-ui-state-color-selected);
-}
-
-.smart-ribbon-tabs .smart-ribbon-tab {
-  height: var(--smart-ribbon-tab-height);
-  display: none;
-  flex-direction: row;
-  border: var(--smart-border-width) solid var(--smart-surface);
-  border-top: none;
-  color: var(--smart-surface-color);
-  padding: var(--smart-tabs-tab-padding);
-  overflow-y: hidden;
-  overflow-x: hidden;
-  background: #fff;
-}
-
-.smart-ribbon-tab[collapsed]{
-  height: var(--smart-ribbon-collapsed-tab-height);
-}
-
-.smart-ribbon-tab[active]{
-  display: flex;
-}
-
-.smart-ribbon-tab .smart-ribbon-tab-groups{
-  display: inline-flex;
-}
-
-.smart-ribbon-tab .smart-ribbon-tab-side-container{
-  width: 40px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: end;
-  margin-left: auto; 
-  margin-right: 0;
-}
-
-.smart-ribbon-tab[collapsed] .smart-ribbon-tab-side-container{
-  justify-content: center;
-}
-
-.smart-ribbon-tab-side-container .smart-ribbon-tab-collapse-button{
-  font-family: var(--smart-font-family-icon);
-  font-size: calc(var(--smart-font-size) * 1.5);
-  cursor: pointer;
-}
-
-.smart-ribbon-tabs .smart-ribbon-tab-collapse-button:after{
-  content: var(--smart-icon-arrow-up);
-}
-
-.smart-ribbon-tab[collapsed] .smart-ribbon-tab-collapse-button:after{
-  content: var(--smart-icon-arrow-down);
-}
-
-.smart-ribbon-group{
-  display: flex;
-  flex-wrap: nowrap;
-  flex-direction: column;
-  flex: 1;
-  border-color: var(--smart-ribbon-border-color);
-  border-width: 0 var(--smart-border-width) 0 0;
-  border-style: solid;
-  color: var(--smart-surface-color);
-  padding: 10px 10px 0 10px;
-}
-
-
-.smart-ribbon-tab[collapsed] .smart-ribbon-group{
-  padding: 2px;
-}
-
-
-.smart-ribbon-group-items .smart-ribbon-group-item-separator{
-  width: 1px;
-  background: var(--smart-ribbon-border-color);
-  margin: 0 5px;
-  height: 100%;
-}
-
-.smart-ribbon-group .smart-ribbon-group-items{
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  overflow: hidden;
-}
-
-.smart-ribbon-inner-group{
-  display: flex;
-  justify-content: space-around;
-}
-
-.smart-ribbon-vertical-group{
-  flex-direction: column;
-}
-
-.smart-ribbon-tab[collapsed] .smart-ribbon-vertical-group{
-  flex-direction: row;
-}
-
-.smart-ribbon-horizontal-group{
-  flex-direction: row;
-}
-
-.smart-ribbon-inner-group.smart-ribbon-group-small, .smart-ribbon-group-items.smart-ribbon-group-small {
-  flex-wrap: wrap;
-  justify-content: left;
-}
-
-.smart-ribbon-tab[collapsed] .smart-ribbon-inner-group.smart-ribbon-group-small, .smart-ribbon-tab[collapsed] .smart-ribbon-group-items.smart-ribbon-group-small {
-  flex-wrap: nowrap;
-  justify-content: space-around;
-}
-
-.smart-ribbon-group-small .smart-ribbon-group-item{
-  flex: 100%;
-}
-
-.smart-ribbon-group-item{
-  display: flex;
-  align-items: center;
-}
-
-.smart-ribbon-group-item > smart-button {
-  height: 100%;
-}
-
-.smart-ribbon-group-item > .large, .smart-ribbon-group-item > .normal{
-  height: 100%;
-}
-
-.smart-ribbon-group-item-label{
-  vertical-align: super;
-}
-
-.smart-ribbon-group-item > smart-color-picker.small, .smart-ribbon-group-item > smart-color-picker.very-small{
-  width: fit-content;
-}
-
-.smart-ribbon-group-item-flex-break{
-  flex-basis: 100%;
-  height: 0;
-}
-
-.smart-ribbon-group .smart-ribbon-group-header-label{
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(var(--smart-font-size) * 0.75);
-  padding: 10px 0 5px 0;
-}
-
-.smart-ribbon-group.smart-ribbon-group-grouped{
-  padding-top: 0px;
-}
-
-.smart-ribbon-group-grouped .smart-ribbon-group-header-label, .smart-ribbon-tab[collapsed] .smart-ribbon-group-header-label{
-  display: none;
-}
-
-.smart-ribbon-group-drop-down{
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.smart-ribbon-group-drop-down smart-drop-down-button {
-  min-width: 75px;
-}