@limetech/lime-elements 38.2.0 → 38.2.2

package/dist/lime-elements/{p-e6ccf353.entry.js → p-f95a5cb5.entry.js}

@@ -1,4 +1,4 @@
-import{r as t,c as r,h as n,g as e}from"./p-443111b3.js";import{g as i,a}from"./p-2fd454dd.js";import{i as o}from"./p-cf019264.js";import{_ as c,a as s,g as l,M as u,b as d,m as f,c as h}from"./p-9f722992.js";import{a as m,b,M as p}from"./p-5a478c15.js";import{S as v,c as g}from"./p-ea0310b8.js";import{a as _,b as y,c as x,i as w,d as C}from"./p-296f80c6.js";import{a as T}from"./p-669626e5.js";import{e as A}from"./p-28a23eac.js";import"./p-eda23c05.js";import"./p-c93050d6.js";import"./p-4c3358cb.js";import"./p-0b1af919.js";import"./p-87a34aa6.js";import"./p-33375610.js";import"./p-858c6b82.js";import"./p-5fdb83c9.js";var E=200;function S(t,r,n,e){var i=-1,a=_,o=true,c=t.length,s=[],l=r.length;if(!c){return s}if(n){r=T(r,A(n))}if(e){a=y;o=false}else if(r.length>=E){a=g;o=false;r=new v(r)}t:while(++i<c){var u=t[i],d=n==null?u:n(u);u=e||u!==0?u:0;if(o&&d===d){var f=l;while(f--){if(r[f]===d){continue t}}s.push(u)}else if(!a(r,d,e)){s.push(u)}}return s}var k=x((function(t,r){return w(t)?S(t,C(r,1,w,true)):[]}));
+import{r as t,c as r,h as n,g as e}from"./p-443111b3.js";import{g as i,a}from"./p-bd547592.js";import{i as o}from"./p-cf019264.js";import{_ as c,a as s,g as l,M as u,b as d,m as f,c as h}from"./p-9f722992.js";import{a as m,b,M as p}from"./p-5a478c15.js";import{S as v,c as g}from"./p-ea0310b8.js";import{a as _,b as y,c as x,i as w,d as C}from"./p-296f80c6.js";import{a as T}from"./p-669626e5.js";import{e as A}from"./p-28a23eac.js";import"./p-eda23c05.js";import"./p-c93050d6.js";import"./p-4c3358cb.js";import"./p-0b1af919.js";import"./p-87a34aa6.js";import"./p-33375610.js";import"./p-858c6b82.js";import"./p-5fdb83c9.js";var E=200;function S(t,r,n,e){var i=-1,a=_,o=true,c=t.length,s=[],l=r.length;if(!c){return s}if(n){r=T(r,A(n))}if(e){a=y;o=false}else if(r.length>=E){a=g;o=false;r=new v(r)}t:while(++i<c){var u=t[i],d=n==null?u:n(u);u=e||u!==0?u:0;if(o&&d===d){var f=l;while(f--){if(r[f]===d){continue t}}s.push(u)}else if(!a(r,d,e)){s.push(u)}}return s}var k=x((function(t,r){return w(t)?S(t,C(r,1,w,true)):[]}));
 /**
  * @license
  * Copyright 2018 Google Inc.
@@ -417,4 +417,4 @@ import{r as t,c as r,h as n,g as e}from"./p-443111b3.js";import{g as i,a}from"./
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */var tt=$.strings;var rt=0;var nt=function(t){c(r,t);function r(){return t!==null&&t.apply(this,arguments)||this}r.attachTo=function(t){return new r(t)};Object.defineProperty(r.prototype,"focusOnActivate",{set:function(t){var r,n;try{for(var e=h(this.tabList),i=e.next();!i.done;i=e.next()){var a=i.value;a.focusOnActivate=t}}catch(t){r={error:t}}finally{try{if(i&&!i.done&&(n=e.return))n.call(e)}finally{if(r)throw r.error}}},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"useAutomaticActivation",{set:function(t){this.foundation.setUseAutomaticActivation(t)},enumerable:false,configurable:true});r.prototype.initialize=function(t,r){if(t===void 0){t=function(t){return new U(t)}}if(r===void 0){r=function(t){return new P(t)}}this.tabList=this.instantiateTabs(t);this.tabScroller=this.instantiatetabScroller(r)};r.prototype.initialSyncWithDOM=function(){var t=this;this.handleTabInteraction=function(r){t.foundation.handleTabInteraction(r)};this.handleKeyDown=function(r){t.foundation.handleKeyDown(r)};this.listen(G.strings.INTERACTED_EVENT,this.handleTabInteraction);this.listen("keydown",this.handleKeyDown);for(var r=0;r<this.tabList.length;r++){if(this.tabList[r].active){this.scrollIntoView(r);break}}};r.prototype.destroy=function(){var r,n;t.prototype.destroy.call(this);this.unlisten(G.strings.INTERACTED_EVENT,this.handleTabInteraction);this.unlisten("keydown",this.handleKeyDown);try{for(var e=h(this.tabList),i=e.next();!i.done;i=e.next()){var a=i.value;a.destroy()}}catch(t){r={error:t}}finally{try{if(i&&!i.done&&(n=e.return))n.call(e)}finally{if(r)throw r.error}}if(this.tabScroller){this.tabScroller.destroy()}};r.prototype.getDefaultFoundation=function(){var t=this;var r={scrollTo:function(r){t.tabScroller.scrollTo(r)},incrementScroll:function(r){t.tabScroller.incrementScroll(r)},getScrollPosition:function(){return t.tabScroller.getScrollPosition()},getScrollContentWidth:function(){return t.tabScroller.getScrollContentWidth()},getOffsetWidth:function(){return t.root.offsetWidth},isRTL:function(){return window.getComputedStyle(t.root).getPropertyValue("direction")==="rtl"},setActiveTab:function(r){t.foundation.activateTab(r)},activateTabAtIndex:function(r,n){t.tabList[r].activate(n)},deactivateTabAtIndex:function(r){t.tabList[r].deactivate()},focusTabAtIndex:function(r){t.tabList[r].focus()},getTabIndicatorClientRectAtIndex:function(r){return t.tabList[r].computeIndicatorClientRect()},getTabDimensionsAtIndex:function(r){return t.tabList[r].computeDimensions()},getPreviousActiveTabIndex:function(){for(var r=0;r<t.tabList.length;r++){if(t.tabList[r].active){return r}}return-1},getFocusedTabIndex:function(){var r=t.getTabElements();var n=document.activeElement;return r.indexOf(n)},getIndexOfTabById:function(r){for(var n=0;n<t.tabList.length;n++){if(t.tabList[n].id===r){return n}}return-1},getTabListLength:function(){return t.tabList.length},notifyTabActivated:function(r){return t.emit(tt.TAB_ACTIVATED_EVENT,{index:r},true)}};return new $(r)};r.prototype.activateTab=function(t){this.foundation.activateTab(t)};r.prototype.scrollIntoView=function(t){this.foundation.scrollIntoView(t)};r.prototype.getTabElements=function(){return[].slice.call(this.root.querySelectorAll(tt.TAB_SELECTOR))};r.prototype.instantiateTabs=function(t){return this.getTabElements().map((function(r){r.id=r.id||"mdc-tab-"+ ++rt;return t(r)}))};r.prototype.instantiatetabScroller=function(t){var r=this.root.querySelector(tt.TAB_SCROLLER_SELECTOR);if(r){return t(r)}return null};return r}(d);function et(t,r){const n=t.findIndex((t=>t.active===true));const e=[...t];if(n!==-1){e[n]=Object.assign(Object.assign({},t[n]),{active:false})}e[r]=Object.assign(Object.assign({},t[r]),{active:true});return e}const it=":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#26a69a;border-color:var(--mdc-theme-primary, #26a69a)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#575756;color:var(--mdc-theme-secondary, #575756)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:none;text-transform:var(--mdc-typography-button-text-transform, none);position:relative}.mdc-tab .mdc-tab__text-label{color:rgba(0, 0, 0, 0.6)}.mdc-tab .mdc-tab__icon{color:rgba(0, 0, 0, 0.54);fill:currentColor}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__text-label{color:#26a69a;color:var(--mdc-theme-primary, #26a69a)}.mdc-tab--active .mdc-tab__icon{color:#26a69a;color:var(--mdc-theme-primary, #26a69a);fill:currentColor}.mdc-tab{background:none}.mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px;}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-tab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-tab .mdc-tab__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-tab .mdc-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{background-color:#26a69a;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #26a69a))}.mdc-tab:hover .mdc-tab__ripple::before,.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before{opacity:0.08;opacity:var(--mdc-ripple-hover-opacity, 0.08)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-focus-opacity, 0.24)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after{transition:opacity 150ms linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform, opacity}.scroll-fade,.scroll-button{position:absolute;transition-property:transform;transition-duration:0.3s;transition-timing-function:ease-out}.scroll-fade{top:0;height:100%;width:4.0625rem;pointer-events:none}.scroll-fade.left{transform:translate3d(-4.0625rem, 0, 0);left:0;background:linear-gradient(270deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-fade.right{transform:translate3d(4.0625rem, 0, 0);right:0;background:linear-gradient(90deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-button{--icon-background-color:rgb(var(--contrast-100));display:flex;align-items:center;top:0;bottom:0}.scroll-button.left{transform:translate3d(-4.0625rem, 0, 0);left:0.25rem}.scroll-button.right{transform:translate3d(4.0625rem, 0, 0);right:0.25rem}.scroll-button:hover{transform:translate3d(0, 0, 0)}.mdc-tab-scroller{position:relative;overflow:hidden}.mdc-tab-scroller.can-scroll-left .scroll-fade.left,.mdc-tab-scroller.can-scroll-left .scroll-button.left,.mdc-tab-scroller.can-scroll-right .scroll-fade.right,.mdc-tab-scroller.can-scroll-right .scroll-button.right{transform:translate3d(0, 0, 0)}.mdc-tab-scroller.can-scroll-left:not(.can-scroll-right) .scroll-button.right,.mdc-tab-scroller.can-scroll-right:not(.can-scroll-left) .scroll-button.left{opacity:0.5;transition-delay:0.5s}.lime-hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.mdc-tab-scroller__scroll-content{padding:0.25rem 0.75rem 0 0.75rem;background-color:rgb(var(--contrast-300))}:host(limel-tab-bar){--limel-active-tab-background-color:var(\n      --tab-panel-background-color,\n      rgb(var(--contrast-100))\n  );isolation:isolate;display:block;position:relative}:host(.has-tabs-with-equal-width) .mdc-tab{flex:1 0 auto}.mdc-tab{font-family:inherit;font-weight:400;letter-spacing:normal}.mdc-tab-indicator .mdc-tab-indicator__content{border:none}.mdc-tab__ripple{box-sizing:border-box;border-radius:0.625rem;border-style:solid;border-color:transparent;border-width:0.25rem;opacity:0.7}.mdc-tab__ripple:before,.mdc-tab__ripple:after{transition:background-color 0.5s ease}.mdc-tab{border-radius:0;padding-right:1.25rem;padding-left:1.25rem;min-width:2.5rem;background-color:transparent;flex:0 0 auto}.mdc-tab:not(.mdc-tab--active){--badge-background-color:rgb(var(--contrast-600))}.mdc-tab:not(.mdc-tab--active):after{content:\"\";display:block;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:-0.125rem}.mdc-tab:not(.mdc-tab--active):last-of-type:after{display:none}.mdc-tab--active{border-radius:0.625rem 0.625rem 0 0;background-color:var(--limel-active-tab-background-color);z-index:2}.mdc-tab--active:before,.mdc-tab--active:after{content:\"\";display:block;width:0.75rem;height:0.75rem;position:absolute;bottom:0;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\");mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\")}.mdc-tab--active:before{left:-0.75rem;transform:rotateY(180deg)}.mdc-tab--active:after{right:-0.75rem}.mdc-tab--active .mdc-ripple-upgraded--background-focused:before{background-color:transparent;transition:background-color 1s ease}.mdc-tab__content{gap:0.375rem}.mdc-tab .mdc-tab__text-label{transition:color 0.2s ease;padding-left:0 !important;color:var(--mdc-theme-on-surface)}.mdc-tab:hover .mdc-tab__text-label{color:var(--mdc-theme-text-primary-on-background)}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mdc-theme-primary)}";const{TAB_ACTIVATED_EVENT:at}=q;const ot=150;const ct=40;const st=class{constructor(n){t(this,n);this.changeTab=r(this,"changeTab",7);this.setupMdc=false;this.tabs=[];this.canScrollLeft=false;this.canScrollRight=false;this.handleTabActivated=this.handleTabActivated.bind(this);this.handleScroll=this.handleScroll.bind(this);this.handleLeftScrollClick=this.handleLeftScrollClick.bind(this);this.handleRightScrollClick=this.handleRightScrollClick.bind(this);this.renderTab=this.renderTab.bind(this)}connectedCallback(){this.setup()}componentDidLoad(){this.setup();this.triggerIconColorWarning()}componentDidUpdate(){if(!this.setupMdc){return}this.setup();this.setupMdc=false}disconnectedCallback(){this.tearDown()}render(){return n("div",{class:"mdc-tab-bar",role:"tablist"},n("div",{class:{"mdc-tab-scroller":true,"can-scroll-left":this.canScrollLeft,"can-scroll-right":this.canScrollRight}},n("div",{class:"mdc-tab-scroller__scroll-area lime-hide-scrollbars"},n("div",{class:"mdc-tab-scroller__scroll-content"},this.tabs.map(this.renderTab))),n("div",{class:"scroll-fade left"}),n("div",{class:"scroll-button left"},n("limel-icon-button",{icon:"angle_left",elevated:true,tabindex:"-1","aria-hidden":"true",disabled:!this.canScrollLeft,onClick:this.handleLeftScrollClick})),n("div",{class:"scroll-fade right"}),n("div",{class:"scroll-button right"},n("limel-icon-button",{icon:"angle_right",elevated:true,tabindex:"-1","aria-hidden":"true",disabled:!this.canScrollRight,onClick:this.handleRightScrollClick}))))}tabsChanged(t=[],r=[]){const n=t.map((t=>t.id));const e=r.map((t=>t.id));if(o(n,e)){return}this.setupMdc=true;this.tearDown()}handleWindowResize(){if(!this.scrollArea){return}this.handleScroll()}setup(){const t=this.host.shadowRoot.querySelector(".mdc-tab-bar");if(!t){return}this.mdcTabBar=new nt(t);this.mdcTabBar.focusOnActivate=true;this.mdcTabBar.useAutomaticActivation=true;this.scrollArea=t.querySelector(".mdc-tab-scroller__scroll-area");this.scrollContent=t.querySelector(".mdc-tab-scroller__scroll-content");this.setupListeners();setTimeout(this.handleScroll,0)}tearDown(){if(this.scrollArea){this.scrollArea.removeEventListener("scroll",this.handleScroll)}if(this.mdcTabBar){this.mdcTabBar.unlisten(at,this.handleTabActivated);this.mdcTabBar.destroy()}}setupListeners(){this.mdcTabBar.listen(at,this.handleTabActivated);this.scrollArea.addEventListener("scroll",this.handleScroll,{passive:true})}handleTabActivated(t){const r=t.detail.index;const n=et(this.tabs,r);k(n,this.tabs).sort(this.sortByInactive).forEach((t=>{this.changeTab.emit(t)}));this.tabs=n}sortByInactive(t,r){return Number(t.active)-Number(r.active)}handleScroll(){const t=this.scrollArea.scrollLeft;const r=Math.floor(this.scrollContent.getBoundingClientRect().width-this.scrollArea.getBoundingClientRect().width-t);if(t>ct){this.canScrollLeft=true}else{this.canScrollLeft=false}if(r>ct){this.canScrollRight=true}else{this.canScrollRight=false}}handleLeftScrollClick(){this.scrollArea.scroll({left:this.scrollArea.scrollLeft-ot,behavior:"smooth"})}handleRightScrollClick(){this.scrollArea.scroll({left:this.scrollArea.scrollLeft+ot,behavior:"smooth"})}renderIcon(t){if(!t.icon){return}const r=i(t.icon);const e=a(t.icon,t.iconColor);const o={color:""};if(e){o.color=e}return n("limel-icon",{class:"mdc-tab__icon",name:r,style:o,size:"small","aria-hidden":"true"})}renderTab(t){return n("button",{class:{"mdc-tab":true,"mdc-tab--active":!!t.active},role:"tab","aria-selected":t.active?"true":"false",tabindex:t.active?0:-1},n("span",{class:"mdc-tab__content"},this.renderIcon(t),n("span",{class:"mdc-tab__text-label"},t.text),t.badge?n("limel-badge",{label:t.badge}):""),n("span",{class:{"mdc-tab-indicator":true,"mdc-tab-indicator--active":!!t.active}},n("span",{class:"mdc-tab-indicator__content mdc-tab-indicator__content--underline"})),n("span",{class:"mdc-tab__ripple"}))}triggerIconColorWarning(){if(this.tabs.some((t=>t.iconColor))){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return e(this)}static get watchers(){return{tabs:["tabsChanged"]}}};st.style=it;export{st as limel_tab_bar};
-//# sourceMappingURL=p-e6ccf353.entry.js.map
+//# sourceMappingURL=p-f95a5cb5.entry.js.map

package/dist/lime-elements/p-ffe954d4.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["actionBarCss","ActionBar","this","hasRendered","isFirstIntersectionCheck","actionBarItems","renderActionBarItem","item","index","h","onSelect","handleSelect","isVisible","role","renderOverflowMenu","items","actions","length","overflowCutoff","openDirection","event","stopPropagation","isItem","detail","itemSelected","emit","handleIntersection","entries","intersectingItems","filter","entry","isIntersecting","notIntersectingItems","connectedCallback","createIntersectionObserver","componentDidRender","haveItemsChanged","_a","intersectionObserver","disconnect","disconnectedCallback","undefined","render","overflowActions","slice","Host","accessibleLabel","class","layout","map","options","root","host","shadowRoot","querySelector","rootMargin","threshold","IntersectionObserver","querySelectorAll","forEach","actionBarItem","observe","push","someItemRemoved","some","contains","someItemAdded","Array","from","includes","editorLinkMenuCss","TextEditorLinkMenu","getTranslation","key","translate","get","language","isValid","href","URL","handleKeyDown","ENTER","saveButton","focus","preventDefault","link","handleSave","handleCancel","KeyboardEvent","ESCAPE","cancel","save","handleLinkInputAction","window","open","handleLinkTitleChange","emitLinkChange","handleLinkValueChange","text","newLink","linkChange","setupGlobalHandlers","teardownGlobalHandlers","isOpen","document","addEventListener","removeEventListener","componentDidLoad","focusOnTextInput","textInput","inputField","requestAnimationFrame","label","value","leadingIcon","onChange","onKeyDown","ref","el","_b","type","trailingIcon","invalid","onAction","onClick","primary","disabled","slot"],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/**\n* @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n*/\n\n:host(limel-action-bar) {\n    --action-bar-item-height: 2rem;\n\n    --limel-action-bar-item-text-color: var(\n        --action-bar-item-text-color,\n        rgb(var(--contrast-1100))\n    );\n\n    box-sizing: border-box;\n\n    display: inline-flex;\n    align-items: center;\n    padding: 0.125rem 0.25rem;\n    max-width: 100%;\n    border-radius: var(--action-bar-border-radius);\n\n    background-color: var(\n        --action-bar-background-color,\n        rgb(var(--contrast-100))\n    );\n}\n\n:host(limel-action-bar),\n.items {\n    gap: 0.25rem;\n    @media (pointer: coarse) {\n        gap: 0.5rem;\n    }\n}\n\n.items {\n    display: inline-flex;\n    max-width: 100%;\n    min-width: 0;\n}\n\n:host(limel-action-bar.is-full-width) {\n    width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n    --action-bar-border-radius: 100vw;\n    border: 1px solid rgb(var(--contrast-400));\n\n    padding-right: 0.125rem;\n    padding-left: 0.125rem;\n\n    max-width: calc(100% - 2rem);\n    box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n */\n@Component({\n    tag: 'limel-action-bar',\n    shadow: true,\n    styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n    /**\n     * Items that are placed in the action bar.\n     * These represent primary actions.\n     */\n    @Prop()\n    public actions: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * A label used to describe the purpose of the element to users\n     * of assistive technologies, like screen readers.\n     * Example value: \"toolbar\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * - When set to `fullWidth`, the component will take the\n     * entire width of its container.\n     * - When set to `floating`, the component will get basic stylings\n     * to visualize the floating state.\n     * :::note\n     * You should still properly position the component\n     * according to the structure of your user interface.\n     * For example, use an `absolute` or `fixed` position.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public layout?: 'fullWidth' | 'floating';\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public itemSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private readonly host: HTMLElement;\n\n    @State()\n    private overflowCutoff: number = this.actions.length;\n\n    private hasRendered = false;\n    private intersectionObserver: IntersectionObserver;\n    private isFirstIntersectionCheck = true;\n    private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n    public connectedCallback() {\n        if (this.hasRendered) {\n            this.createIntersectionObserver();\n        }\n    }\n\n    public componentDidRender() {\n        if (this.haveItemsChanged()) {\n            this.intersectionObserver?.disconnect();\n            this.createIntersectionObserver();\n        }\n    }\n\n    public disconnectedCallback() {\n        this.intersectionObserver?.disconnect();\n        this.intersectionObserver = undefined;\n        this.actionBarItems = [];\n    }\n\n    public render() {\n        this.hasRendered = true;\n        let overflowActions: Array<MenuItem | ListSeparator> = [];\n        if (this.actions.length) {\n            overflowActions = this.actions.slice(this.overflowCutoff);\n        }\n\n        return (\n            <Host\n                aria-label={this.accessibleLabel}\n                class={{\n                    'is-full-width': this.layout === 'fullWidth',\n                    'is-floating': this.layout === 'floating',\n                }}\n                role=\"grid\"\n            >\n                <div class=\"items\" role=\"rowgroup\">\n                    {this.actions.map(this.renderActionBarItem)}\n                </div>\n                {this.renderOverflowMenu(overflowActions)}\n            </Host>\n        );\n    }\n\n    private readonly renderActionBarItem = (\n        item: ActionBarItem,\n        index: number,\n    ) => {\n        return (\n            <limel-action-bar-item\n                item={item}\n                onSelect={this.handleSelect}\n                isVisible={this.isVisible(index)}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private readonly renderOverflowMenu = (\n        items: Array<MenuItem | ListSeparator>,\n    ) => {\n        if (!(this.actions.length - this.overflowCutoff)) {\n            return;\n        }\n\n        return (\n            <limel-action-bar-overflow-menu\n                openDirection={this.openDirection}\n                items={items}\n                onSelect={this.handleSelect}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private isVisible(index: number) {\n        return index < this.overflowCutoff;\n    }\n\n    private readonly handleSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.itemSelected.emit(event.detail);\n        }\n    };\n\n    private readonly handleIntersection = (\n        entries: IntersectionObserverEntry[],\n    ) => {\n        const intersectingItems = entries.filter(\n            (entry) => entry.isIntersecting,\n        );\n\n        const notIntersectingItems = entries.filter(\n            (entry) => !entry.isIntersecting,\n        );\n\n        if (this.isFirstIntersectionCheck) {\n            this.overflowCutoff = intersectingItems.length;\n        } else {\n            this.overflowCutoff =\n                this.overflowCutoff +\n                intersectingItems.length -\n                notIntersectingItems.length;\n        }\n\n        this.isFirstIntersectionCheck = false;\n    };\n\n    private createIntersectionObserver() {\n        const options = {\n            root: this.host.shadowRoot.querySelector('.items'),\n            rootMargin: '0px',\n            threshold: 1.0,\n        };\n\n        this.overflowCutoff = this.actions.length;\n        this.isFirstIntersectionCheck = true;\n\n        this.actionBarItems = [];\n\n        this.intersectionObserver = new IntersectionObserver(\n            this.handleIntersection,\n            options,\n        );\n\n        this.host.shadowRoot\n            .querySelectorAll('limel-action-bar-item')\n            .forEach((actionBarItem) => {\n                this.observe(actionBarItem);\n            });\n    }\n\n    private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n        this.intersectionObserver.observe(actionBarItem);\n        this.actionBarItems.push(actionBarItem);\n    }\n\n    private haveItemsChanged() {\n        const someItemRemoved = this.actionBarItems.some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.host.shadowRoot.contains(actionBarItem),\n        );\n\n        const someItemAdded = Array.from(\n            this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n        ).some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.actionBarItems.includes(actionBarItem),\n        );\n\n        return someItemRemoved || someItemAdded;\n    }\n}\n",":host(limel-text-editor-link-menu) {\n    animation: fade 0.2s ease forwards;\n    animation-delay: 0.1s; // prevents the visual glitch when the link opens\n    opacity: 0;\n\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 0.5rem;\n    max-width: calc(100vw - 2rem);\n    border-radius: 0.5rem;\n    background-color: var(--lime-elevated-surface-background-color);\n    box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n    display: flex;\n    justify-content: end;\n    gap: 0.5rem;\n}\n\n@keyframes fade {\n    0% {\n        scale: 0.86;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/**\n * This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-text-editor-link-menu',\n    shadow: true,\n    styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n    /**\n     * The link\n     */\n    @Prop({ reflect: true })\n    public link: EditorTextLink;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Open state of the link-menu dialog\n     */\n    @Prop({ reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Emitted when the menu is closed from inside the component.\n     * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n     */\n    @Event()\n    private cancel: EventEmitter<void>;\n\n    /**\n     * Emitted when the menu is saved from inside the component.\n     */\n    @Event()\n    private save: EventEmitter<void>;\n\n    /**\n     * Emitted when the user inputs new values for the link\n     */\n    @Event()\n    private linkChange: EventEmitter<EditorTextLink>;\n\n    private textInput: HTMLLimelInputFieldElement;\n    private saveButton: HTMLLimelButtonElement;\n\n    public connectedCallback() {\n        this.setupGlobalHandlers();\n    }\n\n    public disconnectedCallback() {\n        this.teardownGlobalHandlers();\n    }\n\n    private setupGlobalHandlers() {\n        if (this.isOpen) {\n            document.addEventListener('keyup', this.handleCancel);\n        }\n    }\n\n    private teardownGlobalHandlers() {\n        document.removeEventListener('keyup', this.handleCancel);\n    }\n\n    public componentDidLoad() {\n        this.focusOnTextInput();\n    }\n\n    private focusOnTextInput() {\n        if (this.textInput) {\n            const inputField = this.textInput.shadowRoot.querySelector('input');\n            if (inputField) {\n                requestAnimationFrame(() => {\n                    inputField.focus();\n                });\n            }\n        }\n    }\n\n    public render() {\n        const isValid = this.isValid(this.link.href);\n\n        return [\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.text')}\n                value={this.link?.text || ''}\n                leadingIcon=\"text_cursor\"\n                onChange={this.handleLinkTitleChange}\n                onKeyDown={this.handleKeyDown}\n                ref={(el) =>\n                    (this.textInput = el as HTMLLimelInputFieldElement)\n                }\n            />,\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.link')}\n                value={this.link?.href || ''}\n                type=\"text\"\n                leadingIcon=\"-lime-text-link\"\n                trailingIcon=\"external_link\"\n                invalid={!isValid}\n                onChange={this.handleLinkValueChange}\n                onAction={this.handleLinkInputAction}\n                onKeyDown={this.handleKeyDown}\n            />,\n            <div class=\"actions\">\n                <limel-button\n                    label={this.getTranslation('cancel')}\n                    onClick={this.handleCancel}\n                />\n                <limel-button\n                    primary={true}\n                    label={this.getTranslation('save')}\n                    disabled={!isValid}\n                    onClick={this.handleSave}\n                    ref={(el) =>\n                        (this.saveButton = el as HTMLLimelButtonElement)\n                    }\n                    slot=\"button\"\n                />\n            </div>,\n        ];\n    }\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n\n    private isValid = (href: string): boolean => {\n        try {\n            new URL(href);\n        } catch {\n            return false;\n        }\n\n        return true;\n    };\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== ENTER) {\n            return;\n        }\n\n        if (this.saveButton) {\n            this.saveButton.focus();\n        }\n\n        event.preventDefault();\n        if (this.isValid(this.link?.href)) {\n            this.handleSave(event);\n        }\n    };\n\n    private handleCancel = (event: MouseEvent | KeyboardEvent) => {\n        if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.cancel.emit();\n    };\n\n    private handleSave = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n\n        this.save.emit();\n    };\n\n    private handleLinkInputAction = (\n        event: LimelInputFieldCustomEvent<void>,\n    ) => {\n        window.open(this.link.href, '_blank');\n        event.stopPropagation();\n    };\n\n    private handleLinkTitleChange = (event: CustomEvent<string>) => {\n        this.emitLinkChange(event.detail, this.link?.href);\n    };\n\n    private handleLinkValueChange = (event: CustomEvent<string>) => {\n        const href = event.detail;\n\n        this.emitLinkChange(this.link?.text, href);\n    };\n\n    private emitLinkChange = (text: string, href: string) => {\n        const newLink: EditorTextLink = {\n            text: text,\n            href: href,\n        };\n\n        this.linkChange.emit(newLink);\n    };\n}\n"],"mappings":"mLAAA,MAAMA,EAAe,o1B,MC8CRC,EAAS,M,oEAkDVC,KAAAC,YAAc,MAEdD,KAAAE,yBAA2B,KAC3BF,KAAAG,eAAkD,GA6CzCH,KAAAI,oBAAsB,CACnCC,EACAC,IAGIC,EAAA,yBACIF,KAAMA,EACNG,SAAUR,KAAKS,aACfC,UAAWV,KAAKU,UAAUJ,GAC1BK,KAAK,aAKAX,KAAAY,mBACbC,IAEA,KAAMb,KAAKc,QAAQC,OAASf,KAAKgB,gBAAiB,CAC9C,M,CAGJ,OACIT,EAAA,kCACIU,cAAejB,KAAKiB,cACpBJ,MAAOA,EACPL,SAAUR,KAAKS,aACfE,KAAK,YACP,EAQOX,KAAAS,aACbS,IAEAA,EAAMC,kBACN,GAAIC,EAAOF,EAAMG,QAAS,CACtBrB,KAAKsB,aAAaC,KAAKL,EAAMG,O,GAIpBrB,KAAAwB,mBACbC,IAEA,MAAMC,EAAoBD,EAAQE,QAC7BC,GAAUA,EAAMC,iBAGrB,MAAMC,EAAuBL,EAAQE,QAChCC,IAAWA,EAAMC,iBAGtB,GAAI7B,KAAKE,yBAA0B,CAC/BF,KAAKgB,eAAiBU,EAAkBX,M,KACrC,CACHf,KAAKgB,eACDhB,KAAKgB,eACLU,EAAkBX,OAClBe,EAAqBf,M,CAG7Bf,KAAKE,yBAA2B,KAAK,E,aA5Jc,G,sGA0CtBF,KAAKc,QAAQC,M,CAOvCgB,oBACH,GAAI/B,KAAKC,YAAa,CAClBD,KAAKgC,4B,EAINC,qB,MACH,GAAIjC,KAAKkC,mBAAoB,EACzBC,EAAAnC,KAAKoC,wBAAoB,MAAAD,SAAA,SAAAA,EAAEE,aAC3BrC,KAAKgC,4B,EAINM,uB,OACHH,EAAAnC,KAAKoC,wBAAoB,MAAAD,SAAA,SAAAA,EAAEE,aAC3BrC,KAAKoC,qBAAuBG,UAC5BvC,KAAKG,eAAiB,E,CAGnBqC,SACHxC,KAAKC,YAAc,KACnB,IAAIwC,EAAmD,GACvD,GAAIzC,KAAKc,QAAQC,OAAQ,CACrB0B,EAAkBzC,KAAKc,QAAQ4B,MAAM1C,KAAKgB,e,CAG9C,OACIT,EAACoC,EAAI,cACW3C,KAAK4C,gBACjBC,MAAO,CACH,gBAAiB7C,KAAK8C,SAAW,YACjC,cAAe9C,KAAK8C,SAAW,YAEnCnC,KAAK,QAELJ,EAAA,OAAKsC,MAAM,QAAQlC,KAAK,YACnBX,KAAKc,QAAQiC,IAAI/C,KAAKI,sBAE1BJ,KAAKY,mBAAmB6B,G,CAoC7B/B,UAAUJ,GACd,OAAOA,EAAQN,KAAKgB,c,CAmChBgB,6BACJ,MAAMgB,EAAU,CACZC,KAAMjD,KAAKkD,KAAKC,WAAWC,cAAc,UACzCC,WAAY,MACZC,UAAW,GAGftD,KAAKgB,eAAiBhB,KAAKc,QAAQC,OACnCf,KAAKE,yBAA2B,KAEhCF,KAAKG,eAAiB,GAEtBH,KAAKoC,qBAAuB,IAAImB,qBAC5BvD,KAAKwB,mBACLwB,GAGJhD,KAAKkD,KAAKC,WACLK,iBAAiB,yBACjBC,SAASC,IACN1D,KAAK2D,QAAQD,EAAc,G,CAI/BC,QAAQD,GACZ1D,KAAKoC,qBAAqBuB,QAAQD,GAClC1D,KAAKG,eAAeyD,KAAKF,E,CAGrBxB,mBACJ,MAAM2B,EAAkB7D,KAAKG,eAAe2D,MACvCJ,IACI1D,KAAKkD,KAAKC,WAAWY,SAASL,KAGvC,MAAMM,EAAgBC,MAAMC,KACxBlE,KAAKkD,KAAKC,WAAWK,iBAAiB,0BACxCM,MACGJ,IACI1D,KAAKG,eAAegE,SAAST,KAGtC,OAAOG,GAAmBG,C,uCC7PlC,MAAMI,EAAoB,4a,MCkBbC,EAAkB,M,0HAsHnBrE,KAAAsE,eAAkBC,GACfC,EAAUC,IAAIF,EAAKvE,KAAK0E,UAG3B1E,KAAA2E,QAAWC,IACf,IACI,IAAIC,IAAID,E,CACV,MAAAzC,GACE,OAAO,K,CAGX,OAAO,IAAI,EAGPnC,KAAA8E,cAAiB5D,I,MACrB,GAAIA,EAAMqD,MAAQQ,EAAO,CACrB,M,CAGJ,GAAI/E,KAAKgF,WAAY,CACjBhF,KAAKgF,WAAWC,O,CAGpB/D,EAAMgE,iBACN,GAAIlF,KAAK2E,SAAQxC,EAAAnC,KAAKmF,QAAI,MAAAhD,SAAA,SAAAA,EAAEyC,MAAO,CAC/B5E,KAAKoF,WAAWlE,E,GAIhBlB,KAAAqF,aAAgBnE,IACpB,GAAIA,aAAiBoE,eAAiBpE,EAAMqD,MAAQgB,EAAQ,CACxD,M,CAGJrE,EAAMC,kBACND,EAAMgE,iBACNlF,KAAKwF,OAAOjE,MAAM,EAGdvB,KAAAoF,WAAclE,IAClBA,EAAMC,kBAENnB,KAAKyF,KAAKlE,MAAM,EAGZvB,KAAA0F,sBACJxE,IAEAyE,OAAOC,KAAK5F,KAAKmF,KAAKP,KAAM,UAC5B1D,EAAMC,iBAAiB,EAGnBnB,KAAA6F,sBAAyB3E,I,MAC7BlB,KAAK8F,eAAe5E,EAAMG,QAAQc,EAAAnC,KAAKmF,QAAI,MAAAhD,SAAA,SAAAA,EAAEyC,KAAK,EAG9C5E,KAAA+F,sBAAyB7E,I,MAC7B,MAAM0D,EAAO1D,EAAMG,OAEnBrB,KAAK8F,gBAAe3D,EAAAnC,KAAKmF,QAAI,MAAAhD,SAAA,SAAAA,EAAE6D,KAAMpB,EAAK,EAGtC5E,KAAA8F,eAAiB,CAACE,EAAcpB,KACpC,MAAMqB,EAA0B,CAC5BD,KAAMA,EACNpB,KAAMA,GAGV5E,KAAKkG,WAAW3E,KAAK0E,EAAQ,E,kCA/KJ,K,YAMJ,K,CAwBlBlE,oBACH/B,KAAKmG,qB,CAGF7D,uBACHtC,KAAKoG,wB,CAGDD,sBACJ,GAAInG,KAAKqG,OAAQ,CACbC,SAASC,iBAAiB,QAASvG,KAAKqF,a,EAIxCe,yBACJE,SAASE,oBAAoB,QAASxG,KAAKqF,a,CAGxCoB,mBACHzG,KAAK0G,kB,CAGDA,mBACJ,GAAI1G,KAAK2G,UAAW,CAChB,MAAMC,EAAa5G,KAAK2G,UAAUxD,WAAWC,cAAc,SAC3D,GAAIwD,EAAY,CACZC,uBAAsB,KAClBD,EAAW3B,OAAO,G,GAM3BzC,S,QACH,MAAMmC,EAAU3E,KAAK2E,QAAQ3E,KAAKmF,KAAKP,MAEvC,MAAO,CACHrE,EAAA,qBACIuG,MAAO9G,KAAKsE,eAAe,yBAC3ByC,QAAO5E,EAAAnC,KAAKmF,QAAI,MAAAhD,SAAA,SAAAA,EAAE6D,OAAQ,GAC1BgB,YAAY,cACZC,SAAUjH,KAAK6F,sBACfqB,UAAWlH,KAAK8E,cAChBqC,IAAMC,GACDpH,KAAK2G,UAAYS,IAG1B7G,EAAA,qBACIuG,MAAO9G,KAAKsE,eAAe,yBAC3ByC,QAAOM,EAAArH,KAAKmF,QAAI,MAAAkC,SAAA,SAAAA,EAAEzC,OAAQ,GAC1B0C,KAAK,OACLN,YAAY,kBACZO,aAAa,gBACbC,SAAU7C,EACVsC,SAAUjH,KAAK+F,sBACf0B,SAAUzH,KAAK0F,sBACfwB,UAAWlH,KAAK8E,gBAEpBvE,EAAA,OAAKsC,MAAM,WACPtC,EAAA,gBACIuG,MAAO9G,KAAKsE,eAAe,UAC3BoD,QAAS1H,KAAKqF,eAElB9E,EAAA,gBACIoH,QAAS,KACTb,MAAO9G,KAAKsE,eAAe,QAC3BsD,UAAWjD,EACX+C,QAAS1H,KAAKoF,WACd+B,IAAMC,GACDpH,KAAKgF,WAAaoC,EAEvBS,KAAK,Y"}
+{"version":3,"names":["actionBarCss","ActionBar","this","hasRendered","isFirstIntersectionCheck","actionBarItems","renderActionBarItem","item","index","h","onSelect","handleSelect","isVisible","role","renderOverflowMenu","items","actions","length","overflowCutoff","openDirection","event","stopPropagation","isItem","detail","itemSelected","emit","handleIntersection","entries","intersectingItems","filter","entry","isIntersecting","notIntersectingItems","connectedCallback","createIntersectionObserver","componentDidRender","haveItemsChanged","_a","intersectionObserver","disconnect","disconnectedCallback","undefined","render","overflowActions","slice","Host","accessibleLabel","class","layout","map","options","root","host","shadowRoot","querySelector","rootMargin","threshold","IntersectionObserver","querySelectorAll","forEach","actionBarItem","observe","push","someItemRemoved","some","contains","someItemAdded","Array","from","includes","editorLinkMenuCss","TextEditorLinkMenu","getTranslation","key","translate","get","language","isValid","href","URL","handleKeyDown","ENTER","saveButton","focus","preventDefault","link","handleSave","handleCancel","KeyboardEvent","ESCAPE","cancel","save","handleLinkInputAction","window","open","handleLinkTitleChange","emitLinkChange","handleLinkValueChange","text","newLink","linkChange","setupGlobalHandlers","teardownGlobalHandlers","isOpen","document","addEventListener","removeEventListener","componentDidLoad","focusOnTextInput","textInput","inputField","requestAnimationFrame","label","value","leadingIcon","onChange","onKeyDown","ref","el","_b","type","trailingIcon","invalid","onAction","onClick","primary","disabled","slot"],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/**\n* @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n*/\n\n:host(limel-action-bar) {\n    --action-bar-item-height: 2rem;\n\n    --limel-action-bar-item-text-color: var(\n        --action-bar-item-text-color,\n        rgb(var(--contrast-1100))\n    );\n\n    box-sizing: border-box;\n\n    display: inline-flex;\n    align-items: center;\n    padding: 0.125rem 0.25rem;\n    max-width: 100%;\n    border-radius: var(--action-bar-border-radius);\n\n    background-color: var(\n        --action-bar-background-color,\n        rgb(var(--contrast-100))\n    );\n}\n\n:host(limel-action-bar),\n.items {\n    gap: 0.25rem;\n    @media (pointer: coarse) {\n        gap: 0.5rem;\n    }\n}\n\n.items {\n    display: inline-flex;\n    max-width: 100%;\n    min-width: 0;\n}\n\n:host(limel-action-bar.is-full-width) {\n    width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n    --action-bar-border-radius: 100vw;\n    border: 1px solid rgb(var(--contrast-400));\n\n    padding-right: 0.125rem;\n    padding-left: 0.125rem;\n\n    max-width: calc(100% - 2rem);\n    box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n * @exampleComponent limel-example-action-bar-icon-title\n */\n@Component({\n    tag: 'limel-action-bar',\n    shadow: true,\n    styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n    /**\n     * Items that are placed in the action bar.\n     * These represent primary actions.\n     */\n    @Prop()\n    public actions: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * A label used to describe the purpose of the element to users\n     * of assistive technologies, like screen readers.\n     * Example value: \"toolbar\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * - When set to `fullWidth`, the component will take the\n     * entire width of its container.\n     * - When set to `floating`, the component will get basic stylings\n     * to visualize the floating state.\n     * :::note\n     * You should still properly position the component\n     * according to the structure of your user interface.\n     * For example, use an `absolute` or `fixed` position.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public layout?: 'fullWidth' | 'floating';\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public itemSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private readonly host: HTMLElement;\n\n    @State()\n    private overflowCutoff: number = this.actions.length;\n\n    private hasRendered = false;\n    private intersectionObserver: IntersectionObserver;\n    private isFirstIntersectionCheck = true;\n    private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n    public connectedCallback() {\n        if (this.hasRendered) {\n            this.createIntersectionObserver();\n        }\n    }\n\n    public componentDidRender() {\n        if (this.haveItemsChanged()) {\n            this.intersectionObserver?.disconnect();\n            this.createIntersectionObserver();\n        }\n    }\n\n    public disconnectedCallback() {\n        this.intersectionObserver?.disconnect();\n        this.intersectionObserver = undefined;\n        this.actionBarItems = [];\n    }\n\n    public render() {\n        this.hasRendered = true;\n        let overflowActions: Array<MenuItem | ListSeparator> = [];\n        if (this.actions.length) {\n            overflowActions = this.actions.slice(this.overflowCutoff);\n        }\n\n        return (\n            <Host\n                aria-label={this.accessibleLabel}\n                class={{\n                    'is-full-width': this.layout === 'fullWidth',\n                    'is-floating': this.layout === 'floating',\n                }}\n                role=\"grid\"\n            >\n                <div class=\"items\" role=\"rowgroup\">\n                    {this.actions.map(this.renderActionBarItem)}\n                </div>\n                {this.renderOverflowMenu(overflowActions)}\n            </Host>\n        );\n    }\n\n    private readonly renderActionBarItem = (\n        item: ActionBarItem,\n        index: number,\n    ) => {\n        return (\n            <limel-action-bar-item\n                item={item}\n                onSelect={this.handleSelect}\n                isVisible={this.isVisible(index)}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private readonly renderOverflowMenu = (\n        items: Array<MenuItem | ListSeparator>,\n    ) => {\n        if (!(this.actions.length - this.overflowCutoff)) {\n            return;\n        }\n\n        return (\n            <limel-action-bar-overflow-menu\n                openDirection={this.openDirection}\n                items={items}\n                onSelect={this.handleSelect}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private isVisible(index: number) {\n        return index < this.overflowCutoff;\n    }\n\n    private readonly handleSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.itemSelected.emit(event.detail);\n        }\n    };\n\n    private readonly handleIntersection = (\n        entries: IntersectionObserverEntry[],\n    ) => {\n        const intersectingItems = entries.filter(\n            (entry) => entry.isIntersecting,\n        );\n\n        const notIntersectingItems = entries.filter(\n            (entry) => !entry.isIntersecting,\n        );\n\n        if (this.isFirstIntersectionCheck) {\n            this.overflowCutoff = intersectingItems.length;\n        } else {\n            this.overflowCutoff =\n                this.overflowCutoff +\n                intersectingItems.length -\n                notIntersectingItems.length;\n        }\n\n        this.isFirstIntersectionCheck = false;\n    };\n\n    private createIntersectionObserver() {\n        const options = {\n            root: this.host.shadowRoot.querySelector('.items'),\n            rootMargin: '0px',\n            threshold: 1.0,\n        };\n\n        this.overflowCutoff = this.actions.length;\n        this.isFirstIntersectionCheck = true;\n\n        this.actionBarItems = [];\n\n        this.intersectionObserver = new IntersectionObserver(\n            this.handleIntersection,\n            options,\n        );\n\n        this.host.shadowRoot\n            .querySelectorAll('limel-action-bar-item')\n            .forEach((actionBarItem) => {\n                this.observe(actionBarItem);\n            });\n    }\n\n    private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n        this.intersectionObserver.observe(actionBarItem);\n        this.actionBarItems.push(actionBarItem);\n    }\n\n    private haveItemsChanged() {\n        const someItemRemoved = this.actionBarItems.some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.host.shadowRoot.contains(actionBarItem),\n        );\n\n        const someItemAdded = Array.from(\n            this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n        ).some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.actionBarItems.includes(actionBarItem),\n        );\n\n        return someItemRemoved || someItemAdded;\n    }\n}\n",":host(limel-text-editor-link-menu) {\n    animation: fade 0.2s ease forwards;\n    animation-delay: 0.1s; // prevents the visual glitch when the link opens\n    opacity: 0;\n\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 0.5rem;\n    max-width: calc(100vw - 2rem);\n    border-radius: 0.5rem;\n    background-color: var(--lime-elevated-surface-background-color);\n    box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n    display: flex;\n    justify-content: end;\n    gap: 0.5rem;\n}\n\n@keyframes fade {\n    0% {\n        scale: 0.86;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/**\n * This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-text-editor-link-menu',\n    shadow: true,\n    styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n    /**\n     * The link\n     */\n    @Prop({ reflect: true })\n    public link: EditorTextLink;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Open state of the link-menu dialog\n     */\n    @Prop({ reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Emitted when the menu is closed from inside the component.\n     * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n     */\n    @Event()\n    private cancel: EventEmitter<void>;\n\n    /**\n     * Emitted when the menu is saved from inside the component.\n     */\n    @Event()\n    private save: EventEmitter<void>;\n\n    /**\n     * Emitted when the user inputs new values for the link\n     */\n    @Event()\n    private linkChange: EventEmitter<EditorTextLink>;\n\n    private textInput: HTMLLimelInputFieldElement;\n    private saveButton: HTMLLimelButtonElement;\n\n    public connectedCallback() {\n        this.setupGlobalHandlers();\n    }\n\n    public disconnectedCallback() {\n        this.teardownGlobalHandlers();\n    }\n\n    private setupGlobalHandlers() {\n        if (this.isOpen) {\n            document.addEventListener('keyup', this.handleCancel);\n        }\n    }\n\n    private teardownGlobalHandlers() {\n        document.removeEventListener('keyup', this.handleCancel);\n    }\n\n    public componentDidLoad() {\n        this.focusOnTextInput();\n    }\n\n    private focusOnTextInput() {\n        if (this.textInput) {\n            const inputField = this.textInput.shadowRoot.querySelector('input');\n            if (inputField) {\n                requestAnimationFrame(() => {\n                    inputField.focus();\n                });\n            }\n        }\n    }\n\n    public render() {\n        const isValid = this.isValid(this.link.href);\n\n        return [\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.text')}\n                value={this.link?.text || ''}\n                leadingIcon=\"text_cursor\"\n                onChange={this.handleLinkTitleChange}\n                onKeyDown={this.handleKeyDown}\n                ref={(el) =>\n                    (this.textInput = el as HTMLLimelInputFieldElement)\n                }\n            />,\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.link')}\n                value={this.link?.href || ''}\n                type=\"text\"\n                leadingIcon=\"-lime-text-link\"\n                trailingIcon=\"external_link\"\n                invalid={!isValid}\n                onChange={this.handleLinkValueChange}\n                onAction={this.handleLinkInputAction}\n                onKeyDown={this.handleKeyDown}\n            />,\n            <div class=\"actions\">\n                <limel-button\n                    label={this.getTranslation('cancel')}\n                    onClick={this.handleCancel}\n                />\n                <limel-button\n                    primary={true}\n                    label={this.getTranslation('save')}\n                    disabled={!isValid}\n                    onClick={this.handleSave}\n                    ref={(el) =>\n                        (this.saveButton = el as HTMLLimelButtonElement)\n                    }\n                    slot=\"button\"\n                />\n            </div>,\n        ];\n    }\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n\n    private isValid = (href: string): boolean => {\n        try {\n            new URL(href);\n        } catch {\n            return false;\n        }\n\n        return true;\n    };\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== ENTER) {\n            return;\n        }\n\n        if (this.saveButton) {\n            this.saveButton.focus();\n        }\n\n        event.preventDefault();\n        if (this.isValid(this.link?.href)) {\n            this.handleSave(event);\n        }\n    };\n\n    private handleCancel = (event: MouseEvent | KeyboardEvent) => {\n        if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.cancel.emit();\n    };\n\n    private handleSave = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n\n        this.save.emit();\n    };\n\n    private handleLinkInputAction = (\n        event: LimelInputFieldCustomEvent<void>,\n    ) => {\n        window.open(this.link.href, '_blank');\n        event.stopPropagation();\n    };\n\n    private handleLinkTitleChange = (event: CustomEvent<string>) => {\n        this.emitLinkChange(event.detail, this.link?.href);\n    };\n\n    private handleLinkValueChange = (event: CustomEvent<string>) => {\n        const href = event.detail;\n\n        this.emitLinkChange(this.link?.text, href);\n    };\n\n    private emitLinkChange = (text: string, href: string) => {\n        const newLink: EditorTextLink = {\n            text: text,\n            href: href,\n        };\n\n        this.linkChange.emit(newLink);\n    };\n}\n"],"mappings":"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"}

package/dist/types/components/action-bar/action-bar-item/action-bar-item.d.ts

@@ -39,6 +39,7 @@ export declare class ActionBarButton {
   private renderIcon;
   private renderLabel;
   private renderTooltip;
+  private getTooltipLabel;
   private triggerIconColorWarning;
 }
 //# sourceMappingURL=action-bar-item.d.ts.map

package/dist/types/components/action-bar/action-bar.d.ts

@@ -27,6 +27,7 @@ import { ActionBarItem } from './action-bar.types';
  * @exampleComponent limel-example-action-bar-floating
  * @exampleComponent limel-example-action-bar-styling
  * @exampleComponent limel-example-action-bar-as-primary-component
+ * @exampleComponent limel-example-action-bar-icon-title
  */
 export declare class ActionBar {
   /**

package/dist/types/components.d.ts

@@ -124,6 +124,7 @@ export namespace Components {
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
      * @exampleComponent limel-example-action-bar-as-primary-component
+     * @exampleComponent limel-example-action-bar-icon-title
      */
     interface LimelActionBar {
         /**
@@ -3101,6 +3102,7 @@ declare global {
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
      * @exampleComponent limel-example-action-bar-as-primary-component
+     * @exampleComponent limel-example-action-bar-icon-title
      */
     interface HTMLLimelActionBarElement extends Components.LimelActionBar, HTMLStencilElement {
     }
@@ -4610,6 +4612,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
      * @exampleComponent limel-example-action-bar-as-primary-component
+     * @exampleComponent limel-example-action-bar-icon-title
      */
     interface LimelActionBar {
         /**
@@ -7773,6 +7776,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-action-bar-floating
              * @exampleComponent limel-example-action-bar-styling
              * @exampleComponent limel-example-action-bar-as-primary-component
+             * @exampleComponent limel-example-action-bar-icon-title
              */
             "limel-action-bar": LocalJSX.LimelActionBar & JSXBase.HTMLAttributes<HTMLLimelActionBarElement>;
             /**

package/dist/types/global/shared-types/icon.types.d.ts

@@ -17,11 +17,17 @@ export interface Icon {
    */
   backgroundColor?: string;
   /**
-   * The `title` attribute of the icon.
    * Used primarily to improve accessibility for users who
    * take advantage of assistive technologies; but also
    * to clarify further what an icon tries to resemble
    * for sighted users.
+   *
+   * Depending on the component which is using the `Icon` interface,
+   * the `title` might be used as a `title` attribute on the
+   * rendered icon element, as an `aria-label` attribute, or as a
+   * `label` in a tooltip associated with the icon. Documentations
+   * about the accessibility of the component should provide more
+   * information about how the `title` is used.
    */
   title?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.2.0",
+  "version": "38.2.2",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -43,10 +43,10 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^19.7.1",
+    "@commitlint/config-conventional": "^19.8.0",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.21.0",
-    "@microsoft/api-extractor": "^7.51.0",
+    "@microsoft/api-extractor": "^7.51.1",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^2.4.2",
     "@rollup/plugin-node-resolve": "^13.3.0",

package/dist/cjs/get-icon-props-f9451df3.js.map

@@ -1 +0,0 @@
-{"file":"get-icon-props-f9451df3.js","mappings":";;AAEA;;;;;;;;SAQgB,WAAW;AACvB;AACA,IAA+B;EAE/B,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,MAAM,IAAI,IAAI,EAAE;IACtD,OAAO,IAAI,CAAC,IAAI,CAAC;GACpB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,IAAI,CAAC;GACf;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;SAWgB,YAAY,CACxB,IAA+B,EAC/B,SAA8B;EAE9B,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,SAAS,CAAC;GACpB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;SAWgB,gBAAgB,CAC5B,IAA+B,EAC/B,aAAkC;EAElC,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,aAAa,CAAC;GACxB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;SASgB,sBAAsB,CAClC,IAA+B,EAC/B,mBAAwC;EAExC,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,iBAAiB,IAAI,IAAI,EAAE;IACjE,OAAO,IAAI,CAAC,eAAe,CAAC;GAC/B;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,mBAAmB,CAAC;GAC9B;EAED,OAAO,SAAS,CAAC;AACrB;;;;;;;","names":[],"sources":["./src/components/icon/get-icon-props.ts"],"sourcesContent":["import { Icon } from '../../global/shared-types/icon.types';\n\n/**\n * Get the icon name.\n * This helps in setting the right icon, both if the consumer only types `icon: string`,\n * and if they use the `Icon` interface for writing the icon name.\n *\n * @param icon - The icon to retrieve the name from.\n * @returns - The icon name or the provided string, or `undefined` if `icon` is falsy.\n */\nexport function getIconName(\n    // eslint-disable-next-line sonarjs/use-type-alias\n    icon: string | Icon | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'name' in icon) {\n        return icon.name;\n    }\n\n    if (typeof icon === 'string') {\n        return icon;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconColor`\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconColor - The color to use when the deprecated `iconColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconColor(\n    icon: string | Icon | undefined,\n    iconColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconFillColor` is\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconFillColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconFillColor - The color to use when `iconFillColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconFillColor(\n    icon: string | Icon | undefined,\n    iconFillColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconFillColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon background color.\n * This function is used to retrieve the background color associated with an icon,\n * whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the background color from.\n * @param iconBackgroundColor - The background color to use when provided explicitly.\n * @returns - The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.\n */\nexport function getIconBackgroundColor(\n    icon: string | Icon | undefined,\n    iconBackgroundColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'backgroundColor' in icon) {\n        return icon.backgroundColor;\n    }\n\n    if (typeof icon === 'string') {\n        return iconBackgroundColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon title.\n * This function is used to retrieve the title associated with an icon, whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the title from.\n * @param iconTitle - The title to use when provided explicitly.\n * @returns - The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.\n */\nexport function getIconTitle(\n    icon: string | Icon | undefined,\n    iconTitle?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'title' in icon) {\n        return icon.title;\n    }\n\n    if (typeof icon === 'string') {\n        return iconTitle;\n    }\n\n    return undefined;\n}\n"],"version":3}

package/dist/esm/get-icon-props-18e2f79b.js.map

@@ -1 +0,0 @@
-{"file":"get-icon-props-18e2f79b.js","mappings":"AAEA;;;;;;;;SAQgB,WAAW;AACvB;AACA,IAA+B;EAE/B,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,MAAM,IAAI,IAAI,EAAE;IACtD,OAAO,IAAI,CAAC,IAAI,CAAC;GACpB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,IAAI,CAAC;GACf;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;SAWgB,YAAY,CACxB,IAA+B,EAC/B,SAA8B;EAE9B,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,SAAS,CAAC;GACpB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;SAWgB,gBAAgB,CAC5B,IAA+B,EAC/B,aAAkC;EAElC,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,aAAa,CAAC;GACxB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;SASgB,sBAAsB,CAClC,IAA+B,EAC/B,mBAAwC;EAExC,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,iBAAiB,IAAI,IAAI,EAAE;IACjE,OAAO,IAAI,CAAC,eAAe,CAAC;GAC/B;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,mBAAmB,CAAC;GAC9B;EAED,OAAO,SAAS,CAAC;AACrB;;;;","names":[],"sources":["./src/components/icon/get-icon-props.ts"],"sourcesContent":["import { Icon } from '../../global/shared-types/icon.types';\n\n/**\n * Get the icon name.\n * This helps in setting the right icon, both if the consumer only types `icon: string`,\n * and if they use the `Icon` interface for writing the icon name.\n *\n * @param icon - The icon to retrieve the name from.\n * @returns - The icon name or the provided string, or `undefined` if `icon` is falsy.\n */\nexport function getIconName(\n    // eslint-disable-next-line sonarjs/use-type-alias\n    icon: string | Icon | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'name' in icon) {\n        return icon.name;\n    }\n\n    if (typeof icon === 'string') {\n        return icon;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconColor`\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconColor - The color to use when the deprecated `iconColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconColor(\n    icon: string | Icon | undefined,\n    iconColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconFillColor` is\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconFillColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconFillColor - The color to use when `iconFillColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconFillColor(\n    icon: string | Icon | undefined,\n    iconFillColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconFillColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon background color.\n * This function is used to retrieve the background color associated with an icon,\n * whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the background color from.\n * @param iconBackgroundColor - The background color to use when provided explicitly.\n * @returns - The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.\n */\nexport function getIconBackgroundColor(\n    icon: string | Icon | undefined,\n    iconBackgroundColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'backgroundColor' in icon) {\n        return icon.backgroundColor;\n    }\n\n    if (typeof icon === 'string') {\n        return iconBackgroundColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon title.\n * This function is used to retrieve the title associated with an icon, whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the title from.\n * @param iconTitle - The title to use when provided explicitly.\n * @returns - The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.\n */\nexport function getIconTitle(\n    icon: string | Icon | undefined,\n    iconTitle?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'title' in icon) {\n        return icon.title;\n    }\n\n    if (typeof icon === 'string') {\n        return iconTitle;\n    }\n\n    return undefined;\n}\n"],"version":3}

package/dist/lime-elements/p-261cc6f1.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as r}from"./p-443111b3.js";import{m as o}from"./p-639f9320.js";import{g as t}from"./p-2c35fb9d.js";import"./p-eab67c09.js";const a='@charset "UTF-8";code{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:"";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:"“";left:0;top:-0.75rem}blockquote:after{content:"”";right:0;bottom:-2rem}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}img{max-width:100%;border-radius:0.25rem}kbd{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:0.875rem;margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:"H1"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:"H2"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:"H3"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:"H4"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:"H5"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:"H6"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}';const l=class{constructor(r){e(this,r);this.value=undefined;this.whitelist=t.markdownWhitelist}async textChanged(){var e;try{const r=await o(this.value,{forceHardLineBreaks:true,whitelist:(e=this.whitelist)!==null&&e!==void 0?e:[]});this.rootElement.innerHTML=r}catch(e){console.error(e)}}async componentDidLoad(){this.textChanged()}render(){return[r("div",{id:"markdown",ref:e=>this.rootElement=e})]}static get watchers(){return{value:["textChanged"]}}};l.style=a;export{l as limel_markdown};
-//# sourceMappingURL=p-261cc6f1.entry.js.map

package/dist/lime-elements/p-2fd454dd.js

@@ -1,2 +0,0 @@
-function n(n){if(!!n&&typeof n==="object"&&"name"in n){return n.name}if(typeof n==="string"){return n}return undefined}function e(n,e){if(!!n&&typeof n==="object"&&"color"in n){return n.color}if(typeof n==="string"){return e}return undefined}function r(n,e){if(!!n&&typeof n==="object"&&"color"in n){return n.color}if(typeof n==="string"){return e}return undefined}function t(n,e){if(!!n&&typeof n==="object"&&"backgroundColor"in n){return n.backgroundColor}if(typeof n==="string"){return e}return undefined}export{e as a,t as b,r as c,n as g};
-//# sourceMappingURL=p-2fd454dd.js.map

package/dist/lime-elements/p-2fd454dd.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getIconName","icon","name","undefined","getIconColor","iconColor","color","getIconFillColor","iconFillColor","getIconBackgroundColor","iconBackgroundColor","backgroundColor"],"sources":["./src/components/icon/get-icon-props.ts"],"sourcesContent":["import { Icon } from '../../global/shared-types/icon.types';\n\n/**\n * Get the icon name.\n * This helps in setting the right icon, both if the consumer only types `icon: string`,\n * and if they use the `Icon` interface for writing the icon name.\n *\n * @param icon - The icon to retrieve the name from.\n * @returns - The icon name or the provided string, or `undefined` if `icon` is falsy.\n */\nexport function getIconName(\n    // eslint-disable-next-line sonarjs/use-type-alias\n    icon: string | Icon | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'name' in icon) {\n        return icon.name;\n    }\n\n    if (typeof icon === 'string') {\n        return icon;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconColor`\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconColor - The color to use when the deprecated `iconColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconColor(\n    icon: string | Icon | undefined,\n    iconColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconFillColor` is\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconFillColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconFillColor - The color to use when `iconFillColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconFillColor(\n    icon: string | Icon | undefined,\n    iconFillColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconFillColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon background color.\n * This function is used to retrieve the background color associated with an icon,\n * whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the background color from.\n * @param iconBackgroundColor - The background color to use when provided explicitly.\n * @returns - The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.\n */\nexport function getIconBackgroundColor(\n    icon: string | Icon | undefined,\n    iconBackgroundColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'backgroundColor' in icon) {\n        return icon.backgroundColor;\n    }\n\n    if (typeof icon === 'string') {\n        return iconBackgroundColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon title.\n * This function is used to retrieve the title associated with an icon, whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the title from.\n * @param iconTitle - The title to use when provided explicitly.\n * @returns - The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.\n */\nexport function getIconTitle(\n    icon: string | Icon | undefined,\n    iconTitle?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'title' in icon) {\n        return icon.title;\n    }\n\n    if (typeof icon === 'string') {\n        return iconTitle;\n    }\n\n    return undefined;\n}\n"],"mappings":"SAUgBA,EAEZC,GAEA,KAAMA,UAAeA,IAAS,UAAY,SAAUA,EAAM,CACtD,OAAOA,EAAKC,I,CAGhB,UAAWD,IAAS,SAAU,CAC1B,OAAOA,C,CAGX,OAAOE,SACX,C,SAagBC,EACZH,EACAI,GAEA,KAAMJ,UAAeA,IAAS,UAAY,UAAWA,EAAM,CACvD,OAAOA,EAAKK,K,CAGhB,UAAWL,IAAS,SAAU,CAC1B,OAAOI,C,CAGX,OAAOF,SACX,C,SAagBI,EACZN,EACAO,GAEA,KAAMP,UAAeA,IAAS,UAAY,UAAWA,EAAM,CACvD,OAAOA,EAAKK,K,CAGhB,UAAWL,IAAS,SAAU,CAC1B,OAAOO,C,CAGX,OAAOL,SACX,C,SAWgBM,EACZR,EACAS,GAEA,KAAMT,UAAeA,IAAS,UAAY,oBAAqBA,EAAM,CACjE,OAAOA,EAAKU,e,CAGhB,UAAWV,IAAS,SAAU,CAC1B,OAAOS,C,CAGX,OAAOP,SACX,Q"}

package/dist/lime-elements/p-375eabba.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,g as o}from"./p-443111b3.js";import{c as r}from"./p-96460db3.js";import{m as n,r as a}from"./p-869d6d77.js";import{g as s,a as l}from"./p-2fd454dd.js";const c='@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--mdc-theme-primary) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}hr{all:unset;width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){hr{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}';const h=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.selected=false;this.tooltipId=r()}componentWillLoad(){n(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){a(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return e("hr",null)}return e("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled(),class:{"is-selected":this.isItem(this.item)&&this.item.selected}},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){const t=s(this.item.icon);const i=l(this.item.icon,this.item.iconColor);return e("limel-icon",{name:t,style:{"--action-bar-item-icon-color":`${i}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return e("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}if(this.item.text){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.text,helperLabel:this.item.commandText})}if(this.item.commandText){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.commandText})}}triggerIconColorWarning(){if(this.isItem(this.item)&&this.item.iconColor){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return o(this)}};h.style=c;const d=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.countOverflowedItems=()=>`+${this.numberOfMenuItems}`;this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end"}render(){return[e("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},e("button",{slot:"trigger"},this.countOverflowedItems()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{h as limel_action_bar_item,d as limel_action_bar_overflow_menu};
-//# sourceMappingURL=p-375eabba.entry.js.map

package/dist/lime-elements/p-375eabba.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["actionBarItemCss","ActionBarButton","constructor","hostRef","this","handleClick","event","stopPropagation","select","emit","item","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","host","componentDidLoad","triggerIconColorWarning","disconnectedCallback","removeEnterClickable","render","isItem","separator","h","id","type","onClick","disabled","isDisabled","class","selected","renderIcon","renderLabel","renderTooltip","isVisible","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","handleSelect","detail","openDirection","items","onSelect","slot","filter","isMenuItem","length"],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n    transition: opacity 0.2s ease-in-out;\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not([is-visible]) {\n        opacity: 0;\n        pointer-events: none;\n    }\n}\n\nbutton {\n    all: unset;\n\n    &:not([disabled]) {\n        @include mixins.is-flat-inset-clickable(\n            $color: var(--limel-action-bar-item-text-color),\n            $color--hovered: var(--limel-action-bar-item-text-color),\n            $background-color: var(--action-bar-background-color),\n            $background-color--hovered: var(--action-bar-background-color),\n            $background-color--inset: var(--action-bar-background-color)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    width: 100%;\n    min-width: var(--action-bar-item-height);\n    max-width: var(--action-bar-item-max-width, 10rem);\n    height: var(--action-bar-item-height);\n    color: var(--limel-action-bar-item-text-color);\n\n    border-radius: var(--action-bar-item-height);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.25rem;\n\n    &:has(.text) {\n        padding: 0 0.5rem;\n    }\n\n    &[disabled] {\n        opacity: 0.4;\n    }\n\n    &.is-selected {\n        &:not(:hover) {\n            box-shadow: var(--button-shadow-inset);\n        }\n        color: var(--mdc-theme-primary) !important;\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding: 0 0.25rem;\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--action-bar-item-height) - 0.75rem);\n    height: calc(var(--action-bar-item-height) - 0.75rem);\n    color: var(\n        --action-bar-item-icon-color,\n        var(--limel-action-bar-item-text-color)\n    );\n}\n\nhr {\n    all: unset;\n    width: 1px;\n    height: 1.5rem;\n    border-radius: var(--action-bar-item-height);\n    background-color: var(--limel-action-bar-item-text-color);\n    opacity: 0.2;\n\n    @media (pointer: fine) {\n        margin-right: 0.5rem;\n        margin-left: 0.5rem;\n    }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n    --notification-badge-background-color: rgb(var(--contrast-600));\n    --notification-badge-text-color: rgb(var(--contrast-1200));\n\n    &[open] {\n        button {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\nbutton[slot='trigger'] {\n    animation: fade-in ease-out 0.25s;\n    font-size: 0.75rem;\n    font-weight: bold;\n    transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n    0% {\n        scale: 0.8;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    /**\n     * When the item is selected, this will be `true`.\n     */\n    @Prop({ reflect: true })\n    public selected: boolean = false;\n\n    @Element()\n    private readonly host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private readonly tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning();\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <hr />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n                class={{\n                    'is-selected': this.isItem(this.item) && this.item.selected,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private readonly handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            const name = getIconName(this.item.icon);\n            // eslint-disable-next-line sonarjs/deprecation\n            const color = getIconColor(this.item.icon, this.item.iconColor);\n\n            return (\n                <limel-icon\n                    name={name}\n                    style={{\n                        '--action-bar-item-icon-color': `${color}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n\n    private triggerIconColorWarning() {\n        // eslint-disable-next-line sonarjs/deprecation\n        if (this.isItem(this.item) && this.item.iconColor) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-overflow-menu',\n    shadow: false,\n})\nexport class ActionBarOverflowMenu {\n    /**\n     * List of the items that should be rendered in the overflow menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     * It defaults to `bottom-end`, since in normal scenarios\n     * (for example when the action bar is not floating at the bottom of the screen)\n     * this menu is the right-most item in the user interface of the component.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-end';\n\n    /**\n     * Fired when an item in the action bar overflow menu has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return [\n            <limel-menu\n                openDirection={this.openDirection}\n                items={this.items}\n                onSelect={this.handleSelect}\n            >\n                <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n            </limel-menu>,\n        ];\n    }\n\n    private countOverflowedItems = () => {\n        return `+${this.numberOfMenuItems}`;\n    };\n\n    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.select.emit(event.detail);\n    };\n\n    private get numberOfMenuItems() {\n        return this.items.filter((item) => this.isMenuItem(item)).length;\n    }\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n}\n"],"mappings":"mLAAA,MAAMA,EAAmB,i8F,MCyBZC,EAAe,MAmCxBC,YAAAC,G,yCAsCiBC,KAAAC,YAAeC,IAC5BA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKL,KAAKM,KAAK,E,mCAxDH,K,cAMD,MAWvBN,KAAKO,UAAYC,G,CAGdC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,mBACHZ,KAAKa,yB,CAGFC,uBACHC,EAAqBf,KAAKW,K,CAGvBK,SACH,IAAKhB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKY,UAAW,CAChD,OAAOC,EAAA,U,CAGX,OACIA,EAAA,UACIC,GAAIpB,KAAKO,UACTc,KAAK,SACLC,QAAStB,KAAKC,YACdsB,SAAUvB,KAAKwB,aACfC,MAAO,CACH,cAAezB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKoB,WAGtD1B,KAAK2B,aACL3B,KAAK4B,cACL5B,KAAK6B,gB,CAUVZ,OAAOX,GACX,QAAS,cAAeA,E,CAGpBkB,aACJ,GAAIxB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKiB,SAAU,CAC9C,OAAO,I,CAGX,IAAKvB,KAAK8B,UAAW,CACjB,OAAO,I,EAIPH,aACJ,GAAI3B,KAAKiB,OAAOjB,KAAKM,QAAUN,KAAKM,KAAKyB,KAAM,CAC3C,M,CAGJ,GAAI,SAAU/B,KAAKM,KAAM,CACrB,MAAM0B,EAAOC,EAAYjC,KAAKM,KAAKyB,MAEnC,MAAMG,EAAQC,EAAanC,KAAKM,KAAKyB,KAAM/B,KAAKM,KAAK8B,WAErD,OACIjB,EAAA,cACIa,KAAMA,EACNK,MAAO,CACH,+BAAgC,GAAGH,M,EAO/CN,cACJ,IAAK5B,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKgC,SAAU,CAC/C,M,CAGJ,OAAOnB,EAAA,QAAMM,MAAM,QAAQzB,KAAKM,KAAKiC,K,CAGjCV,gBACJ,IAAK7B,KAAKiB,OAAOjB,KAAKM,MAAO,CACzB,M,CAGJ,GAAIN,KAAKM,KAAKiC,KAAM,CAChB,OACIpB,EAAA,iBACIqB,UAAWxC,KAAKO,UAChBkC,MAAOzC,KAAKM,KAAKiC,KACjBG,YAAa1C,KAAKM,KAAKqC,a,CAKnC,GAAI3C,KAAKM,KAAKqC,YAAa,CACvB,OACIxB,EAAA,iBACIqB,UAAWxC,KAAKO,UAChBkC,MAAOzC,KAAKM,KAAKqC,a,EAMzB9B,0BAEJ,GAAIb,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAK8B,UAAW,CAE/CQ,QAAQC,KACJ,uK,8CCnKHC,EAAqB,M,wDAoCtB9C,KAAA+C,qBAAuB,IACpB,IAAI/C,KAAKgD,oBAGZhD,KAAAiD,aAAgB/C,IACpBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMgD,OAAO,E,wCA3BI,Y,CAS/BlC,SACH,MAAO,CACHG,EAAA,cACIgC,cAAenD,KAAKmD,cACpBC,MAAOpD,KAAKoD,MACZC,SAAUrD,KAAKiD,cAEf9B,EAAA,UAAQmC,KAAK,WAAWtD,KAAK+C,yB,CAc7BC,wBACR,OAAOhD,KAAKoD,MAAMG,QAAQjD,GAASN,KAAKwD,WAAWlD,KAAOmD,M,CAGtDD,WAAWlD,GACf,QAAS,cAAeA,E"}